/* ============================================================
   MEHAR ARORA · ATELIER
   Cormorant Garamond only, weights 300/400/500. No black, no heavy bold.
   Palette runs dark brown → beige. Type scale set 2026-08.
   ============================================================ */
:root{
  /* ground */
  --paper:#FBF8F3; --paper-2:#F5EFE5; --card:#FFFDFA; --plate:#FAF7F2;
  /* ink — dark brown to oat */
  --ink:#3A2A1E; --ink-2:#57422F; --ink-3:#7A6047; --muted:#A08A70; --faint:#C4B29A;
  /* rules */
  --line:#E9DFD0; --line-2:#DACBB5;
  /* accent */
  --tan:#B79B7A; --tan-soft:#F2E9DC; --tan-deep:#9C7F5E; --gold:#C9B79B;
  /* status, earth only */
  --ok:#6E6746; --ok-bg:#F1EFE2;
  --warn:#9E7433; --warn-bg:#F7EFE0;
  --stop:#8F5334; --stop-bg:#F6EAE2;
  --idle:#A08A70; --idle-bg:#F2EDE5;
  --shadow:0 1px 2px rgba(58,42,30,.04), 0 10px 30px rgba(58,42,30,.06);
  --cg:"Cormorant Garamond",Didot,"Times New Roman",serif;
  --serif:var(--cg); --sans:var(--cg);
  /* type scale — web */
  --t-h1:30px; --t-h2:20px; --t-h3:15px; --t-eye:9.5px; --t-lab:9px;
  --t-body:12.5px; --t-sm:11px; --t-tbl:11.5px; --t-cap:10px; --t-fig:26px;
  --lede:.045em;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink-2);font-family:var(--cg);font-size:var(--t-body);
  line-height:1.5;letter-spacing:var(--lede);text-transform:uppercase;font-weight:400;
  -webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1}
a{color:inherit;text-decoration:none}
b,strong{font-weight:500}
button{font-family:inherit;font-size:inherit;cursor:pointer;text-transform:uppercase;letter-spacing:.06em}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;text-transform:uppercase;
  letter-spacing:var(--lede);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
::placeholder{text-transform:uppercase;letter-spacing:.07em;color:var(--faint)}
:focus-visible{outline:1px solid var(--tan);outline-offset:2px}
.hide{display:none !important}
.ro{color:var(--muted)}
.mono{font-variant-numeric:lining-nums tabular-nums}
code{font-family:var(--cg);letter-spacing:.06em;color:var(--ink-3)}

/* ---------- type roles ---------- */
.display{font-family:var(--cg);font-weight:300;letter-spacing:.09em;line-height:1.14}
.eyebrow{font-size:var(--t-eye);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:500}
.label{font-size:var(--t-lab);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:400}

/* ---------- gate ---------- */
#gate{position:fixed;inset:0;background:var(--paper);z-index:100;display:flex;align-items:center;justify-content:center}
.gate-box{width:min(430px,90vw);text-align:center}
.gate-box .rule{height:1px;background:var(--line-2);margin:26px 0 22px}
.gate-users{display:grid;gap:7px;margin:14px 0 4px}
.gate-user{border:1px solid var(--line);background:var(--card);padding:11px 14px;text-align:left;display:flex;
  justify-content:space-between;align-items:center;transition:.15s;border-radius:2px}
.gate-user:hover{border-color:var(--tan);transform:translateY(-1px)}
.gate-user b{font-weight:400;font-size:var(--t-body);color:var(--ink)}
.gate-user span{font-size:var(--t-sm);color:var(--muted);letter-spacing:.1em}
.gate-form{display:flex;gap:7px;margin:14px 0 4px}
.gate-form input{flex:1;border:1px solid var(--line-2);background:var(--card);padding:10px 12px;border-radius:2px;
  font-size:var(--t-body);text-transform:none;letter-spacing:.02em}
