/* Q Studio Ledger — dark-first glass bento. Teal = money in, gold = حق الله, amber = owed, violet = reinvested. */
@font-face{font-family:"Geist";src:url(/fonts/geist-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url(/fonts/plex-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0660-0669}
@font-face{font-family:"Plex Arabic";src:url(/fonts/plex-arabic-600.woff2) format("woff2");font-weight:500 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+0660-0669}
@font-face{font-family:"Aref Ruqaa";src:url(/fonts/aref-ruqaa-700-arabic.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#06080c; --bg-2:#0b0f15;
  --glass:rgba(17,22,30,.62); --glass-hi:rgba(26,33,44,.72); --glass-solid:#10151d;
  --stroke:rgba(255,255,255,.07); --stroke-2:rgba(255,255,255,.13); --stroke-hi:rgba(255,255,255,.22);
  --ink:#eef2f7; --ink-2:#a3adba; --ink-3:#687384;
  --teal:#47dcbf; --teal-ink:#03241d; --teal-dim:rgba(71,220,191,.14);
  --gold:#e9b44c; --gold-hi:#ffe0a1; --gold-dim:rgba(233,180,76,.14); --gold-ink:#2a1c03;
  --amber:#ff9d5c; --amber-dim:rgba(255,157,92,.13);
  --violet:#a698ff; --violet-dim:rgba(166,152,255,.14);
  --rose:#ff6a7c; --rose-dim:rgba(255,106,124,.14);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -24px rgba(0,0,0,.7);
  --aurora-o:.22; --grain-o:.05;
  --f-ui:"Geist","Plex Arabic",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono","Plex Arabic",ui-monospace,"SF Mono",Menlo,monospace;
  --f-ruqaa:"Aref Ruqaa","Plex Arabic",serif;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.099 24.3%,1.108 26%,1.103 27.9%,1.073 32.3%,1.007 41.9%,.98 47.9%,.974 52.8%,.987 64.3%,1.002 77.4%,1);
  --out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eef1f5; --bg-2:#e6eaf0;
  --glass:rgba(255,255,255,.66); --glass-hi:rgba(255,255,255,.85); --glass-solid:#ffffff;
  --stroke:rgba(10,20,35,.08); --stroke-2:rgba(10,20,35,.14); --stroke-hi:rgba(10,20,35,.24);
  --ink:#0b1119; --ink-2:#4a5565; --ink-3:#7c8695;
  --teal:#0b8f77; --teal-ink:#ffffff; --teal-dim:rgba(11,143,119,.1);
  --gold:#b07a12; --gold-hi:#e7b453; --gold-dim:rgba(176,122,18,.11); --gold-ink:#ffffff;
  --amber:#c4580e; --amber-dim:rgba(196,88,14,.1);
  --violet:#5a49d8; --violet-dim:rgba(90,73,216,.1);
  --rose:#c42c40; --rose-dim:rgba(196,44,64,.1);
  --shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -26px rgba(20,30,50,.35);
  --aurora-o:.35; --grain-o:.035;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-ui);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:var(--grain-o);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--ink-2);font-size:.84rem}
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mono,.amt,.big,.mid{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.st-teal{stop-color:var(--teal)} .st-gold{stop-color:var(--gold)} .st-gold-hi{stop-color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---------- aurora ---------- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:var(--aurora-o)}
.aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(90px);will-change:transform}
.aurora .a1{background:radial-gradient(circle,var(--teal) 0,transparent 62%);left:-18vmax;top:-26vmax;animation:drift1 28s ease-in-out infinite alternate}
.aurora .a2{background:radial-gradient(circle,var(--gold) 0,transparent 62%);right:-22vmax;top:-10vmax;animation:drift2 34s ease-in-out infinite alternate}
.aurora .a3{background:radial-gradient(circle,var(--violet) 0,transparent 62%);left:20vmax;bottom:-40vmax;opacity:.7;animation:drift3 40s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(14vmax,10vmax) scale(1.1)}}
@keyframes drift2{to{transform:translate(-12vmax,16vmax) scale(.9)}}
@keyframes drift3{to{transform:translate(-10vmax,-12vmax) scale(1.15)}}

