/* Basiri v2 · native iOS 26 grammar on white. Rules: ../RULES.md */
:root{
  --bg:#fff;--grouped:#F2F2F7;--label:#000;--label-2:rgba(60,60,67,.6);--label-3:rgba(60,60,67,.3);--sep:rgba(60,60,67,.18);
  --fill:rgba(120,120,128,.12);--fill-2:rgba(120,120,128,.08);--accent:#007AFF;--accent-bg:rgba(0,122,255,.1);--done:#34C759;--back:#FF9500;--red:#FF3B30;
  --ease:cubic-bezier(.23,1,.32,1);--push:cubic-bezier(.32,.72,0,1);
  --ui:'Vazirmatn',system-ui,sans-serif;--disp:'Estedad','Vazirmatn',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
input,textarea{font:inherit;color:inherit;border:0;outline:0;background:none;min-width:0;resize:none}
.num{font-variant-numeric:tabular-nums}
/* type ramp */
.lt{font:800 34px/1.3 var(--disp);letter-spacing:-.2px}
.t2{font:700 22px/1.45 var(--ui)}
.hl{font:600 17px/1.55 var(--ui)}
.bd{font:400 17px/1.75 var(--ui)}
.co{font:400 16px/1.6 var(--ui)}
.sh{font:400 15px/1.55 var(--ui)}
.fn{font:400 13px/1.5 var(--ui)}
.cp{font:500 12px/1.4 var(--ui)}
.l2{color:var(--label-2)}.l3{color:var(--label-3)}.ac{color:var(--accent)}

/* device */
.dev{position:relative;width:calc(var(--w) + 20px);height:calc(var(--h) + 20px);border-radius:64px;padding:10px;background:#1c1c1e;box-shadow:inset 0 0 0 1.5px #48484a,0 30px 60px -30px rgba(0,0,0,.35)}
.scr{position:relative;width:var(--w);height:var(--h);border-radius:54px;overflow:hidden;background:var(--bg);direction:rtl;font-family:var(--ui);color:var(--label);isolation:isolate}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:122px;height:35px;border-radius:18px;background:#000;z-index:90}
.sbar{position:absolute;inset:0 0 auto;height:54px;display:flex;align-items:center;justify-content:space-between;padding:6px 32px 0 34px;z-index:89;font:600 16px/1 system-ui,-apple-system,sans-serif;pointer-events:none;direction:ltr}
.sbar span:last-child{display:flex;gap:6px;align-items:center}
.homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:136px;height:5px;border-radius:3px;background:#000;z-index:95;pointer-events:none}
.narrow .island{width:0}.narrow .sbar{padding:6px 22px 0}

/* stack pages */
.stack{position:absolute;inset:0;overflow:hidden}
.page{position:absolute;inset:0;background:var(--bg);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.page::-webkit-scrollbar{display:none}
.page.grouped{background:var(--grouped)}
.page.enter{animation:pIn .42s var(--push) both}
.page.leave{animation:pOut .32s var(--push) both;pointer-events:none}
.page.under{transform:translateX(30%);filter:brightness(.96);transition:transform .42s var(--push),filter .42s}
.page.back-under{transform:none;filter:none;transition:transform .32s var(--push),filter .32s}
@keyframes pIn{from{transform:translateX(-100%)}to{transform:none}}
@keyframes pOut{from{transform:none}to{transform:translateX(-100%)}}
.page.enter,.page.leave{box-shadow:10px 0 30px rgba(0,0,0,.12)}
.rm .page.enter{animation:fadeIn .15s both}.rm .page.leave{animation:fadeOut .15s both}.rm .page.under{transform:none}
@keyframes fadeIn{from{opacity:0}}@keyframes fadeOut{to{opacity:0}}

/* nav bar */
.nb{position:sticky;top:0;z-index:20;height:98px;padding-top:54px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-inline:8px}
.nb::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:0 .5px 0 var(--sep);opacity:0;transition:opacity .2s}
.grouped .nb::before{background:rgba(242,242,247,.82)}
.nb.solid::before{opacity:1}
.nb>*{position:relative}
.nb-t{font:600 17px/1 var(--ui);opacity:0;transition:opacity .2s;white-space:nowrap}
.nb.solid .nb-t,.nb.always .nb-t{opacity:1}
.nb-l{display:flex;justify-content:flex-start}.nb-r{display:flex;justify-content:flex-end;gap:4px}
.bk{height:44px;display:flex;align-items:center;gap:0;padding:0 6px 0 10px;color:var(--accent);font:400 17px/1 var(--ui);white-space:nowrap}
.bk:active,.bbtn:active{opacity:.4}
.bbtn{height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;color:var(--accent);font:400 17px/1 var(--ui);padding:0 8px;white-space:nowrap}
.bbtn.b{font-weight:600}
.bbtn[disabled]{color:var(--label-3);pointer-events:none}
.circ{width:36px;height:36px;border-radius:50%;background:var(--fill);color:var(--label);display:flex;align-items:center;justify-content:center}
.lth{padding:0 20px 8px;margin-top:-6px}
.lth .lt{display:block}
.lth .sub{display:block;margin-top:2px}

/* tab bar (system, iOS 26 floating) */
.tabbar{position:absolute;left:14px;right:14px;bottom:24px;height:62px;border-radius:31px;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);padding:4px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 8px 30px -8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.9)}
.rt .tabbar{background:#F9F9F9}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:27px;color:var(--label);min-width:0}
.tab span{font:600 10px/1.2 var(--ui);white-space:nowrap}
.tab.on{color:var(--accent);background:var(--fill-2)}
.narrow .tabbar{left:8px;right:8px;bottom:14px;height:58px}.narrow .tab span{font-size:9.5px}

/* inset grouped list */
.sec{padding:0 16px;margin-top:22px}
.sec-t{padding:0 16px 6px;font:400 13px/1.4 var(--ui);color:var(--label-2)}
.sec-t.big{font:700 20px/1.4 var(--ui);color:var(--label);padding:0 4px 8px}
.sec-f{padding:6px 16px 0;font:400 13px/1.5 var(--ui);color:var(--label-2)}
.list{background:#fff;border-radius:26px;overflow:hidden}
.page:not(.grouped) .list{background:var(--grouped)}
.row{position:relative;min-height:52px;display:flex;align-items:center;gap:12px;padding:10px 16px;width:100%;text-align:right;transition:background .12s}
.row+.row::before,.row+.rowwrap::before{content:"";position:absolute;top:0;left:0;right:16px;height:.5px;background:var(--sep)}
.row.ic+.row::before{right:58px}
button.row:active,.row.pressable:active{background:var(--fill)}
.row .tile{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;background:var(--accent)}
.row .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.row .tx b{font:400 17px/1.45 var(--ui)}
.row .tx small{font:400 13px/1.45 var(--ui);color:var(--label-2)}
.row .val{font:400 17px/1 var(--ui);color:var(--label-2);white-space:nowrap}
.chev{color:var(--label-3);flex:none}
.check{color:var(--accent);flex:none;animation:ck .18s var(--ease)}
@keyframes ck{from{opacity:0;transform:scale(.6)}}

/* buttons */
.btn{height:50px;border-radius:25px;display:flex;align-items:center;justify-content:center;gap:8px;font:600 17px/1 var(--ui);white-space:nowrap;padding:0 22px;transition:transform .1s var(--ease),opacity .15s}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--accent);color:#fff}
.btn.sec{background:var(--fill);color:var(--accent)}
.btn.plain{height:44px;color:var(--accent);font-weight:400;padding:0 8px}
.btn.plain:active{transform:none;opacity:.4}
.btn.sm{height:34px;border-radius:17px;padding:0 14px;font-size:15px}
.btn.full{width:100%}
.btn[disabled]{opacity:.3;pointer-events:none}
.btn.loading{pointer-events:none;opacity:.8}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* segmented (native look) */
.seg{position:relative;height:32px;border-radius:16px;background:var(--fill);padding:2px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.seg i{position:absolute;top:2px;bottom:2px;right:2px;border-radius:14px;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);transition:transform .25s var(--ease)}
.seg button{position:relative;font:500 13px/1 var(--ui);text-align:center;white-space:nowrap}
.seg button.on{font-weight:600}

/* switch */
.sw{width:51px;height:31px;border-radius:16px;background:rgba(120,120,128,.16);position:relative;flex:none;transition:background .2s}
.sw i{position:absolute;top:2px;right:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .2s var(--ease)}
.sw.on{background:var(--accent)}.sw.on i{transform:translateX(-20px)}

/* modal (page sheet) */
.modal-back{position:absolute;inset:0;z-index:70;background:rgba(0,0,0,0);transition:background .4s var(--push);pointer-events:none}
.modal-back.on{background:rgba(0,0,0,.25);pointer-events:auto}
.app-body{position:absolute;inset:0;transition:transform .42s var(--push),border-radius .42s;transform-origin:50% 0;overflow:hidden}
.app-body.shrunk{transform:translateY(12px) scale(.93);border-radius:30px}
.modal{position:absolute;inset:auto 0 0;top:58px;z-index:75;border-radius:38px 38px 0 0;background:var(--grouped);transform:translateY(105%);transition:transform .42s var(--push);display:flex;flex-direction:column;overflow:hidden}
.modal.on{transform:none}
.modal.form{top:auto;height:auto;max-height:70%;margin:0 8px 8px;border-radius:38px;background:#fff}
.modal-h{height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 8px;flex:none}
.modal-h b{font:600 17px/1 var(--ui)}
.modal-b{flex:1;overflow-y:auto;padding-bottom:30px;scrollbar-width:none}
.grab{width:36px;height:5px;border-radius:3px;background:rgba(60,60,67,.3);margin:6px auto 0}

/* toast (system HUD style) */
.hud{position:absolute;top:58px;left:50%;z-index:99;transform:translate(-50%,-90px);height:40px;padding:0 16px 0 12px;border-radius:20px;display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ui);white-space:nowrap;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 8px 24px -6px rgba(0,0,0,.2);transition:transform .4s var(--ease)}
.hud.on{transform:translate(-50%,0)}
.hud svg{color:var(--accent)}