.gate-form input:focus{outline:none;border-color:var(--tan)}
.gate-msg{font-size:var(--t-sm);color:var(--stop);min-height:16px;text-align:left;letter-spacing:.06em;margin-top:6px}
.gate-sent{text-align:left}
.gate-sent p{font-size:var(--t-body);line-height:1.65;margin:9px 0}
.gate-sent .ro{font-size:var(--t-sm)}
.gate-note{font-size:var(--t-sm);color:var(--faint);margin-top:22px;line-height:1.7}
.gate-pin{display:grid;gap:7px;margin:14px 0 4px}
.pin-row{display:flex;gap:7px;align-items:center}
.pin-row input{flex:1;border:1px solid var(--line-2);background:var(--card);padding:10px 12px;border-radius:2px;
  font-size:var(--t-h3);letter-spacing:.5em;text-align:center}
.pin-row input:focus{outline:none;border-color:var(--tan)}
.gate-back{background:none;border:none;color:var(--muted);font-size:var(--t-sm);letter-spacing:.14em;
  text-decoration:underline;padding:8px 0 0}

/* ---------- chrome ---------- */
header.top{position:sticky;top:0;z-index:40;background:rgba(251,248,243,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:0 26px}
.top-in{display:flex;align-items:center;gap:26px;height:84px;max-width:1560px;margin:0 auto}
.top-mark img{height:34px;width:auto;display:block}
nav.main{display:flex;gap:2px}
nav.main a{padding:7px 12px;font-size:var(--t-sm);letter-spacing:.16em;color:var(--ink-3);border-radius:2px;font-weight:400}
nav.main a:hover{background:var(--paper-2);color:var(--ink)}
nav.main a.on{background:var(--tan);color:var(--card)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.who{text-align:right;line-height:1.3}
.who b{font-weight:400;font-size:var(--t-body);display:block;letter-spacing:.1em;color:var(--ink)}
.who span{font-size:var(--t-lab);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--tan);color:var(--card);display:grid;
  place-items:center;font-size:var(--t-sm);letter-spacing:.08em}
.btn-link{background:none;border:none;font-size:var(--t-sm);color:var(--muted);text-decoration:underline;
  padding:0;letter-spacing:.12em}
main{max-width:1560px;margin:0 auto;padding:30px 26px 90px}

/* ---------- welcome ---------- */
.welcome{display:grid;grid-template-columns:1.4fr .9fr;gap:44px;align-items:end;
  padding:16px 0 30px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.welcome .greet{font-family:var(--cg);font-weight:300;font-size:42px;letter-spacing:.06em;line-height:1.12;
  color:var(--ink);margin:12px 0 0}
.welcome .greet em{font-style:normal;color:var(--tan-deep)}
.welcome .line{font-size:var(--t-body);color:var(--ink-3);margin-top:14px;max-width:52ch;line-height:1.7;
  letter-spacing:.06em}
.count{border-left:1px solid var(--line-2);padding-left:26px}
.count .n{font-family:var(--cg);font-weight:300;font-size:56px;line-height:1;color:var(--ink);letter-spacing:.02em}
.count .n small{font-size:var(--t-sm);letter-spacing:.18em;color:var(--muted);margin-left:8px}
.count .when{font-size:var(--t-cap);color:var(--muted);letter-spacing:.14em;margin-top:9px}
.count .bar{height:2px;background:var(--line);margin-top:14px;border-radius:2px;overflow:hidden}
.count .bar i{display:block;height:100%;background:var(--tan)}
.rail{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:none;width:104px}
.rail .im{aspect-ratio:2/3;background:var(--plate);border:1px solid var(--line);border-radius:2px;
  display:grid;place-items:center;overflow:hidden;padding:7px;transition:.2s}
.rail a:hover .im{border-color:var(--tan)}
.rail .im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.rail .cp{font-size:var(--t-lab);letter-spacing:.14em;color:var(--muted);margin-top:6px;text-align:center}

/* ---------- page head ---------- */
.page-head{display:flex;align-items:flex-end;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:var(--t-h1);font-weight:300;letter-spacing:.09em;line-height:1.14;color:var(--ink)}
.page-head .sub{color:var(--muted);font-size:var(--t-cap);margin-top:6px;letter-spacing:.09em}
.page-head .spacer{flex:1}
.crumb{font-size:var(--t-cap);color:var(--muted);margin-bottom:7px;letter-spacing:.14em}
.crumb a:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{border:1px solid var(--tan);background:var(--tan-soft);padding:7px 14px;font-size:var(--t-cap);
  letter-spacing:.16em;text-transform:uppercase;color:var(--tan-deep);transition:.15s;border-radius:2px}
.btn:hover{background:var(--tan);color:var(--card)}
.btn.dark{background:var(--tan);border-color:var(--tan);color:var(--card)}
.btn.dark:hover{background:var(--tan-deep);border-color:var(--tan-deep)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink-3)}
.btn.ghost:hover{border-color:var(--tan);color:var(--tan-deep);background:var(--tan-soft)}
.btn.sm{padding:5px 10px;font-size:var(--t-lab);letter-spacing:.14em}
.btn[disabled]{opacity:.5;cursor:default}
.btn .spin{display:inline-block;width:8px;height:8px;border:1px solid currentColor;border-right-color:transparent;
  border-radius:50%;margin-right:6px;animation:sp .7s linear infinite;vertical-align:-1px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- cards / grid ---------- */
.grid{display:grid;gap:16px}
.g-4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.g-3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.g-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:2px}
.card.pad{padding:16px 18px}

.bucket{background:var(--card);border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:.2s;display:block}
.bucket:hover{border-color:var(--tan);box-shadow:var(--shadow);transform:translateY(-2px)}
.bucket .thumb{height:200px;background:var(--plate);display:grid;place-items:center;overflow:hidden;padding:14px}
.bucket .thumb img{height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply}
.bucket .thumb .empty{font-family:var(--cg);font-size:30px;font-weight:300;color:var(--faint)}
.bucket .body{padding:14px 16px 16px;border-top:1px solid var(--line)}
.bucket h3{font-family:var(--cg);font-weight:400;font-size:var(--t-h2);margin:5px 0 3px;letter-spacing:.1em;color:var(--ink)}
.bucket p{margin:6px 0 0;font-size:var(--t-sm);color:var(--muted);line-height:1.55}
.bucket .count{margin-top:11px;font-size:var(--t-lab);letter-spacing:.18em;color:var(--ink-3)}

/* ---------- style card — fixed 2:3 plate ---------- */
.style-card{background:var(--card);border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:.2s;display:block}
.style-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--tan)}
.style-card .sk{aspect-ratio:2/3;background:var(--plate);display:grid;place-items:center;overflow:hidden;padding:12px}
.style-card .sk img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.style-card .sk .none{font-size:var(--t-sm);color:var(--faint);letter-spacing:.16em}
.style-card .meta{padding:11px 13px 13px;border-top:1px solid var(--line)}
.style-card .code{font-family:var(--cg);font-size:var(--t-h3);font-weight:400;letter-spacing:.1em;color:var(--ink);white-space:nowrap}
.style-card .nm{font-size:var(--t-cap);color:var(--muted);margin-top:2px;min-height:14px;letter-spacing:.08em}
.swatch-row{display:flex;align-items:center;gap:6px;margin-top:8px}
.swatch{width:11px;height:11px;border-radius:50%;border:1px solid rgba(58,42,30,.16);flex:none}
.swatch-row span{font-size:var(--t-lab);letter-spacing:.14em;color:var(--ink-3)}
.progress{display:flex;gap:2px;margin-top:10px}
.progress i{height:2px;flex:1;background:var(--line);border-radius:2px}
.progress i.done{background:var(--tan)}
.progress i.active{background:var(--gold)}
.progress i.blocked{background:var(--stop)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-lab);letter-spacing:.16em;
  text-transform:uppercase;padding:3px 8px;border-radius:2px;font-weight:500;white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.stop{background:var(--stop-bg);color:var(--stop)}