/* ---------- buttons ---------- */
.btn{border:0;border-radius:12px;padding:11px 18px;font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .5s var(--spring),box-shadow .3s,filter .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn-wide{width:100%}
.btn-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--teal) 88%,white),var(--teal));color:var(--teal-ink);box-shadow:0 8px 24px -10px var(--teal),0 1px 0 rgba(255,255,255,.35) inset}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 12px 30px -10px var(--teal),0 1px 0 rgba(255,255,255,.35) inset}
.btn-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--gold-ink);box-shadow:0 10px 28px -12px var(--gold),0 1px 0 rgba(255,255,255,.5) inset}
.btn-gold:hover{filter:brightness(1.05)}
.btn-danger{background:var(--rose-dim);color:var(--rose);border:1px solid color-mix(in srgb,var(--rose) 30%,transparent)}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn.loading span{opacity:0}
.btn.loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.btn{position:relative}
@keyframes spin{to{transform:rotate(1turn)}}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--stroke);background:var(--glass);color:var(--ink-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:color .2s,border-color .2s,transform .5s var(--spring)}
.icon-btn:hover{color:var(--ink);border-color:var(--stroke-2)}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-btn[aria-pressed="true"]{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
#btn-private .eye-off{display:none}
#btn-private[aria-pressed="true"] .eye-open{display:none}
#btn-private[aria-pressed="true"] .eye-off{display:inline}

/* ---------- segmented control with sliding pill ---------- */
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:12px;background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.seg button{position:relative;z-index:1;border:0;background:none;color:var(--ink-3);font-weight:500;font-size:.8rem;padding:6px 11px;border-radius:9px;transition:color .25s;white-space:nowrap}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{color:var(--ink)}
.seg-pill{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n,2));border-radius:9px;background:var(--glass-hi);border:1px solid var(--stroke-2);box-shadow:0 4px 14px -6px rgba(0,0,0,.5);transform:translateX(calc(var(--i,0) * 100%));transition:transform .55s var(--spring)}
.seg-lg button{font-size:.86rem;padding:9px 6px}
.seg-lg[data-mode="allah"] .seg-pill{background:var(--gold-dim);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.seg-lg[data-mode="allah"] button[aria-selected="true"]{color:var(--gold)}

/* ---------- form fields ---------- */
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:.76rem;font-weight:500;color:var(--ink-2)}
input,select,textarea{width:100%;min-width:0;background:color-mix(in srgb,var(--glass-solid) 70%,transparent);border:1px solid var(--stroke-2);border-radius:var(--r-sm);padding:11px 12px;font-size:.95rem;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:color-mix(in srgb,var(--teal) 60%,transparent);box-shadow:0 0 0 4px var(--teal-dim)}
textarea{resize:vertical;min-height:64px}
select{appearance:none;-webkit-appearance:none;padding-right:32px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;background-size:5px 5px;background-repeat:no-repeat}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(var(--inv,1));opacity:.6}
:root[data-theme="light"] input[type="date"]{--inv:0}

/* =================== LOGIN =================== */
.login{position:relative;z-index:1;min-height:100dvh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left))}
.login-card{width:min(400px,100%);display:grid;gap:18px;padding:34px 28px 26px;border-radius:28px;background:var(--glass);border:1px solid var(--stroke-2);backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3);box-shadow:var(--shadow);animation:rise .9s var(--spring) both}
.login-head{text-align:center;display:grid;gap:4px}
.login-head h1{font-size:2rem;letter-spacing:-.04em}
.login-head p{color:var(--ink-3);font-size:.85rem}
.mark{width:30px;height:30px}
.mark-lg{width:64px;height:64px;justify-self:center;filter:drop-shadow(0 8px 24px color-mix(in srgb,var(--teal) 50%,transparent))}
.mark-ring{stroke-dasharray:126;stroke-dashoffset:126;animation:draw 1.4s .2s var(--out) forwards;transform:rotate(-40deg);transform-origin:30px 30px}
.mark-tail{stroke-dasharray:18;stroke-dashoffset:18;animation:draw .5s 1.1s var(--out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.code-input{font-family:var(--f-mono);font-size:1.5rem;letter-spacing:.6em;text-align:center;padding:12px 0 12px .6em}
.login-msg{min-height:1.2em;font-size:.85rem;color:var(--rose);text-align:center}
.login-foot{text-align:center;font-size:.74rem;color:var(--ink-3)}
.notice{font-size:.85rem;line-height:1.45;padding:12px 14px;border-radius:12px;background:var(--gold-dim);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent)}
.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}

