*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font);
  font-size:var(--t-md);
  line-height:1.6;
  color:var(--ink);
  background:var(--chuna);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  font-optical-sizing:auto;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
h1,h2,h3,p{margin:0}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2.5px solid var(--dawat);outline-offset:2px;border-radius:var(--r-2)}

.stage{min-height:100%;display:flex;align-items:center;justify-content:center;gap:56px;padding:32px 24px}
.side{width:280px;flex:none;align-self:center}
.brand{display:flex;gap:14px;align-items:center;margin-bottom:36px}
.mark{width:44px;height:44px;fill:none;stroke:var(--dawat);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font-size:var(--t-2xl);font-weight:700;line-height:1.2;color:var(--ink)}
.brand-sub{font-size:var(--t-sm);color:var(--ink-2)}
.side-label{font-size:var(--t-xs);font-weight:600;color:var(--ink-2);margin:0 0 10px}
.roles{display:grid;gap:6px;margin-bottom:28px}
.role{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-3);text-align:left;transition:background var(--fast)}
.role:hover{background:var(--sunk)}
.role[aria-checked="true"]{background:var(--sheet);box-shadow:var(--lift-1)}
.role-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--hair-2);flex:none}
.role[aria-checked="true"] .role-dot{border-color:var(--dawat);background:var(--dawat)}
.role b{display:block;font-weight:600;font-size:var(--t-md);line-height:1.35}
.role small{display:block;font-size:var(--t-xs);color:var(--ink-2);line-height:1.4}
.links{display:grid;gap:4px;margin-bottom:28px}
.link-btn{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-2);color:var(--dawat);font-weight:500;font-size:var(--t-sm);text-align:left}
.link-btn:hover{background:var(--dawat-wash)}
.side-note{font-size:var(--t-xs);color:var(--ink-2);margin-bottom:10px}
.side-reset{font-size:var(--t-sm);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}

.device{
  width:392px;height:820px;flex:none;
  border-radius:52px;padding:11px;
  background:#0E1016;
  box-shadow:0 0 0 1.5px #2A2E38 inset,0 2px 4px rgba(14,16,22,.18),0 40px 80px -24px rgba(14,16,22,.45);
}
.screen{position:relative;height:100%;border-radius:42px;overflow:hidden;background:var(--chuna);display:flex;flex-direction:column;isolation:isolate}
.statusbar{height:40px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0 34px;font-size:14px;font-weight:600;color:var(--ink)}
.sb-right{display:flex;align-items:center;gap:8px}
.sb-right svg{width:25px;height:12px}
.sb-net{font-size:11px;font-weight:600;color:var(--fajr)}

@media (max-width:760px){
  .stage{padding:0;display:block}
  .side{width:auto;padding:12px 16px 4px;background:var(--sheet);border-bottom:1px solid var(--hair)}
  .brand{margin-bottom:10px}
  .brand .mark{width:32px;height:32px}
  .brand-name{font-size:var(--t-lg)}
  .side-label,.side-note,.links,.side-reset{display:none}
  .roles{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;margin:0 -16px;padding:0 16px 10px;scrollbar-width:none}
  .role{padding:6px 12px;border:1px solid var(--hair)}
  .role small{display:none}
  .device{width:100%;height:auto;min-height:calc(100dvh - 110px);border-radius:0;padding:0;background:none;box-shadow:none}
  .screen{border-radius:0;min-height:calc(100dvh - 110px)}
  .statusbar{display:none}
}

.view{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;outline:none;scrollbar-width:none;padding-bottom:28px}
.view::-webkit-scrollbar{display:none}

