@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");

/* eDUSmartz School - base styles (owner: shell).
   Source: ..\school-management-v2.html, lines 1-970. v2 layers several style blocks over each other
   (warm base -> "moodboard" -> "compact" -> "layout2" -> "header"); the rules below are the resulting
   look, flattened: sky-mist canvas, slate text, Rain buttons, one orange "spark", Nunito type,
   JetBrains Mono for codes. Light theme only, as in v2.
   Global components only. Screen rules (login, dashboard, ...) live in each screen's own CSS;
   the app frame (sidebar, top bar, phone tab bar, content area) lives in shell.css. */

:root{
  /* surfaces and text */
  --canvas:#F1F7FB; --panel:#FFFFFF; --panel-2:#F7FAFD; --hover:#F1F7FB;
  --cloud:#DDEBF5; --rain:#D3E6F3; --rain-2:#C3DBEE; --slate:#3C4A5C;
  --spark:#F26B21; --spark-soft:#FEE7D9; --spark-text:#B4470E;
  --fg:#3C4A5C; --fg-2:#4A5A6E; --muted:#5F6E82; --subtle:#93A2B4; --line:#E3EEF6; --line-2:#D3E6F3;
  --accent:#F26B21; --accent-soft:#FEE7D9; --accent-soft-2:#FBD0B5; --accent-text:#B4470E;
  --primary:#D3E6F3; --primary-hover:#C3DBEE;
  /* status */
  --ok:#2C7650; --ok-soft:#E4F3EA; --warn:#8E5E10; --warn-soft:#FBF0DA; --bad:#B0423A; --bad-soft:#FBE8E5;
  --info:#33608F; --info-soft:#E3EEF8; --muted-soft:#EAF2F8;
  /* type */
  --font-ui:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  /* shape and depth */
  --r:10px; --r-lg:18px;
  --sh:0 1px 2px rgba(60,74,92,.04),0 8px 24px -16px rgba(60,74,92,.18);
  --sh-sm:0 1px 2px rgba(60,74,92,.05);
  --sh-pop:0 18px 48px -14px rgba(60,74,92,.28),0 0 0 1px rgba(60,74,92,.06);
  --ring:0 0 0 3px var(--rain);
  /* area colours (soft background / readable foreground); v2 renders every area in Cloud + Slate */
  --c-home:var(--cloud);--t-home:var(--slate); --c-adm:var(--cloud);--t-adm:var(--slate); --c-stu:var(--cloud);--t-stu:var(--slate); --c-tch:var(--cloud);--t-tch:var(--slate);
  --c-aca:var(--cloud);--t-aca:var(--slate); --c-exa:var(--cloud);--t-exa:var(--slate); --c-sub:var(--cloud);--t-sub:var(--slate); --c-fee:var(--cloud);--t-fee:var(--slate);
  --c-mov:var(--cloud);--t-mov:var(--slate); --c-rep:var(--cloud);--t-rep:var(--slate); --c-set:var(--cloud);--t-set:var(--slate);
  color-scheme:light;
}
/* each area sets --c / --t for its nav item and its screen */
[data-nav="dashboard"],.screen[data-screen="dashboard"]{--c:var(--c-home);--t:var(--t-home)}
[data-nav="admissions"],[data-nav-to="admissions"],.screen[data-screen="admissions"]{--c:var(--c-adm);--t:var(--t-adm)}
[data-nav="students"],[data-nav-to="students"],.screen[data-screen="students"]{--c:var(--c-stu);--t:var(--t-stu)}
[data-nav="teachers"],[data-nav-to="teachers"],.screen[data-screen="teachers"]{--c:var(--c-tch);--t:var(--t-tch)}
[data-nav="academics"],[data-nav-to="academics"],.screen[data-screen="academics"]{--c:var(--c-aca);--t:var(--t-aca)}
[data-nav="exams"],[data-nav-to="exams"],.screen[data-screen="exams"]{--c:var(--c-exa);--t:var(--t-exa)}
[data-nav="subjects"],[data-nav-to="subjects"],.screen[data-screen="subjects"]{--c:var(--c-sub);--t:var(--t-sub)}
[data-nav="fees"],[data-nav-to="fees"],.screen[data-screen="fees"]{--c:var(--c-fee);--t:var(--t-fee)}
[data-nav="movements"],[data-nav-to="movements"],.screen[data-screen="movements"]{--c:var(--c-mov);--t:var(--t-mov)}
[data-nav="reports"],.screen[data-screen="reports"]{--c:var(--c-rep);--t:var(--t-rep)}
[data-nav="settings"],.screen[data-screen="settings"]{--c:var(--c-set);--t:var(--t-set)}