/* =================== APP =================== */
.app{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding-block:max(18px,env(safe-area-inset-top)) 120px;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));display:grid;gap:18px}
.topbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;animation:fade .6s var(--out) both}
.brand{display:flex;align-items:center;gap:10px}
.brand b{display:block;font-size:1.1rem;letter-spacing:-.03em;line-height:1.1}
.brand span{display:block;font-size:.74rem;color:var(--ink-3)}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tools-a,.tools-b{display:flex;gap:8px;align-items:center}
.seg-sm{--n:2}
.rate-chip{display:flex;align-items:center;gap:6px;height:38px;padding:0 10px;border-radius:11px;border:1px solid var(--stroke);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:.78rem;color:var(--ink-3)}
.rate-chip input{width:64px;border:0;background:none;padding:0;font-family:var(--f-mono);font-size:.85rem;color:var(--ink);text-align:center;box-shadow:none}
.rate-chip:focus-within{border-color:color-mix(in srgb,var(--teal) 50%,transparent)}
.sec-banner{padding:12px 16px;border-radius:14px;background:var(--rose-dim);border:1px solid color-mix(in srgb,var(--rose) 30%,transparent);color:var(--rose);font-size:.88rem}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.card{position:relative;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);box-shadow:var(--shadow);padding:20px 22px;min-width:0;overflow:hidden;isolation:isolate}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(160deg,var(--stroke-hi),transparent 38%,transparent 70%,var(--stroke-2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--glow,var(--teal)) 12%,transparent),transparent 60%)}
.card:hover::after{opacity:1}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card h3{font-size:1.05rem;margin-top:2px}

.reveal{animation:rise .9s calc(var(--d,0) * 70ms + 80ms) var(--spring) both}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

.hero{grid-column:span 7;grid-row:span 2;display:flex;flex-direction:column;gap:6px;--glow:var(--teal)}
.big{font-size:clamp(2.4rem,5.4vw,4.1rem);font-weight:500;line-height:1.02;letter-spacing:-.05em;margin-top:6px;background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 62%,var(--teal)));-webkit-background-clip:text;background-clip:text;color:transparent}
.delta{font-family:var(--f-mono);font-size:.78rem;padding:4px 9px;border-radius:99px;background:var(--teal-dim);color:var(--teal);white-space:nowrap}
.delta:empty{display:none}
.chart-wrap{margin-top:14px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.cum-chart{width:100%;flex:1;min-height:190px;height:190px;overflow:visible}
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.74rem;color:var(--ink-3)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.lg{display:inline-block;width:14px;height:3px;border-radius:2px}
.lg-teal{background:var(--teal)} .lg-gold{background:var(--gold)} .lg-violet{background:var(--violet)}
.lg-gold-dash{background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 7px)}
.c-area{fill:url(#cum-fill)}
.c-line{fill:none;stroke:var(--teal);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.c-due{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:5 5;vector-effect:non-scaling-stroke;opacity:.85}
.c-given{fill:none;stroke:var(--gold);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.c-grid{stroke:var(--stroke);stroke-width:1;vector-effect:non-scaling-stroke}
.c-dot{fill:var(--teal);stroke:var(--bg);stroke-width:3;vector-effect:non-scaling-stroke}
.c-clip rect{transform-origin:left;animation:sweep 1.6s .35s var(--out) both}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.c-empty{fill:var(--ink-3);font-size:13px;font-family:var(--f-ui)}
.st-fill-a{stop-color:var(--teal);stop-opacity:.36} .st-fill-b{stop-color:var(--teal);stop-opacity:0}
.chart-axis{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);margin-top:-4px}

/* حق الله */
.haq{grid-column:span 5;grid-row:span 2;display:grid;gap:16px;align-content:start;justify-items:center;text-align:center;--glow:var(--gold);
  background:radial-gradient(120% 80% at 50% 0%,var(--gold-dim),transparent 60%),var(--glass)}
.haq-head{display:grid;gap:2px;justify-items:center}
.ruqaa{font-family:var(--f-ruqaa);font-weight:700;font-size:2.6rem;line-height:1.3;letter-spacing:0;background:linear-gradient(180deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.ring-wrap{position:relative;width:min(230px,70vw);aspect-ratio:1;max-width:100%}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:var(--gold-dim);stroke-width:14}
.ring-fill{fill:none;stroke-width:14;stroke-linecap:round;stroke-dasharray:527.8;stroke-dashoffset:527.8;transition:stroke-dashoffset 1.8s var(--out);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gold) 55%,transparent))}
.ring-center{position:absolute;inset:0;display:grid;place-content:center;gap:2px}
.ring-center b{font-size:clamp(1.5rem,3.4vw,2rem);font-weight:500;color:var(--gold)}
.ring-center.done b{color:var(--teal)}
.haq-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin:0}
.haq-stats div{padding:10px 12px;border-radius:var(--r-md);background:color-mix(in srgb,var(--glass-solid) 50%,transparent);border:1px solid var(--stroke)}
.haq-stats dt{font-size:.72rem;color:var(--ink-3)}
.haq-stats dd{margin:2px 0 0;font-size:1.05rem}
.haq .btn{width:100%}
.ayah{font-family:"Plex Arabic",var(--f-ui);font-size:.92rem;color:color-mix(in srgb,var(--gold) 75%,var(--ink-2));line-height:1.9}
.ayah span{font-size:.75rem;color:var(--ink-3)}