.chip.idle{background:var(--idle-bg);color:var(--idle)}
.chip.ink{background:var(--tan);color:var(--card)}
.pill-row{display:flex;gap:5px;flex-wrap:wrap}

/* ---------- filters ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:20px;padding-bottom:16px;
  border-bottom:1px solid var(--line)}
.filters input[type=search],.filters select{border:1px solid var(--line-2);background:var(--card);padding:7px 10px;
  border-radius:2px;font-size:var(--t-sm);min-width:190px;letter-spacing:.09em}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--tan)}
.seg{display:flex;border:1px solid var(--line-2);border-radius:2px;overflow:hidden}
.seg button{background:var(--card);border:none;padding:7px 12px;font-size:var(--t-sm);color:var(--ink-3);
  border-right:1px solid var(--line);letter-spacing:.12em}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--tan);color:var(--card)}

/* ---------- PDP gallery ---------- */
.detail-head{display:grid;grid-template-columns:minmax(360px,0.95fr) 1fr;gap:38px;margin-bottom:26px}
.gallery .plate{background:var(--plate);border:1px solid var(--line);aspect-ratio:2/3;display:grid;
  place-items:center;overflow:hidden;padding:26px;position:relative;border-radius:2px}
.gallery .plate img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:.25s}
.gallery .plate .none{font-size:var(--t-sm);color:var(--faint);letter-spacing:.16em}
.plate-bar{display:flex;align-items:center;gap:8px;margin-top:9px}
.plate-bar .ct{font-size:var(--t-lab);letter-spacing:.16em;color:var(--muted)}
.plate-bar .spacer{flex:1}
.plate-nav{background:none;border:1px solid var(--line-2);width:26px;height:26px;border-radius:2px;
  color:var(--ink-3);line-height:1;display:grid;place-items:center;font-size:11px}
