:root{
  color-scheme:light;
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ar:"Noto Sans Arabic",var(--sys);
  --font:var(--sys);

  --bg:#f2f3f7;
  --surface:#ffffff;
  --surface-2:#f7f8fa;
  --surface-3:#eceef3;
  --line:#dfe2ea;
  --line-soft:#e9ebf1;
  --text:#12141a;
  --text-2:#5d626e;
  --text-3:#8e94a2;

  --blue:#0a6cff;
  --blue-press:#0757cc;
  --blue-soft:#e8f0ff;
  --blue-deep:#083a80;

  --green:#1a9e56;
  --green-soft:#e3f6ec;
  --amber:#c47a00;
  --amber-soft:#fdf1dc;
  --red:#d8382c;
  --red-soft:#fdeae8;

  --freezer:#dceefb;
  --freezer-line:#a9d3f2;
  --freezer-text:#0d5384;

  --r-s:10px; --r-m:14px; --r-l:20px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.16);
  --shadow-lift:0 2px 6px rgba(16,24,40,.07),0 18px 40px -16px rgba(16,24,40,.28);
  --tap:44px;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    color-scheme:dark;
    --bg:#000205;
    --surface:#14161c;
    --surface-2:#1b1e26;
    --surface-3:#242832;
    --line:#2c313d;
    --line-soft:#242832;
    --text:#f3f5f9;
    --text-2:#a2a9b8;
    --text-3:#767d8c;
    --blue:#3f92ff;
    --blue-press:#2b7ae6;
    --blue-soft:#12233d;
    --blue-deep:#8fc0ff;
    --green:#37cc7d;
    --green-soft:#102c1e;
    --amber:#f0ac33;
    --amber-soft:#2e2312;
    --red:#ff6257;
    --red-soft:#33191a;
    --freezer:#122a3f;
    --freezer-line:#1d4667;
    --freezer-text:#8ac6f5;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.55),0 18px 40px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000205;
  --surface:#14161c;
  --surface-2:#1b1e26;
  --surface-3:#242832;
  --line:#2c313d;
  --line-soft:#242832;
  --text:#f3f5f9;
  --text-2:#a2a9b8;
  --text-3:#767d8c;
  --blue:#3f92ff;
  --blue-press:#2b7ae6;
  --blue-soft:#12233d;
  --blue-deep:#8fc0ff;
  --green:#37cc7d;
  --green-soft:#102c1e;
  --amber:#f0ac33;
  --amber-soft:#2e2312;
  --red:#ff6257;
  --red-soft:#33191a;
  --freezer:#122a3f;
  --freezer-line:#1d4667;
  --freezer-text:#8ac6f5;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.55),0 18px 40px -16px rgba(0,0,0,.8);
}

:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%}
html{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-3);border:3px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
html[dir="rtl"] body{--font:var(--ar)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.02em;font-weight:650}
h1{font-size:28px;line-height:1.2}
h2{font-size:21px}
h3{font-size:17px}
p{margin:0}
a{color:var(--blue)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 55%,transparent);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
#app{min-height:100dvh;display:flex;flex-direction:column}
.shell{display:flex;flex:1;min-height:0}
.side{
  width:236px;flex:0 0 236px;background:var(--surface);border-inline-end:1px solid var(--line);
  padding:14px 12px;display:flex;flex-direction:column;gap:1px;position:sticky;top:0;height:100dvh;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.side::-webkit-scrollbar-track{background:transparent}
.side:not(:hover){scrollbar-color:transparent transparent}
.side:not(:hover)::-webkit-scrollbar-thumb{background:transparent}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 12px}
.brand-mark{
  width:34px;height:34px;border-radius:10px;flex:0 0 34px;
  background:linear-gradient(160deg,var(--blue),var(--blue-deep));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;letter-spacing:-.03em;
}
:root[data-theme="dark"] .brand-mark,:root:not([data-theme="light"]) .brand-mark{color:#fff}
.brand-name{font-weight:650;letter-spacing:-.02em;font-size:15px}
.brand-sub{font-size:12px;color:var(--text-3)}
.navbtn{
  display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:var(--r-s);
  background:transparent;color:var(--text-2);font-weight:520;text-align:start;min-height:36px;font-size:14.5px;
}
.navbtn .ic{width:20px;flex:0 0 20px;display:grid;place-items:center;color:var(--text-3)}
.navbtn:hover{background:var(--surface-2);color:var(--text)}
.navbtn[aria-current="true"]{background:var(--blue-soft);color:var(--blue);font-weight:600}
.navbtn[aria-current="true"] .ic{color:var(--blue)}
.navbtn .pip{margin-inline-start:auto;background:var(--red);color:#fff;border-radius:999px;font-size:11px;font-weight:700;min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px}
.side-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:6px}
.whoami{display:flex;align-items:center;gap:9px;padding:6px 8px;min-width:0;width:100%;border:0;
  background:transparent;border-radius:var(--r-s);text-align:start;color:inherit}
.whoami:hover{background:var(--surface-2)}
.whoami>div{min-width:0}
.whoami .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:32px;height:32px;flex:0 0 32px;border-radius:999px;background:var(--surface-3);display:grid;place-items:center;font-weight:650;font-size:13px;color:var(--text-2)}
.whoami .nm{font-weight:600;font-size:13.5px;line-height:1.25}
.whoami .rl{font-size:11.5px;color:var(--text-3)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);padding:12px 22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.topbar h1{font-size:22px}
.topbar .sub{font-size:13px;color:var(--text-3);width:100%;margin-top:-2px}
.spacer{margin-inline-start:auto}
.content{padding:20px 22px 120px;max-width:1180px;width:100%}
.tabbar{display:none}