.top{padding:6px 20px 14px;display:flex;align-items:flex-start;gap:10px}
.top-main{flex:1;min-width:0}
.top-eyebrow{font-size:var(--t-xs);font-weight:500;color:var(--ink-2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.top-eyebrow .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.top h1{font-size:var(--t-2xl);font-weight:700;line-height:1.3;margin-top:2px;text-wrap:balance}
.top-act{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);flex:none}
.top-act:hover{background:var(--sunk)}
.bar{display:flex;align-items:center;gap:4px;padding:2px 8px 6px;min-height:52px}
.bar-title{flex:1;min-width:0;font-weight:600;font-size:var(--t-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);flex:none}
.icon-btn:hover{background:var(--sunk)}

.sec{padding:0 16px;margin-top:22px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px 8px}
.sec-head h2{font-size:var(--t-md);font-weight:650;color:var(--ink)}
.sec-head .aside{font-size:var(--t-sm);color:var(--ink-2)}
.sec-head a,.sec-head button.lnk{font-size:var(--t-sm);font-weight:600;color:var(--dawat)}

.card{background:var(--sheet);border-radius:var(--r-4);box-shadow:var(--lift-1)}
.card-pad{padding:16px 18px}
.list{background:var(--sheet);border-radius:var(--r-4);box-shadow:var(--lift-1);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:60px;width:100%;text-align:left;position:relative;transition:background var(--fast)}
.row+.row::before{content:"";position:absolute;top:0;left:52px;right:0;height:1px;background:var(--hair)}
.row.flush+.row.flush::before{left:16px}
button.row:hover{background:color-mix(in oklab,var(--sunk) 55%,transparent)}
button.row:active{background:var(--sunk)}
.roll{width:24px;flex:none;text-align:right;font-size:var(--t-sm);font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.row-main{flex:1;min-width:0}
.row-title{font-weight:550;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{font-size:var(--t-sm);color:var(--ink-2);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-end{text-align:right;flex:none}
.row-end .amt{font-weight:600;font-variant-numeric:tabular-nums}
.row-end small{display:block;font-size:var(--t-xs);color:var(--ink-2)}
.chev{color:var(--ink-3);width:18px!important;height:18px!important}

.tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);font-weight:600;line-height:1;padding:5px 8px;border-radius:var(--r-1);white-space:nowrap}
.tag.due{color:var(--baki);background:var(--baki-wash)}
.tag.paid{color:var(--sabaq);background:var(--sabaq-wash)}
.tag.wait{color:var(--fajr);background:var(--fajr-wash)}
.tag.plain{color:var(--ink-2);background:var(--sunk)}
.tag.ink{color:var(--dawat);background:var(--dawat-wash)}

.fund-bar{width:4px;align-self:stretch;border-radius:2px;flex:none;margin:4px 0}
.f-general{background:var(--general)} .f-zakat{background:var(--zakat)} .f-lillah{background:var(--lillah)}
.f-build{background:var(--nirman)} .f-boarding{background:var(--ink-3)} .f-chamra{background:#8C5A3C}

.hero{margin:4px 16px 0;padding:18px 18px 16px;border-radius:var(--r-4);background:var(--dawat);color:var(--on-dawat);box-shadow:var(--lift-2);position:relative;overflow:hidden}
.hero-label{font-size:var(--t-sm);opacity:.82}
.hero-amt{font-size:var(--t-3xl);font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;margin-top:2px}
.hero-row{display:flex;gap:22px;margin-top:12px;padding-top:12px;border-top:1px solid color-mix(in oklab,var(--on-dawat) 18%,transparent)}
.hero-row div{font-size:var(--t-sm);opacity:.9}
.hero-row b{display:block;font-size:var(--t-lg);font-weight:650;opacity:1;font-variant-numeric:tabular-nums}
.hero-pattern{position:absolute;right:-18px;top:-18px;width:150px;height:150px;opacity:.12;stroke:var(--on-dawat);fill:none;stroke-width:1.2}

.meter{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.meter span{display:block;height:100%;background:var(--sabaq);border-radius:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:var(--r-3);font-weight:600;font-size:var(--t-md);transition:transform var(--fast) var(--ease),background var(--fast),box-shadow var(--fast)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--dawat);color:var(--on-dawat);box-shadow:0 1px 1px rgba(22,26,34,.12),0 6px 14px -6px color-mix(in oklab,var(--dawat) 70%,transparent)}
.btn-primary:hover{background:var(--dawat-2)}
.btn-primary:disabled{background:var(--hair-2);box-shadow:none;cursor:not-allowed}
.btn-quiet{background:var(--sunk);color:var(--ink)}
.btn-line{border:1.5px solid var(--dawat-line);color:var(--dawat);background:var(--sheet)}
.btn-block{width:100%}
.btn-sm{height:40px;padding:0 14px;font-size:var(--t-sm);border-radius:var(--r-2)}

.seg{display:flex;padding:4px;background:var(--sunk);border-radius:var(--r-3);gap:2px}
.seg button{flex:1;height:40px;border-radius:9px;font-weight:600;font-size:var(--t-sm);color:var(--ink-2);transition:background var(--fast),color var(--fast)}
.seg button[aria-pressed="true"]{background:var(--sheet);color:var(--ink);box-shadow:var(--lift-1)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
.chip{height:40px;padding:0 14px;border-radius:20px;border:1.5px solid var(--hair-2);background:var(--sheet);font-size:var(--t-sm);font-weight:550;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:all var(--fast)}
.chip[aria-pressed="true"]{border-color:var(--dawat);background:var(--dawat-wash);color:var(--dawat)}
.chip.q-good[aria-pressed="true"]{border-color:var(--sabaq);background:var(--sabaq-wash);color:var(--sabaq)}
.chip.q-ok[aria-pressed="true"]{border-color:var(--fajr);background:var(--fajr-wash);color:var(--fajr)}
.chip.q-again[aria-pressed="true"]{border-color:var(--baki);background:var(--baki-wash);color:var(--baki)}
.chip.locked{color:var(--ink-3);border-style:dashed}
.chip.locked svg{width:15px;height:15px}

.field{display:block;margin-bottom:16px}
.field-label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);margin-bottom:6px}
.input{width:100%;height:52px;border-radius:var(--r-3);border:1.5px solid var(--hair-2);background:var(--sheet);padding:0 14px;font-size:var(--t-md);transition:border-color var(--fast),box-shadow var(--fast)}
.input:focus{outline:none;border-color:var(--dawat);box-shadow:0 0 0 4px var(--dawat-wash)}
.input.big{height:64px;font-size:var(--t-2xl);font-weight:650;font-variant-numeric:tabular-nums}
.input-wrap{position:relative}
.input-wrap .pre{position:absolute;left:16px;top:50%;translate:0 -50%;font-size:var(--t-2xl);font-weight:650;color:var(--ink-3)}
.input-wrap .input.big{padding-left:42px}
.search{position:relative}
.search svg{position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--ink-3)}
.search .input{padding-left:44px;height:48px;background:var(--sheet);border-color:var(--hair)}

.stepper{display:flex;align-items:center;border:1.5px solid var(--hair-2);border-radius:var(--r-3);height:48px;background:var(--sheet)}
.stepper button{width:48px;height:100%;display:grid;place-items:center;color:var(--dawat)}
.stepper button:disabled{color:var(--ink-3)}
.stepper output{flex:1;text-align:center;font-weight:650;font-size:var(--t-lg);font-variant-numeric:tabular-nums;min-width:40px}

.note{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-3);font-size:var(--t-sm);line-height:1.55}
.note svg{width:20px;height:20px;margin-top:1px}
.note.block{background:var(--baki-wash);color:var(--baki)}
.note.info{background:var(--dawat-wash);color:var(--dawat-2)}
.note.warn{background:var(--fajr-wash);color:var(--fajr)}
.note.okay{background:var(--sabaq-wash);color:var(--sabaq)}