.plate-nav:hover{border-color:var(--tan);color:var(--tan-deep)}
.thumbs{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.thumbs button{width:52px;aspect-ratio:2/3;border:1px solid var(--line);background:var(--plate);padding:5px;overflow:hidden;border-radius:2px}
.thumbs button.on{border-color:var(--tan)}
.thumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.gallery .cap{font-size:var(--t-cap);color:var(--faint);margin-top:10px;line-height:1.6;letter-spacing:.07em}

.dl{display:grid;grid-template-columns:120px 1fr;gap:0}
.dl dt{padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-lab);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-weight:400}
.dl dd{padding:8px 0;border-bottom:1px solid var(--line);margin:0;font-size:var(--t-body);color:var(--ink)}
.desc-line{font-family:var(--cg);font-size:var(--t-h3);line-height:1.6;color:var(--ink-2);padding:14px 16px;
  background:var(--paper-2);border-left:1px solid var(--tan);margin:16px 0;letter-spacing:.08em;font-weight:300}

.pom-how{font-size:var(--t-cap);letter-spacing:.07em;line-height:1.5;margin-top:1px}
.head-actions{display:flex;align-items:center;gap:14px}
.head-status{text-align:right}
.head-status .ro{display:block;font-size:var(--t-cap);margin-top:5px;letter-spacing:.08em}

/* ---------- tabs ---------- */
.tabs{display:flex;border-bottom:1px solid var(--line);margin:6px 0 22px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:none;padding:10px 14px;font-size:var(--t-sm);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent;white-space:nowrap;font-weight:400}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--tan)}

/* ---------- sections ---------- */
.sec{margin-bottom:30px}
.sec-head{display:flex;align-items:baseline;gap:11px;margin-bottom:11px;flex-wrap:wrap}
.sec-head h3{font-family:var(--cg);font-weight:400;font-size:var(--t-h2);margin:0;letter-spacing:.1em;color:var(--ink)}
.sec-head .hint{font-size:var(--t-cap);color:var(--faint);letter-spacing:.07em}
.sec-head .spacer{flex:1}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:2px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:var(--t-tbl)}
th{text-align:left;font-size:var(--t-lab);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:400;padding:9px 11px;border-bottom:1px solid var(--line-2);background:var(--paper-2);
  white-space:nowrap;position:sticky;top:0;z-index:1}
td{padding:7px 11px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--plate)}
td.num,th.num{text-align:right;white-space:nowrap}
td b{color:var(--ink)}
.grp-row td{background:var(--paper-2);font-size:var(--t-lab);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding:6px 11px}
.dev-ok{color:var(--ok);font-weight:500}
.dev-bad{color:var(--stop);font-weight:500}

/* ---------- editable cells ---------- */
.cellin{border:none;background:transparent;width:100%;padding:3px 4px;border-radius:2px;min-width:56px;
  font-size:var(--t-tbl);color:var(--ink)}
input.cellin,textarea.cellin{border-bottom:1px dashed var(--line-2)}
input.cellin:disabled,textarea.cellin:disabled,select.cellin:disabled{border-bottom-color:transparent;color:var(--muted)}
.cellin:hover{background:var(--paper-2)}
.cellin:focus{outline:none;border-bottom:1px solid var(--tan);background:var(--card)}
.cellin.num{text-align:right}
select.cellin{min-width:94px}
textarea.note-box{width:100%;min-height:96px;border:1px solid var(--line-2);background:var(--card);padding:11px 13px;
  border-radius:2px;resize:vertical;line-height:1.65;font-size:var(--t-body)}