/* tiles */
.tile{grid-column:span 3;display:grid;gap:4px;align-content:start}
.mid{font-size:clamp(1.35rem,2.3vw,1.7rem);font-weight:500;margin-top:4px}
.tone-amber{--glow:var(--amber)} .tone-amber .mid{color:var(--amber)}
.tone-violet{--glow:var(--violet)} .tone-violet .mid{color:var(--violet)}
.tone-teal{--glow:var(--teal);background:linear-gradient(160deg,var(--teal-dim),transparent 70%),var(--glass)} .tone-teal .mid{color:var(--teal)}

/* flow chart */
.flow{grid-column:span 12;display:grid;gap:14px}
.flow-chart{width:100%;height:auto;overflow:visible}
.f-bar{transform-box:fill-box;transform-origin:bottom;animation:grow .9s var(--spring) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.f-in{fill:var(--teal)} .f-allah{fill:var(--gold)} .f-biz{fill:var(--violet)}
.f-label{fill:var(--ink-3);font:500 11px var(--f-mono)}
.f-val{fill:var(--ink-2);font:500 10px var(--f-mono)}
.f-grid{stroke:var(--stroke);stroke-width:1}
.f-now{fill:var(--ink)}

/* ---------- blocks ---------- */
.block{display:grid;gap:14px;margin-top:8px}
.block-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.block-head h2{font-size:1.35rem;letter-spacing:-.03em;display:flex;align-items:baseline;gap:8px}
.count{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--stroke);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink-3);font-size:.78rem;font-weight:500;padding:6px 12px;border-radius:99px;transition:color .2s,border-color .2s,background .2s}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink);border-color:var(--stroke-hi);background:var(--glass-hi)}