.tabs[hidden]{display:none}
.tabs{flex:none;display:flex;background:var(--sheet);border-top:1px solid var(--hair);padding:6px 6px 18px}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 2px;font-size:12px;font-weight:550;color:var(--ink-2);border-radius:var(--r-3);position:relative}
.tab svg{width:24px;height:24px}
.tab[aria-current="page"]{color:var(--dawat)}
.tab-ic{width:56px;height:30px;border-radius:15px;display:grid;place-items:center;transition:background var(--fast)}
.tab[aria-current="page"] .tab-ic{background:var(--dawat-wash)}
.tab[aria-current="page"] .tab-label{font-weight:700}
.tab .badge{position:absolute;top:0;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--baki);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
@media (max-width:760px){.tabs{position:sticky;bottom:0;padding-bottom:max(8px,env(safe-area-inset-bottom))}}

.sheet{
  position:fixed;margin:0;border:0;padding:0;
  left:var(--sx,0);width:var(--sw,100%);max-width:none;
  top:auto;bottom:var(--sb,0);
  max-height:calc(var(--sh,100dvh) - 48px);
  border-radius:var(--r-5) var(--r-5) var(--sbr,0) var(--sbr,0);
  background:var(--sheet);color:var(--ink);
  box-shadow:var(--lift-3);
  overflow-y:auto;overscroll-behavior:contain;
  translate:0 100%;
  transition:translate var(--slow) var(--ease),display var(--slow) allow-discrete,overlay var(--slow) allow-discrete;
}
.sheet[open]{translate:0 0}
@starting-style{.sheet[open]{translate:0 100%}}
.sheet::backdrop{background:rgba(14,16,22,0);transition:background var(--slow),display var(--slow) allow-discrete,overlay var(--slow) allow-discrete;overflow:hidden;overscroll-behavior:contain}
.sheet[open]::backdrop{background:rgba(14,16,22,.42)}
@starting-style{.sheet[open]::backdrop{background:rgba(14,16,22,0)}}
@media (prefers-reduced-motion:reduce){.sheet,.sheet::backdrop{transition:none}}
.sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--hair-2);margin:10px auto 4px}
.sheet-head{display:flex;align-items:flex-start;gap:12px;padding:8px 20px 4px}
.sheet-head h2{flex:1;font-size:var(--t-xl);font-weight:700;line-height:1.35}
.sheet-head p{font-size:var(--t-sm);color:var(--ink-2);margin-top:2px}
.sheet-body{padding:12px 20px 24px}
.sheet-foot{position:sticky;bottom:0;background:var(--sheet);padding:12px 20px 22px;border-top:1px solid var(--hair);display:flex;gap:10px}

