:root{color-scheme:light;--bg:#f7f5f0;--paper:#fffdf8;--text:#242622;--sub:#52564e;--line:#d7d5ca;--accent:#345046}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",sans-serif}
button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}
button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #3e6b5b;outline-offset:3px}
header{position:sticky;top:0;z-index:1;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{max-width:1520px;margin:auto;padding:12px clamp(16px,3vw,44px);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
h1{font:600 17px/1.25 "Segoe UI",sans-serif;margin:0}
.meta,.intro{color:var(--sub)}.meta{font-size:12px;margin:3px 0 0}
nav{display:flex;gap:8px;align-items:center;max-width:100%}
nav button,nav select,.close,.original{border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--text);padding:7px 10px;cursor:pointer}
nav select{min-width:0;max-width:280px}nav button:disabled{opacity:.4;cursor:default}
main{max-width:1520px;margin:auto;padding:clamp(16px,2.3vw,34px) clamp(16px,3vw,44px)}
.slide[hidden]{display:none}h2{font:500 clamp(27px,3vw,42px)/1.13 Georgia,serif;letter-spacing:-.025em;margin:0 0 5px}
.intro{font-size:14px;line-height:1.45;margin:0 0 16px}
.groups{display:flex;gap:16px;flex-wrap:wrap;align-items:start}
.group{border-top:1px solid var(--line);padding-top:7px;max-width:100%}
.shortlist .groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px;row-gap:12px}
h3{font-size:13px;font-weight:600;margin:0 0 6px;color:var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(var(--items),minmax(0,1fr));gap:7px}
.tile{width:clamp(98px,10.15vw,164px);max-width:100%;min-width:0;padding:0;border:0;background:none;text-align:left;color:inherit;cursor:pointer}
.shortlist .tile{width:100%}
.image-wrap{height:clamp(116px,21vh,218px);display:block;background:#e8e5da;border:1px solid var(--line);overflow:hidden;border-radius:4px}
.tile:hover .image-wrap{border-color:var(--accent)}
img{display:block;width:100%;height:100%;object-fit:contain}
.tile-id,.filename{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-id{font-weight:650;font-size:12px;line-height:1.45;margin-top:3px}
.tile-id span,.filename{color:var(--sub);font-size:11px;font-weight:400}
dialog{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px;width:min(780px,94vw);max-height:96vh;color:var(--text)}
dialog::backdrop{background:#121914b8}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}
.dialog-head h2{font:600 16px/1.3 "Segoe UI",sans-serif;overflow-wrap:anywhere}
#media{display:grid;place-items:center;background:#e8e5da;border-radius:5px;min-height:120px}
#media img,#media video{width:100%;height:auto;max-height:68vh;object-fit:contain}
#asset-description{font-size:14px;white-space:pre-line;line-height:1.45}
.original{display:inline-block;color:var(--accent)}
@media(max-width:780px){
  .shortlist .groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
  .group{width:100%}.tile{width:100%}.image-wrap{height:155px}
  nav select{max-width:52vw}
}
@media(max-width:420px){.shortlist .groups{grid-template-columns:1fr}.shortlist .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

.items-1{--items:1}
.items-2{--items:2}
.items-3{--items:3}
.items-4{--items:4}
.items-5{--items:5}
.items-6{--items:6}
.items-7{--items:7}
.items-8{--items:8}
.bar > div:first-child{flex:1 0 280px}
header form{margin:0}
.selection-bar{max-width:1520px;margin:auto;padding:0 clamp(16px,3vw,44px) 10px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.selection-tools,.preview-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.primary,.quiet{border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:7px 10px;background:var(--paper);color:var(--text)}
.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.primary:disabled{opacity:.48;cursor:default}
#save-status{font-size:13px;color:var(--sub)}
.asset{min-width:0;max-width:100%}
.pick{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;width:max-content;max-width:100%;min-height:28px}
.pick input{margin:0;accent-color:var(--accent);width:16px;height:16px}
.pick:focus-within{outline:2px solid #3e6b5b;outline-offset:2px;border-radius:2px}
.asset:has(input:checked) .image-wrap{border:2px solid var(--accent)}
.selected-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:14px}
.selected-grid .tile{width:100%}
.error{color:#8d2934}
.login{min-height:100vh;display:grid;place-items:center}
.login-box{width:min(430px,94vw);padding:26px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.login-box h1{font:500 32px/1.12 Georgia,serif;margin:8px 0}
.login-box form{display:grid;gap:8px}
.login-box form input{border:1px solid var(--line);padding:9px;border-radius:5px;font:inherit}
.login-box form button{justify-self:start;margin-top:6px}
@media(max-width:780px){
  .bar{gap:6px 10px}.bar > div:first-child{flex-basis:100%}
  .bar form{margin-left:auto}.shortlist .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}