@media (max-width:860px){
  .side{display:none}
  .content{padding:16px 15px 108px}
  .topbar{padding:11px 15px}
  .topbar h1{font-size:19px}
  .tabbar{
    display:flex;position:fixed;bottom:0;inset-inline:0;z-index:50;
    background:color-mix(in srgb,var(--surface) 88%,transparent);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar button{
    flex:1;border:0;background:transparent;color:var(--text-3);display:flex;flex-direction:column;align-items:center;
    gap:3px;font-size:10.5px;font-weight:600;padding:5px 2px;border-radius:10px;min-height:50px;letter-spacing:-.01em;
  }
  .tabbar button[aria-current="true"]{color:var(--blue)}
  .tabbar .tb-ic{position:relative;display:grid;place-items:center}
  .tabbar .pip{position:absolute;top:-4px;inset-inline-end:-8px;background:var(--red);color:#fff;border-radius:999px;font-size:10px;font-weight:700;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px}
}

/* ---------- primitives ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow)}
.pad{padding:16px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.muted{color:var(--text-2)}
.tiny{font-size:12.5px;color:var(--text-3)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.sep{height:1px;background:var(--line-soft);border:0;margin:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--tap);
  padding:0 17px;border-radius:12px;border:1px solid transparent;background:var(--blue);color:#fff;
  font-weight:600;letter-spacing:-.01em;transition:transform .08s ease,background .12s ease;
}
.btn:active{transform:scale(.975)}
.btn:hover{background:var(--blue-press)}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.quiet{background:transparent;color:var(--blue);border-color:transparent;padding-inline:10px}
.btn.quiet:hover{background:var(--blue-soft)}
.btn.danger{background:var(--red)}
.btn.danger:hover{background:var(--red)}
.btn.sm{min-height:34px;padding:0 12px;border-radius:9px;font-size:13.5px}
.btn.wide{width:100%}
.btn.big{min-height:54px;font-size:17px;border-radius:15px}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--text-2)}
.field .hint{font-size:12.5px;color:var(--text-3)}
.input,select.input,textarea.input{
  width:100%;min-height:var(--tap);padding:10px 13px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);transition:border-color .12s,background .12s;
}
.input:focus{background:var(--surface);border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-soft)}
textarea.input{min-height:92px;resize:vertical;line-height:1.5}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:34px}
html[dir="rtl"] select.input{background-position:17px 50%,22px 50%}

.seg{display:inline-flex;background:var(--surface-3);border-radius:11px;padding:3px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{
  border:0;background:transparent;color:var(--text-2);padding:7px 13px;border-radius:8px;font-weight:600;
  font-size:13.5px;white-space:nowrap;min-height:34px;
}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(16,24,40,.12)}

.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:650;background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.chip.ok{background:var(--green-soft);color:var(--green)}
.chip.warn{background:var(--amber-soft);color:var(--amber)}
.chip.bad{background:var(--red-soft);color:var(--red)}
.chip.info{background:var(--blue-soft);color:var(--blue)}
.chip.cold{background:var(--freezer);color:var(--freezer-text)}
.dot{width:7px;height:7px;border-radius:999px;background:currentColor;flex:0 0 7px}

.empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:46px 20px;color:var(--text-3)}
.empty h3{color:var(--text-2)}
.empty svg{opacity:.55}

.banner{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-m);font-size:13.5px;line-height:1.45}
.banner.info{background:var(--blue-soft);color:var(--blue-deep)}
:root[data-theme="dark"] .banner.info{color:var(--blue-deep)}
.banner.warn{background:var(--amber-soft);color:var(--amber)}
.banner.bad{background:var(--red-soft);color:var(--red)}

/* ---------- stats ---------- */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 15px}
.stat .k{font-size:12px;color:var(--text-3);font-weight:600}
.stat .v{font-size:26px;font-weight:680;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums}
.stat.accent .v{color:var(--blue)}
.stat.warn .v{color:var(--amber)}
.stat.bad .v{color:var(--red)}

/* ---------- item list ---------- */
.list{display:flex;flex-direction:column}
.list>*+*{border-top:1px solid var(--line-soft)}
.item{display:flex;align-items:center;gap:13px;padding:11px 15px;width:100%;background:transparent;border:0;text-align:start;min-height:66px}
.item:hover{background:var(--surface-2)}
.thumb{
  width:46px;height:46px;flex:0 0 46px;border-radius:11px;object-fit:cover;background:var(--surface-3);
  display:grid;place-items:center;color:var(--text-3);font-size:18px;overflow:hidden;border:1px solid var(--line-soft);
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.item .nm{font-weight:600;letter-spacing:-.01em;line-height:1.3}
.item .meta{font-size:12.5px;color:var(--text-3);display:flex;gap:7px;flex-wrap:wrap;margin-top:2px;align-items:center}
.item .right{margin-inline-start:auto;text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.qtyline{font-variant-numeric:tabular-nums;font-weight:640;font-size:15px}
.qtyline .of{color:var(--text-3);font-weight:500}

@media(max-width:560px){
  .item{flex-wrap:wrap;row-gap:4px;padding-block:12px}
  .item .right{flex:1 1 100%;flex-direction:row;justify-content:flex-end;align-items:center;gap:9px;margin-inline-start:0}
  .item .meta{font-size:12px}
  .crow{padding-inline:11px;gap:9px}
  .crow .nm{font-size:14px}
  .stepper input{width:52px}
  .stepper button{width:36px}
}

/* ---------- count mode ---------- */
.count-wrap{max-width:760px;margin:0 auto}
.progress{height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.progress i{display:block;height:100%;background:var(--blue);transition:width .3s ease;border-radius:999px}
.zone{border-radius:var(--r-l);border:1px solid var(--line);overflow:hidden;background:var(--surface)}
.zone.freezer{background:var(--freezer);border-color:var(--freezer-line)}
.zone-head{display:flex;align-items:center;gap:9px;padding:12px 15px;font-weight:650;letter-spacing:-.01em}
.zone.freezer .zone-head{color:var(--freezer-text)}
.zone-head .cnt{margin-inline-start:auto;font-size:12.5px;font-weight:600;color:var(--text-3)}
.zone.freezer .zone-head .cnt{color:var(--freezer-text);opacity:.8}
.zone-body>*+*{border-top:1px solid var(--line-soft)}
.zone.freezer .zone-body>*+*{border-top-color:var(--freezer-line)}
.zone-join{height:14px;width:3px;background:var(--freezer-line);margin:0 auto}
.crow{display:flex;align-items:center;gap:12px;padding:9px 14px}
.crow .nm{font-weight:600;line-height:1.25}
.crow .sub{font-size:12px;color:var(--text-3)}
.zone.freezer .crow .sub{color:var(--freezer-text);opacity:.75}
.stepper{margin-inline-start:auto;display:flex;align-items:center;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stepper button{width:40px;height:42px;border:0;background:transparent;font-size:19px;font-weight:600;color:var(--blue);display:grid;place-items:center}
.stepper button:hover{background:var(--blue-soft)}
.stepper input{width:62px;height:42px;border:0;border-inline:1px solid var(--line);background:transparent;text-align:center;font-weight:670;font-variant-numeric:tabular-nums;font-size:16px}
.stepper input:focus{outline:none;background:var(--blue-soft)}
.countbar{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 0 0;background:linear-gradient(to top,var(--bg) 62%,transparent)}
@media(max-width:860px){.countbar{position:fixed;inset-inline:0;bottom:calc(62px + env(safe-area-inset-bottom));padding:12px 15px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line-soft);z-index:40}
.count-wrap{padding-bottom:78px}}

/* ---------- sheet / modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(8,11,18,.45);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .16s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.sheet{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;width:min(560px,100%);
  max-height:min(86dvh,860px);display:flex;flex-direction:column;box-shadow:var(--shadow-lift);animation:rise .2s cubic-bezier(.2,.7,.3,1);
}
.sheet-head{display:flex;align-items:center;gap:10px;padding:16px 18px 12px}
.sheet-head h2{font-size:18px}
.sheet-body{padding:2px 18px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.sheet-foot{padding:12px 18px 16px;display:flex;gap:10px;border-top:1px solid var(--line-soft)}
.sheet-foot .btn{flex:1}
.x{margin-inline-start:auto;width:32px;height:32px;border-radius:999px;border:0;background:var(--surface-3);color:var(--text-2);display:grid;place-items:center;font-size:16px;line-height:1}
@media(max-width:600px){
  .scrim{padding:0;align-items:flex-end}
  .sheet{border-radius:22px 22px 0 0;max-height:92dvh;width:100%}
  .sheet-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* ---------- login ---------- */
.auth{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 18px;background:
  radial-gradient(1100px 520px at 50% -8%,var(--blue-soft),transparent 70%),var(--bg)}
.auth-card{width:min(430px,100%);background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-lift);padding:28px 24px 24px;display:flex;flex-direction:column;gap:18px}
.auth-mark{width:54px;height:54px;border-radius:16px;background:linear-gradient(160deg,var(--blue),var(--blue-deep));display:grid;place-items:center;color:#fff;font-weight:700;font-size:22px;margin:0 auto}
.pin-dots{display:flex;gap:13px;justify-content:center}
.pin-dot{width:17px;height:17px;border-radius:999px;border:2px solid var(--line);transition:all .14s ease}
.pin-dot.on{background:var(--blue);border-color:var(--blue);transform:scale(1.07)}
.pin-dot.err{border-color:var(--red);background:var(--red)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.key{
  height:60px;border-radius:16px;border:1px solid var(--line);background:var(--surface-2);
  font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;transition:transform .07s,background .12s;
}
.key:active{transform:scale(.95);background:var(--blue-soft)}
.key.fn{font-size:15px;font-weight:600;color:var(--text-2);background:transparent;border-color:transparent}
.shake{animation:shake .38s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.lang-pills{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.lang-pills button{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--text-2);min-height:36px}
.lang-pills button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- audit ---------- */
.log{display:flex;flex-direction:column}
.log>*+*{border-top:1px solid var(--line-soft)}
.logrow{display:flex;gap:12px;padding:12px 15px;align-items:flex-start}
.logrow .who{width:34px;height:34px;flex:0 0 34px;border-radius:999px;background:var(--surface-3);display:grid;place-items:center;font-size:12px;font-weight:670;color:var(--text-2)}
.logrow .txt{flex:1;min-width:0;font-size:14px;line-height:1.42}
.logrow .txt b{font-weight:660}
.logrow .when{font-size:12px;color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.daymark{padding:9px 15px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);background:var(--surface-2)}

/* ---------- notes ---------- */
.note{display:flex;flex-direction:column;gap:9px;padding:14px 15px}
.note .head{display:flex;align-items:center;gap:9px}
.note .body{font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.note .tr{background:var(--blue-soft);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.5;white-space:pre-wrap;color:var(--text)}
.note .tr .lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:4px}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border-radius:var(--r-m)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:start;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:700;padding:9px 12px;background:var(--surface-2);white-space:nowrap}
td{padding:10px 12px;border-top:1px solid var(--line-soft);white-space:nowrap}
td.wrap{white-space:normal;min-width:150px}
.money{font-variant-numeric:tabular-nums;font-weight:620}

/* ---------- misc ---------- */
.toast{position:fixed;inset-inline:0;bottom:calc(78px + env(safe-area-inset-bottom));display:flex;justify-content:center;z-index:200;pointer-events:none;padding:0 16px}
.toast div{background:var(--text);color:var(--bg);padding:11px 18px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:var(--shadow-lift);animation:rise .2s}
@media(min-width:861px){.toast{bottom:26px}}
.spin{width:17px;height:17px;border-radius:999px;border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:sk 1.3s ease infinite;border-radius:10px}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.grid2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
.photo-slot{position:relative;width:96px;height:96px;border-radius:16px;border:1.5px dashed var(--line);background:var(--surface-2);display:grid;place-items:center;overflow:hidden;color:var(--text-3);cursor:pointer}
.photo-slot img{width:100%;height:100%;object-fit:cover}
.photo-slot input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pan-group{padding:12px 15px}
.pan-group h3{font-size:15px;display:flex;align-items:center;gap:8px}
.pan-items{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.pan-pill{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:999px;padding:4px 11px 4px 5px;font-size:13px;font-weight:560}
.pan-pill .mini{width:22px;height:22px;border-radius:999px;object-fit:cover;background:var(--surface-3);display:grid;place-items:center;font-size:10px;overflow:hidden}
.pan-pill .mini img{width:100%;height:100%;object-fit:cover}
.pan-pill b{font-variant-numeric:tabular-nums;color:var(--text-2)}

/* =====================================================================
   MÓDULOS NUEVOS
   ===================================================================== */

/* ---------- acentos por sección ---------- */
.sec-line{
  --accent:#e0362c; --accent-press:#c22a21; --accent-soft:#fdeceb; --accent-deep:#8f1e17;
}
:root[data-theme="dark"] .sec-line, :root:not([data-theme="light"]) .sec-line{}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sec-line{ --accent:#ff6a5e; --accent-soft:#3a1a17; --accent-deep:#ffb0a8; }
}
:root[data-theme="dark"] .sec-line{ --accent:#ff6a5e; --accent-soft:#3a1a17; --accent-deep:#ffb0a8; }
.sec-line .btn{background:var(--accent)}
.sec-line .btn:hover{background:var(--accent-press)}
.sec-line .btn.ghost{background:var(--surface);color:var(--text)}
.sec-line .btn.quiet{background:transparent;color:var(--accent)}
.sec-line .btn.quiet:hover{background:var(--accent-soft)}
.sec-line .chip.info{background:var(--accent-soft);color:var(--accent)}
.sec-line .progress i{background:var(--accent)}
.sec-line .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sec-line .navbtn[aria-current="true"]{background:var(--accent-soft);color:var(--accent)}
.beta{
  display:inline-flex;align-items:center;gap:5px;background:var(--accent);color:#fff;
  border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.stationcard{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden}
.stationcard>header{
  display:flex;align-items:center;gap:9px;padding:12px 15px;background:var(--accent-soft);color:var(--accent-deep);
  border-bottom:1px solid var(--line-soft);font-weight:680;letter-spacing:-.01em;
}
.stationcard>header .cnt{margin-inline-start:auto;font-size:12.5px;font-weight:650;opacity:.85}
.taskrow{display:flex;align-items:center;gap:12px;padding:11px 15px;min-height:56px}
.taskrow+.taskrow{border-top:1px solid var(--line-soft)}
.taskrow.done .tname{text-decoration:line-through;color:var(--text-3)}
.tick{
  width:30px;height:30px;flex:0 0 30px;border-radius:999px;border:2px solid var(--line);background:transparent;
  display:grid;place-items:center;color:transparent;transition:all .13s ease;
}
.tick[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.tname{font-weight:600;line-height:1.3}

/* ---------- home / blog ---------- */
.feed{display:flex;flex-direction:column;gap:16px;width:100%;max-width:660px;margin:0 auto}
.compose{
  display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);text-align:start;
}
.compose:hover{background:var(--surface-2)}
.compose .ph{flex:1;color:var(--text-3);font-size:15px}
.compose .go{width:32px;height:32px;border-radius:999px;background:var(--blue);color:#fff;display:grid;place-items:center;flex:0 0 32px}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.post-top{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;flex-wrap:wrap}
.post-top .who{display:flex;flex-direction:column;line-height:1.25;margin-inline-end:auto}
.post-top .who b{font-weight:640;font-size:14.5px}
.post-top .when{font-size:12.5px;color:var(--text-3)}
.post-title{font-size:22px;line-height:1.22;padding:0 16px 10px;letter-spacing:-.025em}
.post .cover{width:100%;max-height:420px;object-fit:cover;background:var(--surface-3);display:block;cursor:zoom-in}
.post .vid{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.clamp{position:relative;padding:14px 16px 16px}
.clamp.cut{max-height:340px;overflow:hidden}
.clamp.cut::after{content:"";position:absolute;inset-inline:0;bottom:0;height:110px;background:linear-gradient(transparent,var(--surface))}
.morebtn{position:absolute;inset-inline:0;bottom:10px;margin:0 auto;z-index:2;border:1px solid var(--line);background:var(--surface);color:var(--blue);font-weight:640;border-radius:999px;padding:7px 18px;min-height:38px;display:block}
.post-foot{display:flex;gap:4px;padding:0 12px 12px}
.post .rich{font-size:16px;line-height:1.68;color:var(--text);word-break:break-word}
.post .rich>*+*{margin-top:12px}
.post .rich h2{font-size:19px;color:var(--text);margin:18px 0 0;letter-spacing:-.02em}
.post .rich h3{font-size:16.5px;color:var(--text);margin:16px 0 0;letter-spacing:-.015em}
.post .rich ul,.post .rich ol{margin:10px 0;padding-inline-start:22px}
.post .rich li{margin:6px 0}
.post .rich li::marker{color:var(--blue)}
.post .rich p{margin:0}
.post .rich img{border-radius:12px;margin:8px 0;max-width:100%}
.post .rich a{color:var(--blue);text-decoration:underline}
.post .rich blockquote{margin:8px 0;padding:6px 0 6px 12px;border-inline-start:3px solid var(--blue);color:var(--text-2);font-style:italic}

.kind-receta{background:#fdf1dc;color:#9a5f00}
.kind-menu{background:#e8f0ff;color:#0a4d9e}
.kind-tip{background:#e3f6ec;color:#137a43}
.kind-video{background:#f2e8ff;color:#6b31b8}
.kind-aviso{background:var(--surface-3);color:var(--text-2)}
:root[data-theme="dark"] .kind-receta,:root[data-theme="dark"] .kind-menu,:root[data-theme="dark"] .kind-tip,:root[data-theme="dark"] .kind-video{filter:brightness(.42) saturate(1.5);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kind-receta,:root:not([data-theme="light"]) .kind-menu,:root:not([data-theme="light"]) .kind-tip,:root:not([data-theme="light"]) .kind-video{filter:brightness(.42) saturate(1.5);color:#fff}}

/* editor de texto */
.editor-bar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;background:var(--surface-2);border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}
.editor-bar button{min-height:34px;min-width:34px;padding:0 9px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-2);font-weight:700;font-size:13.5px}
.editor-bar button:hover{background:var(--surface-3);color:var(--text)}
.editor-bar select{height:34px;border-radius:8px;border:1px solid var(--line);background:var(--surface);padding:0 6px;font-size:13px}
.editor-bar .div{width:1px;background:var(--line);margin:4px 3px}
.editor{
  min-height:190px;max-height:46vh;overflow-y:auto;padding:13px;border:1px solid var(--line);border-radius:0 0 12px 12px;
  background:var(--surface-2);line-height:1.6;font-size:15px;
}
.editor:focus{outline:none;background:var(--surface);border-color:var(--blue)}
.editor:empty:before{content:attr(data-ph);color:var(--text-3)}
.editor img{max-width:100%;border-radius:10px}

/* ---------- tickets ---------- */
.ticket{display:flex;gap:13px;padding:14px 15px;align-items:flex-start}
.ticket+.ticket{border-top:1px solid var(--line-soft)}
.ticket .icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:var(--surface-3);color:var(--text-2)}
.ticket.equipo .icon{background:var(--blue-soft);color:var(--blue)}
.ticket.reporte .icon{background:var(--red-soft);color:var(--red)}
.ticket .tt{font-weight:650;line-height:1.3}
.ticket .bd{font-size:14px;color:var(--text-2);line-height:1.5;margin-top:3px;white-space:pre-wrap;word-break:break-word}
.ticket .trail{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:7px}
.reply{background:var(--blue-soft);border-radius:12px;padding:10px 12px;margin-top:9px;font-size:14px;line-height:1.5}
.reply .lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin-bottom:3px}
.arch{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.yearpill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 13px;font-weight:650;font-size:13.5px;min-height:36px}
.yearpill[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.monthgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.monthgrid button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 8px;font-weight:600;font-size:13.5px;min-height:52px;display:flex;flex-direction:column;gap:2px;align-items:center}
.monthgrid button b{font-size:12px;color:var(--text-3);font-weight:600}
.monthgrid button[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.monthgrid button[aria-pressed="true"] b{color:var(--blue)}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;height:calc(100dvh - 190px);min-height:340px}
@media(max-width:860px){.chat{height:calc(100dvh - 230px)}}
.chat-scroll{flex:1;overflow-y:auto;padding:14px 4px;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:10px;max-width:min(680px,92%)}
.msg.mine{margin-inline-start:auto;flex-direction:row-reverse}
.msg .bub{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:9px 13px;box-shadow:var(--shadow);min-width:0}
.msg.mine .bub{background:var(--blue);border-color:var(--blue);color:#fff}
.msg.mine .bub .who,.msg.mine .bub .stamp{color:rgba(255,255,255,.78)}
.msg .who{font-size:12px;font-weight:700;color:var(--blue);margin-bottom:2px}
.msg .txt{font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.msg .stamp{font-size:11px;color:var(--text-3);margin-top:3px;display:flex;gap:6px;align-items:center}
.msg .mark{font-style:italic;opacity:.8}
.msg .media{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.msg .media img{max-width:210px;border-radius:11px;display:block;cursor:zoom-in}
.msg .gone .txt{color:var(--text-3);font-style:italic}
.ghost-orig{
  border:1px dashed var(--line);border-radius:12px;padding:7px 11px;margin-bottom:6px;
  font-size:13px;line-height:1.45;opacity:.55;background:var(--surface-2);color:var(--text-2);white-space:pre-wrap;
}
.ghost-orig .lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px;color:var(--text-3)}
.composer{display:flex;gap:8px;align-items:flex-end;padding:10px 0 0;border-top:1px solid var(--line-soft)}
.composer textarea{flex:1;min-height:46px;max-height:150px;resize:none;border-radius:16px;padding:11px 15px}
.composer .icobtn{width:46px;height:46px;flex:0 0 46px;border-radius:999px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--text-2);position:relative;overflow:hidden}
.composer .icobtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.composer .send{width:46px;height:46px;flex:0 0 46px;border-radius:999px;border:0;background:var(--blue);color:#fff;display:grid;place-items:center}
.pending-media{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:8px}
.pending-media .pm{position:relative;width:62px;height:62px;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.pending-media .pm img{width:100%;height:100%;object-fit:cover}
.pending-media .pm button{position:absolute;top:2px;inset-inline-end:2px;width:20px;height:20px;border-radius:999px;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:11px;display:grid;place-items:center}

/* ---------- pasar lista v2 ---------- */
.cstat{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cardline{display:flex;gap:13px;padding:13px 15px;align-items:center;position:relative}
.cardline+.cardline{border-top:1px solid var(--line-soft)}
.cardline.touched{background:color-mix(in srgb,var(--green-soft) 55%,transparent)}
.zone.freezer .cardline.touched{background:color-mix(in srgb,var(--freezer) 55%,#fff 20%)}
.cardline .pic{width:56px;height:56px;flex:0 0 56px;border-radius:13px;overflow:hidden;background:var(--surface-3);display:grid;place-items:center;color:var(--text-3);border:1px solid var(--line-soft)}
.cardline .pic img{width:100%;height:100%;object-fit:cover}
.cardline .info{min-width:0;flex:1}
.cardline .nm2{font-weight:650;font-size:15.5px;line-height:1.25;letter-spacing:-.01em}
.cardline .sub2{font-size:12.5px;color:var(--text-3);margin-top:2px}
.cardline .done-dot{width:22px;height:22px;border-radius:999px;background:var(--green);color:#fff;display:grid;place-items:center;flex:0 0 22px}
.fracbar{display:flex;gap:6px;flex-wrap:wrap;padding:0 15px 13px 84px}
.zone.freezer .fracbar{padding-inline-start:84px}
.fracbar .fr{
  border:1px solid var(--line);background:var(--surface);border-radius:11px;min-height:44px;padding:5px 9px;
  display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:650;color:var(--text-2);min-width:56px;
}
.fracbar .fr[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.jar{width:26px;height:17px;border:1.8px solid currentColor;border-radius:3px;position:relative;overflow:hidden}
.jar i{position:absolute;left:0;right:0;bottom:0;background:currentColor;display:block}
@media(max-width:560px){.fracbar{padding-inline-start:15px}}
.reviewrow{display:flex;gap:12px;align-items:center;padding:10px 15px}
.reviewrow+.reviewrow{border-top:1px solid var(--line-soft)}
.delta{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.delta .old{color:var(--text-3);font-weight:500;text-decoration:line-through;margin-inline-end:6px}
.delta.up{color:var(--green)} .delta.down{color:var(--red)}

/* ---------- panorámica con fotos ---------- */
.pangrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;padding:12px 15px 16px}
.pancard{border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:var(--surface-2);display:flex;flex-direction:column}
.pancard .ph{width:100%;aspect-ratio:1;object-fit:cover;background:var(--surface-3);display:grid;place-items:center;color:var(--text-3);font-weight:700;font-size:19px}
.pancard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.pancard .lb{padding:7px 8px 8px;display:flex;flex-direction:column;gap:2px}
.pancard .lb .n{font-size:12.5px;font-weight:640;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pancard .lb .q{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.pancard.low .lb .q{color:var(--amber)} .pancard.out .lb .q{color:var(--red)} .pancard.ok .lb .q{color:var(--green)}

/* ---------- varios ---------- */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:300;display:grid;place-items:center;padding:20px}
.lightbox img{max-width:100%;max-height:100%;border-radius:12px}
.setupnote{font-size:13px;line-height:1.5}
code.k{background:var(--surface-3);padding:2px 6px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.rolechip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2)}
.rolechip.admin{background:var(--blue-soft);color:var(--blue)}
.rolechip.chef{background:var(--green-soft);color:var(--green)}
.rolechip.dish{background:var(--amber-soft);color:var(--amber)}

.sec-line .stat.accent .v{color:var(--accent)}
.sec-line .stat.accent{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.cardline .tiny{color:var(--text-3);font-weight:600}


/* =====================================================================
   LA LÍNEA v2
   ===================================================================== */
.dayhead{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.dayhead .dh-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,var(--blue))}
.dayhead h2{font-size:clamp(21px,3.4vw,27px);margin-top:2px}
.dayhead h2::first-letter{text-transform:uppercase}

.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wday{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 7px;border-radius:13px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);min-height:62px;
}
.wday .wd{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.wday .wn{font-size:17px;font-weight:680;font-variant-numeric:tabular-nums;line-height:1}
.wday .wdots{display:flex;width:26px;height:4px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.wday .wdots i{display:block;height:100%}
.wday .wdots i.ok{background:var(--green)}
.wday .wdots i.bad{background:var(--red)}
.wday.istoday{border-color:var(--accent,var(--blue))}
.wday.on{background:var(--accent,var(--blue));border-color:var(--accent,var(--blue));color:#fff}
.wday.on .wd{color:rgba(255,255,255,.8)}
.wday.on .wdots{background:rgba(255,255,255,.28)}
.wday.future{opacity:.38;pointer-events:none}

.prep{display:flex;gap:12px;padding:12px 15px;align-items:flex-start}
.prep+.prep{border-top:1px solid var(--line-soft)}
.prep.hecho{background:color-mix(in srgb,var(--green-soft) 45%,transparent)}
.prep.falta{background:color-mix(in srgb,var(--red-soft) 45%,transparent)}
.prep-pic{
  width:52px;height:52px;flex:0 0 52px;border-radius:13px;overflow:hidden;background:var(--surface-3);
  display:grid;place-items:center;color:var(--text-3);border:1px solid var(--line-soft);
}
.prep-pic img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
.prep-name{font-weight:650;font-size:15.5px;line-height:1.3;letter-spacing:-.01em}
.prep.hecho .prep-name{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--green) 60%,transparent)}
.prep-sub{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12.5px;color:var(--text-3);margin-top:3px}
.prep-note{
  margin-top:8px;background:var(--surface);border:1px solid var(--line-soft);border-inline-start:3px solid var(--red);
  border-radius:0 11px 11px 0;padding:8px 11px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;
}
.prep-note .lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:3px}
.prep-acts{display:flex;align-items:center;gap:8px;margin-inline-start:auto;flex-wrap:nowrap}
.prep-state{display:inline-flex}
.qbtn{
  min-height:38px;padding:0 13px;border-radius:11px;border:1px solid var(--line);background:var(--surface);
  color:var(--text-2);font-weight:620;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.qbtn:hover{background:var(--surface-2);color:var(--text)}
.qbtn.ok{background:var(--green);border-color:var(--green);color:#fff;width:44px;padding:0;justify-content:center}
.qbtn.ok:hover{filter:brightness(1.08);background:var(--green);color:#fff}

.bigpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bp{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:88px;
  border-radius:16px;border:2px solid var(--line);background:var(--surface-2);color:var(--text-2);font-weight:680;font-size:15px;
}
.bp.ok.on{border-color:var(--green);background:var(--green-soft);color:var(--green)}
.bp.bad.on{border-color:var(--red);background:var(--red-soft);color:var(--red)}

@media(max-width:560px){
  .prep{flex-wrap:wrap}
  .prep-acts{flex-direction:row;flex-basis:100%;justify-content:flex-end;margin-inline-start:0;align-items:center}
  .prep-pic{width:46px;height:46px;flex:0 0 46px}
  .weekstrip{gap:4px}
  .wday{min-height:56px;padding:7px 1px 6px;border-radius:11px}
  .wday .wn{font-size:15px}
  .post-title{font-size:19px}
  .clamp{padding:12px 14px 14px}
  .post .rich{font-size:15.5px}
}

.linesum{
  display:flex;align-items:center;gap:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;position:relative;padding-bottom:4px;
}
.linesum .ls{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:11px 6px 10px}
.linesum .ls + .ls{border-inline-start:1px solid var(--line-soft)}
.linesum .ls b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--text-2)}
.linesum .ls span{font-size:11.5px;font-weight:640;color:var(--text-3);letter-spacing:.02em}
.linesum .ls.ok b{color:var(--green)}
.linesum .ls.bad b{color:var(--red)}
.linesum .lsbar{position:absolute;inset-inline:0;bottom:0;height:4px;display:flex;background:var(--surface-3)}
.linesum .lsbar i{display:block;height:100%}
.linesum .lsbar i.ok{background:var(--green)}
.linesum .lsbar i.bad{background:var(--red)}
@media(max-width:560px){
  .linesum .ls b{font-size:19px}
  .prep-acts{gap:6px}
  .qbtn{font-size:13px;padding:0 11px}
}

/* ---------- paginación ---------- */
.pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;padding:2px 2px 4px}
.prange{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.pnums{display:flex;align-items:center;gap:4px;margin-inline-start:auto;flex-wrap:wrap}
.pbtn{
  min-width:38px;height:38px;padding:0 10px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);color:var(--text-2);font-weight:640;font-size:14px;
  font-variant-numeric:tabular-nums;display:inline-grid;place-items:center;
}
.pbtn:hover{background:var(--surface-2);color:var(--text)}
.pbtn.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pbtn.ghost{border-color:transparent;background:transparent;font-size:19px;line-height:1}
.pbtn[disabled]{opacity:.32;pointer-events:none}
.pgap{color:var(--text-3);padding:0 2px;font-weight:600}
@media(max-width:560px){
  .pager{justify-content:center}
  .pnums{margin-inline-start:0}
  .prange{width:100%;text-align:center}
  .pbtn{min-width:36px;height:36px;padding:0 8px}
}

/* ---------- avatares con foto ---------- */
.avatar{overflow:hidden;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

.profhead{display:flex;align-items:center;gap:15px}
.avatar-pick{position:relative;cursor:pointer;border-radius:999px;display:inline-block;flex:0 0 auto}
.avatar-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;border-radius:999px}
.avatar-pick .cam{
  position:absolute;inset-block-end:-2px;inset-inline-end:-2px;width:30px;height:30px;border-radius:999px;
  background:var(--blue);color:#fff;display:grid;place-items:center;border:3px solid var(--surface);pointer-events:none;
}
.avatar-pick .cam svg{width:15px;height:15px}
.swatches{display:flex;flex-wrap:wrap;gap:9px}
.sw{width:34px;height:34px;border-radius:999px;border:3px solid transparent;box-shadow:0 0 0 1px var(--line) inset}
.sw.on{border-color:var(--surface);box-shadow:0 0 0 2.5px var(--text)}

/* ---------- secciones apagadas ---------- */
.offtag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);
  background:var(--surface-3);border-radius:999px;padding:2px 7px;margin-inline-start:auto}
.modlist{display:flex;flex-direction:column;gap:2px}
.modrow{display:flex;align-items:center;gap:11px;padding:9px 2px}
.modrow+.modrow{border-top:1px solid var(--line-soft)}
.modrow .ic{width:22px;display:grid;place-items:center;color:var(--text-3);flex:0 0 22px}
.modrow .nm{font-weight:600;flex:1}