/* =========================================================
   Edu Fees — one stylesheet for the whole site
   Brand: logo blue on white
   ========================================================= */
:root{
  --blue:#0A5CFF; --blue-600:#004CE6; --blue-700:#003BBA; --sky:#1EC8FF;
  --ink:#0B2152; --text:#1D2B4F; --muted:#62708F; --faint:#93A0BC;
  --mist:#F3F7FE; --tint:#EAF1FF; --line:#E1E9F7; --white:#fff;
  --green:#0B8F63; --green-bg:#E6F6EF; --red:#D2344B; --red-bg:#FDECEF; --amber:#B86E00; --amber-bg:#FFF4E0;
  --r-xl:22px; --r-lg:18px; --r-md:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(11,33,82,.05),0 10px 30px -18px rgba(11,33,82,.28);
  --brand-grad:linear-gradient(140deg,#1EC8FF 0%,#0A5CFF 42%,#0034CC 100%);
  --tab-h:68px; --top-h:60px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 15px/1.5 Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--mist);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{color:var(--ink);margin:0;line-height:1.2;letter-spacing:-.01em}
h1{font-size:22px;font-weight:800}
h2{font-size:17px;font-weight:700}
h3{font-size:15px;font-weight:700}
p{margin:0}
small{font-size:12.5px}
.ic{width:20px;height:20px;flex:none}
.num,.amt{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid rgba(10,92,255,.35);outline-offset:2px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)} .green{color:var(--green)} .red{color:var(--red)} .blue{color:var(--blue)}
.right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap}
.mt{margin-top:16px} .mt-s{margin-top:8px} .mb{margin-bottom:16px}
.row-flex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1080px;margin:0 auto;height:var(--top-h);display:flex;align-items:center;gap:12px;padding:0 16px}
.tb-brand img{width:36px;height:36px;border-radius:10px;object-fit:cover}
.tb-btn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--ink);background:var(--mist)}
.tb-btn:active{transform:scale(.94)}
.tb-title{min-width:0;flex:1;display:flex;flex-direction:column}
.tb-title strong{font-size:16px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-links{display:none;gap:4px}
.tb-links a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;color:var(--muted);font-weight:600;font-size:14px}
.tb-links a:hover{background:var(--mist);color:var(--ink)}
.tb-links a.on{background:var(--tint);color:var(--blue)}
.tb-links .ic{width:18px;height:18px}

/* ---------- Page ---------- */
.page{max-width:760px;margin:0 auto;padding:16px 16px calc(var(--tab-h) + 32px + env(safe-area-inset-bottom));animation:pageIn .35s var(--ease) both}
.page-wide .page{max-width:1080px}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:4px 2px 14px}
.page-head p{color:var(--muted);font-size:14px;margin-top:4px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 10px}
.section-title h2{font-size:16px}
.section-title a{font-size:14px;font-weight:600}