/* number stepper */
.step{display:inline-flex;align-items:center;gap:2px;width:100%;justify-content:flex-end}
.step input{text-align:right}
.step-btns{display:flex;flex-direction:column;gap:1px;flex:none;opacity:0;transition:.12s}
td:hover .step-btns,.step:focus-within .step-btns{opacity:1}
.step-btns button{border:1px solid var(--line-2);background:var(--card);width:15px;height:10px;padding:0;
  line-height:1;color:var(--ink-3);font-size:6px;border-radius:1px;display:grid;place-items:center}
.step-btns button:hover{border-color:var(--tan);color:var(--tan-deep);background:var(--tan-soft)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:26px}
.stat{background:var(--card);border:1px solid var(--line);padding:14px 16px;border-radius:2px}
.stat .n{font-family:var(--cg);font-size:var(--t-fig);font-weight:300;line-height:1;margin-top:6px;color:var(--ink)}
.stat .n small{font-size:var(--t-sm);color:var(--faint)}

/* ---------- activity ---------- */
.feed{border-left:1px solid var(--line);padding-left:16px;margin-left:5px}
.feed-item{position:relative;padding-bottom:16px}
.feed-item:before{content:"";position:absolute;left:-20px;top:5px;width:6px;height:6px;border-radius:50%;
  background:var(--card);border:1px solid var(--tan)}
.feed-item .t{font-size:var(--t-lab);color:var(--faint);letter-spacing:.14em}
.feed-item .m{font-size:var(--t-body);margin-top:3px;color:var(--ink-2)}
.composer{display:flex;gap:8px;margin-bottom:20px}
.composer input{flex:1;border:1px solid var(--line-2);padding:9px 11px;border-radius:2px;background:var(--card);
  font-size:var(--t-body)}
.composer input:focus{outline:none;border-color:var(--tan)}

/* ---------- tracker ---------- */
.track{display:grid;gap:8px}
.track-row{display:grid;grid-template-columns:150px 1fr 170px;gap:12px;align-items:center;padding:10px 13px;
  background:var(--card);border:1px solid var(--line);border-radius:2px}
.track-row .nm{font-size:var(--t-body);font-weight:400;letter-spacing:.1em;color:var(--ink)}
.track-row .ow{font-size:var(--t-lab);letter-spacing:.16em;color:var(--faint)}
.track-row .note{font-size:var(--t-body)}

/* ---------- unassigned ---------- */
.unassigned{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.una{background:var(--card);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.una .im{aspect-ratio:2/3;background:var(--plate);display:grid;place-items:center;overflow:hidden;padding:10px}
.una .im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.una .as{padding:8px 9px;border-top:1px solid var(--line)}
.una select{width:100%;border:1px solid var(--line-2);background:var(--card);padding:5px 6px;border-radius:2px;
  font-size:var(--t-sm)}

/* ---------- feedback ---------- */
.saved{position:fixed;bottom:22px;right:22px;background:var(--ink);color:var(--paper);padding:9px 16px;
  font-size:var(--t-sm);letter-spacing:.16em;text-transform:uppercase;border-radius:2px;opacity:0;transition:.3s;
  transform:translateY(8px);pointer-events:none;z-index:60}
.saved.on{opacity:1;transform:none}
.saved.err{background:var(--stop)}
#loadbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--tan);z-index:120;
  transition:width .3s ease, opacity .4s}
.skeleton{background:linear-gradient(90deg,var(--paper-2) 25%,var(--plate) 50%,var(--paper-2) 75%);
  background-size:400% 100%;animation:sh 1.4s ease infinite;border-radius:2px}
@keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-card{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--card)}
.sk-card .a{aspect-ratio:2/3}
.sk-card .b{height:52px;border-top:1px solid var(--line);padding:11px 13px}
.sk-line{height:8px;margin-bottom:7px;border-radius:2px}
.busy{position:relative;pointer-events:none}
.busy:after{content:"";position:absolute;inset:0;background:rgba(251,248,243,.55)}