/* ================= Reset and type ================= */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--canvas);color:var(--fg);font:13.5px/1.5 var(--font-ui);word-spacing:0;letter-spacing:0;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
h1,h2,h3{color:var(--slate)}
h1{font-size:21px;font-weight:700;letter-spacing:-.015em}
h2{font-size:14.5px;font-weight:700} h3{font-size:13.5px;font-weight:700}
h4{font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:0}
/* small uppercase labels ("eyebrows"): section labels, table headers, tile labels */
.eyebrow,h4,table.data th,.tile .label,.stat .s-label{text-transform:uppercase;letter-spacing:.08em;font-size:10px!important;font-weight:700!important;color:#6A7A8E!important}
p{margin:0} a{color:var(--accent-text)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:var(--rain)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--font-mono);font-size:12.5px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ================= Layout helpers ================= */
.grid{display:grid;gap:16px;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
.grid.cols-2{--cols:2} .grid.cols-3{--cols:3} .grid.cols-4{--cols:4}
.card .grid{gap:14px}
.split{display:grid;gap:16px;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ================= Buttons ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--rain);background:var(--panel);cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap;line-height:1;color:var(--slate);transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;text-decoration:none}
.btn:hover{background:var(--canvas);border-color:#BFD8EC}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--rain);border-color:var(--rain);color:var(--slate);box-shadow:none;font-weight:700}
.btn-primary:hover{background:var(--rain-2);border-color:var(--rain-2)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--canvas);border-color:transparent;color:var(--slate)}
.btn-danger{color:var(--bad);background:var(--bad-soft);border-color:transparent} .btn-danger:hover{background:#F9D8D3;border-color:transparent}
.btn-sm{height:28px;padding:0 11px;font-size:12.5px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* ================= Cards ================= */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0;box-shadow:var(--sh)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;min-height:28px}
.card-head h2,.card-head h3{font-size:14px;font-weight:700}
.card-head .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* a small dot before the card title: .card.stripe-ok / -warn / -bad / -info */
.card[class*="stripe-"]>.card-head>:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:10px;vertical-align:0;background:var(--spark)}
.card.stripe-ok>.card-head>:first-child::before{background:#5FA97F} .card.stripe-info>.card-head>:first-child::before{background:#8DB8DA}

/* ================= Pills and counts ================= */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--cloud);color:var(--slate);white-space:nowrap;vertical-align:middle}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.7}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.info{background:var(--info-soft);color:var(--info)}
.count{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 6px;border-radius:999px;font:700 11px var(--font-ui);background:var(--cloud);color:var(--slate)}
.count.hot{background:var(--spark-soft);color:var(--spark-text)}

/* ================= Stat tiles: one white strip with hairline dividers ================= */
.tiles{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);overflow:hidden}
.tile{border-radius:14px;padding:13px 16px;min-width:0;background:#fff;color:var(--slate);border:1px solid var(--line);box-shadow:var(--sh)}
.tiles > .tile{border:0;border-radius:0;box-shadow:none;border-left:1px solid var(--line);border-top:1px solid var(--line);margin:-1px 0 0 -1px;padding:14px 18px;background:transparent}
.card .tile{padding:14px 16px;border:1px solid var(--line);box-shadow:none}
.tile .label{opacity:.85}
.tile .value{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:3px;color:var(--slate)}
.tile .delta,.tile .delta.up,.tile .delta.down{font-size:12px;font-weight:500;opacity:1;color:var(--muted);margin-top:4px}
.tiles > .tile:first-child .label::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--spark);margin-right:7px;vertical-align:1px}

