/* Layout: phone-app shell — fixed header, scrolling screen, bottom tab bar; navy chalkboard + saffron chalk accent */
:root{
  --bg:#f3f6fc; --card:#ffffff; --line:#e1e8f4; --ink:#0f1b33; --muted:#5f6b85;
  --navy:#1d4ed8; --navy2:#2563eb; --onnavy:#ffffff; --onprimary:#ffffff; --chalk:#2563eb; --chalk-soft:#e8f0ff;
  --ok:#15803d; --ok-soft:#e7f4ec; --bad:#c2312f; --bad-soft:#fbe9e8; --warn:#a16207; --warn-soft:#f8f0dc;
  --blue-soft:#e8f0ff; --violet:#4f46e5; --violet-soft:#eef0ff; --wa:#1fa855;
  --tile:#eef3fc; --bar2:#bfd3f7; --logo-bg:#ffffff; --logo-fg:#1d4ed8;
  --grad:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 55%,#3b82f6 100%);
  --display:"Manrope","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"Manrope","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",sans-serif;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0b1220; --card:#111a2e; --line:#1f2b45; --ink:#e8eefc; --muted:#94a3c4;
  --navy:#0f1e44; --navy2:#3b82f6; --onnavy:#ffffff; --onprimary:#ffffff; --chalk:#60a5fa; --chalk-soft:#15233f;
  --ok:#4ade80; --ok-soft:#14261b; --bad:#f87171; --bad-soft:#2d1717; --warn:#facc15; --warn-soft:#2b2510;
  --blue-soft:#15233f; --violet:#a5b4fc; --violet-soft:#1a2142; --wa:#22c55e;
  --tile:#16213a; --bar2:#334a75; --logo-bg:#ffffff; --logo-fg:#1d4ed8;
  --grad:linear-gradient(135deg,#0b1a3d 0%,#13306f 60%,#1d4ed8 100%); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b1220; --card:#111a2e; --line:#1f2b45; --ink:#e8eefc; --muted:#94a3c4;
  --navy:#0f1e44; --navy2:#3b82f6; --onnavy:#ffffff; --onprimary:#ffffff; --chalk:#60a5fa; --chalk-soft:#15233f;
  --ok:#4ade80; --ok-soft:#14261b; --bad:#f87171; --bad-soft:#2d1717; --warn:#facc15; --warn-soft:#2b2510;
  --blue-soft:#15233f; --violet:#a5b4fc; --violet-soft:#1a2142; --wa:#22c55e;
  --tile:#16213a; --bar2:#334a75; --logo-bg:#ffffff; --logo-fg:#1d4ed8;
  --grad:linear-gradient(135deg,#0b1a3d 0%,#13306f 60%,#1d4ed8 100%); color-scheme:dark}
html,body{height:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
*{box-sizing:border-box}
#app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;background:var(--bg)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--navy);color:var(--onnavy);display:flex;align-items:center;gap:12px;padding:14px 16px}
.top h1{font-family:var(--display);font-weight:600;font-size:21px;margin:0;line-height:1.2;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{background:none;border:0;color:inherit;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer;flex:none}
.iconbtn:hover{background:rgba(255,255,255,.12)}
.screen{flex:1;padding:16px 16px 110px;display:flex;flex-direction:column;gap:16px}
.hero{background:var(--navy);color:var(--onnavy);margin:-16px -16px 0;padding:18px 16px 56px;display:flex;flex-direction:column;gap:16px}
.hello{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;border-radius:14px;background:var(--chalk);color:#fff;display:grid;place-items:center;font-family:var(--display);font-size:24px;font-weight:700;flex:none;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:cover}
.hello small{opacity:.75;display:block;font-size:13px}
.hello b{font-family:var(--display);font-size:22px;font-weight:600;line-height:1.1}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:rgba(255,255,255,.1);border-radius:14px;padding:12px 8px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;opacity:.8}
.lift{margin-top:-52px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.card h2,.sec{font-family:var(--display);font-weight:600;font-size:19px;margin:0;line-height:1.2;text-wrap:balance}
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.pill{font-size:12px;padding:3px 10px;border-radius:99px;background:var(--bg);color:var(--muted);font-weight:500;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.mainfn{display:flex;flex-direction:column;gap:10px}
.mf{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;background:var(--bg);border:0;color:var(--ink);text-align:left;cursor:pointer;font:inherit;width:100%}
.mf:hover{background:var(--blue-soft)}
.mf .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none}
.mf b{display:block;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2}
.mf small{color:var(--muted)}
.mf .chev{margin-left:auto;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:var(--ink);font:inherit;cursor:pointer;padding:4px;border-radius:12px;text-align:center}
.tile:hover .ic{transform:translateY(-2px)}
.tile .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;transition:transform .15s}
.tile span{font-size:13.5px;font-weight:500;line-height:1.2}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);background:none;border-left:0;border-right:0;border-top:0;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer}
.li:last-child{border-bottom:0}
.li .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.li .txt{flex:1;min-width:0}
.li .txt b{display:block;font-weight:600;font-size:15.5px;line-height:1.25}
.li .txt small{color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .end{text-align:right;font-variant-numeric:tabular-nums;flex:none}
.av{width:42px;height:42px;border-radius:50%;background:var(--blue-soft);color:var(--navy2);display:grid;place-items:center;font-weight:600;flex:none;overflow:hidden;font-family:var(--display);font-size:17px}
.av img{width:100%;height:100%;object-fit:cover}
:root[data-theme="dark"] .av{color:#bcd0ff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .av{color:#bcd0ff}}
.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));z-index:6}
.tabs button{background:none;border:0;font:inherit;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;cursor:pointer;font-size:13px;font-weight:500}
.tabs button.on{color:var(--navy2)}
:root[data-theme="dark"] .tabs button.on{color:var(--chalk)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tabs button.on{color:var(--chalk)}}
.fab{position:fixed;right:max(16px,calc(50% - 244px));bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:7;background:var(--chalk);color:#fff;border:0;border-radius:99px;padding:12px 20px;font-family:var(--display);font-weight:600;font-size:16px;display:flex;gap:8px;align-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.btn{background:var(--navy2);color:#fff;border:0;border-radius:12px;padding:12px 16px;font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.wa{background:var(--wa)} .btn.sm{padding:7px 12px;font-size:13.5px;border-radius:10px} .btn.chalk{background:var(--chalk)} .btn.danger{background:var(--bad)}
.btn:focus-visible,.mf:focus-visible,.tile:focus-visible,.li:focus-visible,.tabs button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--chalk);outline-offset:2px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.btnrow .btn{flex:1}
.formbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;background:var(--card);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr 1fr;gap:10px;z-index:6}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:14px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px;width:100%;min-width:0}
textarea{min-height:90px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 11px;font:inherit;cursor:pointer;font-size:14px}
.chip.on{background:var(--navy2);color:#fff;border-color:var(--navy2)}
.radio{display:flex;gap:16px;flex-wrap:wrap}
.radio label{font-weight:400;display:flex;align-items:center;gap:6px}
.radio input{width:auto}
.photo{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:13.5px}
.photo .av{width:92px;height:92px;font-size:32px}
.att{display:flex;gap:6px}
.att button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--muted);font:inherit;font-weight:600;cursor:pointer}
.att button.P.on{background:var(--ok);color:#fff;border-color:var(--ok)}
.att button.A.on{background:var(--bad);color:#fff;border-color:var(--bad)}
.att button.L.on{background:var(--warn);color:#fff;border-color:var(--warn)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.money{font-variant-numeric:tabular-nums;font-weight:600}
.due{color:var(--bad)} .paid{color:var(--ok)}
.sumrow{display:flex;justify-content:space-between;align-items:center;background:var(--bg);border-radius:12px;padding:12px 14px;margin-top:12px}
.legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.chart svg{width:100%;height:auto;display:block}
.empty{color:var(--muted);text-align:center;padding:22px 8px}
.note{background:var(--blue-soft);border-radius:12px;padding:12px 14px;font-size:14px}
.note.warn{background:var(--warn-soft)}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th,td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{color:var(--muted);font-weight:500;font-size:13px}
.idcard{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.idcard .h{background:var(--navy);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600}
.idcard .b{display:flex;gap:14px;padding:14px;align-items:center}
.idcard .b .av{width:72px;height:72px;font-size:26px;border-radius:14px}
.idcard .stripe{height:6px;background:var(--chalk)}
.search{position:relative}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(140px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;z-index:20;font-weight:500;font-size:14px;max-width:90%}
.demo{background:var(--chalk-soft);color:var(--ink);font-size:13px;padding:8px 16px;text-align:center}
.tplvars{display:flex;flex-wrap:wrap;gap:6px}
.tplvars button{font:inherit;font-size:12px;border:1px dashed var(--line);background:var(--bg);color:var(--muted);border-radius:8px;padding:4px 8px;cursor:pointer}
.lockscr{position:fixed;inset:0;background:var(--navy);color:#fff;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}
.lockscr input{max-width:240px;text-align:center;font-size:22px;letter-spacing:.3em}
.auth{min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:28px 16px;max-width:440px;margin:0 auto}
.auth .brand{display:flex;align-items:center;gap:12px}
.auth .brand b{font-family:var(--display);font-size:30px;line-height:1}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg button{border:0;background:none;font:inherit;font-weight:600;padding:9px;border-radius:9px;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--navy2);color:#fff}
.linkbtn{background:none;border:0;color:var(--navy2);font:inherit;font-weight:600;cursor:pointer;padding:4px;text-decoration:underline}
.sync{display:inline-flex;align-items:center;gap:6px;font-size:12px;opacity:.85}
.sync i{width:8px;height:8px;border-radius:50%;background:#5fd39a;display:inline-block}
.sync.busy i{background:var(--chalk)} .sync.err i{background:#ff7b7b}
.loading{min-height:60vh;display:grid;place-items:center;color:var(--muted)}
[hidden]{display:none!important}
img{max-width:100%}

/* ---- monochrome theme: icon tiles, buttons, accents in black & grey ---- */
.top,.hero,.lockscr{background:var(--grad)!important}
.tile .ic,.li .ic,.mf .ic{background:var(--tile)!important;color:var(--ink)!important}
.mf{background:var(--tile)}
.mf:hover{background:var(--line)}
.mf .ic{background:var(--card)!important;border:1px solid var(--line)}
.card{border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h2,.sec{font-weight:700;letter-spacing:-.01em}
.top h1,.hello b{font-weight:700;letter-spacing:-.01em}
.logo{background:var(--logo-bg)!important;color:var(--logo-fg)!important;border:1px solid var(--line);font-weight:800}
.logo svg{stroke:var(--logo-fg)}
.btn{background:var(--navy2);color:var(--onprimary)}
.btn.ghost{background:var(--card);color:var(--navy2);border:1px solid var(--line)}
.btn.wa{background:var(--wa);color:#fff}
.btn.danger{background:var(--bad);color:#fff}
.chip.on{background:var(--navy2);color:var(--onprimary);border-color:var(--navy2)}
.fab{background:var(--navy2);color:var(--onprimary);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.seg button.on{background:var(--navy2);color:var(--onprimary)}
.tabs button.on,:root[data-theme="dark"] .tabs button.on{color:var(--navy2)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tabs button.on{color:var(--navy2)}}
.tabs button.on svg{stroke-width:2.4}
.av,:root[data-theme="dark"] .av{background:var(--tile);color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .av{color:var(--ink)}}
.idcard .h{background:var(--grad)}
.idcard .stripe{background:var(--navy2)}
.note{background:var(--blue-soft)}
.note.warn{background:var(--warn-soft)}
.demo{background:var(--tile)}
.linkbtn{color:var(--navy2)}
.stat{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px)}
.pill{background:var(--tile)}

/* ---- iPhone-style colourful feature icons (rest of the app stays black & grey) ---- */
.tile .ic,.li .ic,.mf .ic{color:#fff!important;border:0!important;border-radius:28%!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.14)}
.tile .ic{width:60px;height:60px}
.tile .ic svg,.li .ic svg,.mf .ic svg{stroke:#fff;stroke-width:2.1}
.grid3{gap:18px 8px}
.tile .ic:has(> .i-batch),.li .ic:has(> .i-batch),.mf .ic:has(> .i-batch){background:linear-gradient(160deg,#3d9bff,#0a62e0)!important}
.tile .ic:has(> .i-users),.li .ic:has(> .i-users),.mf .ic:has(> .i-users){background:linear-gradient(160deg,#c36bf5,#8a3fe0)!important}
.tile .ic:has(> .i-check),.li .ic:has(> .i-check),.mf .ic:has(> .i-check){background:linear-gradient(160deg,#3fd46a,#1f9a45)!important}
.tile .ic:has(> .i-fee),.li .ic:has(> .i-fee),.mf .ic:has(> .i-fee){background:linear-gradient(160deg,#1fd1a0,#0a8f6c)!important}
.tile .ic:has(> .i-book),.li .ic:has(> .i-book),.mf .ic:has(> .i-book){background:linear-gradient(160deg,#5ccbff,#1690f0)!important}
.tile .ic:has(> .i-down),.li .ic:has(> .i-down),.mf .ic:has(> .i-down){background:linear-gradient(160deg,#ffae3a,#f2690d)!important}
.tile .ic:has(> .i-exam),.li .ic:has(> .i-exam),.mf .ic:has(> .i-exam){background:linear-gradient(160deg,#7b79f0,#4240cf)!important}
.tile .ic:has(> .i-staff),.li .ic:has(> .i-staff),.mf .ic:has(> .i-staff){background:linear-gradient(160deg,#4fd3e8,#0f8ea8)!important}
.tile .ic:has(> .i-report),.li .ic:has(> .i-report),.mf .ic:has(> .i-report){background:linear-gradient(160deg,#ff5a7d,#d61f4a)!important}
.tile .ic:has(> .i-id),.li .ic:has(> .i-id),.mf .ic:has(> .i-id){background:linear-gradient(160deg,#6fb6ff,#2f6fd8)!important}
.tile .ic:has(> .i-enq),.li .ic:has(> .i-enq),.mf .ic:has(> .i-enq){background:linear-gradient(160deg,#ffd23f,#ff9500)!important}
.tile .ic:has(> .i-cake),.li .ic:has(> .i-cake),.mf .ic:has(> .i-cake){background:linear-gradient(160deg,#ff7aa0,#e8366b)!important}
.tile .ic:has(> .i-mega),.li .ic:has(> .i-mega),.mf .ic:has(> .i-mega){background:linear-gradient(160deg,#ff6a5f,#d42a20)!important}
.tile .ic:has(> .i-msg),.li .ic:has(> .i-msg),.mf .ic:has(> .i-msg){background:linear-gradient(160deg,#45dc6e,#1d9e46)!important}
.tile .ic:has(> .i-gear),.li .ic:has(> .i-gear),.mf .ic:has(> .i-gear){background:linear-gradient(160deg,#a4a4ab,#5d5d64)!important}
.tile .ic:has(> .i-upload),.li .ic:has(> .i-upload),.mf .ic:has(> .i-upload){background:linear-gradient(160deg,#5b8cff,#3a37c4)!important}
.tile .ic:has(> .i-lock),.li .ic:has(> .i-lock),.mf .ic:has(> .i-lock){background:linear-gradient(160deg,#5a5a5f,#1c1c1e)!important}
.tile .ic:has(> .i-help),.li .ic:has(> .i-help),.mf .ic:has(> .i-help){background:linear-gradient(160deg,#3fe07d,#128c4e)!important}
.tile .ic:has(> .i-wa),.li .ic:has(> .i-wa),.mf .ic:has(> .i-wa){background:linear-gradient(160deg,#3fe07d,#128c4e)!important}
.tile .ic:has(> .i-trend),.li .ic:has(> .i-trend),.mf .ic:has(> .i-trend){background:linear-gradient(160deg,#ffa94d,#e8590c)!important}
.tile .ic:has(> .i-cal),.li .ic:has(> .i-cal),.mf .ic:has(> .i-cal){background:linear-gradient(160deg,#ff6a5f,#c9261c)!important}
.tile .ic:has(> .i-done),.li .ic:has(> .i-done),.mf .ic:has(> .i-done){background:linear-gradient(160deg,#c178ec,#7d2fb0)!important}
.tile .ic:has(> .i-bell),.li .ic:has(> .i-bell),.mf .ic:has(> .i-bell){background:linear-gradient(160deg,#ffb340,#e06c00)!important}
.tile .ic:has(> .i-plus),.li .ic:has(> .i-plus),.mf .ic:has(> .i-plus){background:linear-gradient(160deg,#3fd46a,#1f9a45)!important}
.tile .ic:has(> .i-note),.li .ic:has(> .i-note),.mf .ic:has(> .i-note){background:linear-gradient(160deg,#ffd23f,#e89400)!important}
.tile .ic:has(> .i-tools),.li .ic:has(> .i-tools),.mf .ic:has(> .i-tools){background:linear-gradient(160deg,#a4a4ab,#5d5d64)!important}
.tile .ic:has(> .i-trash),.li .ic:has(> .i-trash),.mf .ic:has(> .i-trash){background:linear-gradient(160deg,#ff6a5f,#c9261c)!important}
.tile .ic:has(> .i-phone),.li .ic:has(> .i-phone),.mf .ic:has(> .i-phone){background:linear-gradient(160deg,#3fd46a,#1f9a45)!important}
.tile .ic:has(> .i-edit),.li .ic:has(> .i-edit),.mf .ic:has(> .i-edit){background:linear-gradient(160deg,#6fb6ff,#2f6fd8)!important}
.tile .ic:has(> .i-user),.li .ic:has(> .i-user),.mf .ic:has(> .i-user){background:linear-gradient(160deg,#a4a4ab,#5d5d64)!important}
.tile .ic:has(> .i-refresh),.li .ic:has(> .i-refresh),.mf .ic:has(> .i-refresh){background:linear-gradient(160deg,#a4a4ab,#5d5d64)!important}
.tile .ic:has(> .i-dl),.li .ic:has(> .i-dl),.mf .ic:has(> .i-dl){background:linear-gradient(160deg,#3fd46a,#1f9a45)!important}
.tile .ic:has(> .i-dash),.li .ic:has(> .i-dash),.mf .ic:has(> .i-dash){background:linear-gradient(160deg,#3d9bff,#0a62e0)!important}
.tile .ic:has(> .i-quiz),.li .ic:has(> .i-quiz),.mf .ic:has(> .i-quiz){background:linear-gradient(160deg,#7b79f0,#4240cf)!important}
.tile .ic:has(> .i-doubt),.li .ic:has(> .i-doubt),.mf .ic:has(> .i-doubt){background:linear-gradient(160deg,#ffb340,#e06c00)!important}
.tile .ic:has(> .i-video),.li .ic:has(> .i-video),.mf .ic:has(> .i-video){background:linear-gradient(160deg,#ff6a5f,#c9261c)!important}
.tile .ic:has(> .i-branch),.li .ic:has(> .i-branch),.mf .ic:has(> .i-branch){background:linear-gradient(160deg,#3d9bff,#0a62e0)!important}
/* receipt */
.rcpt{display:flex;flex-direction:column;gap:14px}
.rc-head{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
.rc-head small{display:block;color:var(--muted)} .rc-name{font-size:19px;display:block}
.rc-title{display:flex;justify-content:space-between;font-weight:800;letter-spacing:.06em;font-size:14px}
.rc-amt{display:flex;justify-content:space-between;align-items:center;background:var(--tile);border-radius:14px;padding:14px 16px}
.rc-amt b{font-size:26px;font-variant-numeric:tabular-nums}
.rc-words{color:var(--muted);font-style:italic;font-size:14px}
.rc-sign{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;padding-top:26px}
.rc-sign span:last-child{border-top:1px solid var(--line);padding-top:6px}
.plan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-radius:14px;padding:12px 14px;background:var(--tile);border:1px solid var(--line);font-size:14px}
.plan b{flex:1;min-width:150px}
.plan.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--ink)}
.plan.warn{background:var(--warn-soft)}
@media print{body *{visibility:hidden!important}#rcpt,#rcpt *,#rpt,#rpt *{visibility:visible!important}#rcpt,#rpt{position:absolute;left:0;top:0;width:100%;border:0;box-shadow:none}#rpt .card{break-inside:avoid;box-shadow:none}.tabs,.fab,.top,.side{display:none!important}body:has(.side){padding-left:0!important}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---- Blue & White theme polish ---- */
.hero{border-radius:0 0 26px 26px;box-shadow:0 10px 30px rgba(29,78,216,.22)}
.top{box-shadow:0 4px 16px rgba(29,78,216,.18)}
.card{border-radius:18px;box-shadow:0 1px 2px rgba(15,27,51,.04),0 6px 20px rgba(29,78,216,.06)}
.btn{box-shadow:0 4px 12px rgba(37,99,235,.22)}
.btn.ghost,.btn.sm.ghost{box-shadow:none}
.btn:hover{filter:brightness(1.06)}
.mf{background:var(--blue-soft)}
.mf:hover{background:var(--tile)}
.tabs{box-shadow:0 -6px 20px rgba(15,27,51,.06)}
.tabs button.on{font-weight:700}
.chip.on{background:var(--navy2);border-color:var(--navy2);color:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--navy2);box-shadow:0 0 0 3px rgba(37,99,235,.15);outline:none}
.pill{background:var(--blue-soft);color:var(--navy2)}
.sec{color:var(--ink)}

/* ---- Login page ---- */
.authpage{min-height:100%;display:flex;flex-direction:column;background:var(--bg)}
.authside{background:var(--grad);color:#fff;padding:40px 22px 84px;border-radius:0 0 30px 30px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.authside::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
.authside .ab{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.authside .ab .logo{width:58px;height:58px;border-radius:18px;border:0}
.authside .ab b{font-family:var(--display);font-size:32px;line-height:1;font-weight:800;letter-spacing:-.02em;display:block}
.authside .ab small{opacity:.85;font-size:14.5px}
.authside .feat{display:none;position:relative;z-index:1}
.authpage .auth{margin-top:-60px;padding-top:0;justify-content:flex-start;width:100%;position:relative;z-index:2}
.authpage .auth .card{box-shadow:0 12px 34px rgba(15,27,51,.12)}

@media (min-width:700px) and (max-width:999px){#app:has(.authpage){max-width:none}.authpage .auth{max-width:480px}}
/* ---- Sidebar (PC only) ---- */
.side{display:none}
@media (min-width:700px){
 #app{max-width:880px}
 .tabs,.formbar{max-width:880px}
 .grid3{grid-template-columns:repeat(6,1fr)}
 .mainfn{display:grid;grid-template-columns:repeat(3,1fr)}
 .fab{right:max(16px,calc(50% - 424px))}
}
@media (min-width:1000px){
 body:has(.side){padding-left:264px}
 .side{display:flex;flex-direction:column;gap:6px;position:fixed;left:0;top:0;bottom:0;width:264px;background:var(--grad);color:#fff;padding:22px 14px;overflow-y:auto;z-index:8}
 .side .sb{display:flex;align-items:center;gap:12px;padding:4px 8px 18px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:8px}
 .side .sb .logo{width:44px;height:44px;border-radius:14px;border:0;font-size:20px}
 .side .sb b{display:block;font-family:var(--display);font-size:17px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
 .side .sb small{opacity:.75;font-size:12.5px}
 .side button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;color:rgba(255,255,255,.86);font:inherit;font-weight:600;font-size:15px;padding:10px 12px;border-radius:12px;cursor:pointer;text-align:left}
 .side button:hover{background:rgba(255,255,255,.1);color:#fff}
 .side button.on{background:#fff;color:#1d4ed8}
 .side button svg{flex:none}
 .side .sgrp{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.6;padding:12px 12px 4px}
 .side .sfoot{margin-top:auto;padding:14px 12px 4px;font-size:12.5px;opacity:.75;border-top:1px solid rgba(255,255,255,.15)}
 #app{max-width:1180px;padding:0 28px}
 .tabs{display:none}
 .screen{padding:24px 0 120px}
 .hero{margin:-24px 0 0;padding:28px 28px 70px}
 .top{margin:0 -28px;padding:16px 28px}
 .lift{margin-top:-58px}
 .screen.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px}
 .screen.cols>.hero,.screen.cols>.lift,.screen.cols>h2.sec,.screen.cols>.note,.screen.cols>.plan,.screen.cols>section[style*="padding-top"],.screen.cols>.span{grid-column:1/-1}
 .screen.cols .grid3,.screen.wide .grid3{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
 .screen.narrow{max-width:780px;width:100%;margin:0 auto}
 .formbar{left:calc(50% + 132px);max-width:780px}
 .fab{right:36px;bottom:32px}
 .toast{left:calc(50% + 132px);bottom:40px}
 .stats{grid-template-columns:repeat(3,minmax(0,240px))}
 .stat{padding:16px 12px}
 .stat b{font-size:30px}
 .tablewrap table{font-size:15px}
 /* login on PC: two halves */
 #app:has(.authpage){max-width:none;padding:0}
 .authpage{flex-direction:row;min-height:100vh}
 .authside{flex:1;border-radius:0;justify-content:center;padding:60px 64px}
 .authside .ab b{font-size:46px}
 .authside .ab .logo{width:76px;height:76px;border-radius:22px}
 .authside .feat{display:flex;flex-direction:column;gap:14px;margin-top:22px;font-size:16.5px}
 .authside .feat span{display:flex;align-items:center;gap:12px}
 .authside .feat i{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-style:normal;flex:none}
 .authpage .auth{flex:0 0 520px;margin:0;padding:40px 56px;justify-content:center}
}

.langsw{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;align-self:flex-end}
.langsw button{border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--muted);padding:6px 12px;border-radius:999px;cursor:pointer}
.langsw button.on{background:var(--navy2);color:#fff}
.side .langsw{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);align-self:auto}
.side .langsw button{color:rgba(255,255,255,.85)}
.side .langsw button.on{background:#fff;color:#1d4ed8}
.authpage .auth>.langsw{margin-bottom:-6px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plans.three{grid-template-columns:repeat(3,1fr)}@media (max-width:600px){.plans.three{grid-template-columns:1fr}}
.planc{border:1.5px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px;background:var(--card);position:relative}
.planc.best{border-color:var(--navy2);box-shadow:0 8px 24px rgba(37,99,235,.15)}
.planc .tag{position:absolute;top:-11px;right:12px;background:var(--navy2);color:#fff;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px}
.planc b.pr{font-family:var(--display);font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.planc small{color:var(--muted)}
.planc .btn{margin-top:8px;white-space:nowrap;padding-left:8px;padding-right:8px}
@media (max-width:360px){.plans{grid-template-columns:1fr}}
.tchip{flex:none;min-width:78px;height:38px;padding:0 10px;border-radius:10px;background:var(--blue-soft);color:var(--navy2);font-weight:700;font-size:13px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.stats3 b{display:block;font-size:24px;font-family:var(--display);line-height:1.1}
.stats3 span{font-size:12.5px;color:var(--muted)}
.segs{display:flex;gap:8px;flex-wrap:wrap}
.segs button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:99px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.segs button.on{background:var(--navy2);border-color:var(--navy2);color:#fff}
.qcard{display:flex;flex-direction:column;gap:10px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:560px){.opts{grid-template-columns:1fr}}
.opt{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:6px 10px;background:var(--bg)}
.opt input[type=radio]{width:20px;height:20px;accent-color:var(--ok);flex:none;margin:0}
.opt b{color:var(--muted);width:14px;flex:none}
.opt input:not([type=radio]){flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);padding:6px 0;outline:none}
.opt:has(input[type=radio]:checked){border-color:var(--ok);background:var(--ok-soft)}
.qfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.qfoot small{color:var(--muted)}
.qfoot .mk{display:flex;align-items:center;gap:8px;font-weight:600}
.qfoot .mk input{width:72px;padding:8px;border-radius:10px;border:1px solid var(--line);font:inherit;background:var(--card);color:var(--ink)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rank{width:26px;height:26px;border-radius:50%;background:var(--blue-soft);color:var(--navy2);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.thumb{max-height:220px;border-radius:12px;margin-bottom:10px;cursor:zoom-in;display:block}
.imgview{position:fixed;inset:0;background:rgba(5,10,25,.9);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px}
.imgview img{max-width:100%;max-height:82vh;border-radius:10px;background:#fff}
.sample{background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:12px 14px;margin:0;font-size:13.5px;white-space:pre-wrap;font-family:inherit}
.brsel{width:100%;margin-top:10px;padding:9px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-weight:600}
.brsel option{color:#0f1b33}
.hero .brsel{margin:0}
.ktiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.ktiles{grid-template-columns:repeat(2,1fr)}}
.kt{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:2px}
.kt b{font-size:22px;font-family:var(--display);line-height:1.15}.kt span{font-size:12.5px;color:var(--muted)}
.bell{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.bell i{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;font-style:normal;font-size:11.5px;font-weight:800;min-width:20px;height:20px;border-radius:99px;display:grid;place-items:center;padding:0 5px}
.bell.blink{animation:bellpulse 1.6s ease-in-out 6}
@keyframes bellpulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}50%{box-shadow:0 0 0 6px rgba(220,38,38,.22);color:var(--bad)}}
@media (prefers-reduced-motion: reduce){.bell.blink{animation:none;outline:2px solid var(--bad)}}
.fsel{flex:1;min-width:130px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600}
small.calc{color:var(--muted);font-size:12px;white-space:normal!important}
.chkrow{display:flex;gap:10px;align-items:center;font-weight:600}.chkrow input{width:20px;height:20px;accent-color:var(--navy2)}
.demobar{position:sticky;top:0;z-index:30;background:#f59e0b;color:#111;text-align:center;font-weight:700;font-size:13.5px;padding:8px 12px}
.filepick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.fstat{font-size:13.5px;color:var(--ok);font-weight:600}
.filechip{display:inline-flex;align-items:center;gap:6px;background:var(--blue-soft);color:var(--navy2);border-radius:10px;padding:7px 12px;font-weight:600;text-decoration:none;max-width:100%}.filechip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.instbar{display:flex;align-items:center;gap:10px;padding:12px 14px}.instbar b{flex:1;font-size:14.5px}.instbar .ic{width:36px;height:36px;border-radius:10px;background:var(--blue-soft);color:var(--navy2);display:grid;place-items:center;flex:none}
.gl{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}