/* deals */
.deals{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.deal{display:grid;gap:14px;animation:rise .8s calc(var(--k,0) * 60ms) var(--spring) both}
.deal-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.deal-top h3{font-size:1.05rem;line-height:1.3}
.deal-top p{font-size:.82rem;color:var(--ink-2);margin-top:2px}
.pill{font-size:.7rem;font-weight:600;padding:4px 9px;border-radius:99px;white-space:nowrap;letter-spacing:.02em}
.pill-active{background:var(--teal-dim);color:var(--teal)}
.pill-done{background:var(--violet-dim);color:var(--violet)}
.pill-cancelled{background:var(--rose-dim);color:var(--rose)}
.deal-money{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.deal-money b{font-size:1.6rem;font-weight:500;letter-spacing:-.04em}
.deal-money span{color:var(--ink-3);font-family:var(--f-mono);font-size:.85rem}
.bar{height:8px;border-radius:99px;background:var(--stroke);overflow:hidden;position:relative}
.bar i{position:absolute;inset:0;width:calc(var(--p,0) * 1%);border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--teal) 60%,transparent),var(--teal));transition:width 1.4s var(--out)}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);animation:shine 2.6s 1.2s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.deal-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.deal-facts div{min-width:0}
.deal-facts dt{font-size:.7rem;color:var(--ink-3)}
.deal-facts dd{margin:2px 0 0;font-family:var(--f-mono);font-size:.88rem;overflow-wrap:anywhere}
.deal-facts .owed{color:var(--amber)} .deal-facts .paid{color:var(--teal)} .deal-facts .gold{color:var(--gold)}
.deal-note{font-size:.8rem;color:var(--ink-3)}
.deal-pays{display:grid;gap:6px;padding:10px 12px;border-radius:var(--r-md);background:color-mix(in srgb,var(--glass-solid) 45%,transparent);border:1px solid var(--stroke)}
.deal-pays li{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--ink-2)}
.deal-pays li b{font-family:var(--f-mono);font-weight:500;color:var(--ink)}
.deal-pays ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.deal-actions{display:flex;gap:6px;flex-wrap:wrap}
.ghost{border:1px solid var(--stroke);background:transparent;color:var(--ink-2);font-size:.78rem;font-weight:500;padding:7px 11px;border-radius:9px;transition:all .2s}
.ghost:hover{color:var(--ink);border-color:var(--stroke-2)}
.ghost.primary{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 35%,transparent);background:var(--teal-dim)}
.ghost.armed{background:var(--rose);border-color:var(--rose);color:#fff}
.ghost.push{margin-left:auto}

/* timeline */
.timeline{display:grid;gap:18px}
.t-month{display:grid;gap:4px}
.t-month h4{margin:0 0 4px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.t-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:rise .7s calc(var(--k,0) * 40ms) var(--spring) both;transition:border-color .2s}
.t-row:hover{border-color:var(--stroke-2)}
.t-dot{width:34px;height:34px;border-radius:11px;display:grid;place-items:center}
.t-dot svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.k-in .t-dot{background:var(--teal-dim);color:var(--teal)}
.k-allah .t-dot{background:var(--gold-dim);color:var(--gold)}
.k-biz .t-dot{background:var(--violet-dim);color:var(--violet)}
.t-main{min-width:0}
.t-main b{display:block;font-weight:500;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-main span{display:block;font-size:.78rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-amt{text-align:right;font-family:var(--f-mono);font-size:.95rem;white-space:nowrap}
.t-amt small{display:block;font-size:.7rem;color:var(--ink-3)}
.k-in .t-amt{color:var(--teal)} .k-allah .t-amt{color:var(--gold)} .k-biz .t-amt{color:var(--violet)}

.empty{padding:34px 20px;text-align:center;border-radius:var(--r-lg);border:1px dashed var(--stroke-2);color:var(--ink-3);font-size:.9rem;display:grid;gap:10px;justify-items:center}
.empty b{color:var(--ink);font-weight:500}

.app-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.74rem;color:var(--ink-3);margin-top:10px}
kbd{font-family:var(--f-mono);font-size:.7rem;padding:1px 5px;border-radius:5px;border:1px solid var(--stroke-2);background:var(--glass)}

/* FAB */
.fab{position:fixed;z-index:20;right:max(22px,calc(env(safe-area-inset-right) + 16px));bottom:max(22px,calc(env(safe-area-inset-bottom) + 16px));display:flex;align-items:center;gap:8px;padding:14px 20px 14px 16px;border:0;border-radius:18px;font-weight:600;color:var(--teal-ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--teal) 85%,white),var(--teal));box-shadow:0 18px 40px -14px var(--teal),0 1px 0 rgba(255,255,255,.4) inset;animation:rise 1s .9s var(--spring) both;transition:transform .5s var(--spring)}
.fab:hover{transform:translateY(-3px)}
.fab:active{transform:scale(.95)}
.fab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* ---------- dialogs (sheet) ---------- */
.sheet{border:0;padding:0;margin:0;max-width:none;max-height:none;background:transparent;color:var(--ink);inset:0 0 0 auto;height:100dvh;width:min(460px,100vw)}
.sheet::backdrop{background:rgba(3,5,8,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .3s ease both}
.sheet[open] .sheet-body{animation:slide-in .6s var(--spring) both}
.sheet.closing .sheet-body{animation:slide-out .28s var(--out) both}
.sheet.closing::backdrop{animation:fade .28s reverse both}
@keyframes slide-in{from{transform:translateX(105%)}to{transform:none}}
@keyframes slide-out{to{transform:translateX(105%)}}
.sheet-body{height:100%;overflow-y:auto;display:grid;align-content:start;gap:16px;padding:22px 22px max(28px,env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg-2) 86%,transparent);backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);border-left:1px solid var(--stroke-2);box-shadow:-30px 0 60px -30px rgba(0,0,0,.6)}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{font-size:1.4rem;letter-spacing:-.03em}
.row2{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}
.money-in{display:grid;grid-template-columns:1fr 86px;gap:6px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:8px;animation:rise .5s var(--spring) both}
.split div{padding:10px 12px;border-radius:12px;display:grid;gap:2px}
.split div:first-child{background:var(--gold-dim);color:var(--gold)}
.split div:last-child{background:var(--teal-dim);color:var(--teal)}
.split span{font-size:.72rem;opacity:.85}
.split b{font-size:1.05rem;font-weight:500}
.form-msg{min-height:1.1em;font-size:.84rem;color:var(--rose)}
#entry[data-mode="allah"] #e-submit{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--gold-ink);box-shadow:0 10px 28px -12px var(--gold)}
#entry[data-mode="biz"] #e-submit{background:linear-gradient(180deg,color-mix(in srgb,var(--violet) 80%,white),var(--violet));color:#120c33;box-shadow:0 10px 28px -12px var(--violet)}