.hr{height:1px;background:var(--line);margin:22px 0}
.empty-state{text-align:center;padding:60px 20px;color:var(--faint)}
.empty-state .display{font-size:var(--t-h2);color:var(--muted);margin-bottom:7px}
.locked-note{background:var(--warn-bg);border:1px solid #EADDC4;color:var(--warn);padding:9px 13px;
  font-size:var(--t-sm);border-radius:2px;margin-bottom:16px;letter-spacing:.07em}
.demo-note{background:var(--tan-soft);border:1px solid #E5D8C6;color:var(--tan-deep);padding:9px 13px;
  font-size:var(--t-sm);border-radius:2px;margin-bottom:16px;letter-spacing:.07em}

/* ============================================================
   PHONE — scale down about 2pt, unstack, use icons
   ============================================================ */
@media(max-width:1080px){
  .top-mark img{height:28px}
  .detail-head{grid-template-columns:minmax(300px,1fr) 1fr;gap:26px}
}
@media(max-width:820px){
  :root{
    --t-h1:23px; --t-h2:17px; --t-h3:13px; --t-eye:9px; --t-lab:8.5px;
    --t-body:11px; --t-sm:10px; --t-tbl:10.5px; --t-cap:9px; --t-fig:21px;
  }
  header.top{padding:0 14px}
  .top-in{height:60px;gap:10px}
  .top-mark img{height:22px}
  nav.main{display:none}
  .who{display:none}
  main{padding:18px 14px 96px}
  .page-head{gap:12px;margin-bottom:16px}
  .page-head h1{width:100%}
  .detail-head{grid-template-columns:1fr;gap:20px}
  .gallery .plate{padding:16px;max-height:64vh}
  .dl{grid-template-columns:96px 1fr}
  .welcome{grid-template-columns:1fr;gap:20px;padding:6px 0 20px;margin-bottom:18px}
  .welcome .greet{font-size:27px;margin-top:8px}
  .count{border-left:none;border-top:1px solid var(--line-2);padding:16px 0 0}
  .count .n{font-size:38px}
  .rail a{width:84px}
  .stats{grid-template-columns:1fr 1fr;gap:8px}
  .stat{padding:11px 12px}
  .g-4{grid-template-columns:1fr 1fr;gap:10px}
  .style-card .meta{padding:9px 10px 11px}
  .style-card .chip{font-size:7.5px;padding:2px 5px;letter-spacing:.1em}
  .bucket .thumb{height:150px}
  .g-3,.g-2{grid-template-columns:1fr}
  .filters{gap:7px;padding-bottom:12px;margin-bottom:14px}
  .filters input[type=search]{min-width:0;flex:1 1 100%}
  .filters select{min-width:0;flex:1 1 calc(50% - 4px)}
  .seg{flex:1 1 100%}
  .seg button{flex:1}
  .tabs{margin:4px -14px 16px;padding:0 14px}
  .tabs button{padding:9px 11px}
  .pom-how{display:none}
  .head-actions{width:100%;justify-content:space-between;gap:8px}
  .head-status{text-align:left;display:flex;align-items:center;gap:8px}
  .head-status .ro{display:inline;margin-top:0}
  .page-head .sub{width:100%}
  .track-row{grid-template-columns:1fr;gap:6px;padding:10px 12px}
  .track-row .ow{display:inline;margin-left:8px}
  th,td{padding:6px 8px}
  .thumbs button{width:42px}
  .step-btns{opacity:1}
  .composer{flex-wrap:wrap}
  .composer input{flex:1 1 100%}
  /* phone action bar */
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
    background:rgba(251,248,243,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .mobile-bar a{flex:1;text-align:center;padding:9px 4px 11px;color:var(--muted);font-size:8.5px;letter-spacing:.14em}
  .mobile-bar a .ic{display:block;font-size:15px;line-height:1.25;color:var(--ink-3)}
  .mobile-bar a.on{color:var(--tan-deep)}
  .mobile-bar a.on .ic{color:var(--tan-deep)}
  .saved{bottom:64px;right:14px;left:14px;text-align:center}
}
@media(min-width:821px){ .mobile-bar{display:none} }
@media print{
  header.top,.tabs,.mobile-bar,.saved,#loadbar,.filters{display:none !important}
  body{background:#fff}
}