/* Clothing studio (static/clothing.js): Wardrobe, Fitting room, Pack files.
   Built on the panel's own tokens; the only new material is the studio backdrop that
   in-game shots and the 3D stage sit on, because dark garments vanish on the page's
   near-black. A clothing developer picks mid, light or dark per taste. */
:root{--cs-mid:radial-gradient(120% 95% at 50% 32%,#5b5474 0%,#3a3450 58%,#27223a 100%);--cs-light:radial-gradient(120% 95% at 50% 32%,#f2eff7 0%,#d4cfe0 62%,#bcb5cc 100%);--cs-dark:radial-gradient(120% 95% at 50% 32%,#221a3e 0%,#130d29 70%,#0b0719 100%);--cs-green:#1fa34a;--cs-ok:#9fe0b8;--cs-warn:#e3bd80;--cs-rail:196px;--cs-inspect:432px}
.cs-inspect[hidden],.cs-uploads[hidden],.cs-picker[hidden],.cs-sel-bar[hidden]{display:none!important}
/* The 3D canvas is added after the overlays, so without a stacking order it sits on top of them
   and every click on a button or dropdown reaches the camera controls instead. */
.cs-viewport canvas,.cs-stage canvas{z-index:0}
.cs-viewport-bar,.cs-viewport-legend,.cs-stage-tools,.cs-stage-msg,.cs-loading{z-index:2}
#cs-picker-host .cs-picker{z-index:4}
.cs-backdrop-mid{background:var(--cs-mid)}
.cs-backdrop-light{background:var(--cs-light)}
.cs-backdrop-dark{background:var(--cs-dark)}
.cs-backdrop-green{background:var(--cs-green)}

/* ---- shared bits ---- */
.cs-seg{display:inline-flex;gap:2px;padding:2.5px;background:var(--panel2);border:1px solid var(--line);border-radius:9px}
.cs-seg button{font:inherit;font-size:11.5px;font-weight:550;color:var(--muted);background:none;border:0;border-radius:6.5px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .15s ease,background .15s ease}
.cs-seg button:hover{color:var(--text)}
.cs-seg button.active{background:rgba(120,80,210,.42);color:#f4ecff;box-shadow:inset 0 0 0 1px rgba(200,170,255,.22)}
.cs-seg button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.cs-seg .icon{width:14px;height:14px}
.cs-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:550;line-height:1;padding:4px 7px;border-radius:999px;background:rgba(90,60,170,.3);border:1px solid rgba(180,150,255,.16);color:#dccbff;white-space:nowrap}
.cs-chip .icon{width:11px;height:11px}
.cs-chip.ok{background:rgba(40,110,80,.3);border-color:rgba(130,220,170,.22);color:var(--cs-ok)}
.cs-chip.warn{background:rgba(110,80,30,.32);border-color:rgba(227,189,128,.26);color:var(--cs-warn)}
.cs-chip.bad{background:rgba(110,30,60,.34);border-color:rgba(245,155,180,.26);color:#ffc2d4}
.cs-chip.quiet{background:transparent;color:var(--muted)}
.cs-mono{font-family:"SFMono-Regular",ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:0}
.cs-muted{color:var(--muted)}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-search{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 220px;max-width:340px;padding:0 10px;height:34px;border:1px solid var(--line);border-radius:9px;background:rgba(14,9,34,.5);transition:border-color .15s ease,box-shadow .15s ease}
.cs-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus)}
.cs-search .icon{width:15px;height:15px;color:var(--muted);flex-shrink:0}
.cs-search input{flex:1;min-width:0;border:0;background:none;padding:0;height:32px;box-shadow:none!important;font-size:12.5px}
.cs-select{height:34px;padding:0 30px 0 10px;font-size:12px;border-radius:9px;max-width:220px}
.cs-icon-btn{width:30px;height:30px;display:inline-grid;place-items:center;border-radius:8px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;transition:color .15s ease,background .15s ease,border-color .15s ease;flex-shrink:0}
.cs-icon-btn:hover{color:var(--text);background:rgba(120,80,210,.22);border-color:var(--line)}
.cs-icon-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.cs-icon-btn:disabled{opacity:.35;cursor:not-allowed;background:none}
.cs-icon-btn .icon{width:15px;height:15px}
.cs-icon-btn.on{color:#f0e4ff;background:rgba(120,80,210,.36);border-color:rgba(200,170,255,.24)}
.cs-kbd{font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-family:inherit}
.cs-hanger{width:38%;height:38%;color:rgba(255,255,255,.28)}
.cs-backdrop-light .cs-hanger{color:rgba(40,30,70,.3)}
.cs-progress{height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.cs-progress i{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--accent2),var(--accent));transition:transform .2s ease}

/* ---- Wardrobe ---- */
.cs-lib{display:grid;grid-template-columns:var(--cs-rail) minmax(0,1fr);gap:var(--s4);align-items:start}
.cs-lib.inspecting{grid-template-columns:var(--cs-rail) minmax(0,1fr) var(--cs-inspect)}
.cs-rail{position:sticky;top:76px;display:flex;flex-direction:column;gap:var(--s3);max-height:calc(100vh - 96px);overflow:auto;scrollbar-width:thin;padding-bottom:var(--s2)}
.cs-rail-group{display:flex;flex-direction:column;gap:1px}
.cs-rail-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 10px 5px}
.cs-rail button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font:inherit;font-size:12.5px;color:#d6cbec;background:none;border:1px solid transparent;border-radius:8px;padding:7px 10px;cursor:pointer;text-align:left;transition:background .15s ease,color .15s ease,border-color .15s ease}
.cs-rail button:hover{background:rgba(120,80,210,.16);color:var(--text)}
.cs-rail button.active{background:linear-gradient(90deg,rgba(120,80,210,.42),rgba(80,50,160,.22));border-color:rgba(200,170,255,.2);color:#fff}
.cs-rail button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.cs-rail .n{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cs-rail button.active .n{color:#dccbff}
.cs-rail .n b{color:#cdb5ff;font-weight:600}
.cs-main{min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
.cs-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.cs-toolbar .cs-spacer{flex:1}
.cs-filters{display:flex;flex-wrap:wrap;gap:4px}
.cs-filters button{font:inherit;font-size:11px;font-weight:550;color:var(--muted);background:none;border:1px solid transparent;border-radius:8px;padding:6px 9px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:color .15s ease,background .15s ease}
.cs-filters button:hover{color:var(--text);background:rgba(120,80,210,.14)}
.cs-filters button.active{color:#f4ecff;background:rgba(120,80,210,.34);border-color:rgba(200,170,255,.2)}
.cs-filters button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.cs-filters .c{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.cs-filters button.active .c{color:#dccbff}
.cs-summary{display:flex;align-items:baseline;gap:10px;font-size:12px;color:var(--muted)}
.cs-summary strong{font-size:15px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;align-content:start}
.cs-tile{position:relative;display:flex;flex-direction:column;gap:7px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0;border-radius:11px}
.cs-tile:focus-visible{outline:none}
.cs-tile .cs-shot{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:11px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .15s ease,transform .15s ease}
.cs-tile .cs-shot img{width:100%;height:100%;object-fit:contain;transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.cs-tile:hover .cs-shot img{transform:scale(1.045)}
.cs-tile:hover .cs-shot{box-shadow:inset 0 0 0 1px rgba(200,170,255,.38)}
.cs-tile.selected .cs-shot,.cs-tile:focus-visible .cs-shot{box-shadow:inset 0 0 0 2px var(--accent),0 6px 18px -8px rgba(150,90,255,.55)}
.cs-tile.dim .cs-shot{opacity:.55}
.cs-cap{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 2px}
.cs-cap b{font-size:12.5px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-cap small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-marks{position:absolute;top:6px;left:6px;right:6px;display:flex;justify-content:space-between;gap:4px;pointer-events:none}
.cs-marks span{display:inline-flex;gap:3px}
.cs-mark{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:6px;font-size:10px;font-weight:650;background:rgba(10,6,24,.72);color:#e9defc;box-shadow:0 1px 3px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.cs-mark .icon{width:12px;height:12px}
.cs-mark.hid{color:#ffc2d4}
.cs-mark.flag{color:var(--cs-warn)}
.cs-mark.file{color:#cdb5ff}
.cs-more{display:flex;justify-content:center;padding:var(--s3) 0}
.cs-empty-shot{font-size:10px;color:rgba(255,255,255,.5);text-align:center;padding:0 10px;line-height:1.4}
.cs-backdrop-light .cs-empty-shot{color:rgba(40,30,70,.55)}

/* Inspector */
.cs-inspect{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto;scrollbar-width:thin;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}
.cs-inspect>*{flex-shrink:0}
.cs-inspect-head{display:flex;align-items:flex-start;gap:10px;padding:14px 14px 10px 16px;border-bottom:1px solid var(--line)}
.cs-inspect-head h2{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3;word-break:break-word}
.cs-inspect-head p{font-size:11.5px;color:var(--muted);margin-top:3px}
.cs-inspect-head .cs-grow{flex:1;min-width:0}
.cs-inspect-nav{display:flex;gap:2px}
.cs-stage{position:relative;aspect-ratio:1;margin:12px 14px 0;border-radius:12px;overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cs-stage>img{width:100%;height:100%;object-fit:contain}
.cs-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;outline:none;cursor:grab}
.cs-stage canvas:active{cursor:grabbing}
.cs-stage-msg{position:absolute;inset:auto 12px 12px 12px;font-size:11px;line-height:1.45;color:#efe7ff;background:rgba(10,6,24,.72);border-radius:8px;padding:8px 10px;pointer-events:none}
.cs-stage-tools{position:absolute;top:8px;right:8px;display:flex;gap:4px}
.cs-stage-tools .cs-icon-btn{background:rgba(10,6,24,.55);color:#e7dcff}
.cs-stage-tools .cs-icon-btn:hover{background:rgba(60,36,120,.8)}
.cs-loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cs-loading::after{content:'';width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:#fff;animation:cs-spin .8s linear infinite}
@keyframes cs-spin{to{transform:rotate(360deg)}}
.cs-inspect-views{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 0}
.cs-variants{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0}
.cs-variant{position:relative;width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:#1a1233 center/cover no-repeat;cursor:pointer;padding:0;color:#fff;font:inherit;font-size:10.5px;font-weight:700;display:grid;place-items:end start;transition:border-color .15s ease,box-shadow .15s ease}
.cs-variant span{padding:1px 4px;margin:2px;border-radius:4px;background:rgba(10,6,24,.75);line-height:1.2;text-transform:uppercase}
.cs-variant:hover{border-color:rgba(200,170,255,.45)}
.cs-variant.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--focus)}
.cs-variant:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.cs-variant.missing{background:repeating-linear-gradient(135deg,#1a1233 0 6px,#221844 6px 12px)}
.cs-section{padding:14px 16px 0}
.cs-section:last-child{padding-bottom:16px}
.cs-section h3{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cs-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12px;margin:0}
.cs-facts dt{color:var(--muted)}
.cs-facts dd{margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.cs-name{display:flex;gap:6px}
.cs-name input{flex:1;min-width:0;height:34px;font-size:12.5px}
.cs-marks-row{display:flex;flex-wrap:wrap;gap:6px}
.cs-toggle{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11.5px;font-weight:550;color:#d6cbec;background:rgba(40,28,72,.4);border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.cs-toggle:hover{background:rgba(74,52,130,.5);color:var(--text)}
.cs-toggle .icon{width:13px;height:13px}
.cs-toggle.on{background:rgba(120,80,210,.4);border-color:rgba(200,170,255,.3);color:#fff}
.cs-toggle.on.danger{background:rgba(110,30,60,.5);border-color:rgba(245,155,180,.34);color:#ffd2df}
.cs-toggle:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.cs-toggle:disabled{opacity:.45;cursor:not-allowed}
.cs-files-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cs-file{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 10px;font-size:12px;border-top:1px solid var(--line);min-width:0}
.cs-file:first-child{border-top:0}
.cs-file .cs-thumb{width:30px;height:30px;border-radius:6px;background:#1a1233 center/cover no-repeat;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cs-file .cs-file-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cs-file .cs-file-main b{font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-file .cs-file-main small{font-size:10.5px;color:var(--muted)}
.cs-file-actions{display:flex;gap:2px;flex-shrink:0}
.cs-actions{display:flex;flex-wrap:wrap;gap:8px}
.cs-note{font-size:11.5px;line-height:1.55;color:var(--muted)}
.cs-note b{color:#dccbff;font-weight:600}

/* ---- Fitting room ---- */
.cs-fit{display:grid;grid-template-columns:336px minmax(0,1fr) 296px;gap:var(--s4);height:calc(100vh - 196px);min-height:600px}
.cs-fit>*{min-height:0}
.cs-panel{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-height:0;overflow:hidden}
.cs-panel-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.cs-panel-head h2{font-size:13px;font-weight:600;flex:1;min-width:0}
.cs-panel-body{flex:1;overflow:auto;scrollbar-width:thin;min-height:0}
.cs-outfit-name{flex:1;min-width:0;height:34px;font-size:13.5px;font-weight:600}
.cs-dirty{width:7px;height:7px;border-radius:50%;background:var(--cs-warn);flex-shrink:0;box-shadow:0 0 0 3px rgba(227,189,128,.16)}
.cs-slot{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px 7px 10px;border-bottom:1px solid rgba(150,120,225,.08);transition:background .15s ease}
.cs-slot:hover{background:rgba(120,80,210,.08)}
.cs-slot.active{background:rgba(120,80,210,.18)}
.cs-slot.is-empty .cs-slot-val{color:var(--muted)}
.cs-slot-thumb{width:52px;height:52px;border-radius:9px;border:0;padding:0;cursor:pointer;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .15s ease}
.cs-slot-thumb img{width:100%;height:100%;object-fit:contain}
.cs-slot-thumb:hover{box-shadow:inset 0 0 0 1px rgba(200,170,255,.45)}
.cs-slot-thumb:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.cs-slot-thumb .cs-hanger{width:44%;height:44%}
.cs-slot-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.cs-slot-name{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs-slot-val{font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cs-slot-sub{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-slot-sub .no3d{color:var(--cs-warn)}
.cs-stepper{display:grid;grid-template-columns:auto auto;gap:2px 0;align-items:center}
.cs-stepper .cs-icon-btn{width:24px;height:22px;border-radius:6px}
.cs-stepper .cs-icon-btn .icon{width:13px;height:13px}
.cs-stepper-row{display:flex;align-items:center;gap:0}
.cs-stepper-row small{font-size:9.5px;color:var(--muted);width:24px;text-align:center;text-transform:uppercase;letter-spacing:.04em}
.cs-viewport{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:0}
.cs-viewport canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;outline:none;cursor:grab}
.cs-viewport canvas:active{cursor:grabbing}
.cs-viewport-bar{position:absolute;left:12px;right:12px;top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;pointer-events:none}
.cs-viewport-bar>*{pointer-events:auto}
.cs-viewport-bar .cs-seg{background:rgba(14,9,34,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cs-viewport-bar .cs-spacer{flex:1}
.cs-viewport-legend{position:absolute;left:12px;bottom:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;pointer-events:none}
.cs-viewport-legend .cs-chip{background:rgba(14,9,34,.78);pointer-events:auto}
.cs-floor-hint{max-width:420px;font-size:11.5px;line-height:1.5;color:#efe7ff;background:rgba(14,9,34,.94);border:1px solid var(--line);border-radius:10px;padding:9px 11px;pointer-events:auto}
.cs-floor-hint b{color:#fff}
.cs-floor-hint .text-button,.cs-note .text-button{padding:0;font-size:inherit;font-weight:600;min-height:0;vertical-align:baseline}
.cs-picker{position:absolute;inset:0;display:flex;flex-direction:column;background:#0d0920;z-index:3;animation:cs-sheet .18s cubic-bezier(.2,.8,.3,1)}
@keyframes cs-sheet{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.cs-picker-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.cs-picker-head h2{font-size:14px;font-weight:600;margin-right:4px}
.cs-picker .cs-grid{padding:12px;overflow:auto;flex:1;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));scrollbar-width:thin}
.cs-preset{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-bottom:1px solid rgba(150,120,225,.08);cursor:pointer;transition:background .15s ease;border-left:0;background:none;width:100%;text-align:left;font:inherit;color:inherit;border-top:0;border-right:0}
.cs-preset:hover{background:rgba(120,80,210,.1)}
.cs-preset.active{background:rgba(120,80,210,.22)}
.cs-preset:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus)}
.cs-preset b{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-preset small{font-size:10.5px;color:var(--muted)}
.cs-preset .cs-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.cs-presets-tools{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-top:1px solid var(--line);flex-shrink:0}
.cs-presets-tools .cs-actions .button{flex:1 1 auto;justify-content:center}
.cs-export{width:100%;min-height:150px;max-height:260px;font-family:"SFMono-Regular",ui-monospace,Consolas,monospace;font-size:11px;line-height:1.5;white-space:pre;resize:vertical}
.cs-tags-input{height:32px;font-size:12px}

/* ---- Pack files ---- */
.cs-files{display:grid;grid-template-columns:268px minmax(0,1fr);gap:var(--s4);align-items:start}
.cs-files-side{display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:76px;max-height:calc(100vh - 96px);min-height:0}
.cs-files-side .cs-panel{min-height:0}
.cs-pack{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid rgba(150,120,225,.08);padding:9px 14px;cursor:pointer;transition:background .15s ease}
.cs-pack:hover{background:rgba(120,80,210,.1)}
.cs-pack.active{background:rgba(120,80,210,.24)}
.cs-pack:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus)}
.cs-pack b{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.cs-pack b .icon{width:14px;height:14px;color:var(--accent)}
.cs-pack small{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cs-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;padding:9px 14px;border-bottom:1px solid rgba(150,120,225,.08);font-size:11.5px}
.cs-history-row b{font-weight:600;color:var(--text)}
.cs-history-row small{grid-column:1/-1;color:var(--muted);font-size:10.5px;line-height:1.45;overflow-wrap:anywhere}
.cs-history-row.undone{opacity:.55}
.cs-history-row .button{font-size:10.5px;padding:5px 9px;min-height:0}
.cs-browser{min-width:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .15s ease}
.cs-browser.drag{box-shadow:inset 0 0 0 2px var(--accent)}
.cs-browser-head{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.cs-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:12.5px;min-width:0}
.cs-crumbs button{font:inherit;color:var(--muted);background:none;border:0;border-radius:6px;padding:3px 6px;cursor:pointer}
.cs-crumbs button:hover{color:var(--text);background:rgba(120,80,210,.16)}
.cs-crumbs button:last-child{color:var(--text);font-weight:600}
.cs-crumbs .icon{width:12px;height:12px;color:var(--muted)}
.cs-crumbs button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.cs-pack-facts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cs-browser-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cs-browser-tools .cs-spacer{flex:1}
.cs-browser-tools .button{font-size:11.5px;padding:7px 11px}
.cs-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cs-table th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a99ec8;background:rgba(14,9,34,.5);border-bottom:1px solid var(--line);padding:8px 10px;position:sticky;top:0;z-index:1}
.cs-table td{padding:6px 10px;border-bottom:1px solid rgba(150,120,225,.08);vertical-align:middle}
.cs-table tr:hover td{background:rgba(120,80,210,.07)}
.cs-table tr.sel td{background:rgba(120,80,210,.18)}
.cs-table td.cs-check,.cs-table th.cs-check{width:34px;padding-left:14px}
.cs-table input[type=checkbox]{width:15px;height:15px;min-height:0;accent-color:var(--accent);margin:0;cursor:pointer}
.cs-table .cs-fname{display:flex;align-items:center;gap:9px;min-width:0;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;max-width:100%}
.cs-table .cs-fname span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-table .cs-fname .icon{width:16px;height:16px;color:var(--muted);flex-shrink:0}
.cs-table .cs-fname.dir .icon{color:var(--accent)}
.cs-table .cs-fname:hover span{color:#fff;text-decoration:underline;text-decoration-color:rgba(200,170,255,.5);text-underline-offset:3px}
.cs-table .cs-fname:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus);border-radius:4px}
.cs-table .cs-num{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-table .cs-row-actions{width:1%;white-space:nowrap;text-align:right}
.cs-table .cs-row-actions>div{display:flex;gap:2px;justify-content:flex-end}
.cs-table-wrap{overflow:auto;max-height:calc(100vh - 300px);min-height:200px;scrollbar-width:thin}
.cs-ext{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 4px;flex-shrink:0}
.cs-ext.ydd{color:#cdb5ff;border-color:rgba(200,170,255,.3)}
.cs-ext.ytd{color:#9fd4e0;border-color:rgba(140,210,230,.28)}
.cs-ext.ymt,.cs-ext.meta{color:var(--cs-warn);border-color:rgba(227,189,128,.28)}
.cs-uploads{display:flex;flex-direction:column;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:rgba(14,9,34,.4)}
.cs-uploads-head{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.cs-uploads-head span{color:var(--muted);font-variant-numeric:tabular-nums}
.cs-upload-errors{font-size:11px;color:#ffc2d4;line-height:1.5;max-height:90px;overflow:auto}
.cs-drop-hint{font-size:11.5px;color:var(--muted);padding:10px 14px}
.cs-sel-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px}
.cs-sel-bar b{font-variant-numeric:tabular-nums}
dialog#modal.cs-wide{width:min(860px,calc(100vw - 32px))}
.cs-dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px;padding:22px 16px;text-align:center;border:1.5px dashed rgba(185,140,249,.36);border-radius:12px;background:rgba(40,26,84,.28);transition:border-color .15s ease,background .15s ease}
.cs-dropzone>.icon{width:26px;height:26px;color:var(--accent)}
.cs-dropzone b{font-size:13px;color:var(--text)}
.cs-dropzone>span{font-size:11.5px;color:var(--muted)}
.cs-dropzone .cs-actions{margin-top:6px;justify-content:center}
.cs-dropzone.drag{border-color:var(--accent);background:rgba(120,80,210,.26)}
.cs-dropzone:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus)}
.cs-np-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.cs-np-list:empty{display:none}
.cs-np-tree{display:flex;flex-wrap:wrap;gap:6px}
.cs-np-tree span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#dccbff;background:rgba(90,60,170,.24);border:1px solid rgba(180,150,255,.14);border-radius:7px;padding:3px 8px}
.cs-np-tree .icon{width:13px;height:13px}
.cs-rename-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-rename-preview{margin-top:12px;border:1px solid var(--line);border-radius:10px;max-height:300px;overflow:auto}
.cs-rename-preview table{width:100%;border-collapse:collapse;font-size:11.5px}
.cs-rename-preview td{padding:5px 10px;border-bottom:1px solid rgba(150,120,225,.08);vertical-align:top;overflow-wrap:anywhere}
.cs-rename-preview td.arrow{width:18px;color:var(--muted);padding:5px 0}
.cs-rename-preview tr.bad td{color:#ffc2d4}
.cs-rename-preview .why{display:block;font-size:10.5px;color:#ffc2d4}
.cs-warnings{margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:11.5px;line-height:1.5;color:var(--cs-warn)}
.cs-warnings div{display:flex;gap:8px}
.cs-warnings .icon{width:14px;height:14px;flex-shrink:0;margin-top:2px}
.cs-rename-count{font-size:12px;color:var(--muted);margin-top:10px}
dialog .field.cs-checkline{display:flex;flex-direction:row;align-items:center;gap:9px;margin-top:10px;cursor:pointer}
dialog .field.cs-checkline input{width:auto;min-height:0;margin:0;flex-shrink:0;accent-color:var(--accent)}
.cs-rename-count b{color:var(--text)}

/* ---- narrower screens ---- */
@media (max-width:1380px){
 .cs-fit{grid-template-columns:316px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:auto}
 .cs-fit .cs-viewport{min-height:620px}
 .cs-fit>.cs-presets{grid-column:1/-1;max-height:none}
}
@media (max-width:1240px){
 .cs-lib.inspecting{grid-template-columns:var(--cs-rail) minmax(0,1fr)}
 .cs-lib.inspecting .cs-inspect{position:fixed;top:0;right:0;bottom:0;width:min(var(--cs-inspect),100vw);max-height:none;border-radius:0;z-index:60;box-shadow:-20px 0 48px -12px rgba(0,0,0,.75)}
}
@media (max-width:900px){
 .cs-lib,.cs-lib.inspecting,.cs-files{grid-template-columns:minmax(0,1fr)}
 .cs-rail{position:static;flex-direction:row;overflow-x:auto;max-height:none;gap:var(--s2)}
 .cs-rail-group{flex-direction:row}
 .cs-rail-label{display:none}
 .cs-rail button{white-space:nowrap}
 .cs-fit{grid-template-columns:minmax(0,1fr)}
 .cs-fit .cs-viewport{min-height:62vh;order:-1}
 .cs-viewport-bar .cs-seg[aria-label=Backdrop],.cs-viewport-bar .cs-select{display:none}
 .cs-files-side{position:static;max-height:none}
 .cs-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
 .cs-rename-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 .cs-tile .cs-shot img,.cs-picker,.cs-progress i{transition:none;animation:none}
}

/* ---- Upload dock: live progress fixed to the window, on every page ---- */
.cs-dock{position:fixed;right:20px;bottom:20px;z-index:200;width:min(420px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:#160f2e;border:1px solid rgba(185,140,249,.32);border-radius:14px;box-shadow:0 18px 44px -12px rgba(0,0,0,.78),0 2px 8px rgba(0,0,0,.35);font-size:12px;animation:cs-dock-in .22s cubic-bezier(.2,.8,.3,1)}
.cs-dock[hidden]{display:none}
@keyframes cs-dock-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cs-dock-head{display:flex;align-items:center;gap:8px;min-width:0}
.cs-dock-head>.icon{width:16px;height:16px;color:var(--accent);flex-shrink:0}
.cs-dock-head b{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-dock-pct{font-size:20px;font-weight:650;line-height:1;color:#f3eaff;font-variant-numeric:tabular-nums}
.cs-dock .cs-progress{height:7px;border-radius:4px}
.cs-dock-stats{display:flex;flex-wrap:wrap;gap:3px 12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cs-dock-stats b{color:var(--text);font-weight:600}
.cs-dock-stats span:empty{display:none}
.cs-dock-file{font-family:"SFMono-Regular",ui-monospace,Consolas,monospace;font-size:10.5px;color:#bfb2dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-dock-note{font-size:11.5px;color:var(--muted)}
.cs-dock-errors summary{cursor:pointer;color:#ffc2d4;font-weight:600}
.cs-dock-errors summary:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus);border-radius:4px}
.cs-dock-errors>div{max-height:140px;overflow:auto;margin-top:6px;font-size:11px;line-height:1.5;color:#ffc2d4;overflow-wrap:anywhere}
.cs-dock-actions{display:flex;justify-content:flex-end}
.cs-dock-actions .text-button:disabled{opacity:.6;cursor:default}
@media (prefers-reduced-motion:reduce){.cs-dock{animation:none}.cs-dock .cs-progress i{transition:none}}