/* ---------- Tab bar (mobile) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding:6px 6px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--faint);font-size:11px;font-weight:600}
.tab-ic{width:46px;height:30px;border-radius:999px;display:grid;place-items:center;transition:background .25s var(--ease),color .25s}
.tabbar a.on{color:var(--blue)}
.tabbar a.on .tab-ic{background:var(--tint)}
.tabbar a:active .tab-ic{transform:scale(.92)}

@media (min-width:900px){
  .tb-links{display:flex}
  .tabbar{display:none}
  .page{padding-bottom:48px}
  .fab{bottom:32px!important}
}

/* ---------- Brand strip (hero) ---------- */
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--brand-grad);color:#fff;padding:20px 20px 18px;box-shadow:0 18px 40px -22px rgba(0,52,204,.7)}
.hero::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
.hero-label{font-size:14px;opacity:.86;font-weight:500}
.hero-amt{font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:4px 0 2px}
.hero-sub{font-size:13.5px;opacity:.85}
.hero-split{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22)}
.hero-split div{min-width:0}
.hero-split b{display:block;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-split span{font-size:12px;opacity:.8}
.hero a{color:#fff}

/* ---------- Sheets & lists ---------- */
.sheet{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.sheet-pad{padding:16px}
.sheet + .sheet{margin-top:12px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.list{list-style:none;margin:0;padding:0}
.li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);color:inherit;min-height:60px}
.li:first-child{border-top:0}
a.li:hover{background:#F8FAFF}
a.li:active{background:var(--tint)}
.li .grow{flex:1;min-width:0}
.li .grow strong{display:block;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .grow small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .end{text-align:right;flex:none}
.li .end strong{display:block;font-weight:700}
.li .end small{color:var(--muted)}
.li > .ic{color:var(--faint)}
.li-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--tint);color:var(--blue)}
.li-ic.green{background:var(--green-bg);color:var(--green)}
.li-ic.red{background:var(--red-bg);color:var(--red)}
.li-ic.amber{background:var(--amber-bg);color:var(--amber)}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;color:var(--blue);background:var(--tint)}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.who strong{display:block;color:var(--ink)} .who small{display:block;color:var(--muted)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:640px){.stats.s3{grid-template-columns:repeat(3,1fr)}.stats.s4{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;color:inherit;display:block;min-width:0}
a.stat:hover{border-color:#C9D8F5}
.stat span{display:block;font-size:13px;color:var(--muted);font-weight:500}
.stat b{display:block;font-size:21px;font-weight:800;color:var(--ink);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.stat.green b{color:var(--green)} .stat.red b{color:var(--red)} .stat.blue b{color:var(--blue)}
.stat small{display:block;color:var(--faint);margin-top:2px}

/* ---------- Action tiles (student page / menu) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:640px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14px;line-height:1.25;transition:transform .15s var(--ease),border-color .15s}
.tile .li-ic{width:38px;height:38px}
.tile:hover{border-color:#C9D8F5}
.tile:active{transform:scale(.97)}
.tile.danger{color:var(--red)} .tile.danger .li-ic{background:var(--red-bg);color:var(--red)}

/* ---------- Buttons ---------- */
.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r-md);font:inherit;font-weight:700;font-size:15px;text-align:center;transition:transform .12s var(--ease),background .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 18px -10px rgba(10,92,255,.9)}
.btn-primary:hover{background:var(--blue-600)}
.btn-ghost{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:#C9D8F5;background:#FAFCFF}
.btn-soft{background:var(--tint);color:var(--blue)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger-soft{background:var(--red-bg);color:var(--red)}
.btn-green{background:var(--green);color:#fff}
.btn-block{display:flex;width:100%}
.btn-sm{height:36px;padding:0 14px;font-size:13.5px;border-radius:var(--r-sm)}
.btn .ic{width:18px;height:18px}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row > .btn{flex:1}
.fab{position:fixed;right:max(16px,calc(50% - 364px));bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom));z-index:44;height:54px;padding:0 20px 0 16px;border-radius:999px;background:var(--blue);color:#fff;display:flex;align-items:center;gap:8px;font-weight:700;box-shadow:0 14px 30px -12px rgba(10,92,255,.95);transition:transform .15s var(--ease)}
.fab:active{transform:scale(.95)}

/* ---------- Forms ---------- */
.form{display:grid;gap:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.grid-2.stack{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0}
.field > label,.label{font-size:13.5px;font-weight:600;color:var(--ink)}
.field .hint{font-size:12.5px;color:var(--muted)}
.req{color:var(--red)}
.input,select.input,textarea.input{width:100%;height:48px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#FBFCFF;font:inherit;font-size:16px;color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s;-webkit-appearance:none;appearance:none}
textarea.input{height:auto;min-height:88px;padding:12px 14px;resize:vertical}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362708F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:38px}
.input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(10,92,255,.12)}
.input::placeholder{color:#A6B1C9}
.input-amt{position:relative}
.input-amt::before{content:"₹";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--muted)}
.input-amt .input{padding-left:30px;font-weight:700;font-size:18px}
.input-big{height:60px!important;font-size:26px!important}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:54px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);width:42px;height:38px;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#FBFCFF;cursor:pointer}
.switch input{appearance:none;width:46px;height:28px;border-radius:999px;background:#CBD5E8;position:relative;cursor:pointer;transition:background .2s;flex:none;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.switch input:checked{background:var(--blue)}
.switch input:checked::after{transform:translateX(18px)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px;gap:4px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:flex;align-items:center;justify-content:center;height:40px;border-radius:8px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.seg input:checked + label{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(11,33,82,.12)}
.seg input:focus-visible + label{outline:3px solid rgba(10,92,255,.35)}

/* ---------- Search & chips ---------- */
.search{position:relative;margin-bottom:12px}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint)}
.search .input{padding-left:44px;height:50px;border-radius:var(--r-md);background:#fff}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin:0 -2px 12px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:36px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:13.5px;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.chip:hover{color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip b{font-weight:700;opacity:.7}
.range{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}
.range .input{height:38px;width:auto;flex:1;min-width:130px;font-size:14px}
.range span{color:var(--muted);font-size:13px}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.badge.green{background:var(--green-bg);color:var(--green)}
.badge.red{background:var(--red-bg);color:var(--red)}
.badge.blue{background:var(--tint);color:var(--blue)}
.badge.grey{background:#EEF1F7;color:var(--muted)}
.badge.amber{background:var(--amber-bg);color:var(--amber)}

/* ---------- Alerts / toast / empty ---------- */
.alert{padding:12px 14px;border-radius:var(--r-sm);font-weight:600;font-size:14px;margin-bottom:12px;border:1px solid transparent;animation:pageIn .3s var(--ease)}
.alert-success{background:var(--green-bg);color:#06704C;border-color:#BFE9D6}
.alert-error{background:var(--red-bg);color:#B0233A;border-color:#F7C8D1}
.alert-info{background:var(--tint);color:var(--blue-700);border-color:#CFE0FF}
.alert-warn{background:var(--amber-bg);color:#8A5300;border-color:#F8DFAE}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 20px);transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:60;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.empty{text-align:center;padding:36px 20px;color:var(--muted)}
.empty strong{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.empty-ic{width:52px;height:52px;border-radius:16px;background:var(--tint);color:var(--blue);display:grid;place-items:center;margin:0 auto 12px}
.empty .btn{margin-top:14px}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0;color:var(--muted);font-size:14px}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;padding:10px 14px;background:#F8FAFF;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table .r{text-align:right}
.table tfoot td{font-weight:800;color:var(--ink);background:#F8FAFF;border-top:1px solid var(--line)}

/* ---------- Bars (hisab chart) ---------- */
.bars{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;align-items:end;height:170px;padding:8px 4px 0}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bar-pair{display:flex;align-items:flex-end;gap:4px;height:100%;width:100%;justify-content:center}
.bar{width:14px;border-radius:6px 6px 3px 3px;background:var(--blue);transform-origin:bottom;animation:barUp .7s var(--ease) both}
.bar.exp{background:#9DB7EE}
.bar-col small{color:var(--muted);font-size:11.5px;font-weight:600}
@keyframes barUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--blue)}
.legend i.exp{background:#9DB7EE}
.meter{height:8px;border-radius:999px;background:#EEF2FA;overflow:hidden}
.meter i{display:block;height:100%;border-radius:inherit;background:var(--blue);transform-origin:left;animation:meterIn .8s var(--ease) both}
@keyframes meterIn{from{transform:scaleX(0)}}

/* ---------- Attendance ---------- */
.att-row{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-top:1px solid var(--line)}
.att-row:first-child{border-top:0}
.att-row .grow{flex:1;min-width:0}
.att-row .grow strong{display:block;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-row .grow small{color:var(--muted)}
.att-btns{display:flex;gap:8px;flex:none}
.att-btn{width:46px;height:46px;border-radius:14px;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;font:inherit;font-weight:800;font-size:15px;color:var(--faint);transition:background .2s,color .2s,border-color .2s,transform .12s}
.att-btn:active{transform:scale(.92)}
.att-btn.p.on{background:var(--green);border-color:var(--green);color:#fff;animation:pop .35s var(--ease)}
.att-btn.a.on{background:var(--red);border-color:var(--red);color:#fff;animation:pop .35s var(--ease)}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.cal b{font-size:11.5px;color:var(--muted);font-weight:600;padding:4px 0}
.cal span{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--faint);background:#F6F8FD}
.cal span.p{background:var(--green-bg);color:var(--green)}
.cal span.a{background:var(--red-bg);color:var(--red)}
.cal span.x{background:none}

/* ---------- Auth screens ---------- */
.auth{min-height:100vh;min-height:100dvh;display:grid;background:var(--white)}
.auth-side{background:var(--brand-grad);color:#fff;padding:28px 24px 64px;position:relative;overflow:hidden}
.auth-side::after{content:"";position:absolute;right:-90px;bottom:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0))}
.auth-logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;color:#fff}
.auth-logo img{width:52px;height:52px;border-radius:15px;box-shadow:0 10px 24px -10px rgba(0,0,0,.45);animation:logoIn .7s var(--ease) both}
@keyframes logoIn{from{opacity:0;transform:scale(.7) rotate(-8deg)}to{opacity:1;transform:none}}
.auth-side h1{color:#fff;font-size:28px;margin-top:28px;max-width:16ch}
.auth-side p{opacity:.88;margin-top:8px;max-width:38ch}
.auth-points{display:none;list-style:none;padding:0;margin:28px 0 0;gap:12px}
.auth-points li{display:flex;gap:10px;align-items:center;font-weight:500}
.auth-points .ic{background:rgba(255,255,255,.18);border-radius:8px;padding:4px;width:28px;height:28px}
.auth-main{background:#fff;border-radius:26px 26px 0 0;margin-top:-30px;position:relative;z-index:1;padding:28px 20px 40px;animation:sheetUp .5s var(--ease) both}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.auth-card{max-width:420px;margin:0 auto}
.auth-card h2{font-size:22px}
.auth-card > p{color:var(--muted);margin:4px 0 20px}
.auth-foot{margin-top:20px;text-align:center;color:var(--muted);font-size:14px}
.auth-help{display:flex;gap:10px;align-items:center;padding:12px 14px;background:var(--mist);border-radius:var(--r-sm);font-size:13.5px;color:var(--muted);margin-top:18px}
.auth-help a{font-weight:700}
@media (min-width:900px){
  .auth{grid-template-columns:1.05fr 1fr}
  .auth-side{padding:48px;display:flex;flex-direction:column;justify-content:center}
  .auth-side h1{font-size:40px}
  .auth-points{display:grid}
  .auth-main{margin:0;border-radius:0;display:flex;align-items:center;padding:48px}
  .auth-card{width:100%}
}

/* ---------- Receipt / ID card (public pages) ---------- */
.doc-page{background:#EEF3FC;min-height:100vh;padding:20px 12px 40px}
.receipt{max-width:560px;margin:0 auto;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 20px 50px -30px rgba(11,33,82,.5)}
.receipt-top{background:var(--brand-grad);color:#fff;padding:22px;display:flex;gap:14px;align-items:center}
.receipt-top img{width:56px;height:56px;border-radius:14px;background:#fff;object-fit:contain}
.receipt-top h1{color:#fff;font-size:19px}
.receipt-top p{opacity:.88;font-size:13px}
.receipt-body{padding:22px}
.receipt-amt{text-align:center;padding:18px;border:1.5px dashed #C9D8F5;border-radius:16px;margin:16px 0}
.receipt-amt b{display:block;font-size:34px;font-weight:800;color:var(--ink)}
.receipt-amt small{color:var(--muted)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;font-size:14px}
.kv span{display:block;color:var(--muted);font-size:12.5px}
.kv b{color:var(--ink);font-weight:600}
.receipt-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-top:16px;margin-top:16px;border-top:1px solid var(--line)}
.receipt-foot img{max-height:46px;max-width:120px;margin-left:auto}
.doc-actions{max-width:560px;margin:14px auto 0;display:flex;gap:10px}
.doc-actions .btn{flex:1}
.paid-stamp{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:800;border:2px solid var(--green);border-radius:10px;padding:4px 10px;transform:rotate(-4deg)}
.idcard{width:330px;margin:0 auto;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(11,33,82,.55)}
.idcard-top{background:var(--brand-grad);color:#fff;text-align:center;padding:18px 16px 54px;position:relative}
.idcard-top img{width:44px;height:44px;border-radius:12px;margin:0 auto 8px;background:#fff;object-fit:contain}
.idcard-top h1{color:#fff;font-size:16px}
.idcard-top p{font-size:11.5px;opacity:.85}
.idcard-photo{width:92px;height:92px;border-radius:50%;margin:-46px auto 0;position:relative;background:var(--tint);border:5px solid #fff;display:grid;place-items:center;color:var(--blue);font-size:36px;font-weight:800}
.idcard-body{padding:12px 22px 18px;text-align:center}
.idcard-body h2{font-size:19px}
.idcard-body .kv{text-align:left;margin-top:14px;grid-template-columns:1fr 1fr}
.idcard-foot{background:var(--ink);color:#fff;font-size:11px;text-align:center;padding:9px}

/* ---------- Progress bar on navigation ---------- */
.navbar-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--sky),var(--blue));z-index:100;opacity:0;transition:width .6s var(--ease),opacity .3s}
.navbar-progress.go{opacity:1;width:80%}

/* ---------- Print ---------- */
@media print{
  .topbar,.tabbar,.fab,.no-print,.doc-actions,.navbar-progress{display:none!important}
  body,.doc-page{background:#fff}
  .page{padding:0;max-width:none}
  .sheet,.receipt,.idcard{box-shadow:none}
  .hero,.receipt-top,.idcard-top{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- small fixes ---------- */
.kv b.red{color:var(--red)} .kv b.green{color:var(--green)}
.stats.tight{grid-template-columns:repeat(3,1fr)}
.stats.tight .stat{padding:12px}
@media (max-width:639px){
  .stats.s3:not(.tight) > :nth-child(3):last-child{grid-column:1/-1}
  .range .input{min-width:0;flex:1 1 0}
  .table{font-size:13px}
  .table th,.table td{padding:10px}
}
.form > .sheet + .sheet{margin-top:0}
.li form,.att-row form{margin:0}
details > summary::-webkit-details-marker{display:none}
details[open] > summary .ic:last-child{transform:rotate(90deg)}
summary .ic:last-child{transition:transform .2s var(--ease);color:var(--faint)}
.admin .stats.s4 .stat small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== v2: roles, WhatsApp, banners ===== */
.role-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-md);padding:5px;margin:4px 0 16px}
.role-tabs a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:10px;color:var(--muted);font-weight:700;font-size:13px;transition:background .2s,color .2s,box-shadow .2s}
.role-tabs a .ic{width:22px;height:22px}
.role-tabs a.on{background:#fff;color:var(--blue);box-shadow:0 1px 2px rgba(11,33,82,.08),0 6px 16px -10px rgba(10,92,255,.6)}
.btn-wa{background:#1FAF5A;color:#fff}
.btn-wa:hover{background:#18994E}
.wa-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:#E5F7EC;color:#1FAF5A}
.li .wa-ic{transition:transform .15s var(--ease)}
.li .wa-ic:active{transform:scale(.9)}
.tag-soft{font-size:11.5px;color:var(--green);font-weight:600}
.banners{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -2px 6px;padding:2px;border-radius:var(--r-xl)}
.banners::-webkit-scrollbar{display:none}
.banner{position:relative;flex:0 0 100%;scroll-snap-align:center;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:12/5;background:var(--tint);box-shadow:var(--shadow);display:block}
.banner img{width:100%;height:100%;object-fit:cover;display:block}
.banner-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;color:#fff;font-weight:700;font-size:15px;background:linear-gradient(transparent,rgba(5,20,60,.72))}
.banner-dots{display:flex;justify-content:center;gap:6px;margin:0 0 14px}
.banner-dots i{width:7px;height:7px;border-radius:99px;background:var(--line);transition:width .25s var(--ease),background .25s}
.banner-dots i.on{width:20px;background:var(--blue)}
.secret{font:800 26px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:var(--ink);background:var(--mist);border:1px dashed var(--line);border-radius:var(--r-md);padding:14px;text-align:center}
.progress{height:8px;border-radius:99px;background:var(--mist);overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg,#1EC8FF,#0A5CFF);border-radius:99px;transition:width .4s var(--ease)}
.banner-admin{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.banner-admin img{width:120px;aspect-ratio:12/5;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
@media (max-width:420px){.banner-admin{grid-template-columns:96px 1fr}.banner-admin img{width:96px}}