/* ============================================================
   کاپیتان — لایه ظاهری مشترک
   دیزاین‌سیستم برگرفته از نمونه مرجع v37
   هیچ صفحه‌ای نباید رنگ یا اندازه خام بنویسد؛ همه از اینجا می‌آید.
   ============================================================ */

/* ---------- فونت — روی خود سرور، نه گوگل ---------- */
@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap}

/* ---------- متغیرها ---------- */
:root{
  --navy:#1B3A57; --paper:#F7F4EE; --card:#FFFFFF; --soft:#FBF9F5;
  --ink:#22303C; --muted:#6B7A88; --line:#E3DED4;
  --brass:#A97B1F; --brass-bg:#F6EDD8;
  --red:#B3372B;   --red-bg:#F9E8E5;
  --green:#2E7D4F; --green-bg:#E6F2EA;
  --blue:#2C5F8A;  --blue-bg:#E8EFF6;
  --plum:#6B4A7A;  --plum-bg:#F0EAF3;
  --slate:#5A6670; --slate-bg:#ECEEF0;
  --shadow:0 2px 10px rgba(27,58,87,.06);
  --bar-h:52px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Vazirmatn','Vazir','IRANSans','IRANYekan',system-ui,'Segoe UI',Tahoma,sans-serif;
  background:var(--paper);color:var(--ink);font-size:15px;line-height:1.75;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
body.plain{padding-bottom:0}
a{color:inherit}
b,strong{font-weight:700}

/* هر رشته‌ای که باید چپ‌به‌راست خوانده شود */
.ltr,input.ltr,[dir=ltr]{direction:ltr;unicode-bidi:isolate;text-align:right}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

/* ============================================================
   نوار بالا
   ============================================================ */
.appbar{
  background:var(--navy);color:#fff;position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:10px;padding:0 12px;height:var(--bar-h);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.appbar .back{
  flex:0 0 auto;width:32px;height:32px;border-radius:99px;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.12);
  text-decoration:none;color:#fff;font-size:17px;line-height:1;
}
.appbar .back:hover{background:rgba(255,255,255,.2)}
.appbar .ttl{flex:1;min-width:0}
.appbar .ttl b{display:block;font-size:16px;font-weight:700;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar .ttl s{display:block;text-decoration:none;font-size:11px;line-height:1.4;
  color:rgba(255,255,255,.66);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar .act{
  flex:0 0 auto;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;
  font-size:12.5px;font-family:inherit;border:none;cursor:pointer;
  border-radius:9px;padding:7px 12px;line-height:1.3;
}
.appbar .act:hover{background:rgba(255,255,255,.2)}
.appbar .act svg,.appbar .back svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.appbar .act:has(svg){padding:7px 9px}
.appbar .act.hi{background:var(--brass)}

/* ============================================================
   نوار پایین
   ============================================================ */
.tabbar{
  position:fixed;bottom:0;right:0;left:0;z-index:29;
  background:var(--card);border-top:1px solid var(--line);
  display:flex;padding:4px 4px calc(4px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(27,58,87,.05);
}
.tabbar a{
  flex:1 1 0;min-width:0;text-decoration:none;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 2px 5px;border-radius:11px;position:relative;
}
.tabbar a svg{width:21px;height:21px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar a span{font-size:10.5px;font-weight:500;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tabbar a.on{color:var(--navy);background:var(--blue-bg)}
.tabbar a.on span{font-weight:700}
.tabbar a i{
  position:absolute;top:2px;left:50%;margin-left:5px;font-style:normal;
  background:var(--red);color:#fff;border-radius:99px;min-width:16px;
  padding:0 4px;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;
}

/* ============================================================
   چیدمان
   ============================================================ */
.wrap{max-width:760px;margin:0 auto;padding:14px 12px 20px}
.wrap.narrow{max-width:620px}
.wrap.wide{max-width:1060px}

/* ============================================================
   کارت و بخش
   ============================================================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;margin-bottom:11px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.card.soft{background:var(--soft)}
.card>h2{font-size:14.5px;font-weight:700;margin-bottom:3px}
.card>.sub{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:11px}
.card>.sub:last-child{margin-bottom:0}
.sec{font-size:12.5px;font-weight:700;color:var(--muted);
  margin:16px 2px 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.sec:first-child{margin-top:2px}
.grp{font-size:12px;color:var(--muted);font-weight:700;margin:14px 2px 6px}

/* ============================================================
   دکمه
   ============================================================ */
.btn{
  font-family:inherit;border:1.5px solid var(--line);background:var(--card);
  color:var(--ink);border-radius:10px;font-size:14px;font-weight:500;
  cursor:pointer;padding:10px 16px;line-height:1.4;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;transition:background .15s,border-color .15s;
}
.btn:hover{background:var(--paper)}
/* بدون این، svg بی‌اندازه در دکمه فلکس تا هر جا که جا باشد باز می‌شود */
.btn svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn:active{transform:translateY(1px)}
.btn.p{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.btn.p:hover{background:#16304a}
.btn.brass{background:var(--brass);border-color:var(--brass);color:#fff;font-weight:700}
.btn.danger{background:var(--red-bg);border-color:#EFCFC9;color:var(--red);font-weight:700}
.btn.ok{background:var(--green-bg);border-color:#BFD8C6;color:var(--green);font-weight:700}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:8px}
.btn.full{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btns.end{justify-content:flex-end}

/* ============================================================
   فرم
   ============================================================ */
.field{margin-bottom:11px}
.field label{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:5px}
.field label .req{color:var(--red)}
input[type=text],input[type=tel],input[type=number],input:not([type]),select,textarea{
  width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;
  font-family:inherit;font-size:14.5px;background:#fff;color:var(--ink);line-height:1.6;
}
select{appearance:none;-webkit-appearance:none;padding-left:30px;
  background-repeat:no-repeat;background-position:left 10px center;background-size:11px 7px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236B7A88' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
textarea{resize:vertical;min-height:76px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:1px;
  border-color:var(--navy)}
input::placeholder,textarea::placeholder{color:#C4BFB4;opacity:1;font-weight:400}
input.bad,select.bad{border-color:var(--red);background:#FFF7F6}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--navy)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.inline>input,.inline>select{flex:1;min-width:130px;width:auto}
.inline>.btn{flex:0 0 auto}

/* ============================================================
   کادر ساعت و تاریخ — چند خانه در یک قاب
   هر خانه فقط جای رقم خودش را دارد، پس ورودی بی‌معنی جا نمی‌شود.
   ============================================================ */
.pickwrap{position:relative;display:block}
.psplit{display:flex;direction:ltr;align-items:center;justify-content:center;gap:0;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;
  padding:0 0 0 36px;overflow:hidden}
.psplit:focus-within{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.psplit i{font-style:normal;color:var(--muted);font-size:15px;font-weight:700;padding:0 1px}
.psplit input{border:none!important;background:transparent!important;
  font-family:inherit;font-size:16px;font-weight:700;text-align:center;padding:9px 0;
  color:var(--ink);font-variant-numeric:tabular-nums;outline:none!important;border-radius:7px}
/* ویژگی بالاتر از قاعده‌های فرم صفحه‌ها — وگرنه flex:1 آنها کادر را کش می‌دهد */
.pickwrap .psplit input{flex:0 0 44px;width:44px;min-width:0}
.pickwrap .psplit input.dyear{flex-basis:58px;width:58px}
.psplit input:focus{background:var(--blue-bg)!important}
.psplit input::placeholder{color:#C4BFB4;font-weight:400}
.pickbtn{position:absolute;left:5px;top:50%;transform:translateY(-50%);border:none;
  background:var(--paper);border-radius:8px;width:28px;height:28px;cursor:pointer;
  font-size:14px;color:var(--navy);font-family:inherit;line-height:1;padding:0}
.pickbtn:hover{background:var(--line)}
/* بدون جاوااسکریپت دکمه بی‌فایده است — تا لود نشده پنهان بماند */
.pickbtn{display:none}
.js .pickbtn{display:block}

/* ============================================================
   پنجره چرخ و تقویم
   ============================================================ */
.ovpick{position:fixed;inset:0;background:rgba(18,40,60,.55);z-index:60;
  display:none;align-items:center;justify-content:center;padding:16px}
.ovpick.on{display:flex}
.pickcard{background:var(--card);border-radius:18px;padding:14px;width:100%;max-width:340px;
  box-shadow:0 12px 34px rgba(0,0,0,.28)}
.pickhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pickhead b{font-size:15px;font-weight:700}
.pickx{width:30px;height:30px;border:1px solid var(--line);background:var(--paper);
  border-radius:9px;font-family:inherit;font-size:14px;color:var(--muted);cursor:pointer;padding:0}
.pickx:hover{background:var(--line);color:var(--ink)}
.pickfoot{display:flex;gap:8px;margin-top:12px}
.pickfoot .btn{flex:1;padding:11px}

/* چرخ ساعت */
.tpwrap{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 4px}
.tpcol{display:flex;flex-direction:column;align-items:center;gap:4px}
.tplab{font-size:11.5px;color:var(--muted)}
.tpn{border:1px solid var(--line);background:var(--card);border-radius:8px;width:62px;height:24px;
  line-height:20px;font-size:11px;color:var(--muted);cursor:pointer;font-family:inherit;padding:0}
.tpn:hover{background:var(--paper);color:var(--navy)}
.tpn.wide{width:auto;padding:0 10px}
.tpwheel{height:108px;width:80px;overflow-y:auto;scroll-snap-type:y mandatory;padding:36px 0;
  border:1.5px solid var(--line);border-radius:11px;background:var(--paper);position:relative}
.tpwheel::-webkit-scrollbar{width:0}
.tpi{height:36px;line-height:36px;text-align:center;font-size:19px;font-weight:700;
  scroll-snap-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.tpi.on{color:var(--navy)}
.tpsep{font-size:20px;font-weight:700;color:var(--muted);margin-top:22px}
.tpprev{text-align:center;font-size:18px;font-weight:700;color:var(--brass);
  font-variant-numeric:tabular-nums;margin:4px 0 2px}

/* تقویم شمسی */
.dpnav{display:flex;align-items:center;gap:4px;margin-bottom:9px}
.dpnav b{flex:1;text-align:center;font-size:14px;font-weight:700;color:var(--navy);
  white-space:nowrap;min-width:0}
.dpnav .tpn{flex:0 0 auto;height:28px;line-height:24px}
.dpnav .tpn.wide{font-size:10.5px;padding:0 7px}
.dpwk{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px}
.dpwk span{text-align:center;font-size:10.5px;color:var(--muted);font-weight:700}
.dpgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dpblank{display:block}
.dpday{aspect-ratio:1;border:1px solid transparent;background:var(--paper);border-radius:8px;
  font-family:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.dpday:hover{background:var(--line)}
.dpday.fri{color:var(--red)}
.dpday.today{border-color:#C9B48A;color:var(--brass);font-weight:700}
.dpday.on{background:var(--navy);color:#fff;font-weight:700;border-color:var(--navy)}

/* انتخاب چندتایی — نقش‌ها */
.picks{display:flex;flex-wrap:wrap;gap:6px}
.pick{position:relative}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick span{display:block;padding:8px 14px;border-radius:99px;border:1.5px solid var(--line);
  background:var(--card);font-size:12.5px;cursor:pointer;user-select:none;line-height:1.4}
.pick input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:700}
.pick input:focus-visible+span{outline:2px solid var(--brass);outline-offset:2px}

/* کلید روشن/خاموش */
.sw{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.sw:last-of-type{border-bottom:none}
.sw .l{flex:1;min-width:0}
.sw .l b{display:block;font-size:13px;font-weight:700}
.sw .l s{display:block;text-decoration:none;font-size:11.5px;color:var(--muted);line-height:1.6}

/* ============================================================
   زبانه
   ============================================================ */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 1px 8px;margin-bottom:4px}
.tabs::-webkit-scrollbar{height:0}
.tabs a,.tabs button{
  flex:0 0 auto;text-decoration:none;font-family:inherit;font-size:12.5px;
  padding:7px 14px;border-radius:99px;background:var(--card);
  border:1px solid var(--line);color:var(--ink);white-space:nowrap;cursor:pointer;
  display:flex;align-items:center;gap:6px;line-height:1.5;
}
.tabs a:hover{background:var(--paper)}
.tabs a.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:700}
.tabs a b{background:var(--paper);color:var(--muted);border-radius:99px;padding:0 6px;
  font-size:11px;font-weight:700;min-width:18px;text-align:center;
  font-variant-numeric:tabular-nums}
.tabs a.on b{background:rgba(255,255,255,.22);color:#fff}
.tabs a i{font-style:normal;background:var(--red);color:#fff;border-radius:99px;
  padding:0 6px;font-size:11px;font-weight:700;min-width:18px;text-align:center}
.tabs a.on i{background:#fff;color:var(--red)}

/* ============================================================
   ردیف فهرست
   ============================================================ */
.row{display:flex;align-items:center;gap:9px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-bottom:6px;
  text-decoration:none;color:var(--ink);width:100%;text-align:right;font-family:inherit;
  font-size:14px}
a.row:hover,button.row:hover{background:var(--soft);border-color:#D6CFC2}
.row .nm{flex:1;min-width:0;font-weight:700;font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .nm s{display:block;text-decoration:none;font-size:11px;color:var(--muted);
  font-weight:400;margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.row .nm i{font-style:normal;font-weight:700;font-size:10.5px;color:var(--muted);
  background:var(--paper);border-radius:99px;padding:1px 7px;margin-right:5px;
  direction:ltr;unicode-bidi:isolate}
.row .side{flex:0 0 auto;font-size:11.5px;color:var(--muted);
  direction:ltr;unicode-bidi:isolate}
.row .k{flex:0 0 8.5em;font-size:12px;color:var(--muted)}
.row .v{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis}

/* کد دستگاه */
.code{font-size:11.5px;background:var(--paper);color:var(--muted);border-radius:99px;
  padding:2px 9px;direction:ltr;unicode-bidi:isolate;font-weight:700;flex:0 0 auto;
  font-variant-numeric:tabular-nums;border:1px solid var(--line)}
.code.no{background:var(--red-bg);color:var(--red);border-color:#EFCFC9}

/* ============================================================
   نشان
   ============================================================ */
.tag{font-size:10.5px;padding:2px 9px;border-radius:99px;font-weight:700;
  white-space:nowrap;display:inline-block;line-height:1.7;flex:0 0 auto}
.tag.gray ,.t-lv,.s-lead,.m-none{background:var(--slate-bg);color:var(--slate)}
.tag.green,.t-in,.s-cur,.m-ok,.g-full,.t-ok{background:var(--green-bg);color:var(--green)}
.tag.red  ,.t-bad,.s-out,.m-late,.g-min,.t-no{background:var(--red-bg);color:var(--red)}
.tag.brass,.t-fx,.s-hold,.m-open,.g-part,.t-w{background:var(--brass-bg);color:var(--brass)}
.tag.blue{background:var(--blue-bg);color:var(--blue)}
.tag.plum{background:var(--plum-bg);color:var(--plum)}
.dawn{font-size:9.5px;background:var(--slate-bg);color:var(--slate);
  border-radius:99px;padding:1px 7px;font-weight:500;white-space:nowrap}

/* ============================================================
   پیام و یادداشت
   ============================================================ */
.msg{padding:10px 13px;border-radius:11px;font-size:12.5px;margin-bottom:12px;
  line-height:1.8;border:1px solid transparent}
.msg.good{background:var(--green-bg);color:var(--green);border-color:#BFD8C6}
.msg.bad {background:var(--red-bg);  color:var(--red);  border-color:#EFCFC9}
.msg.warn{background:var(--brass-bg);color:#8A6613;     border-color:#E8D3A6}
.msg b{display:block;font-weight:700;margin-bottom:3px}
.note{background:var(--brass-bg);color:#8A6613;border:1px solid #E8D3A6;
  border-radius:11px;padding:11px 13px;font-size:12.5px;line-height:1.9;margin-bottom:12px}
.note b{display:block;font-weight:700;margin-bottom:4px;font-size:13px}
.hint{font-size:11.5px;color:var(--muted);line-height:1.85;margin:7px 0}
.hint.bad{color:var(--red)}
.empty{text-align:center;color:var(--muted);font-size:12.5px;line-height:1.9;
  background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:24px 16px}
.empty b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px;font-weight:700}

/* ============================================================
   کلید-مقدار
   ============================================================ */
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13px;padding:6px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:none}
.kv span{color:var(--muted);flex:0 0 auto}
.kv b{direction:ltr;unicode-bidi:isolate;text-align:left;font-weight:700;
  font-variant-numeric:tabular-nums;min-width:0}
.kv b.rtl{direction:rtl}
.kv b.ok{color:var(--green)} .kv b.no{color:var(--red)} .kv b.warn{color:var(--brass)}

/* ============================================================
   کاشی عدد
   ============================================================ */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;
  margin-bottom:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 10px;text-align:center;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow);display:block}
a.tile:hover{background:var(--soft)}
.tile u{display:block;text-decoration:none;font-size:25px;font-weight:800;color:var(--navy);
  direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;line-height:1.25}
.tile u.zero{color:#C9C3B7;font-weight:500}
.tile u.warn{color:var(--red)}
.tile s{display:block;text-decoration:none;color:var(--muted);font-size:11.5px;
  margin-top:2px;font-weight:500}

/* ============================================================
   منوی صفحه اصلی
   ============================================================ */
.menu a{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:13px 14px;
  text-decoration:none;color:var(--ink);margin-bottom:8px;box-shadow:var(--shadow)}
.menu a:hover{background:var(--soft);border-color:#D6CFC2}
.menu a .ic{flex:0 0 38px;height:38px;border-radius:11px;background:var(--blue-bg);
  color:var(--navy);display:flex;align-items:center;justify-content:center}
.menu a .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.menu a .bd{flex:1;min-width:0}
.menu a b{display:block;font-size:14.5px;font-weight:700}
.menu a s{display:block;text-decoration:none;color:var(--muted);font-size:11.5px;
  margin-top:1px;line-height:1.6}
.menu a .ar{flex:0 0 auto;color:var(--line);font-size:18px;line-height:1}
.menu a i{font-style:normal;font-size:11px;background:var(--red-bg);color:var(--red);
  border-radius:99px;padding:2px 9px;font-weight:700;white-space:nowrap;flex:0 0 auto}

/* کارت معرفی بالای صفحه اصلی */
.hero{display:flex;align-items:center;gap:12px;background:var(--card)}
.hero .mark{flex:0 0 42px;height:42px;border-radius:13px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center}
.hero .mark svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero .bd{flex:1;min-width:0}
.hero .bd b{display:block;font-size:15px;font-weight:700}
.hero .bd s{display:block;text-decoration:none;color:var(--muted);font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* نوار زنده بودن دستگاه */
.live{border-radius:12px;padding:11px 14px;margin-bottom:11px;font-size:12.5px;
  line-height:1.75;border:1px solid transparent;display:flex;align-items:flex-start;gap:10px}
.live .dot{flex:0 0 9px;height:9px;border-radius:99px;background:currentColor;margin-top:7px}
.live.on .dot{box-shadow:0 0 0 4px rgba(46,125,79,.15)}
.live b{display:block;font-size:13.5px;font-weight:700}
.live.on {background:var(--green-bg);color:var(--green);border-color:#BFD8C6}
.live.off{background:var(--brass-bg);color:#8A6613;border-color:#E8D3A6}

/* ============================================================
   تقویم — شبکه روز
   ============================================================ */
.calwrap{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media(min-width:900px){
  .calwrap{grid-template-columns:288px 1fr}
  .calside{position:sticky;top:calc(var(--bar-h) + 10px)}
}
.calside .daycard{margin-bottom:10px}
.calmain{min-width:0}

/* خانه‌های تقویم ماه با شمار کار */
.cal .grid a.mday{flex-direction:column;gap:1px;height:34px;position:relative;
  background:var(--soft);border:1px solid transparent}
.cal .grid a.mday b{font-size:11.5px;font-weight:700;line-height:1}
.cal .grid a.mday i{font-style:normal;font-size:8.5px;font-weight:700;line-height:1;
  background:var(--navy);color:#fff;border-radius:99px;min-width:12px;padding:0 3px;text-align:center}
.cal .grid a.mday.today{border-color:#C9B48A;color:var(--brass)}
.cal .grid a.mday.fri b{color:var(--red)}
.cal .grid a.mday.on-day{background:var(--navy);color:#fff;outline:none}
.cal .grid a.mday.on-day b{color:#fff}
.cal .grid a.mday.on-day i{background:#fff;color:var(--navy)}

/* نوار بالای شبکه */
.gridbar{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.gridbar .legend{flex:1;margin:0;background:transparent;padding:0}
.lockbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px}
.lockbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.lockbtn.open{background:var(--brass-bg);border-color:#E8D3A6;color:var(--brass);font-weight:700}

/* شبکه */
.agwrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:8px 8px 10px}
.agwrap::-webkit-scrollbar{height:6px}
.agwrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.agtbl{min-width:0}
.aghead{display:flex;gap:4px;margin-bottom:4px}
.aghead .agh0{flex:0 0 30px}
.aghead .agh{flex:1 1 0;min-width:78px;font-size:11.5px;font-weight:700;color:var(--muted);
  text-align:center;padding:3px 2px;background:var(--paper);border-radius:7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agbody{display:flex;gap:4px;position:relative}
.agax{flex:0 0 30px;position:relative}
/* عدد ساعت باید روی خط بنشیند، نه زیرش.
   جابه‌جایی با transform است نه margin — margin ارتفاع ردیف را کم می‌کند
   و ستون ساعت کم‌کم از شبکه عقب می‌افتد. */
.agax .aghr{display:block;height:var(--ph);font-size:10px;color:var(--muted);
  text-align:left;padding-left:2px;font-variant-numeric:tabular-nums;
  line-height:1;transform:translateY(-4px)}
.agax .aghr:first-child{transform:none}
.agcol{flex:1 1 0;min-width:78px;position:relative;background:var(--soft);
  border-radius:8px;overflow:hidden}
.agcol .agln{display:block;height:var(--ph);border-top:1px solid var(--line)}
.agcol .agln:first-child{border-top:none}
.agshut{position:absolute;right:0;left:0;background:repeating-linear-gradient(
  45deg,#F0EDE6,#F0EDE6 5px,#E8E4DA 5px,#E8E4DA 10px);opacity:.7;pointer-events:none}

/* بلوک جلسه */
.ev{position:absolute;right:2px;left:2px;border-radius:7px;border-right:3px solid;
  padding:3px 5px;font-size:11px;line-height:1.35;overflow:hidden;text-decoration:none;
  display:block;box-shadow:0 1px 3px rgba(27,58,87,.12);z-index:2}
.ev .evt{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .evs{display:block;font-size:9.5px;opacity:.8;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.ev.clash{outline:2px solid var(--red);outline-offset:-2px}
.ev.done{opacity:.5}
.ev.done .evt{text-decoration:line-through}
.ev .evrz{display:none}
/* لبه پایین برای کش‌آمدن — فقط وقتی قفل باز است */
.dragon .ev{cursor:grab;touch-action:none}
.dragon .ev .evrz{display:block;position:absolute;right:0;left:0;bottom:0;height:9px;
  cursor:ns-resize;background:linear-gradient(transparent,rgba(0,0,0,.06))}
.ev.dragging{opacity:.85;z-index:20;box-shadow:0 6px 18px rgba(0,0,0,.22);cursor:grabbing}
.agcol.target{background:var(--blue-bg)}

/* کار بی‌ساعت یا بی‌اتاق */
.row.task .dot{flex:0 0 9px;height:9px;border-radius:99px}
.row.task.done{opacity:.55}
.row.task.done .nm{text-decoration:line-through}

/* پنجره جلسه */
.pickcard.wide{max-width:560px;max-height:92vh;display:flex;flex-direction:column}
.pickcard.wide .sbody{flex:1 1 auto;min-height:0;overflow-y:auto;padding-left:2px}
.pickcard.wide .pickhead{flex:0 0 auto}
.pickcard.wide .actions{display:flex;gap:9px;margin-top:14px}
.pickcard.wide .actions .btn{flex:1;padding:12px}
.pickcard .pickx{display:flex;align-items:center;justify-content:center;text-decoration:none}
.mrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mrow form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mrow input{width:auto;min-width:130px;padding:8px 10px;font-size:13px}
.pick input[type=radio]{position:absolute;opacity:0;pointer-events:none}

/* ردیف اتاق */
.row.room.off{opacity:.6}
.row.room .ord{display:flex;gap:4px}
.row.room .ord .btn{padding:5px 8px;min-width:30px}

@media(max-width:520px){
  .aghead .agh,.agcol{min-width:64px}
  .ev{font-size:10px;padding:2px 4px}
}

/* ============================================================
   جدول
   ============================================================ */
.tbl{background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow-x:auto;box-shadow:var(--shadow)}
.tbl::-webkit-scrollbar{height:6px}
.tbl::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
table{width:100%;border-collapse:collapse;font-size:13px}
.tbl.flat{border:none;border-radius:0;box-shadow:none;background:transparent;
  margin:0 -4px;padding:0 4px}
.tbl table{min-width:760px}
.tbl table.tight{min-width:0}
table.tight th{background:transparent;padding:6px 6px;font-size:11px}
table.tight td{padding:7px 6px;font-size:12px}
table.tight td.wrap{white-space:normal;min-width:8.5em;line-height:1.6}
th{background:var(--paper);font-size:11.5px;color:var(--muted);padding:9px 8px;
  text-align:right;font-weight:700;white-space:nowrap;border-bottom:1px solid var(--line)}
td{padding:9px 8px;font-size:12.5px;border-bottom:1px solid var(--line);white-space:nowrap;
  vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--soft)}
td a{color:var(--navy);text-decoration:none;font-weight:700}
td a:hover{text-decoration:underline}
td .dim,.dim{color:#C4BFB4}
td.n,.n-cell{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;
  color:var(--muted)}

/* ============================================================
   پرونده دانش‌آموز
   ============================================================ */
.filehead{padding:12px 14px}
.filehead .fh-top{display:flex;align-items:baseline;gap:8px}
.filehead .nm{font-size:17px;font-weight:800}
.filehead .no{font-size:11.5px;color:var(--muted);direction:ltr;unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;background:var(--paper);border-radius:99px;padding:1px 9px}
.filehead .fh-tags{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}

/* ردیف سه‌حالته پرونده */
.fd-row{display:flex;align-items:center;gap:8px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;flex-wrap:wrap}
.fd-row:last-child{border-bottom:none}
.fd-row.editing{border-bottom:none;padding-bottom:2px}
.fd-row .k{flex:0 0 7.5em;color:var(--muted);font-size:12.5px}
.fd-row .v{flex:1;min-width:0;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fd-row .v.no {font-weight:400;color:#C4BFB4;font-size:12.5px}
.fd-row .v.non{font-weight:400;color:var(--slate);font-size:12.5px}
.fd-row form{flex:0 0 auto;display:inline}
.fd-row.inst .k{flex:0 0 6.5em;font-weight:700;color:var(--navy)}
.fd-row.inst .v{font-weight:500}
.fd-edit{display:flex;gap:6px;padding:0 0 9px;border-bottom:1px solid var(--line);
  align-items:center;flex-wrap:wrap}
/* فقط ورودی‌های مستقیم کش می‌آیند — کادر تاریخ اندازه خودش را دارد */
.fd-edit>input,.fd-edit>select{flex:1;min-width:130px;padding:8px 10px;font-size:13.5px}
.fd-edit .btn{flex:0 0 auto;padding:8px 14px}
.fd-edit .pickwrap{flex:0 0 auto}

/* نوار پرداخت */
.payline{display:flex;align-items:center;gap:8px;margin:2px 0 10px}
.paybar{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden;display:flex}
.paybar i{height:100%;border-radius:99px;background:var(--green);display:block}
.paypct{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:34px;
  direction:ltr;unicode-bidi:isolate}

/* نوار فیلتر + جستجو */
.filterbar{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.filterbar .tabs{flex:1 1 auto;margin-bottom:0}
.filterbar .srch{flex:0 0 auto}
.filterbar .srch input{border-radius:99px;padding:7px 14px;font-size:12.5px;min-width:190px}
@media(max-width:520px){.filterbar .srch{flex:1 1 100%}
  .filterbar .srch input{min-width:0;width:100%}}

/* دو نما: جدول روی صفحه بزرگ، کارت روی موبایل */
.only-wide{display:none}
.only-narrow{display:block}
@media(min-width:900px){
  .only-wide{display:block}
  .only-narrow{display:none}
}

/* ردیف دانش‌آموز */
.row.std{flex-wrap:wrap;gap:4px 9px}
.row.std .tags{flex:1 1 100%;display:flex;gap:5px;flex-wrap:wrap}
@media(min-width:640px){
  .row.std .tags{flex:0 0 auto;margin-right:auto}
}

/* ============================================================
   تقویم ماه
   ============================================================ */
.cal{flex:0 0 auto}
.cal .nav{display:flex;align-items:center;gap:5px;margin-bottom:6px}
.cal .nav b{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:var(--navy)}
.cal .nav a{text-decoration:none;color:var(--muted);background:transparent;
  border:none;border-radius:7px;padding:2px 9px;font-size:14px;line-height:1.5}
.cal .nav a:hover{background:var(--paper);color:var(--navy)}
.cal .wk,.cal .grid{display:grid;grid-template-columns:repeat(7,28px);gap:3px}
.cal .wk span{font-size:9.5px;color:var(--muted);text-align:center;font-weight:700}
.cal .grid a,.cal .grid span{display:flex;align-items:center;justify-content:center;
  height:28px;border-radius:7px;font-size:11px;text-decoration:none;color:var(--ink);
  border:1px solid transparent;font-weight:700;font-variant-numeric:tabular-nums}
.k-ok  {background:#CFE7D9;color:#1F5F3B}
.k-few {background:#F1DFAF;color:#7E5A10}
.k-bad {background:#F2CFC9;color:#912A20}
.k-none{background:#F7F5F1;color:#A8A296}
.k-fut {color:#C9C3B7;border:1px dashed var(--line)}
.on-day{outline:2px solid var(--brass);outline-offset:-2px}
.legend{display:flex;flex-wrap:wrap;gap:3px 9px;font-size:10px;color:var(--muted);
  margin-top:6px;align-items:center;background:var(--soft);border-radius:8px;padding:5px 7px}
.legend s{text-decoration:none;display:flex;align-items:center;gap:4px}
.legend i{width:10px;height:11px;border-radius:3px;display:inline-block;flex:0 0 auto}
.legend i.p{width:3px;height:14px;border-radius:2px}

/* کارت روز — سربرگ و تقویم کنار هم */
.daycard{padding:11px 12px}
.dayhead{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.dayhead .lbl{flex:1;min-width:0;text-align:center}
.dayhead .lbl b{display:block;font-size:15px;font-weight:700;color:var(--navy)}
.dayhead .lbl s{display:block;text-decoration:none;font-size:11px;color:var(--muted)}
.dayhead .btn{flex:0 0 auto;min-width:34px;padding:6px 10px;font-size:15px;line-height:1}
.daycard .cal{display:flex;flex-direction:column}
.daycard .cal .wk,.daycard .cal .grid{grid-template-columns:repeat(7,1fr)}
.daycard .cal .grid a,.daycard .cal .grid span{height:30px;font-size:11.5px}

/* ردیف تردد */
.row.trf{gap:4px 8px;padding:8px 11px;flex-wrap:wrap}
.row.trf .nm{flex:1 1 7em;max-width:none}
.row.trf .tags{flex:0 0 auto;display:flex;align-items:center;gap:7px}
.row.trf .meta{flex:1 1 100%;display:flex;align-items:center;gap:8px;
  font-size:11px;color:var(--muted);min-width:0}
.row.trf .hrs{flex:0 0 auto;min-width:3.6em;direction:ltr;unicode-bidi:isolate;
  font-variant-numeric:tabular-nums;font-weight:700}
.row.trf .rng{margin-right:auto;direction:ltr;unicode-bidi:isolate;white-space:nowrap;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.row.trf.away{cursor:default;background:var(--soft)}
@media(min-width:560px){
  .row.trf .meta{flex:1 1 auto;order:-1}
}

/* نوار بالای صفحه تردد */
.top{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.top .side{flex:1;min-width:220px}
.top .side h2{font-size:15.5px;font-weight:700;margin-bottom:2px}
.top .side .sub{font-size:12px;color:var(--muted);line-height:1.8}

/* نوار خلاصه روز */
.band{display:flex;gap:10px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:11px;padding:9px 13px;margin-bottom:9px;
  font-size:12.5px;box-shadow:var(--shadow)}
.band b{flex:1;font-weight:700}
.band em{font-style:normal;color:var(--red);font-weight:700}

/* جعبه‌های ورود و خروج در ردیف */
.boxes{display:flex;gap:2px;flex:0 0 auto}
.boxes i{width:9px;height:18px;border-radius:3px;background:var(--paper);display:block;
  border:1px solid var(--line)}
.boxes i.in  {background:var(--green);border-color:var(--green)}
.boxes i.out {background:#C6B9A6;border-color:#C6B9A6}
.boxes i.lone{background:var(--red);border-color:var(--red)}
.boxes u{width:5px;display:block}

/* ============================================================
   نوار زمان یک روز
   ============================================================ */
.tl{position:relative;height:28px;border-radius:9px;overflow:hidden;
  background:#EFEDE7;border:1px solid var(--line)}
.tl span{position:absolute;top:0;height:100%;display:block}
.tl u{position:absolute;top:0;height:100%;width:1px;background:#DCD8CF}
.tl-in{background:var(--green)}
.tl-lone{background:repeating-linear-gradient(45deg,var(--red),var(--red) 4px,#d9776e 4px,#d9776e 8px)}
.tl b.pin{position:absolute;top:-3px;height:calc(100% + 6px);width:2px;border-radius:2px;
  transform:translateX(50%);z-index:2}
.pin.in  {background:#12351F;box-shadow:0 0 0 1px #fff}
.pin.out {background:#6B6355;box-shadow:0 0 0 1px #fff}
.pin.lone{background:var(--red);box-shadow:0 0 0 1px #fff;width:3px}
.ax{position:relative;height:15px;margin-top:3px}
.ax b{position:absolute;top:0;transform:translateX(50%);font-size:10px;color:var(--muted);
  font-weight:700;font-variant-numeric:tabular-nums}

/* بازه‌ها */
.sp{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;
  margin-bottom:5px;font-size:12.5px;border:1px solid var(--line)}
.sp b{font-weight:700;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.sp .ar{color:var(--muted);font-size:11px}
.sp .lb{flex:1;font-size:11.5px;font-weight:700}
.sp .du{font-size:11px;color:var(--muted);direction:ltr;unicode-bidi:isolate}
.sp.in  {background:var(--green-bg);border-color:#CFE4D8}
.sp.in .lb{color:var(--green)}
.sp.out {background:var(--soft)}
.sp.out .lb{color:var(--muted)}
.sp.lone{background:var(--red-bg);border-color:#EFCFC9}
.sp.lone .lb{color:var(--red)}

/* صف اصلاح */
.fixrow{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;margin-bottom:8px;box-shadow:var(--shadow)}
.fixrow .hd{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.fixrow .hd b{flex:1;font-size:13.5px;font-weight:700}
.fixrow .hd span.dt{font-size:11.5px;color:var(--muted)}
.fixrow .times{font-size:11.5px;color:var(--muted);direction:ltr;unicode-bidi:isolate;
  text-align:right;margin-bottom:9px;font-variant-numeric:tabular-nums}
.fixrow form{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* فقط کادر «چرا» کش می‌آید — کادر ساعت اندازه خودش را دارد */
.fixrow input[name=why]{flex:1;min-width:120px;padding:9px 11px;font-size:13px;border-radius:9px}
.fixrow .pickwrap{flex:0 0 auto}
.fixrow .psplit input{padding:7px 0}
.fixrow .btn{flex:0 0 auto}

/* تاریخچه */
.ev{background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:9px 12px;margin-bottom:5px;font-size:12.5px;line-height:1.8}
.ev b{font-size:13px;font-weight:700}
.ev s{text-decoration:none;color:var(--muted);font-size:11px;display:block;margin-top:2px}

/* ============================================================
   پیامک
   ============================================================ */
.m{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:6px;
  background:var(--card);box-shadow:var(--shadow)}
.m .hd{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12.5px}
.m .hd b{font-weight:700}
.m .hd .ph{margin-right:auto;color:var(--muted);font-size:11px;
  direction:ltr;unicode-bidi:isolate}
.m .tx{background:var(--paper);border-radius:9px;padding:9px 11px;font-size:12.5px;
  line-height:1.9;white-space:pre-line}
.m .ft{display:flex;justify-content:space-between;gap:8px;margin-top:6px;
  font-size:10.5px;color:var(--muted)}
code{background:var(--paper);border:1px solid var(--line);padding:2px 7px;border-radius:6px;
  font-size:11.5px;direction:ltr;display:inline-block;word-break:break-all;
  font-family:ui-monospace,Menlo,Consolas,monospace}

/* ============================================================
   ورود
   ============================================================ */
body.login{background:var(--navy);min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:20px;padding-bottom:20px}
.logincard{background:var(--paper);border-radius:20px;width:100%;max-width:380px;
  padding:28px 24px;box-shadow:0 14px 44px rgba(0,0,0,.34)}
.logincard .brand{text-align:center;margin-bottom:18px}
.logincard .brand .mark{width:52px;height:52px;border-radius:16px;background:var(--navy);
  color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.logincard .brand .mark svg{width:27px;height:27px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.logincard h1{font-size:20px;font-weight:800;letter-spacing:.2px}
.logincard .sub{color:var(--muted);font-size:12.5px;margin-top:3px}
.logincard input{text-align:center;letter-spacing:3px;direction:ltr;font-size:17px;
  padding:13px 14px;font-variant-numeric:tabular-nums}
.logincard .btn{margin-top:14px}
.logincard .devcode{background:var(--brass-bg);color:#8A6613;border:1px solid #E8D3A6;
  text-align:center;font-size:12.5px;margin-top:14px;padding:12px;border-radius:11px}
.logincard .devcode b{font-size:27px;letter-spacing:7px;display:block;margin-top:6px;
  direction:ltr;font-variant-numeric:tabular-nums;color:var(--brass)}
.logincard .back{display:block;text-align:center;margin-top:14px;font-size:12.5px;
  color:var(--muted);text-decoration:none}
.logincard .back:hover{color:var(--navy)}

/* ============================================================
   موبایل
   ============================================================ */
@media(max-width:520px){
  body{font-size:14.5px}
  .wrap{padding:12px 10px 18px}
  .card{padding:12px;border-radius:13px}
  .tiles{grid-template-columns:1fr 1fr;gap:8px}
  .tile u{font-size:22px}
  .row .side{display:none}
  .cal{width:100%}
  .cal .wk,.cal .grid{grid-template-columns:repeat(7,1fr)}
  .cal .grid a,.cal .grid span{height:32px;font-size:12px}
  .appbar .ttl b{font-size:15px}
}
@media(max-width:360px){
  .tabbar a span{font-size:9.5px}
}
/* روی صفحه بزرگ، نوار پایین وسط می‌ماند و کش نمی‌آید */
@media(min-width:820px){
  .tabbar{right:50%;left:auto;transform:translateX(50%);width:600px;
    border:1px solid var(--line);border-bottom:none;border-radius:16px 16px 0 0;
    box-shadow:0 -3px 18px rgba(27,58,87,.08)}
}
@media print{
  .appbar,.tabbar,.btns,.btn{display:none}
  body{background:#fff;padding:0}
  .card{box-shadow:none}
}

/* ============================================================
   پیام گذرا
   ============================================================ */
.toast{position:fixed;bottom:86px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;border-radius:11px;padding:11px 20px;
  font-size:13.5px;font-family:inherit;opacity:0;transition:opacity .25s;
  pointer-events:none;z-index:70;max-width:88vw;text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28)}
.toast.show{opacity:1}
.toast.bad{background:var(--red)}