/* security */
.sec-facts,.sec-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sec-facts li{display:flex;gap:10px;align-items:center;font-size:.86rem;padding:10px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--stroke)}
.sec-facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--teal-dim);flex:none}
.sec-facts li.warn::before{background:var(--amber);box-shadow:0 0 0 4px var(--amber-dim)}
.sec-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-top:6px}
.sec-list li{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;padding:10px 12px;border-radius:12px;border:1px solid var(--stroke)}
.sec-list li span:last-child{color:var(--ink-3);text-align:right;font-family:var(--f-mono);font-size:.76rem}
.sec-list .bad{color:var(--rose)}
.sec-list .you{color:var(--teal);font-size:.7rem;margin-left:6px}

/* toasts */
.toasts{position:fixed;z-index:60;left:50%;bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));transform:translateX(-50%);display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{padding:10px 16px;border-radius:12px;background:var(--glass-hi);border:1px solid var(--stroke-2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow);font-size:.88rem;animation:toast-in .5s var(--spring) both}
.toast.out{animation:toast-out .3s var(--out) both}
.toast.gold{color:var(--gold)}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px) scale(.97)}}

/* privacy mode */
body.private .amt,body.private .t-amt,body.private .deal-facts dd,body.private .f-val,body.private .deal-pays b{filter:blur(9px);transition:filter .3s}
body.private .cum-chart,body.private .flow-chart{filter:blur(6px)}
.amt,.t-amt{transition:filter .3s}

/* boot */
body.booting .app,body.booting .login{visibility:hidden}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero{grid-column:span 12;grid-row:auto}
  .haq{grid-column:span 12;grid-row:auto}
  .tile{grid-column:span 6}
}
@media (max-width:640px){
  .app{gap:14px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .bento{gap:10px}
  .tile{grid-column:span 12}
  .card{padding:18px}
  .topbar{display:grid;grid-template-columns:1fr auto;gap:12px 8px}
  .tools{display:contents}
  .tools-b{gap:6px}
  .tools-b .icon-btn{width:36px;height:36px}
  .brand{order:1} .tools-b{order:2} .tools-a{order:3;grid-column:1 / -1;justify-content:space-between}
  .brand span{display:none}
  .sheet{inset:auto 0 0 0;width:100vw;height:auto;max-height:92dvh}
  .sheet-body{max-height:92dvh;border-left:0;border-top:1px solid var(--stroke-2);border-radius:24px 24px 0 0}
  @keyframes slide-in{from{transform:translateY(100%)}to{transform:none}}
  @keyframes slide-out{to{transform:translateY(100%)}}
  .row2{grid-template-columns:1fr}
  .t-row{grid-template-columns:auto 1fr auto;gap:10px;padding:10px 12px}
  .t-row .ghost{grid-column:1 / -1;justify-self:end}
  .fab span{display:none}
  .fab{padding:16px;border-radius:18px}
  .deals{grid-template-columns:minmax(0,1fr)}
  .app-foot span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
  .aurora i{animation:none}
}
.c-clip rect{transform-box:fill-box}

.ring-fill.zero{opacity:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.toast{unicode-bidi:plaintext}
/* safety net: if the animation clock stalls, never leave content hidden */
body.settled .reveal,body.settled .deal,body.settled .t-row,body.settled .topbar,body.settled .fab{animation:none!important;opacity:1!important;transform:none!important}
body.settled .c-clip rect,body.settled .f-bar{animation:none!important;transform:none!important}
body.settled .ring-fill,body.settled .bar i{transition:none!important}