.toast{position:fixed;inset:auto;margin:0;left:var(--tx,50%);bottom:var(--tb,96px);translate:-50% 0;border:0;padding:12px 18px;border-radius:var(--r-3);background:#1B2030;color:#fff;font-size:var(--t-sm);font-weight:500;box-shadow:var(--lift-3);display:none;align-items:center;gap:10px;max-width:340px;opacity:0;transition:opacity var(--mid),translate var(--mid) var(--ease),display var(--mid) allow-discrete,overlay var(--mid) allow-discrete}
.toast:popover-open{display:flex;opacity:1}
@starting-style{.toast:popover-open{opacity:0;translate:-50% 10px}}
.toast svg{color:#7FD3AC}
.toast button{color:#B3C1F0;font-weight:600;margin-left:6px}

.stagger>*{animation:rise var(--slow) var(--ease) both}
.stagger>*:nth-child(2){animation-delay:40ms}.stagger>*:nth-child(3){animation-delay:80ms}
.stagger>*:nth-child(4){animation-delay:120ms}.stagger>*:nth-child(5){animation-delay:160ms}
.stagger>*:nth-child(6){animation-delay:200ms}.stagger>*:nth-child(n+7){animation-delay:240ms}
@keyframes rise{from{opacity:0;translate:0 8px}}
@media (prefers-reduced-motion:reduce){.stagger>*{animation:none}}

.halqa-head{display:flex;align-items:center;gap:14px;padding:14px 18px}
.ring{width:52px;height:52px;flex:none}
.ring circle{fill:none;stroke-width:5}
.ring .bg{stroke:var(--sunk)} .ring .fg{stroke:var(--sabaq);stroke-linecap:round;transition:stroke-dashoffset var(--slow) var(--ease)}
.ring text{font-size:13px;font-weight:700;fill:var(--ink);font-family:var(--font)}
.hrow{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;min-height:68px;position:relative}
.hrow+.hrow::before{content:"";position:absolute;top:0;left:52px;right:0;height:1px;background:var(--hair)}
.hrow .row-main{cursor:pointer}
.hrow.absent{opacity:.5}
.heard{height:44px;min-width:84px;padding:0 12px;border-radius:22px;border:1.5px solid var(--dawat-line);color:var(--dawat);font-weight:600;font-size:var(--t-sm);display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;transition:all var(--fast) var(--ease)}
.heard:active{transform:scale(.96)}
.heard.done{background:var(--sabaq);border-color:var(--sabaq);color:#fff}
.heard.done.q-ok{background:var(--fajr);border-color:var(--fajr)}
.heard.done.q-again{background:var(--baki);border-color:var(--baki)}
.heard svg{width:18px;height:18px}
.pos{font-size:var(--t-sm);color:var(--ink-2);display:flex;gap:6px;align-items:center;white-space:nowrap}
.pos b{color:var(--ink);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.good{background:var(--sabaq)} .dot.ok{background:var(--fajr)} .dot.again{background:var(--baki)} .dot.none{background:var(--hair-2)}
.flag{color:var(--baki);width:16px!important;height:16px!important}

.part{padding:14px 0;border-top:1px solid var(--hair)}
.part:first-child{border-top:0;padding-top:4px}
.part-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.part-head h3{font-size:var(--t-md);font-weight:650}
.part-head small{font-size:var(--t-sm);color:var(--ink-2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini-label{font-size:var(--t-xs);font-weight:600;color:var(--ink-2);margin-bottom:6px;display:block}

.juz{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.juz span{aspect-ratio:1;border-radius:6px;background:var(--sunk);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;position:relative;overflow:hidden}
.juz span.done{background:var(--dawat);color:var(--on-dawat)}
.juz span.now{background:var(--dawat-wash);color:var(--dawat);box-shadow:inset 0 0 0 1.5px var(--dawat)}
.juz span.now i{position:absolute;left:0;bottom:0;height:100%;background:color-mix(in oklab,var(--dawat) 22%,transparent)}
.juz span.now em{position:relative;font-style:normal}
.juz-legend{display:flex;gap:14px;font-size:var(--t-xs);color:var(--ink-2);margin-top:10px}
.juz-legend span{display:inline-flex;align-items:center;gap:5px}
.juz-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:var(--t-md)}
.kv+.kv{border-top:1px dashed var(--hair)}
.kv span:first-child{color:var(--ink-2)}
.kv span:last-child{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

.profile-top{padding:4px 20px 18px}
.profile-top h1{font-size:var(--t-2xl);font-weight:700;line-height:1.3}
.profile-top p{color:var(--ink-2);font-size:var(--t-sm);margin-top:2px}
.profile-top .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px}
.act{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:var(--r-3);background:var(--sheet);box-shadow:var(--lift-1);font-size:var(--t-xs);font-weight:600;color:var(--dawat)}

.att{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.att button{height:76px;border-radius:var(--r-3);background:var(--sheet);border:1.5px solid var(--hair);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:550;line-height:1.3;padding:4px;text-align:center;transition:all var(--fast)}
.att button b{font-size:var(--t-lg);font-weight:700;font-variant-numeric:tabular-nums}
.att button[aria-pressed="true"]{background:var(--baki-wash);border-color:var(--baki);color:var(--baki)}
.att button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.receipt{background:var(--sheet);border-radius:var(--r-4);box-shadow:var(--lift-2);padding:22px 20px 18px;position:relative}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:radial-gradient(circle at 8px 0,var(--sheet) 6px,transparent 6.5px) repeat-x;background-size:16px 8px}
.receipt-no{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-sm);color:var(--ink-2)}
.receipt-no b{color:var(--ink);font-variant-numeric:tabular-nums}
.receipt-amt{font-size:40px;font-weight:700;line-height:1.2;margin:14px 0 4px;font-variant-numeric:tabular-nums}
.receipt-ok{width:52px;height:52px;border-radius:50%;background:var(--sabaq-wash);color:var(--sabaq);display:grid;place-items:center;margin-bottom:6px}
.receipt-ok svg{width:28px;height:28px;stroke-width:2.2}
.sms{background:var(--sunk);border-radius:var(--r-4) var(--r-4) var(--r-4) var(--r-1);padding:12px 14px;font-size:var(--t-sm);line-height:1.6;color:var(--ink)}
.sms-meta{font-size:var(--t-xs);color:var(--ink-2);margin:6px 0 0 2px;display:flex;align-items:center;gap:6px}

.browser{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:0 14px;height:40px;border-radius:20px;background:var(--sunk);font-size:var(--t-sm);color:var(--ink-2)}
.browser svg{width:15px;height:15px}
.browser b{color:var(--ink);font-weight:550}
.webpage{padding:0 16px}
.web-head{text-align:center;padding:10px 0 18px}
.web-head .mark{width:36px;height:36px;margin:0 auto 6px;display:block}
.web-head p{font-size:var(--t-sm);color:var(--ink-2)}
.web-head h1{font-size:var(--t-lg);font-weight:700}

.status-line{display:flex;align-items:center;gap:10px;margin:0 16px;padding:10px 14px;border-radius:var(--r-3);font-size:var(--t-sm);font-weight:550}
.status-line.off{background:var(--fajr-wash);color:var(--fajr)}
.status-line.on{background:var(--sabaq-wash);color:var(--sabaq)}
.status-line button{margin-left:auto;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.switch{position:relative;width:46px;height:28px;border-radius:14px;background:var(--hair-2);flex:none;transition:background var(--fast)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:translate var(--mid) var(--ease)}
.switch[aria-checked="true"]{background:var(--sabaq)}
.switch[aria-checked="true"]::after{translate:18px 0}

.void .row-title{text-decoration:line-through;color:var(--ink-3)}
.empty{text-align:center;padding:36px 20px;color:var(--ink-2);font-size:var(--t-sm)}
.empty svg{width:40px;height:40px;color:var(--ink-3);margin-bottom:8px}

.bars{display:grid;gap:12px}
.bars .b-row{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;font-size:var(--t-sm)}
.bars .b-row span:last-child{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}

.view{view-transition-name:view}
::view-transition-old(root),::view-transition-new(root){animation:none}
.fwd::view-transition-old(view){animation:vt-out-l 220ms var(--ease) both}
.fwd::view-transition-new(view){animation:vt-in-r 220ms var(--ease) both}
.bwd::view-transition-old(view){animation:vt-out-r 220ms var(--ease) both}
.bwd::view-transition-new(view){animation:vt-in-l 220ms var(--ease) both}
@keyframes vt-out-l{to{opacity:0;translate:-24px 0}}
@keyframes vt-in-r{from{opacity:0;translate:24px 0}}
@keyframes vt-out-r{to{opacity:0;translate:24px 0}}
@keyframes vt-in-l{from{opacity:0;translate:-24px 0}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}