/* ================= Progress bar ================= */
.bar{display:block;height:7px;background:#EAF3FA;border-radius:999px;overflow:hidden}
.bar span{display:block;height:100%;border-radius:inherit;background:#8DB8DA}
.bar.warn span{background:var(--spark)} .bar.bad span{background:#E0897F} .bar.info span{background:#8DB8DA}

/* ================= Forms ================= */
.form{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;gap:12px 14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.full{grid-column:1/-1}
.field label,.field > span{font-size:12.5px;color:var(--slate);font-weight:600}
.hint,.field .hint{font-size:12.5px;color:var(--muted);font-weight:400}
.field .error{font-size:12.5px;color:var(--bad);display:none;font-weight:600}
.field.invalid .error{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.field.required > label::after{content:" *";color:var(--spark)}
.form-section{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:12px;background:var(--canvas);border:1px solid var(--line)}
.form-section > .section-title{font-size:14px;font-weight:700}
.form-section > .section-title small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px}

input:not([type=checkbox],[type=radio],[type=range]),select,textarea{width:100%;height:38px;padding:0 12px;border:1.5px solid var(--cloud);border-radius:10px;background:var(--panel);min-width:0;font-size:13.5px;transition:border-color .15s,box-shadow .15s}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23877B6F' stroke-width='1.8'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px!important}
textarea{height:auto;min-height:76px;padding:9px 12px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:#BFD8EC}
input:focus,select:focus,textarea:focus{outline:none;border-color:#8DB8DA;box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--subtle)}
input[type=checkbox],input[type=radio]{accent-color:var(--slate);width:17px;height:17px}
input[type=file]{padding:0 6px;line-height:40px;color:var(--muted);font-size:13px}
input[type=file]::file-selector-button{border:0;background:var(--rain);color:var(--slate);border-radius:999px;height:30px;padding:0 14px;margin-right:10px;font:800 13px var(--font-ui);cursor:pointer}
input.invalid,select.invalid,textarea.invalid{border-color:var(--bad);background:var(--bad-soft)}
.check{display:inline-flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}

/* ================= Tables ================= */
.table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh)}
.card .table-wrap{box-shadow:none;border:1px solid var(--line);border-radius:14px}
/* a table that ends its card runs edge to edge */
.card > .table-wrap:last-child{margin:0 -18px -16px;border:0;border-top:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:none}
.card > .card-head + .table-wrap:last-child{margin-top:2px}
table.data{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.data th,table.data td{padding:7px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
table.data th:first-child,table.data td:first-child{padding-left:18px} table.data th:last-child,table.data td:last-child{padding-right:18px}
table.data th{background:var(--panel-2);white-space:nowrap;padding-top:9px;padding-bottom:9px}
table.data td{height:44px}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background .12s}
table.data tbody tr:hover td{background:var(--canvas)}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data .id,table.data .mono{font:12px var(--font-mono);color:var(--muted);white-space:nowrap}
table.data tr.total td{font-weight:700;background:var(--panel-2)}
table.data td.wrap{min-width:240px;white-space:normal}
table.data td.two-line span{display:block;line-height:1.35}
table.data td.two-line .mono{font-size:12px}
table.data td .pill,table.data td .btn{white-space:nowrap}
table.data td:last-child:has(.btn){text-align:right;white-space:nowrap}
table.data input,table.data select{height:36px;padding:0 10px;min-width:0}
table.data input.cell{width:76px;text-align:right}
table.data td .btn-sm{height:27px;padding:0 11px;border-radius:999px;font-size:12px;box-shadow:none}
table.data td .btn-sm + .btn-sm{margin-left:2px}
table.data td .btn-sm.btn-primary{background:var(--rain);border-color:transparent;color:var(--slate);font-weight:700}
table.data td .btn-sm.btn-primary:hover{background:var(--rain-2)}
table.data td .btn-sm:not(.btn-primary):not(.btn-danger){background:var(--canvas);border-color:transparent}
table.data td .btn-sm:not(.btn-primary):not(.btn-danger):hover{background:var(--cloud);color:var(--slate)}

/* ================= Notes and empty states ================= */
/* v2 only showed .note in its review mode; here it is always visible */
.note{display:block;font-size:13px;color:var(--muted);border:1.5px dashed var(--line-2);border-radius:14px;padding:12px 16px}
.note b{color:var(--accent-text)}
.empty{padding:36px 20px;text-align:center;color:var(--muted);font-size:14px}
.empty .btn{margin-top:12px}

/* ================= Tabs: white rail, Rain for the current tab ================= */
.tabset{display:flex;flex-direction:column;gap:16px;min-width:0}
.tabs{display:inline-flex;align-self:flex-start;max-width:100%;gap:2px;padding:3px;border-radius:999px;background:var(--panel);border:1px solid var(--line);box-shadow:none;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;height:30px;padding:0 13px;border-radius:999px;cursor:pointer;color:var(--muted);font-weight:600;font-size:13px;white-space:nowrap;transition:background .15s,color .15s}
.tab:hover{color:var(--fg);background:var(--canvas)}
.tab.active{background:var(--rain);color:var(--slate)}
.tabpanel{display:flex;flex-direction:column;gap:16px;min-width:0}

/* ================= Brand mark and avatar ================= */
.crest{position:relative;width:32px;height:32px;border-radius:10px;background:var(--slate);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none;box-shadow:none}
.crest.has-logo{background:#fff;overflow:visible}
.crest img{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}
.crest::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--spark);border:2px solid #fff}
.avatar{width:30px;height:30px;border-radius:9px;background:var(--cloud);color:var(--slate);display:grid;place-items:center;font-weight:700;font-size:11px;flex:none}

/* ================= Toast ================= */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,14px);background:var(--slate);color:#fff;padding:10px 16px;border-radius:999px;box-shadow:var(--sh-pop);opacity:0;pointer-events:none;transition:.22s;z-index:60;max-width:calc(100% - 32px);font-size:13px;font-weight:600}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ================= Responsive ================= */
@media (max-width:1100px){
  .grid.cols-4{--cols:2} .grid.cols-3{--cols:2} .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  h1{font-size:20px}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:14px}
  .card > .table-wrap:last-child{margin:0 -14px -14px}
}

/* =====================================================================================================
   Shared components, second pass (v2). Same source and flattening as above (warm base -> moodboard ->
   compact -> layout2 -> header); each group is the look v2 finally renders. .screen (gap + entry
   animation) and the .content gap already live in shell.css. Groups carry their own breakpoints.
   ===================================================================================================== */

/* ---- Page head & tabs (v2) ----
   <div class="page-head">
     <div><h1><span class="mod-ico"><svg/></span>Title</h1><p class="ph-sub"><b>Label</b> one-line description</p></div>
     <div class="actions"><details class="ph-more">...</details><button class="btn btn-primary">...</button></div>
   </div>
   followed by <div class="tabset"><div class="tabs">...</div><div class="tabpanel">...</div></div> */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.page-head h1{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.page-head .sub{display:none}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* area chip; every area resolves to Cloud + Slate in v2 */
.mod-ico{width:36px;height:36px;border-radius:10px;background:var(--c,var(--cloud));color:var(--t,var(--slate));display:grid;place-items:center;flex:none}
.mod-ico svg{width:18px;height:18px}
.ph-sub{margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ph-sub b{color:var(--fg-2);font-weight:700;margin-right:4px}
/* inside a screen the head is one white card: chip on the left, title + description, actions on the right */
.screen > .page-head{position:relative;gap:12px 20px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px;box-shadow:var(--sh)}
.screen > .page-head > div:first-child{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1 1 320px;padding-left:52px;position:relative;min-height:40px}
.screen > .page-head h1{display:block;font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.015em}
.screen > .page-head h1 .mod-ico{position:absolute;left:0;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:11px;background:var(--canvas);border:1px solid var(--line)}
.screen > .page-head .actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.screen > .page-head .actions .btn{height:34px;border-radius:10px;padding:0 14px}
/* "more" menu (print / export) in the head: a <details> whose <summary class="btn"> holds the dots icon; the
   menu reuses shell.css .menu. !important as in v2, to win over the head's action-button rule above. */
.ph-more{position:relative}
.ph-more > summary{list-style:none;width:34px;padding:0!important;display:inline-grid!important;place-items:center;border-radius:10px!important}
.ph-more > summary::-webkit-details-marker{display:none}
.ph-more > summary svg{width:16px;height:16px}
.ph-more[open] > summary{background:var(--canvas);border-color:#BFD8EC}
.ph-more .menu{width:auto;min-width:210px;right:0;top:calc(100% + 6px)}
.ph-more .menu .btn{justify-content:flex-start;width:100%;height:34px!important;padding:0 10px!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;color:var(--fg-2)!important;font-size:13px!important;font-weight:600!important}
.ph-more .menu .btn:hover{background:var(--canvas)!important;color:var(--slate)!important}
/* tabs directly under the head join its bottom edge as an underline rail (spark under the current tab) */
.screen > .page-head:has(+ .tabset){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0;box-shadow:none;padding-bottom:12px}
.screen > .page-head + .tabset{margin-top:-16px}
.screen:not([data-screen="settings"]) > .page-head + .tabset > .tabs{display:flex;align-self:stretch;gap:22px;padding:0 20px;background:#fff;border:1px solid var(--line);border-radius:0 0 16px 16px;box-shadow:var(--sh);overflow-x:auto}
.screen:not([data-screen="settings"]) > .page-head + .tabset > .tabs .tab{height:42px;padding:0 1px;border-radius:0;background:transparent;color:var(--muted);font-weight:600;position:relative}
.screen:not([data-screen="settings"]) > .page-head + .tabset > .tabs .tab:hover{color:var(--slate)}
.screen:not([data-screen="settings"]) > .page-head + .tabset > .tabs .tab.active{color:var(--slate);font-weight:700}
.screen:not([data-screen="settings"]) > .page-head + .tabset > .tabs .tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--spark)}
/* settings: its section bar (settings CSS) sits under the head as a separate strip, so the head stays a whole card */
.screen[data-screen="settings"] > .page-head{border-radius:16px;border-bottom:1px solid var(--line);box-shadow:var(--sh);padding-bottom:16px}
.screen[data-screen="settings"] > .page-head + .tabset{margin-top:0}
@media (max-width:900px){
  .screen > .page-head{padding:14px}
  .screen > .page-head > div:first-child{padding-left:46px;flex-basis:100%}
  .screen > .page-head h1 .mod-ico{width:36px;height:36px}
  .screen > .page-head .actions{width:100%;flex-wrap:wrap}
  .ph-sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .screen:not([data-screen="settings"]) > .page-head + .tabset > .tabs{padding:0 14px;gap:18px}
}

/* ---- Tips: .helpline (v2) ----
   <div class="helpline"><b>Tip</b> text</div>. A soft blue box (dialogs, outside a screen); inside a screen a quiet
   line. A screen's or tab's own tip (direct child of .screen / .tabpanel) is hidden: v2 shows it as the head's
   .ph-sub line instead. */
.helpline{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--fg-2);background:#E8F2FA;border-radius:10px;padding:9px 13px}
.helpline b{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--slate);flex:none}
.helpline b::before{content:"";width:16px;height:16px;border-radius:5px;background:var(--spark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 7.5v4M8 4.6v.1'/%3E%3C/svg%3E") center/10px no-repeat}
.screen .helpline{background:transparent;border:0;padding:0 2px;border-radius:0;color:var(--muted);gap:8px}
.screen .helpline b::before{width:15px;height:15px;border-radius:50%;background-size:9px}
.screen .helpline .tip-x{margin-left:auto;flex:none;width:24px;height:24px;border:0;border-radius:7px;background:transparent;color:var(--subtle);cursor:pointer;display:grid;place-items:center}
.screen .helpline .tip-x:hover{background:var(--cloud);color:var(--slate)}
.screen .tabpanel > .helpline,.screen > .helpline{display:none}

/* ---- Filter toolbar, table frame & pager (v2) ----
   <div class="toolbar"><div class="field search"><label/><input type="search"/></div>
     <div class="field"><label>Class</label><select/></div> ... <button class="btn btn-ghost">Clear filters</button></div>
   Search is a canvas pill with a magnifier (its label is screen-reader only); every other .field is a white chip with
   its label inside, turning Rain while it holds a value (script toggles .has-value). !important as in v2, to win over
   the global input rules. */
.toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.toolbar .field{min-width:0;flex:0 0 auto}
.toolbar .field > label,.toolbar .field > span:not(.hint):not(.error){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.toolbar .field .hint{display:none}
.toolbar .search{flex:1 1 220px;max-width:320px}
.toolbar input,.toolbar select{height:34px!important;border-radius:999px!important;border:0!important;background-color:var(--canvas)!important;font-size:13px!important;font-weight:500}
.toolbar select{width:auto!important;min-width:130px;padding-left:16px!important}
.toolbar input[type=date]{width:140px;padding:0 14px!important}
.toolbar .search input{height:32px!important;padding-left:42px!important;border:1px solid transparent!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23B3A89B' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:16px center!important}
.toolbar input:focus,.toolbar select:focus{box-shadow:var(--ring)!important;background-color:#fff!important}
.toolbar .search input:focus{border-color:#8DB8DA!important}
.toolbar .btn{height:34px!important;font-size:13px!important;border-radius:999px}
.toolbar > .btn-ghost,.toolbar > .btn:last-child{margin-left:auto;height:32px!important;font-size:12.5px!important}
.toolbar .field:not(.search){flex-direction:row;align-items:center;gap:0;height:32px;border:1px solid var(--line-2);border-radius:999px;background:#fff;padding-left:12px;transition:background .15s,border-color .15s}
.toolbar .field:not(.search) > label{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;font-size:12px!important;font-weight:600!important;color:var(--muted)!important;white-space:nowrap;margin:0!important;text-transform:none;letter-spacing:0}
.toolbar .field:not(.search) > label::after{content:"";display:inline-block;width:1px;height:14px;background:var(--line-2);margin:0 2px 0 9px;vertical-align:-2px}
.toolbar .field:not(.search) select,.toolbar .field:not(.search) input{border:0!important;background-color:transparent!important;height:30px!important;padding-left:8px!important;width:auto!important;min-width:0!important;box-shadow:none!important;font-weight:600}
.toolbar .field:not(.search) input[type=date]{width:128px!important;padding-right:8px!important}
.toolbar .field:not(.search):hover{border-color:#BFD8EC}
.toolbar .field:not(.search):focus-within{border-color:#8DB8DA;box-shadow:var(--ring)}
.toolbar .field.has-value{background:var(--rain);border-color:var(--rain)}
.toolbar .field.has-value > label{color:var(--slate)!important}
.toolbar .field.has-value > label::after{background:#AFCDE4}
/* a toolbar (or the card holding it) right above a .table-wrap joins it into one frame */
.card:has(> .toolbar):has(+ .table-wrap),.toolbar:has(+ .table-wrap){padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:none;position:relative;z-index:1;clip-path:inset(-40px -40px 0 -40px)}
.card:has(> .toolbar) + .table-wrap,.toolbar + .table-wrap{border-top:0;border-top-left-radius:0;border-top-right-radius:0}
:is(.tabpanel,.screen) > :is(.card:has(> .toolbar),.toolbar) + .table-wrap{margin-top:-16px}
/* count / paging line under a table, inside its .table-wrap */
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);flex-wrap:wrap}
@media (max-width:640px){
  .toolbar .field:not(.search){flex:1 1 140px;max-width:none}
  .toolbar select{width:100%!important}
}

/* ---- Table extras: row "more" menu, tables that don't fit (v2) ----
   Row actions: the main button plus <details class="row-more"><summary>dots svg</summary><div class="row-menu">.btn...</div></details>;
   the menu is position:fixed, so the page script places it next to its button. */
.row-more{display:inline-block;position:relative;vertical-align:middle;margin-left:2px}
.row-more > summary{list-style:none;width:27px;height:27px;padding:0!important;border-radius:999px;display:inline-grid!important;place-items:center;background:var(--canvas);border:0;cursor:pointer;color:var(--slate)}
.row-more > summary::-webkit-details-marker{display:none}
.row-more > summary:hover,.row-more[open] > summary{background:var(--cloud);color:var(--slate)}
.row-more > summary svg{width:16px;height:16px}
.row-menu{position:fixed;z-index:70;min-width:190px;padding:6px;background:var(--panel);border-radius:14px;box-shadow:var(--sh-pop);display:flex;flex-direction:column;gap:2px;animation:pop .14s ease-out}
.row-menu .btn{justify-content:flex-start;width:100%;height:32px!important;padding:0 12px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--fg-2)!important;font-size:13px!important;box-shadow:none!important;margin:0!important}
.row-menu .btn:hover{background:var(--hover)!important;color:var(--fg)!important}
.row-menu .btn.btn-danger{color:var(--bad)!important}
/* table.data.fit (set by script when the table overflows): text cells wrap; codes, numbers, tags, buttons stay on one line */
table.data.fit th,table.data.fit td{white-space:normal}
table.data.fit td .id,table.data.fit td .mono,table.data.fit td .pill,table.data.fit td .btn,table.data.fit td.num,table.data.fit td.id,table.data.fit td.mono,table.data.fit td:last-child{white-space:nowrap}
table.data.fit td{min-width:72px}

/* ---- Stat tiles inside a card (v2) ----
   v2 keeps the one-strip look for a .tiles strip inside a .card; the earlier ".card .tile" rule would box each tile. */
.card .tiles > .tile{border:0;border-left:1px solid var(--line);border-top:1px solid var(--line);padding:14px 18px;box-shadow:none}

/* ---- Choice buttons (v2) ----
   <div class="choice-group"><button class="choice active" data-value="P">P</button>...</div>; .lg for the bigger
   attendance version; P / A / L / LV get their own colours when active. */
.choice-group{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:var(--canvas)}
.choice{border:0;background:transparent;height:26px;padding:0 11px;border-radius:999px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);transition:background .15s,color .15s}
.choice:hover{color:var(--fg);background:#fff}
.choice.active{background:#fff;color:var(--fg);box-shadow:var(--sh-sm)}
.choice.active[data-value="P"]{background:#DDF1E4;color:#22603A} .choice.active[data-value="A"]{background:#FBDFDB;color:#9E3029} .choice.active[data-value="L"]{background:#FDECC8;color:#80520A} .choice.active[data-value="LV"]{background:#E0EAFA;color:#2F5791}
.choice.active[data-value]{box-shadow:none}
.choice-group.lg .choice{height:30px;padding:0 13px;font-size:13px;min-width:48px}

/* ---- Quick actions (v2) ---- <div class="quick"><button class="quick-btn"><b>Title</b><span>detail</span></button></div> */
.quick{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.quick-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:16px;border-radius:16px;background:var(--canvas);border:1px solid var(--line);cursor:pointer;transition:transform .15s,box-shadow .15s}
.quick-btn:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.quick-btn b{font-size:14px} .quick-btn span{font-size:12.5px;color:var(--muted)}

/* ---- Forms: optional fields behind "more" (v2) ---- <details class="more"><summary>More details</summary>...</details> */
details.more{border-radius:14px;background:var(--canvas);border:1px solid var(--line);padding:0 16px}
details.more > summary{cursor:pointer;padding:10px 0;color:var(--fg-2);font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:var(--cloud);color:var(--slate);font-weight:700}
details.more[open] > summary::before{content:"\2212"}
details.more[open]{padding-bottom:16px}

/* ---- Lists: key/value, steps, flow, timeline (v2) ---- */
dl.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 24px;margin:0}
dl.kv dt{color:var(--muted);font-size:13px;font-weight:500} dl.kv dd{margin:0;font-size:14px;min-width:0;overflow-wrap:anywhere}
/* <div class="steps"><div class="step done">..</div><div class="step current">..</div><div class="step">..</div></div> */
.steps{display:flex;gap:6px;counter-reset:step;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;height:30px;padding:0 14px 0 6px;border-radius:999px;color:var(--muted);font-size:12.5px;font-weight:600;background:#fff;border:1px solid var(--line)}
.step::before{counter-increment:step;content:counter(step);width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--sh-sm);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.step.done::before{background:#3DAA6A;color:#fff;content:"\2713";box-shadow:none}
.step.current{color:var(--slate);background:var(--cloud);border-color:var(--rain)}
.step.current::before{background:var(--spark);color:#fff;box-shadow:none}
/* <div class="flow"><span class="node">Draft</span><span class="arrow">&rarr;</span><span class="node">Approved</span></div> */
.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.flow .node{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.flow .arrow{color:var(--subtle)}
/* <ul class="timeline"><li><time>12<br>Oct</time><span>What happened</span></li></ul>; the first date gets the spark */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.timeline li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;font-size:13px;font-weight:500}
.timeline time{display:grid;place-items:center;height:36px;border-radius:10px;background:var(--cloud);color:var(--slate);font-size:11px;font-weight:700;line-height:1.1;text-align:center}
.timeline li:first-child time{background:var(--spark-soft);color:var(--spark-text)}

/* ---- Printable document (v2) ----
   <div class="doc"><div class="doc-head"><div class="crest">G</div><div class="school"><b>School</b><small>address</small></div></div>
   <div class="doc-title">Admission form</div> ... <span class="doc-serial">No. ...</span>
   <div class="signatures"><div class="sign">Parent</div><div class="sign">Principal</div></div></div> */
.doc{background:#fff;border-radius:14px;padding:32px 36px;max-width:740px;width:100%;box-shadow:var(--sh)}
.doc-head{display:flex;gap:14px;align-items:center;border-bottom:2px solid var(--fg);padding-bottom:12px;margin-bottom:18px}
.doc-head .crest{width:46px;height:46px;font-size:20px}
.doc-head .school b{display:block;font-size:17px} .doc-head .school small{color:var(--muted);display:block}
.doc-title{text-align:center;letter-spacing:.12em;text-transform:uppercase;font-size:12.5px;font-weight:700;margin:6px 0 18px}
.doc .signatures{display:flex;justify-content:space-between;gap:24px;margin-top:40px;flex-wrap:wrap}
.doc .sign{flex:1;min-width:140px;border-top:1px solid var(--fg);padding-top:6px;font-size:12px;color:var(--muted);text-align:center}
.doc-serial{font:500 12px var(--font-mono);color:var(--muted)}
@media (max-width:640px){
  .doc{padding:20px 16px}
}

/* ---- Dialogs: side sheet (v2) ----
   <dialog class="modal [wide]"><div class="modal-head"><h2>Title</h2><button class="btn btn-ghost" data-close>x</button></div>
   <div class="modal-body">...</div><div class="modal-foot">buttons</div></dialog>. Slides in from the right; a bottom sheet on phones. */
dialog.modal{border:0;padding:0;margin:14px 14px 14px auto;width:min(580px,calc(100vw - 28px));max-width:calc(100vw - 28px);height:calc(100dvh - 28px);max-height:calc(100dvh - 28px);border-radius:18px;background:var(--panel);color:var(--fg);box-shadow:var(--sh-pop)}
dialog.modal[open]{display:flex;flex-direction:column;animation:sheet .26s cubic-bezier(.2,.8,.2,1)}
dialog.modal.wide{width:min(900px,calc(100vw - 28px))}
dialog.modal::backdrop{background:rgba(46,38,32,.25);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@keyframes sheet{from{transform:translateX(28px);opacity:.3}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:var(--canvas);border-bottom:1px solid var(--line)}
.modal-head h2{font-size:15.5px}
.modal-head [data-close]{width:32px;height:32px;padding:0;border-radius:9px;background:#fff;box-shadow:none;border:1px solid var(--line)}
.modal-head [data-close]:hover{background:var(--canvas)}
.modal-body{flex:1;min-height:0;padding:18px 20px;display:flex;flex-direction:column;gap:14px;overflow:auto}
.modal-body > *{flex-shrink:0} /* long dialogs: the body scrolls; tables (.table-wrap) inside keep their height instead of being squeezed */
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
@media (max-width:640px){
  dialog.modal,dialog.modal.wide{margin:auto 0 0;width:100vw;max-width:100vw;height:auto;max-height:94dvh}
  /* as v2 renders it: only the wide sheet squares its bottom corners (the plain one keeps 18px) */
  dialog.modal.wide{border-radius:24px 24px 0 0}
  @keyframes sheet{from{transform:translateY(36px);opacity:.3}to{transform:none;opacity:1}}
}

/* ---- Review-mode requirement chips (v2) ---- v2 shows .req only in its review mode; not used here, keep hidden */
.req{display:none}