/* The Dhivehi typeface, served from this site rather than fetched from
   anywhere else. The portal makes no outside font requests at all. */
@font-face {
  font-family: 'MV Aaamu FK';
  src: url('/assets/fonts/mv-aaamu-fk.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Vanavaru Portal — v2 design system. */

:root {
  --bg:#f6f7f9; --surface:#ffffff; --surface2:#fafbfc;
  --line:#e6e9ee; --line2:#f0f2f5;
  --text:#171a22; --muted:#5d6573; --faint:#98a1ae;
  --accent:#1b3b6f; --accent2:#1c7293; --accent3:#065a82;
  --indigo:#21295c; --powder:#9eb3c2;
  --ok:#1f7a4d; --no:#c0392b; --ex:#b2761a;
  --okBg:#eaf6ef; --noBg:#fcefed; --exBg:#fcf5e7;
  --okFg:#1f7a4d; --noFg:#c0392b; --exFg:#9a6412;
  --sh1:0 1px 2px rgba(16,24,40,.03);
  --sh2:0 12px 32px rgba(16,24,40,.12);
  --glass:rgba(246,247,249,.8);
  --deep:linear-gradient(150deg,#21295c 0%,#1b3b6f 45%,#065a82 100%);

  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:var(--sans);   /* one typeface everywhere: kept only so old rules still resolve */
  /* The school name. Reorder these to switch which face leads. */
  --display:var(--sans);
  --thaana:'MV Aaamu FK','MV Faseyha','Faruma','A_Faruma','MV Boli',var(--serif);
  --mono:ui-monospace,Menlo,Consolas,monospace;

  color-scheme:light;
}

html[data-theme="dark"] {
  --bg:#0f1218; --surface:#161a22; --surface2:#1a1f28;
  --line:#262c37; --line2:#1f242e;
  --text:#e8ebf1; --muted:#9aa3b2; --faint:#6b7585;
  --accent:#4b81d1; --accent2:#3fa0c4; --accent3:#5aa8cd;
  --ok:#3bb87c; --no:#f0705f; --ex:#e2a63f;
  --okBg:rgba(59,184,124,.14); --noBg:rgba(240,112,95,.14); --exBg:rgba(226,166,63,.14);
  --okFg:#5fd39a; --noFg:#ff8f80; --exFg:#f0bd63;
  --sh1:0 1px 2px rgba(0,0,0,.25);
  --sh2:0 22px 54px rgba(0,0,0,.5);
  --glass:rgba(15,18,24,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .35s ease;
  /* The tables carry a minimum width so they can scroll sideways. Without
     this, Safari decides the page is wide and inflates every font size. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
img,svg{max-width:100%}
h1,h2,h3{margin:0;font-weight:600}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0}
a{color:var(--accent3)}
svg{flex:none}

.dv,[dir="rtl"]{font-family:var(--thaana);line-height:1.95}

/* ------------------------------- motion -------------------------------- */

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes fadeout{to{opacity:0;visibility:hidden}}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}
@keyframes draw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
@keyframes pop{0%{transform:scale(.72)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes railgrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes panelin{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes toastin{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------------------------- sign-in screen ---------------------------- */

.boot,.gate{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;padding:0;
  background:var(--bg);
}
.boot.leaving{animation:fadeout .45s ease forwards}

/* Signing-in wait screen */
.boot{background:linear-gradient(135deg,#0e1b3f 0%,#1b3b6f 48%,#065a82 100%);overflow:hidden}
.bt-bg{position:absolute;inset:0;pointer-events:none}
.bt-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.bt-blob.b1{width:480px;height:480px;left:-120px;top:-140px;background:radial-gradient(circle,rgba(12,176,239,.55),transparent 70%);animation:bt-drift 18s ease-in-out infinite alternate}
.bt-blob.b2{width:560px;height:560px;right:-180px;bottom:-200px;background:radial-gradient(circle,rgba(46,127,184,.6),transparent 70%);animation:bt-drift 22s ease-in-out infinite alternate-reverse}
@keyframes bt-drift{to{transform:translate(100px,70px) scale(1.15)}}
.bt-card{
  position:relative;width:min(440px,calc(100% - 32px));padding:40px 36px 30px;border-radius:28px;
  background:var(--surface);color:var(--text);text-align:center;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 30px 80px rgba(6,14,38,.45);animation:bt-in .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bt-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.bt-crest{position:relative;width:112px;height:112px;display:grid;place-items:center;margin-bottom:6px}
.bt-crest img{width:72px;height:72px;object-fit:contain;animation:bt-pulse 2.4s ease-in-out infinite}
@keyframes bt-pulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.04)}}
.bt-orbit{position:absolute;inset:0;width:100%;height:100%;animation:orbit 1.8s linear infinite}
.bt-card .wait-title{margin-top:18px}
.bt-card .wait-sub{margin-left:auto;margin-right:auto}
.bt-card .steps,.bt-card .track{margin-left:auto;margin-right:auto}
.bt-card .steps{align-items:flex-start;padding-left:26px;text-align:left}
.bt-school{margin-top:24px;padding-top:16px;border-top:1px solid var(--line2);width:100%;font-size:12px;color:var(--faint)}

.wait-title{font-size:24px;line-height:1.3;margin-top:26px}
.wait-sub{font-size:15px;line-height:1.65;color:var(--muted);margin-top:8px;max-width:360px}

.steps{list-style:none;margin:24px 0 0;padding:0;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}
.steps li{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500;color:var(--faint)}
.steps li .dot{width:18px;height:18px;flex:none;display:grid;place-items:center}
.steps li .dot i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line);display:block}
.steps li.is-doing{color:var(--text)}
.steps li.is-doing .dot i{background:var(--accent2);border-color:transparent;animation:breathe 1.6s ease-in-out infinite}
.steps li.is-done{color:var(--muted)}
.steps li.is-done .dot i{display:none}
.steps li.is-done .dot::after{content:'';width:14px;height:8px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg) translate(1px,-2px)}

.track{height:4px;border-radius:99px;background:var(--line2);overflow:hidden;position:relative;margin-top:22px;width:100%;max-width:380px}
.track i{position:absolute;inset:0;width:30%;border-radius:99px;background:linear-gradient(90deg,transparent,var(--accent2),transparent);animation:sweep 2.2s cubic-bezier(.5,0,.5,1) infinite}

/* gate (wrong domain / not on staff list) */
.gate-card .crest{width:84px;height:84px;border-radius:20px;padding:11px}
.gate-card{
  max-width:420px;width:100%;padding:38px 30px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.gate-badge{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;animation:pop .5s .1s both}
.gate-badge.bad{background:var(--noBg);color:var(--noFg)}
.gate-badge.wait{background:var(--exBg);color:var(--exFg)}
.gate h1{font-size:21px;line-height:1.35;margin-top:22px}
.gate-body{font-size:14px;line-height:1.65;color:var(--muted);margin-top:10px}
.gate-body b{color:var(--text);font-weight:600}
.gate-mono{font-family:var(--mono);font-size:13px;background:var(--surface2);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.gate-hint{margin-top:22px;font-size:13px;color:var(--faint);line-height:1.6}
.gate-hint:empty{display:none}

/* --------------------------------- shell -------------------------------- */

.shell{
  display:grid;grid-template-columns:var(--rail-w,248px) minmax(0,1fr);
  min-height:100vh;max-width:100%;
  transition:grid-template-columns .28s cubic-bezier(.3,1,.35,1);
}
.shell.slim{--rail-w:84px}

.rail{
  background:var(--surface);border-right:1px solid var(--line);
  padding:18px 14px 16px;display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;min-width:0;
}
.rail>nav{
  display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;
  overflow-y:auto;overflow-x:hidden;padding:2px;margin:0 -2px;scrollbar-width:thin;
}
.nav-scrim{display:none}

.rail-brand{display:flex;align-items:center;gap:11px;padding:2px 4px 18px;min-height:64px}
.rail-crest{
  width:40px;height:40px;border-radius:13px;background:#fff;border:1px solid var(--line);
  padding:5px;flex:none;display:grid;place-items:center;box-shadow:var(--sh1);
}
.rail-titles{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
.rail-name{font-weight:700;font-size:14px;letter-spacing:-.005em}
.rail-sub{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rail-collapse{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  color:var(--faint);cursor:pointer;border:1px solid var(--line);background:var(--surface2);
}
.rail-collapse:hover{color:var(--text)}
.rail-collapse svg{transition:transform .28s ease}
.shell.slim .rail-collapse svg{transform:rotate(180deg)}

.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 13px;
  border-radius:13px;cursor:pointer;position:relative;
  font-size:13.5px;font-weight:600;color:var(--muted);text-align:left;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.nav-item .ico{color:var(--faint);transition:color .2s ease}
.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nav-item:hover{background:var(--line2);color:var(--text)}
.nav-item.is-on{
  background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;
  box-shadow:0 10px 22px -8px rgba(27,59,111,.5);
}
.nav-item.is-on .ico{color:#fff}
.nav-item:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.nav-badge{margin-left:auto;min-width:20px;padding:2px 7px;border-radius:99px;background:var(--ex);color:#fff;font-size:11px;font-weight:700;text-align:center}
.nav-item.is-on .nav-badge{background:rgba(255,255,255,.24)}

.rail-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line2)}
.rail-logout{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:0 13px;border-radius:13px;
  color:var(--muted);font-size:13.5px;font-weight:600;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.rail-logout:hover{background:var(--noBg);color:var(--noFg)}

/* Narrow rail: icons only. The labels stay in the tooltip (title attribute). */
@media (max-width:1100px){.rail-collapse{display:none}}
.shell.slim .rail{padding-left:12px;padding-right:12px}
.shell.slim .rail-titles,.shell.slim .nav-label,.shell.slim .rail-logout span{display:none}
.shell.slim .rail-brand{flex-direction:column;gap:10px;padding-bottom:12px;min-height:0}
.shell.slim .nav-item,.shell.slim .rail-logout{justify-content:center;padding:0}
.shell.slim .nav-badge{position:absolute;top:3px;right:5px;min-width:16px;padding:1px 5px;font-size:10px;margin:0}

.main{min-width:0;display:flex;flex-direction:column;min-height:100vh}

.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:16px;
  padding:12px 28px;min-height:68px;
  background:var(--glass);
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
}
.menu-btn{display:none}
.topbar-title{min-width:0;flex:1}
.tb-h1{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sub{font-size:13px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-tools{display:flex;align-items:center;gap:10px;flex:none}

.tb-search{position:relative;display:flex;align-items:center;width:clamp(180px,20vw,300px)}
.tb-search svg{position:absolute;left:15px;color:var(--faint);pointer-events:none}
.tb-search input{
  width:100%;height:44px;padding:0 16px 0 41px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  font:inherit;font-size:13.5px;
}
.tb-search input:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(28,114,147,.16)}

.tb-btn{
  position:relative;width:44px;height:44px;border-radius:99px;flex:none;
  background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);cursor:pointer;
  transition:color .18s ease,box-shadow .18s ease;
}
.tb-btn:hover{color:var(--text);box-shadow:var(--sh1)}
.tb-btn:focus-visible,.tb-chip:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.tb-dot{
  position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--no);color:#fff;font-size:10px;font-weight:700;line-height:18px;text-align:center;
  border:2px solid var(--bg);box-sizing:content-box;
}
.th-moon,.th-sun{display:grid;place-items:center}
.th-sun{display:none}
html[data-theme="dark"] .th-sun{display:grid}
html[data-theme="dark"] .th-moon{display:none}

.tb-user{position:relative}
.tb-chip{
  display:flex;align-items:center;gap:10px;height:48px;padding:0 13px 0 5px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;
}
.tb-chip:hover{box-shadow:var(--sh1)}
.tb-avatar{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent2));color:#fff;font-size:13px;font-weight:700;
}
.tb-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.tb-who b{font-size:13px;font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-who span{font-size:11px;color:var(--faint);white-space:nowrap}
.tb-caret{color:var(--faint)}
.tb-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:236px;z-index:45;padding:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh2);
  animation:rise .2s cubic-bezier(.2,.8,.3,1) both;
}
.tb-menu-name{font-weight:600;font-size:14px;padding:8px 10px 0}
.tb-menu-mail{font-size:11px;color:var(--faint);padding:2px 10px 10px;word-break:break-all;border-bottom:1px solid var(--line2);margin-bottom:6px}
.tb-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border-radius:11px;
  color:var(--text);text-decoration:none;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;
}
.tb-menu-item:hover{background:var(--line2)}
.tb-menu-item.out:hover{background:var(--noBg);color:var(--noFg)}
.tb-menu-theme{display:none}

.countdowns{display:flex;gap:8px;flex-wrap:wrap;padding:0 28px 2px}
.cd-pill{
  display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh1);
}
.cd-pill.exam{border-color:rgba(192,57,43,.3);background:var(--noBg)}
.cd-num{font-size:20px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.cd-pill.exam .cd-num{color:var(--noFg)}
.cd-unit{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:2px}
.cd-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.cd-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.cd-when{font-size:11px;color:var(--muted)}

.view{padding:10px 28px 24px;min-width:0;flex:1;width:100%}

.site-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:8px 28px 0;padding:18px 0 22px;border-top:1px solid var(--line);
}
.sf-id{display:flex;align-items:center;gap:14px;min-width:0}
.sf-crest{
  width:48px;height:48px;flex:none;border-radius:14px;background:#fff;
  border:1px solid var(--line);padding:6px;display:grid;place-items:center;
}
.sf-crest svg{width:100%;height:100%;display:block}
.sf-text{min-width:0}
.sf-dv{font-size:15px;color:var(--accent2);text-align:left;line-height:1.7}
.sf-school{font-weight:600;font-size:13.5px}
.sf-ministry{font-size:11.5px;color:var(--faint);margin-top:2px}
.sf-meta{text-align:right;font-size:11.5px;color:var(--faint);line-height:1.6;max-width:380px}
.sf-meta p:first-child{color:var(--muted);font-weight:600}

/* -------------------------------- pieces -------------------------------- */

.card{border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1);min-width:0}
.lift{transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s ease}
.lift:hover{transform:translateY(-3px);box-shadow:var(--sh2)}

.eyebrow{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent2)}
.section{margin-bottom:22px;min-width:0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.section-note{font-size:12px;color:var(--muted)}

.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:20px}
/* The note takes all the spare width, which is what pushes the buttons to the right edge. */
.bar-note{flex:1 1 280px;max-width:none;margin:0;align-self:center;font-size:13px;line-height:1.55;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.field input,.field select,.field textarea{
  font:inherit;color:var(--text);background:var(--surface);
  height:44px;padding:0 14px;min-width:170px;border:1px solid var(--line);border-radius:13px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393a3ba' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.field input[type=file]{height:auto;padding:9px 14px}
.field input[type=checkbox],.field input[type=radio]{height:auto;min-width:0}
.field textarea{height:auto;min-height:80px;padding:12px 14px;resize:vertical;font-family:var(--mono);font-size:13px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(28,114,147,.18);
}
.field.grow{flex:1;min-width:230px}
.field.grow input{width:100%}

/* Form controls take font:inherit, which outranks the .dv class on its own.
   These need the element in the selector to win it back. */
.field input.dv,
.field textarea.dv,
input.dv,
textarea.dv{
  font-family:var(--thaana);
  font-size:17px;
  line-height:2;
  text-align:right;
}

.btn{
  height:44px;padding:0 18px;border-radius:13px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:14px;font-weight:600;
  background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;
  box-shadow:0 10px 24px rgba(27,59,111,.26);
  transition:transform .16s cubic-bezier(.3,1.3,.5,1),filter .2s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.btn:disabled{opacity:.5;pointer-events:none}
.btn.quiet{background:var(--surface);color:var(--accent3);border:1px solid var(--line);box-shadow:none}
.btn.quiet:hover{background:var(--surface2)}
.btn.danger{background:var(--no);box-shadow:0 10px 24px rgba(192,57,43,.26)}
.btn.done{background:var(--ok);box-shadow:0 10px 24px rgba(31,122,77,.3);animation:pop .4s both}
.btn.busy{position:relative;overflow:hidden}
.btn.busy::after{content:'';position:absolute;inset:0;width:34%;background:rgba(255,255,255,.18);animation:sweep 1.5s linear infinite}

.icon-btn{width:40px;height:40px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);cursor:pointer}
.icon-btn:hover{color:var(--text)}

/* Tabs read as one segmented control, the way the reference does. */
.tabs{
  display:flex;width:fit-content;max-width:100%;gap:2px;padding:4px;margin-bottom:20px;
  background:var(--surface2);border:1px solid var(--line);border-radius:16px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;height:38px;padding:0 16px;display:inline-flex;align-items:center;white-space:nowrap;
  border-radius:12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border:0;
}
.tab:hover{color:var(--text)}
.tab.is-on{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgba(20,29,56,.08),0 6px 14px -6px rgba(20,29,56,.22)}
.tab:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px}

.chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;color:var(--muted)}
.chip i{width:8px;height:8px;border-radius:3px;display:block}
.chip.p i{background:var(--ok)} .chip.a i{background:var(--no)} .chip.e i{background:var(--ex)}
.chip b{color:var(--text);font-variant-numeric:tabular-nums}

.pill{display:inline-block;border-radius:99px;border:1px solid var(--line);background:var(--surface);padding:8px 14px;font-size:12px;font-weight:600}

.empty{padding:34px 22px;text-align:center;border-radius:18px;border:1px dashed var(--line);background:var(--surface);color:var(--muted);font-size:13px;line-height:1.6}
.empty strong{display:block;color:var(--text);font-size:15px;margin-bottom:5px}
.note-line{font-size:13px;color:var(--muted)}
.warn{font-size:13px;color:var(--exFg);background:var(--exBg);border-radius:12px;padding:11px 14px;line-height:1.5}

/* ------------------------------- register ------------------------------- */

.reg-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.reg-title{font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.02em}
.reg-sub{font-size:13px;color:var(--muted);margin-top:4px}

.roll{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:1080px){.roll{grid-template-columns:repeat(2,minmax(0,1fr))}}

.row{
  display:flex;align-items:stretch;overflow:hidden;
  border-radius:16px;border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--sh1);transition:background .28s ease;
}
.row .rail-mark{width:5px;flex:none;background:var(--ok);transform-origin:center}
.row.mark-A{background:var(--noBg)}
.row.mark-A .rail-mark{background:var(--no);animation:railgrow .3s cubic-bezier(.34,1.4,.5,1)}
.row.mark-E{background:var(--exBg)}
.row.mark-E .rail-mark{background:repeating-linear-gradient(135deg,var(--ex) 0 5px,transparent 5px 10px),var(--exBg);animation:railgrow .3s cubic-bezier(.34,1.4,.5,1)}

.row-body{flex:1;min-width:0;padding:8px 10px 8px 13px;display:flex;align-items:center;gap:10px;min-height:64px}
.row-text{min-width:0;flex:1}
.row-line{display:flex;align-items:baseline;gap:7px}
.row-idx{font-size:11px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.row-en{font-size:14px;font-weight:600;line-height:1.25}
.row-dv{font-size:14px;color:var(--muted);text-align:right}
.row-reason{font-size:11px;color:var(--exFg);margin-top:2px}

.marks{display:flex;gap:4px;flex:none}
.mk{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:var(--surface2);color:var(--faint);
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .2s ease,transform .12s ease;
}
.mk:active{transform:scale(.9)}
.mk:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.mk.on-P{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 6px 16px rgba(31,122,77,.32)}
.mk.on-A{background:var(--no);border-color:var(--no);color:#fff;box-shadow:0 6px 16px rgba(192,57,43,.32)}
.mk.on-E{background:var(--ex);border-color:var(--ex);color:#fff;box-shadow:0 6px 16px rgba(178,118,26,.32)}
.mk.just-set{animation:pop .34s cubic-bezier(.34,1.5,.5,1)}

.reg-foot{
  position:sticky;bottom:14px;margin-top:16px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 14px 12px 22px;border-radius:22px;border:1px solid var(--line);
  background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:var(--sh2);
}

/* ------------------------------- dashboard ------------------------------ */

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px;min-width:0}
.stat{padding:18px 20px}
.stat-top{display:flex;align-items:center;gap:9px;color:var(--accent2)}
.stat-top span{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.stat-value{font-size:40px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:12px}
.stat-sub{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}
.stat.flag{border-color:var(--ex)}
.stat.flag .stat-top{color:var(--exFg)}
.stat.flag .stat-value{color:var(--exFg)}
.stat.good .stat-value{color:var(--okFg)}

.duo{display:flex;align-items:baseline;gap:8px;margin-top:12px;font-variant-numeric:tabular-nums}
.duo b{font-size:32px;font-weight:700;line-height:1.05}
.duo .m{color:var(--accent)} .duo .f{color:var(--accent2)}
.duo span{font-size:18px;color:var(--faint)}
.splitbar{display:flex;height:9px;border-radius:99px;overflow:hidden;margin-top:13px;transform-origin:left;animation:grow .8s .3s cubic-bezier(.2,.8,.3,1) both}
.splitbar .m{background:var(--accent)} .splitbar .f{background:var(--accent2)} .splitbar .u{background:var(--line)}
.splitkey{display:flex;justify-content:space-between;font-size:11px;font-weight:500;color:var(--muted);margin-top:6px}

.chart-wrap{padding:18px 20px 10px}
.chart{display:block;margin-top:12px;width:100%}

.late-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.late-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-radius:13px;background:var(--surface2);border:1px solid var(--line2)}
.late-row b{font-size:14px;font-weight:600}
.late-row p{font-size:12px;color:var(--muted)}
.late-tag{font-size:12px;font-weight:700;color:var(--exFg);background:var(--exBg);border-radius:99px;padding:7px 11px;white-space:nowrap}

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;min-width:0}
.tbl-inner{min-width:560px}
.tbl-wrap .tbl-head{position:sticky;top:0;z-index:1}
.tbl-head,.tbl-row{display:grid;align-items:center;gap:12px;padding:11px 20px}
.tbl-head{background:var(--surface2);border-bottom:1px solid var(--line);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.tbl-row{border-bottom:1px solid var(--line2);font-size:13px;font-variant-numeric:tabular-nums}
.tbl-row:last-child{border-bottom:0}
.tbl-row:hover{background:var(--surface2)}
.tbl .r,.tbl-head .r,.tbl-row .r{text-align:right}
.cls-grid{grid-template-columns:1.7fr .6fr .7fr .7fr .7fr 1.5fr .9fr}

.tt-cell{padding:8px 4px;border-radius:10px;line-height:1.4;text-align:center}
.tt-cell.editable{cursor:pointer;transition:background .15s ease}
.tt-cell.editable:hover{background:var(--surface2)}
.stg-grid{grid-template-columns:1.6fr .8fr .8fr .8fr 1fr}
.sum-grid{grid-template-columns:.7fr 2fr .7fr .7fr .7fr 1.6fr}
.exc-grid{grid-template-columns:.8fr .7fr 1.6fr .9fr 1.6fr .9fr}
.usr-grid{grid-template-columns:1.2fr 1.6fr 1fr 1fr .7fr .8fr}
.hr-grid{grid-template-columns:1.2fr 1.6fr 1.1fr 1fr .8fr .7fr}
.roll2-grid{grid-template-columns:1.2fr .9fr 1.1fr .9fr .9fr 1.3fr .8fr}
.hist-grid{grid-template-columns:1.2fr 1fr .8fr .8fr 1.6fr}

.comp-group .field-head{margin-top:0}
.comp-row{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line2);font-size:13px;
}
.comp-row:last-of-type{border-bottom:0}
.comp-row .r{flex:1;font-variant-numeric:tabular-nums;font-weight:600}
.comp-add{display:flex;gap:8px;margin-top:10px}
.comp-add input{
  flex:1;min-width:0;height:36px;padding:0 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:13px;
}
.comp-add input:focus{border-color:var(--accent2);outline:none}

.meter{display:inline-flex;align-items:center;gap:10px;justify-content:flex-end}
.meter .bar-bg{flex:1;height:8px;border-radius:99px;background:var(--surface2);overflow:hidden;display:block;min-width:40px}
.meter .bar-bg i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left;animation:grow .9s .35s cubic-bezier(.2,.8,.3,1) both}
.meter .bar-bg i.mid{background:linear-gradient(90deg,var(--ex),#d79b3a)}
.meter .bar-bg i.low{background:linear-gradient(90deg,var(--no),#d9695b)}
.meter .pct{width:52px;text-align:right;font-weight:600}


/* ---------------------------- dashboard layout --------------------------- */

.dash{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start;min-width:0}
.dash-main{min-width:0}
.dash-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:16px;min-width:0}

.side-card{padding:16px 18px}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.side-count{font-size:11px;font-weight:700;color:#fff;background:var(--accent2);border-radius:99px;padding:3px 9px}
.side-count.flag{background:var(--ex)}
.rail-empty{font-size:12px;line-height:1.6;color:var(--muted)}

.side-note{padding:11px 13px;border-radius:13px;background:var(--surface2);border:1px solid var(--line2)}
.side-note+.side-note{margin-top:8px}
.side-note.unread{border-color:var(--accent2);background:var(--surface)}
.side-note b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.side-note p{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5}
.side-when{display:block;font-size:10px;color:var(--faint);margin-top:6px}
.side-more{width:100%;margin-top:12px;height:38px;font-size:13px}

.tbl-toggle{
  display:block;width:100%;padding:12px;cursor:pointer;
  border-top:1px solid var(--line);background:var(--surface2);
  font-size:12px;font-weight:600;color:var(--accent3);
}
.tbl-toggle:hover{background:var(--line2)}

@media (max-width:1240px){
  .dash{grid-template-columns:minmax(0,1fr)}
  .dash-side{position:static;flex-direction:row;flex-wrap:wrap}
  .dash-side>*{flex:1 1 300px}
}
@media (max-width:880px){
  .dash-side{flex-direction:column}
}


/* --------------------- statistics, calendar, remarks -------------------- */

.hbar{display:flex;align-items:center;gap:10px;padding:7px 0}
.hbar-key{width:96px;flex:none;font-size:12px;font-weight:500;color:var(--muted)}
.hbar-track{flex:1;height:9px;border-radius:99px;background:var(--surface2);overflow:hidden;min-width:40px}
.hbar-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left;animation:grow .8s .25s cubic-bezier(.2,.8,.3,1) both}
.hbar b{width:52px;text-align:right;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}

.cal-grid{grid-template-columns:1.2fr .8fr 1.6fr 1.1fr 1.1fr .8fr}
.cd-grid{grid-template-columns:2fr 1.2fr 1fr .8fr}

.note.alarm{border-left:4px solid var(--ex)}
.note-act{height:34px;padding:0 13px;font-size:12px;margin-top:11px}

.lang-pick{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lang{padding:9px 16px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-right:1px solid var(--line)}
.lang:last-child{border-right:0;font-family:var(--thaana)}
.lang:hover{background:var(--surface2);color:var(--text)}
.lang.is-on{background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff}

.warn{display:flex;align-items:center;gap:8px}


/* ------------------------- loading and entrances ------------------------ */

@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

.sk{
  background:linear-gradient(90deg,var(--surface2) 25%,var(--line2) 38%,var(--surface2) 62%);
  background-size:300% 100%;animation:shimmer 1.5s ease-in-out infinite;
  border-radius:8px;
}
.sk-card{padding:18px 20px;display:flex;flex-direction:column;gap:11px}
.sk-line{height:11px}
.sk-line.big{height:30px;width:45%}
.sk-line.w40{width:40%} .sk-line.w60{width:60%} .sk-line.w75{width:75%}
.sk-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface)}
.sk-dot{width:44px;height:44px;border-radius:14px;flex:none}
.sk-grow{flex:1;display:flex;flex-direction:column;gap:8px}

/* Lists arrive in sequence rather than all at once. Capped in the markup so
   a 600-name roll does not turn into a slow cascade. */
.stat,.row,.srow,.note,.late-row,.side-note{
  animation:rise .38s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:calc(var(--i, 0) * 35ms);
}
.card.section{animation:rise .4s cubic-bezier(.2,.8,.3,1) both}

.chip.bump{animation:pop .32s cubic-bezier(.34,1.5,.5,1)}
.row.leaving,.tbl-row.leaving{animation:shrink .34s ease forwards}
@keyframes shrink{
  to{opacity:0;transform:translateX(-14px) scale(.97)}
}

/* ------------------------------- students ------------------------------- */

.slist{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:1080px){.slist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.srow{
  display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;width:100%;
  padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--sh1);transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease;
}
.srow:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.srow:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.avatar{
  width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent2));color:#fff;
  font-size:15px;font-weight:600;
}
.avatar.lg{width:78px;height:78px;border-radius:22px;font-size:27px;box-shadow:0 12px 26px rgba(27,59,111,.3)}
.srow-text{min-width:0;flex:1}
.srow-meta{font-size:11px;color:var(--faint);margin-top:2px}
.gap-tag{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:99px;
  background:var(--exBg);color:var(--exFg);font-size:10px;font-weight:700;
  letter-spacing:.04em;text-transform:none;
}
.fill-head{display:flex;align-items:center;gap:12px}
.fill-head b{font-size:16px;font-weight:600}

.rec-head{padding:24px 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(135deg,var(--surface2),var(--surface))}
.rec-index{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--accent2);font-variant-numeric:tabular-nums}
.rec-name{font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.02em;margin-top:5px}
.rec-dv{font-size:18px;color:var(--muted);text-align:left}
.rec-chips{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}

.fields{padding:20px 26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
.f-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;background:var(--surface2);border:1px solid var(--line2);min-height:56px}
.f-row.full{grid-column:1/-1;align-items:baseline}
.f-key{width:132px;flex:none;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.f-val{flex:1;font-size:14px;font-weight:600;line-height:1.5;word-break:break-word}
.f-val.dv{font-size:18px;font-weight:400;text-align:right}
.f-val.none{color:var(--faint);font-weight:400}


/* ---------------------------- role and access --------------------------- */

.field-head{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:18px 0 9px;
}

.picks{display:flex;flex-direction:column;gap:7px}
.pick{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface);
  transition:border-color .18s ease,background .18s ease,transform .16s ease;
}
.pick:hover{border-color:var(--powder)}
.pick input{margin:2px 0 0;accent-color:var(--accent2);flex:none}
.pick-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pick-body b{font-size:14px;font-weight:600}
.pick-body span{font-size:12px;color:var(--muted);line-height:1.45}
.pick.is-on{
  border-color:var(--accent2);background:var(--surface2);
  box-shadow:0 0 0 3px rgba(28,114,147,.14);
}

.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:8px 13px;border-radius:99px;font-size:13px;font-weight:500;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.opt:hover{border-color:var(--powder);color:var(--text)}
.opt input{accent-color:var(--accent2);margin:0}
.opt.is-on{
  border-color:var(--accent2);color:var(--text);
  background:linear-gradient(135deg,rgba(27,59,111,.1),rgba(28,114,147,.1));
}


.switches{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.switch{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface2);
  transition:border-color .18s ease,background .18s ease;
}
.switch:hover{border-color:var(--powder)}
.switch input{margin:2px 0 0;accent-color:var(--accent2);flex:none;width:17px;height:17px}
.switch-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.switch-body b{font-size:14px;font-weight:600}
.switch-body span{font-size:12px;color:var(--muted);line-height:1.45}

.ok-line{
  display:flex;align-items:center;gap:8px;font-size:13px;
  color:var(--okFg);background:var(--okBg);border-radius:12px;padding:11px 14px;
}

/* ------------------------------ file input ------------------------------ */

.drop{
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  padding:30px 20px;border-radius:16px;text-align:center;
  border:2px dashed var(--line);background:var(--surface2);color:var(--muted);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.drop:hover{border-color:var(--accent2);color:var(--text)}
.drop.over{border-color:var(--accent2);background:var(--surface);transform:scale(1.01)}
.drop b{font-size:15px;font-weight:600;color:var(--text);word-break:break-all}
.drop span{font-size:12px}
.drop .ico{color:var(--accent2);margin-bottom:4px}
.drop.has-file{border-style:solid;border-color:var(--ok);background:var(--okBg)}
.drop.has-file .ico{color:var(--okFg)}

.paste-fold{margin-top:16px}
.paste-fold summary{
  cursor:pointer;font-size:13px;font-weight:600;color:var(--accent3);
  padding:6px 0;list-style:none;
}
.paste-fold summary::-webkit-details-marker{display:none}
.paste-fold summary::before{content:'+ ';font-weight:700}
.paste-fold[open] summary::before{content:'– '}


/* ------------------------------ class list ------------------------------ */

.sheet-paper{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh1);overflow:hidden;
}

/* A line every school register carries, printed or not. */
.paper-bismillah{text-align:center;font-size:21px;line-height:1.5;padding:14px 24px 2px;color:var(--accent)}

/* Letterhead: school block left, crest right — matches the paper form this replaces. */
.paper-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 24px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface2),var(--surface));
}
.paper-crest{width:56px;height:56px;flex:none;display:block;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:6px}
.paper-crest .crest-art{width:100%;height:100%;display:block}
.paper-id{min-width:0;text-align:left}
.paper-school{font-weight:700;font-size:17px;color:var(--accent);line-height:1.3}
.paper-place{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5}

/* Title band: the class code is the thing you look for on a pile of paper. */
.paper-title{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:14px 24px 18px;border-bottom:2px solid var(--accent);
}
.paper-class{
  font-size:26px;font-weight:700;line-height:1.2;
  color:var(--accent);letter-spacing:.03em;
}
.paper-teacher{font-size:13px;font-weight:600;color:var(--muted)}
.paper-chips{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.pchip{
  font-size:11px;font-weight:600;padding:5px 11px;border-radius:99px;
  background:var(--surface2);border:1px solid var(--line);color:var(--muted);
}
.pchip.m{color:var(--accent);border-color:rgba(27,59,111,.3)}
.pchip.f{color:var(--sky,var(--accent2));border-color:rgba(28,114,147,.3)}

table.cl{
  width:100%;border-collapse:collapse;font-size:12.5px;min-width:1080px;
  table-layout:auto;
}
table.cl thead th{
  background:var(--surface2);
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:8px 10px;white-space:nowrap;
  vertical-align:middle;border-bottom:1px solid var(--line);
}
/* The date group sits above its three columns; everything else spans both
   header rows, so no column is left with a gap under its label. */
table.cl thead th.cl-dobhead{
  text-align:center;border-bottom:1px solid var(--line);padding-bottom:5px;
}
table.cl tr.cl-sub th{
  padding:2px 6px 7px;font-size:9px;text-align:center;letter-spacing:.06em;
}
table.cl thead th.cl-mid,table.cl thead th.cl-no{text-align:center}
table.cl thead th.cl-rtl{text-align:right}

table.cl td{
  padding:7px 10px;border-bottom:1px solid var(--line2);
  vertical-align:middle;color:var(--text);
}
table.cl tbody tr{transition:background .14s ease}
table.cl tbody tr:hover{background:var(--surface2)}
table.cl tbody tr:last-child td{border-bottom:0}

.cl-no{width:32px;text-align:center;color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
.cl-idx{width:58px;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.cl-name{font-weight:600;white-space:nowrap}
.cl-addr{color:var(--muted);font-size:12px}
.cl-mid{text-align:center;white-space:nowrap}
.cl-mono{font-variant-numeric:tabular-nums}
.cl-dob{text-align:center;width:30px;font-variant-numeric:tabular-nums;color:var(--muted)}
.cl-dv{width:190px;font-size:15px;line-height:1.9;text-align:right;white-space:nowrap}

/* Sex and house read as marks, not words. */
.sex{
  display:inline-grid;place-items:center;width:21px;height:21px;border-radius:7px;
  font-size:10px;font-weight:700;
}
.sex.m{background:rgba(27,59,111,.12);color:var(--accent)}
.sex.f{background:rgba(28,114,147,.14);color:var(--accent2)}
.house{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:10px;font-weight:700;color:#fff;
}
.house.h-R{background:#b3392f} .house.h-Y{background:#c99a1e}
.house.h-G{background:#2f7d4f} .house.h-B{background:#2f6fb5}

/* A gap is a ruled box to write in, not an alarm. */
.f-val .house{vertical-align:-4px;margin-right:6px}

.tofill{
  display:inline-block;min-width:52px;height:12px;
  border-bottom:1px dotted var(--powder);opacity:.75;
}

.paper-foot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 24px;border-top:1px solid var(--line);background:var(--surface2);
  font-size:11px;color:var(--faint);
}

/* -------------------------------- print --------------------------------- */

@media print{
  .rail,.topbar,.nav-scrim,.site-foot,.no-print,.tabs,.bar,#ovf,.toast{display:none !important}
  .shell{display:block}
  .main{padding:0;max-width:none;overflow:visible;display:block}
  .view{padding:0}
  html,body{background:#fff;color:#000}

  .sheet-paper{border:0;box-shadow:none;border-radius:0}
  .paper-head,.paper-title,.paper-foot{background:#fff}
  .paper-bismillah{font-size:16px;padding:0 0 4px}
  .paper-head{padding:0 0 8px}
  .paper-title{padding:8px 0;border-bottom:2px solid #1b3b6f}
  .paper-class{font-size:22px}
  .paper-teacher{color:#000}

  .tbl-wrap{overflow:visible}
  .tbl-wrap>*,table.cl{min-width:0}
  table.cl{font-size:9pt}
  /* Paper needs the grid that the screen does without. */
  table.cl th,table.cl td{border:1px solid #9aa4b2;padding:3px 5px}
  table.cl thead th{position:static;background:#eef1f5;color:#000}
  table.cl tr.cl-sub th{top:auto}
  table.cl thead{display:table-header-group}
  table.cl tr{page-break-inside:avoid}
  table.cl tbody tr:nth-child(even){background:#f6f7f9}

  /* Colour costs money on a school printer; print marks as plain letters. */
  .sex,.house{background:none !important;color:#000 !important;width:auto;height:auto;font-weight:700}
  .house{border:1px solid #666;border-radius:50%;width:16px;height:16px}
  .f-val .house{vertical-align:-4px;margin-right:6px}

.tofill{min-width:60px;border-bottom:1px solid #bbb;opacity:1}
  .pchip{border:1px solid #bbb;color:#000}

  @page{size:A4 landscape;margin:9mm}
}

/* ---------------------------- notifications ----------------------------- */

.notes{display:flex;flex-direction:column;gap:10px}
.note{border-radius:18px;border:1px solid var(--line);background:var(--surface);padding:15px}
.note.unread{border-color:var(--accent2);background:var(--surface2);box-shadow:var(--sh1)}
.note-top{display:flex;align-items:center;gap:9px}
.note-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line);color:var(--muted)}
.note.unread .note-ico{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.note-kind{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.note.unread .note-kind{color:var(--accent2)}
.note-when{margin-left:auto;font-size:11px;font-weight:500;color:var(--faint)}
.note-title{font-size:15px;font-weight:600;line-height:1.4;margin-top:10px}
.note-body{font-size:12px;color:var(--faint);margin-top:4px;line-height:1.5}

/* --------------------------------- panel -------------------------------- */

.sheet{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end}
.sheet-scrim{position:absolute;inset:0;background:rgba(10,16,33,.5);backdrop-filter:blur(2px);animation:fadein .24s ease both}
.sheet-panel{
  position:relative;width:min(600px,100%);background:var(--surface);
  display:flex;flex-direction:column;box-shadow:var(--sh2);
  animation:panelin .3s cubic-bezier(.3,1.1,.4,1) both;
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.sheet-head h2{font-weight:700;font-size:20px;letter-spacing:-.015em}
.sheet-body{padding:0;overflow-y:auto;flex:1}
.sheet-body.pad{padding:20px 22px}
.sheet-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line);background:var(--surface2)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full{grid-column:1/-1}
.form-grid .field input,.form-grid .field select,.form-grid .field textarea{min-width:0;width:100%}

.toast{
  position:fixed;left:50%;bottom:26px;z-index:70;
  padding:13px 20px;border-radius:14px;max-width:90vw;
  background:var(--indigo);color:#fff;font-size:14px;font-weight:600;
  box-shadow:var(--sh2);animation:toastin .26s cubic-bezier(.3,1.2,.4,1) both;
}
.toast.bad{background:var(--no)}


/* ------------------------------ responsive ------------------------------ */

@media (max-width:1000px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fields{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:880px){
  .signin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .signin-brand{padding:26px 24px}
  .crest{width:84px;height:84px;border-radius:20px;padding:11px}
  .orb-1,.orb-2{display:none}
  .brand-en{font-size:25px;margin-top:20px}
  .foot-dv{font-size:13px}
  .foot-en{font-size:14px}
  .signin-wait{padding:32px 26px}
  .wait-title{font-size:20px}

  .shell{grid-template-columns:minmax(0,1fr);align-content:start}

  /* --- the top bar, compact --- */
  .topbar{padding:10px 14px;min-height:64px;gap:10px}
  .menu-btn{
    width:44px;height:44px;flex:none;border-radius:14px;cursor:pointer;
    border:1px solid var(--line);background:var(--surface);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  }
  .menu-btn span{
    display:block;width:17px;height:2px;border-radius:2px;background:var(--text);
    transition:transform .32s cubic-bezier(.3,1.2,.4,1),opacity .2s ease;
  }
  .shell.nav-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .shell.nav-open .menu-btn span:nth-child(2){opacity:0;transform:scaleX(.3)}
  .shell.nav-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .tb-h1{font-size:18px}
  .tb-sub{font-size:12px}
  .tb-search,.tb-who,.tb-caret,.tb-theme{display:none}
  .tb-chip{padding:0 5px;height:44px}
  .tb-btn{width:44px;height:44px}
  .tb-menu-theme{display:flex}
  .tb-menu{position:fixed;right:12px;top:66px}

  /* --- the drawer itself --- */
  .nav-scrim{
    display:block;position:fixed;inset:0;z-index:50;
    background:rgba(10,16,33,.5);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .shell.nav-open .nav-scrim{opacity:1;pointer-events:auto}

  .rail{
    position:fixed;top:0;left:0;bottom:0;z-index:60;
    width:min(288px,86vw);height:100%;
    padding:18px 14px;
    transform:translateX(-100%);
    transition:transform .34s cubic-bezier(.3,1,.35,1),box-shadow .34s ease;
  }
  .shell.nav-open .rail{transform:none;box-shadow:22px 0 50px rgba(10,16,33,.34)}
  .rail-collapse{display:none}
  .nav-item{min-height:48px;padding:0 14px}
  .shell.nav-open .rail .nav-item{
    animation:rise .34s cubic-bezier(.2,.8,.3,1) both;
    animation-delay:calc(var(--i, 0) * 45ms + 90ms);
  }

  .view{padding:8px 14px 24px}
  .countdowns{padding:0 14px 4px}
  .site-foot{margin:6px 14px 0;padding:20px 0 96px;flex-direction:column;align-items:flex-start;gap:14px}
  .sf-meta{text-align:left}

  .stats{gap:10px}
  .stat{padding:15px 16px}
  .card{border-radius:18px}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat-value{font-size:34px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .rec-chips{margin-left:0}
  .bar>.btn{flex:1 1 auto}
  .bar>.field{flex:1 1 150px}
  .bar>.field input,.bar>.field select{min-width:0;width:100%}

  .tbl-head,.tbl-row{padding:11px 14px;gap:8px}
  .reg-foot{
    position:fixed;left:12px;right:12px;bottom:12px;margin:0;
    z-index:30;box-shadow:var(--sh2);
  }

  .row-body{flex-wrap:wrap;padding:10px 12px}
  .row-text{flex:1 1 100%}
  .marks{width:100%}
  .mk{flex:1;height:48px}
  .reg-title{font-size:22px}

  .sheet-panel{width:100%}
  .rec-head{padding:18px}
  .fields{padding:16px 18px}
  .f-row{flex-wrap:wrap;gap:4px}
  .f-key{width:100%}
}

/* Phones: a table becomes a stack of cards. Each cell carries its own column
   name (added by labelTables in app.js), so nothing needs to scroll sideways. */
@media (max-width:720px){
  .tbl-wrap{overflow:visible}
  .tbl-inner{min-width:0}
  .tbl-head{display:none}
  .tbl-inner>.tbl-row,.tbl>.tbl-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px 14px;padding:16px 16px;
  }
  .tbl-row>span:first-child{grid-column:1/-1;font-size:15px}
  .tbl-row>span[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:2px;
    font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  }
  .tbl-row>span:first-child[data-label]::before{display:none}
  .tbl-row .r,.tbl .r{text-align:left}
  .tbl-row>span:last-child:not([data-label]){grid-column:1/-1;text-align:left}
  .tbl-row>span:last-child:not([data-label]) .btn{width:100%}
  .meter{justify-content:flex-start}
  .meter .bar-bg{flex:1}
}


/* ---------------------------- the register ---------------------------- */

.reg-top{
  padding:18px 20px;margin-bottom:16px;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;
}
.reg-pick{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;min-width:0}
.reg-top .tabs{margin:0}
.datenav{display:flex;align-items:center;gap:6px}
.datenav input{min-width:0;width:170px}
.dn-btn{
  width:44px;height:44px;flex:none;border-radius:13px;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;color:var(--muted);cursor:pointer;
}
.dn-btn:hover:not(:disabled){color:var(--text);box-shadow:var(--sh1)}
.dn-btn:disabled{opacity:.35;cursor:default}
.dn-btn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

.rsum{padding:22px 24px 20px;margin-bottom:16px;display:flex;flex-direction:column;gap:16px}
.rsum-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.rsum .reg-title{font-weight:700;font-size:26px;line-height:1.2;letter-spacing:-.02em}
.rsum-rate{text-align:right}
.rsum-rate b{display:block;font-size:46px;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.rsum-rate span{font-size:12px;color:var(--faint);font-weight:600}
.rsum-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--surface2)}
.rsum-bar i{display:block;height:100%;transition:width .4s cubic-bezier(.2,.8,.3,1)}
.rsum-bar .p{background:var(--ok)}
.rsum-bar .e{background:var(--ex)}
.rsum-bar .a{background:var(--no)}
.rsum-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.fchip{
  height:42px;padding:0 15px;border-radius:99px;border:1px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.fchip:hover{color:var(--text)}
.fchip i{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none}
.fchip i.d-P{background:var(--ok)} .fchip i.d-A{background:var(--no)} .fchip i.d-E{background:var(--ex)}
.fchip b{color:var(--text);font-variant-numeric:tabular-nums}
.fchip.is-on{background:var(--accent);border-color:transparent;color:#fff}
.fchip.is-on b{color:#fff}
.fchip:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.rsum-search{position:relative;display:flex;align-items:center;width:min(280px,100%)}
.rsum-search svg{position:absolute;left:15px;color:var(--faint);pointer-events:none}
.rsum-search input{
  width:100%;height:42px;padding:0 16px 0 41px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;
}
.rsum-search input:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(28,114,147,.16)}

.rlist{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,500px),1fr));
}
.rrow{
  display:flex;align-items:center;gap:14px;padding:11px 12px 11px 14px;min-width:0;
  border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh1);
  transition:background .25s ease,border-color .25s ease;
}
.rrow[hidden],.rempty[hidden]{display:none}
.rrow.st-A{background:var(--noBg);border-color:rgba(192,57,43,.35)}
.rrow.st-E{background:var(--exBg);border-color:rgba(178,118,26,.35)}
.ravatar{
  width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;
  font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(140deg,var(--accent),var(--accent2));transition:background .25s ease;
}
.rrow.st-A .ravatar{background:var(--no)}
.rrow.st-E .ravatar{background:var(--ex)}
.rtext{flex:1;min-width:0}
.rline{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.rname{font-size:14.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.ridx{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;flex:none}
.rdv{font-size:14px;color:var(--muted);text-align:left}
.rreason{
  display:inline-flex;align-items:center;margin-top:4px;padding:0;text-align:left;
  font-size:12px;font-weight:600;color:var(--exFg);cursor:pointer;
}
.rreason:hover{text-decoration:underline}
.rreason[hidden]{display:none}

.rseg{display:flex;gap:3px;padding:4px;border-radius:15px;background:var(--surface2);border:1px solid var(--line);flex:none}
.rs-btn{
  height:42px;padding:0 13px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .2s ease,transform .12s ease;
}
.rs-btn:hover{color:var(--text)}
.rs-btn:active{transform:scale(.95)}
.rs-btn:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
.rs-btn[aria-pressed="true"][data-s="P"]{background:var(--ok);color:#fff;box-shadow:0 6px 14px -6px rgba(31,122,77,.7)}
.rs-btn[aria-pressed="true"][data-s="A"]{background:var(--no);color:#fff;box-shadow:0 6px 14px -6px rgba(192,57,43,.7)}
.rs-btn[aria-pressed="true"][data-s="E"]{background:var(--ex);color:#fff;box-shadow:0 6px 14px -6px rgba(178,118,26,.7)}
.rs-btn.just-set{animation:pop .34s cubic-bezier(.34,1.5,.5,1)}
.rbadge{flex:none;padding:7px 13px;border-radius:99px;font-size:12px;font-weight:700;background:var(--surface2);border:1px solid var(--line);color:var(--muted)}
.rrow.st-P .rbadge{color:var(--okFg)} .rrow.st-A .rbadge{color:var(--noFg)} .rrow.st-E .rbadge{color:var(--exFg)}
.rempty{grid-column:1/-1;padding:30px 20px;text-align:center;font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:18px;background:var(--surface)}

.rf-state{display:flex;align-items:center;gap:11px;min-width:0}
.rf-state p{font-size:13px;font-weight:600;color:var(--muted)}
.rf-dot{width:10px;height:10px;border-radius:50%;background:var(--faint);flex:none;transition:background .2s ease}
.rf-dot.saved{background:var(--ok)}
.rf-dot.dirty{background:var(--ex);box-shadow:0 0 0 4px rgba(178,118,26,.22)}
.rf-actions{display:flex;gap:10px;flex-wrap:wrap}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:720px){
  .reg-top{padding:12px;gap:10px}
  .reg-pick{width:100%;gap:8px}
  .reg-pick .field{flex:1 1 100%}
  .reg-pick .field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .reg-pick .field select{width:100%;min-width:0}
  .datenav{width:100%}
  .datenav input{flex:1;width:auto}
  .reg-pick .btn{flex:1 1 100%;height:40px}
  .reg-top .tabs{width:100%}
  .rsum{padding:14px 14px 14px;gap:12px}
  .rsum-top{align-items:center;flex-wrap:nowrap}
  .rsum .reg-title{font-size:22px}
  .rsum .reg-sub{font-size:12px;margin-top:2px}
  .rsum-rate b{font-size:32px}
  .rsum-search{width:100%}
  .fchips{gap:6px;width:100%}
  .fchip{height:44px;padding:0 8px;gap:5px;font-size:12.5px;flex:1 1 0;justify-content:center;min-width:0}
  .fchip i{display:none}
  .rlist{grid-template-columns:minmax(0,1fr);padding-bottom:120px}
  .rrow{flex-wrap:wrap;padding:12px}
  .rtext{flex:1 1 calc(100% - 60px)}
  .rseg{width:100%}
  .rs-btn{flex:1;height:48px;padding:0 6px}
  .rbadge{margin-left:auto}
  .reg-foot{padding:10px 12px;bottom:10px;background:var(--surface);gap:8px;border-radius:20px}
  .rf-state{flex:1 1 100%}
  .rf-state p{font-size:12.5px}
  .rf-actions{flex:1 1 100%;flex-wrap:nowrap}
  .rf-actions .btn{flex:1;padding:0 10px}
  .rf-actions .btn.quiet{flex:0 0 auto}
}

/* ------------------- roles, My HR, audit log, access ------------------- */

.nav-sec{margin:16px 8px 4px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.shell.slim .nav-sec{font-size:0;height:1px;margin:8px 10px;background:var(--line2)}
.tb-menu-role{font-size:12px;color:var(--muted);padding:1px 10px 0}
.tb-menu-item[hidden]{display:none}
.tb-menu-mail{margin-bottom:6px}

.sbadge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.sbadge.s-PRESENT{background:var(--okBg);color:var(--okFg)}
.sbadge.s-LATE{background:var(--exBg);color:var(--exFg)}
.sbadge.s-ABSENT{background:var(--noBg);color:var(--noFg)}
.sbadge.s-ON_LEAVE{background:var(--surface2);color:var(--accent);border:1px solid var(--line)}

.me-head{display:flex;align-items:center;gap:20px;padding:22px 24px;margin-bottom:18px;flex-wrap:wrap}
.me-id{min-width:0;flex:1}
.me-id h2{font-size:22px;letter-spacing:-.01em}
.me-id p{font-size:13px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.me-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.two-col .fields{grid-template-columns:minmax(0,1fr)}
.mchips{display:flex;gap:8px;flex-wrap:wrap}
.mchip{padding:7px 13px;border-radius:99px;border:1px solid var(--line);background:var(--surface2);font-size:12.5px;font-weight:600;color:var(--muted)}
.mchip b{color:var(--text);font-variant-numeric:tabular-nums}
.myatt-grid{grid-template-columns:1.1fr 1fr .6fr .6fr 1.6fr}
.soon-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.soon-list li{padding:12px 14px;border-radius:14px;border:1px dashed var(--line);display:flex;flex-direction:column;gap:2px}
.soon-list b{font-size:14px}
.soon-list span{font-size:12px;color:var(--muted)}

.aud-grid{grid-template-columns:1fr 1.5fr 1.3fr 1.4fr 2.4fr}
.aud-diff summary{cursor:pointer;color:var(--accent3);font-weight:600;font-size:12px;margin-top:4px}
.aud-diff pre{margin:4px 0 8px;padding:8px 10px;border-radius:10px;background:var(--surface2);border:1px solid var(--line2);
  font-size:11.5px;white-space:pre-wrap;word-break:break-word;font-family:var(--mono);color:var(--text)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.pager .btn{height:40px;margin-left:8px}

.forbid{padding:52px 22px}
.forbid svg{color:var(--noFg);margin-bottom:10px}

@media (max-width:880px){
  .two-col{grid-template-columns:minmax(0,1fr)}
  .soon-list{grid-template-columns:minmax(0,1fr)}
  .me-head{padding:18px}
  .two-col .fields{padding:12px 14px 14px;gap:8px}
  .two-col .f-row{padding:10px 14px;min-height:0;gap:2px}
}

/* ---------------------------------- forms ---------------------------------- */

.newmenu{position:relative}
.newmenu-list{
  position:absolute;right:0;top:calc(100% + 8px);z-index:35;min-width:290px;padding:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh2);
  animation:rise .2s cubic-bezier(.2,.8,.3,1) both;
}
.newmenu-list[hidden]{display:none}
.newmenu-list button{display:flex;flex-direction:column;gap:2px;width:100%;min-height:52px;text-align:left;padding:10px 14px;border-radius:12px;cursor:pointer}
.newmenu-list button:hover,.newmenu-list button:focus-visible{background:var(--line2);outline:none}
.newmenu-list b{font-size:14px}
.newmenu-list span{font-size:12px;color:var(--muted)}
.tab-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:99px;background:var(--ex);color:#fff;font-size:11px;font-weight:700}

.flist{display:grid;gap:10px}
.frow{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;
  border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh1);cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}
.frow:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.frow:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.fkind{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line2);color:var(--accent2)}
.ftext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fline{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.fline b{font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ftitle{font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.fright{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}

.fbadge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.fb-ok{background:var(--okBg);color:var(--okFg)}
.fb-bad{background:var(--noBg);color:var(--noFg)}
.fb-warn{background:var(--exBg);color:var(--exFg)}
.fb-wait{background:rgba(28,114,147,.12);color:var(--accent3)}
.fb-info{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}

.fhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.fref{font-size:22px;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.fwaiting{display:flex;align-items:center;gap:8px;margin:10px 0 4px;padding:10px 14px;border-radius:12px;background:var(--surface2);font-size:13px;color:var(--muted)}
.fsteps{display:flex;list-style:none;margin:16px 0 18px;padding:0}
.fsteps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;text-align:center;min-width:0}
.fsteps li::before{content:'';position:absolute;top:12px;left:-50%;width:100%;height:2px;background:var(--line)}
.fsteps li:first-child::before{display:none}
.fsteps li.fs-done::before,.fsteps li.fs-current::before{background:var(--accent2)}
.fs-dot{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;color:#fff}
.fs-done .fs-dot{background:var(--accent2);border-color:var(--accent2)}
.fs-current .fs-dot{border-color:var(--accent2);box-shadow:0 0 0 4px rgba(28,114,147,.18)}
.fs-label{font-size:10.5px;font-weight:600;color:var(--muted);line-height:1.25}
.fs-current .fs-label{color:var(--text)}
.fsteps.stopped li{opacity:.75}

.ffacts{padding:0;margin:10px 0 14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.pdfbtn{margin:6px 0 12px;height:auto;min-height:44px;padding:10px 16px;text-align:left;flex-wrap:wrap;text-decoration:none}
.fpanel{padding:16px 18px;margin:14px 0}
.fpl{display:grid;grid-template-columns:minmax(0,1fr) 120px 100px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line2)}
.fpl:last-child{border-bottom:0}
.fpl input{height:44px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--surface);color:var(--text);font:inherit;width:100%;min-width:0}
.fshort{font-size:12px;font-weight:700}
.fshort.short{color:var(--exFg)}
.fshort.ok{color:var(--okFg)}
.fnote{margin:12px 0}
.factions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.fhist{list-style:none;margin:0;padding:0}
.fhist li{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:13px}
.fh-when{flex:none;width:112px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.sheet-panel.wide{width:min(860px,100%)}

.irow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px 56px 14px 14px;margin-bottom:10px;border:1px solid var(--line);border-radius:16px;background:var(--surface2)}
.irow .full{grid-column:1/-1}
.irow input{min-width:0;width:100%}
.irow-del{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:12px;color:var(--faint);display:grid;place-items:center;cursor:pointer}
.irow-del:hover,.irow-del:focus-visible{color:var(--noFg);background:var(--noBg);outline:none}

.fi-grid-3{grid-template-columns:2fr .6fr .8fr}
.fi-grid-5{grid-template-columns:2fr .6fr .8fr 1fr 1.4fr}
.fi-grid-6{grid-template-columns:2fr .6fr .8fr .8fr .8fr .8fr}
.plog-grid{grid-template-columns:1.1fr 1fr 1.2fr 1.1fr .8fr 1fr .5fr .5fr .5fr 1fr}
.plog-grid a{white-space:nowrap}

.form-paper{background:#fff;color:#000;border:1px solid #999;padding:22px 24px;font-family:var(--sans);font-size:13px}
.pp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.pp-title{font-weight:700;font-size:18px;letter-spacing:.06em;text-decoration:underline}
.pp-meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin:14px 0}
.pp-table{width:100%;border-collapse:collapse;margin-bottom:14px}
.pp-table th,.pp-table td{border:1px solid #444;padding:7px 8px;text-align:left;height:28px;vertical-align:top}
.pp-table th{background:#eee;font-size:12px}
.pp-table .c{text-align:center}
.pp-signs{border:1px solid #444}
.pp-sign{display:grid;grid-template-columns:1.2fr 2fr 1fr;border-bottom:1px solid #444}
.pp-sign:last-child{border-bottom:0}
.pp-sign>span{padding:8px;border-right:1px solid #444;min-height:34px}
.pp-sign>span:last-child{border-right:0}
.pp-role{font-weight:700}
.pp-head span{background:#eee;font-weight:700;min-height:0}
.pp-foot{font-size:10.5px;color:#555;margin-top:10px}
.pp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media print{
  body.print-form .shell,body.print-form .toast,body.print-form #boot,body.print-form #gate{display:none !important}
  body.print-form .sheet{position:static;display:block}
  body.print-form .sheet-scrim,body.print-form .sheet-head,body.print-form .sheet-foot{display:none}
  body.print-form .sheet-panel{width:auto;box-shadow:none;animation:none;display:block;background:#fff}
  body.print-form .sheet-body{overflow:visible;padding:0}
  body.print-form .form-paper{border:0}
}

@media (max-width:720px){
  .frow{flex-wrap:wrap;padding:14px}
  .fright{flex-direction:row;width:100%;justify-content:space-between;align-items:center}
  .ffacts{grid-template-columns:minmax(0,1fr)}
  .irow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fpl{grid-template-columns:minmax(0,1fr) 110px}
  .fpl .fshort{grid-column:1/-1}
  .fh-when{width:88px}
  .fs-label{font-size:9.5px}
  .factions .btn{flex:1 1 100%}
  .newmenu-list{right:auto;left:0;min-width:min(290px,86vw)}
  .bar .newmenu{flex:1 1 auto}
  .bar .newmenu>.btn{width:100%}
  .form-paper{padding:14px}
  .pp-table{min-width:460px}
  .pp-sign{grid-template-columns:1fr}
  .pp-sign>span{border-right:0}
}

/* ------------------------------ new dashboard ------------------------------ */

.dash-hero{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:18px;margin-bottom:18px;align-items:stretch}
.hero{padding:26px 28px 18px;display:flex;flex-direction:column;min-width:0}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hero-label{font-size:13px;font-weight:600;color:var(--muted)}
.hero-value{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;margin-top:10px}
.hero-num{font-size:clamp(42px,5vw,60px);font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.hero-note{font-size:13px;color:var(--faint)}
.hero-chart{margin-top:10px;flex:1;min-height:0}
.hero-chart .chart{height:auto;width:100%}
.hero-stats{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line2);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.hero-stats span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.hero-stats b{display:inline-block;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}
.hero-stats em{font-style:normal;font-size:11px;color:var(--faint);margin-left:6px}

.delta{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.delta.up{background:var(--okBg);color:var(--okFg)}
.delta.down{background:var(--noBg);color:var(--noFg)}
.delta.flat{background:var(--surface2);color:var(--muted)}

.seg{display:inline-flex;padding:3px;border-radius:99px;background:var(--surface2);border:1px solid var(--line)}
.seg button{height:32px;min-width:44px;padding:0 14px;border-radius:99px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.seg button:hover{color:var(--text)}
.seg button.is-on{background:var(--accent);color:#fff;box-shadow:0 4px 10px -3px rgba(27,59,111,.5)}
.seg button:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

.brief{padding:24px 24px 22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.brief-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brief-title{font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em}
.brief-list{display:flex;flex-direction:column}
.brief-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:13.5px;min-width:0}
.brief-row:last-child{border-bottom:0}
.brief-row .bi{width:34px;height:34px;border-radius:11px;background:var(--surface2);border:1px solid var(--line2);display:grid;place-items:center;color:var(--accent2);flex:none}
.brief-row span{min-width:0;flex:1}
.brief-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.brief-row b.ok{color:var(--okFg)} .brief-row b.no{color:var(--noFg)} .brief-row b.ex{color:var(--exFg)}
.callout{
  border-radius:18px;padding:16px 18px;
  background:linear-gradient(135deg,rgba(27,59,111,.08),rgba(28,114,147,.11));
  border:1px solid rgba(28,114,147,.2);
}
.callout p{font-size:13px;line-height:1.55;color:var(--muted)}
.callout b{color:var(--text)}
.callout .btn{height:38px;font-size:13px;margin-top:12px;padding:0 16px}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}
.kpi{padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.kpi-top{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:13px;font-weight:600}
.kpi-ico{width:38px;height:38px;border-radius:13px;background:var(--surface2);border:1px solid var(--line2);display:grid;place-items:center;color:var(--accent2);flex:none}
.kpi-val{font-size:32px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05}
.kpi-sub{font-size:12px;color:var(--faint);line-height:1.5}
.kpi.flag .kpi-ico{background:var(--exBg);color:var(--exFg);border-color:transparent}
.kpi.flag .kpi-val{color:var(--exFg)}
.kpi.good .kpi-ico{background:var(--okBg);color:var(--okFg);border-color:transparent}

@media (max-width:1000px){
  .dash-hero{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .hero{padding:20px 18px 12px}
  .brief{padding:20px 18px}
  .kpis{gap:12px}
  .kpi{padding:16px 16px}
  .kpi-val{font-size:26px}
}
@media (max-width:359px){
  .kpis{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ------------------------------ home page ------------------------------ */

/* Countdowns: one slim line each. */
.cd-pill{padding:6px 14px 6px 12px;gap:10px;border-radius:99px;box-shadow:none}
.cd-pill>div:first-child{display:flex;align-items:baseline;gap:4px}
.cd-num{font-size:15px}
.cd-unit{margin-top:0;font-size:10px}
.cd-text{flex-direction:row;align-items:baseline;gap:8px}
.cd-title{font-size:12.5px;max-width:200px}
.cd-when{font-size:11px;white-space:nowrap}

.hm{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start;min-width:0}
.hm-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.hm-side{display:flex;flex-direction:column;gap:14px;min-width:0;position:sticky;top:78px}
.hm-muted{color:var(--faint);font-size:12px}

/* summary strip */
.hm-strip{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-radius:16px;
  background:linear-gradient(120deg,rgba(28,114,147,.10),rgba(27,59,111,.05));border-color:rgba(28,114,147,.22)}
.hm-strip p{flex:1;min-width:0;font-size:14px;line-height:1.45}
.hm-strip p b{font-weight:700}
.hm-strip-ico{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--surface);color:var(--accent2);border:1px solid var(--line)}
.btn.sm{height:36px;padding:0 14px;font-size:13px;border-radius:11px;gap:7px}
.btn.sm.quiet{box-shadow:none}

/* KPI tiles */
.hm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hm-kpi{padding:14px 16px 13px;display:flex;flex-direction:column;gap:6px;min-width:0}
.hm-kt{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.hm-kico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line2);color:var(--accent2);flex:none}
.hm-kpi.good .hm-kico{background:var(--okBg);color:var(--okFg);border-color:transparent}
.hm-kpi.flag .hm-kico{background:var(--exBg);color:var(--exFg);border-color:transparent}
.hm-kv{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.hm-kv small{font-size:15px;font-weight:600;color:var(--faint);letter-spacing:0}
.hm-kv i{font-style:normal;color:var(--line);font-weight:400}
.hm-kv .ok{color:var(--okFg)} .hm-kv .no{color:var(--noFg)} .hm-kv .ex{color:var(--exFg)}
.hm-kv .delta{height:22px;padding:0 8px;font-size:11px;align-self:center}
.hm-ks{font-size:12px;color:var(--faint);line-height:1.4;display:flex;flex-direction:column;gap:5px}
.splitbar.thin{height:5px;margin:0}
.hm-bar{display:block;height:5px;border-radius:99px;background:var(--line2);overflow:hidden}
.hm-bar i{display:block;height:100%;border-radius:99px;background:var(--accent2)}

/* panels */
.hm-panel{padding:14px 16px 14px;min-width:0}
.hm-flush{padding:0;overflow:hidden}
.hm-flush .hm-ph{padding:14px 16px 10px;margin:0}
.hm-ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;min-height:28px}
.hm-ph h3{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:-.005em}
.hm-ph h3 svg{color:var(--accent2)}
.hm-sub{font-size:12px;color:var(--faint);white-space:nowrap}
.hm-count{font-size:11px;font-weight:700;color:#fff;background:var(--accent2);border-radius:99px;padding:3px 9px;line-height:1.3}
.hm-count.flag{background:var(--ex)}
.hm-empty{font-size:13px;color:var(--faint);line-height:1.55;padding:2px 0 4px}
.hm-link{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;margin-top:10px;height:36px;border-radius:11px;
  font-size:12.5px;font-weight:600;color:var(--accent3);background:var(--surface2);border:1px solid var(--line2);cursor:pointer}
.hm-link:hover{background:var(--line2)}

.hm-two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:stretch}
.hm-two.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.hm-sum{display:block;font-size:12px;color:var(--faint);margin:-2px 0 4px}
.hm-sum b{color:var(--text);font-weight:600}
.hm-chart .chart{display:block;width:100%;height:auto}
.hm-chart .empty{margin:8px 0 4px;padding:26px 16px}

/* notifications */
.hm-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hm-notes li{display:flex;gap:11px;padding:10px 0;border-top:1px solid var(--line2)}
.hm-notes li:first-child{border-top:0;padding-top:2px}
.hm-nico{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--surface2);color:var(--muted);border:1px solid var(--line2)}
.is-new .hm-nico{background:rgba(28,114,147,.12);color:var(--accent2);border-color:transparent}
.hm-nbody{min-width:0;flex:1}
.hm-nbody b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.hm-nbody p{font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-nbody span{display:block;font-size:11px;color:var(--faint);margin-top:4px}
.is-new .hm-nbody b::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent2);margin-left:7px;vertical-align:middle}

/* forms waiting */
.hm-forms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hm-forms li{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:12px;background:var(--surface2);border:1px solid var(--line2)}
.hm-forms a{flex:1;min-width:0;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:1px}
.hm-forms b{font-size:12.5px;font-variant-numeric:tabular-nums}
.hm-forms a span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-forms em{font-style:normal;font-size:11px;font-weight:700;color:var(--accent3);background:rgba(28,114,147,.12);border-radius:99px;padding:3px 9px;white-space:nowrap}

/* awaiting register chips */
.hm-chips{display:flex;flex-wrap:wrap;gap:6px}
.hm-chip{font-size:12px;font-weight:600;padding:5px 10px;border-radius:99px;background:var(--exBg);color:var(--exFg);white-space:nowrap}
.hm-chip.more{background:var(--surface2);color:var(--muted)}

/* my day */
.hm-me{display:flex;flex-direction:column;gap:12px}
.hm-who{display:flex;align-items:center;gap:12px}
.hm-avatar{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;background:linear-gradient(140deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:15px;text-transform:uppercase}
.hm-who>div{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.hm-who b{font-size:14.5px}
.hm-who>div span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.hm-mine{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hm-mine .hm-lbl{flex:1 0 100%;margin-bottom:0}
.hm-pill{display:inline-block;font-size:12px;font-weight:700;padding:4px 11px;border-radius:99px}
.hm-pill.ok{background:var(--okBg);color:var(--okFg)} .hm-pill.amber{background:var(--exBg);color:var(--exFg)}
.hm-pill.bad{background:var(--noBg);color:var(--noFg)} .hm-pill.info{background:rgba(28,114,147,.12);color:var(--accent3)}
.hm-month{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.hm-month .hm-lbl{flex:1 0 100%;margin-bottom:0}
.hm-month b{color:var(--text);font-variant-numeric:tabular-nums}
.hm-regs{display:flex;flex-direction:column;gap:6px}
.hm-regs .hm-lbl{margin-bottom:0}
.hm-reg{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:12px;background:var(--surface2);border:1px solid var(--line2);text-decoration:none;color:inherit;font-size:13px}
.hm-reg b{font-weight:700}
.hm-reg span{flex:1;color:var(--muted);font-size:12px}
.hm-reg em{font-style:normal;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px}
.hm-reg em.in{background:var(--okBg);color:var(--okFg)} .hm-reg em.out{background:var(--exBg);color:var(--exFg)}
.hm-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}

/* staff today */
.hm-sgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.hm-sc{padding:9px 6px;border-radius:12px;text-align:center;background:var(--surface2);border:1px solid var(--line2);min-width:0}
.hm-sc b{display:block;font-size:20px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.hm-sc span{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;white-space:nowrap}
.hm-sc.ok b{color:var(--okFg)} .hm-sc.amber b{color:var(--exFg)} .hm-sc.bad b{color:var(--noFg)} .hm-sc.info b{color:var(--accent3)}
.hm-away{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
.hm-away b{color:var(--text)}

/* class table bits */
.stg-note{font-weight:400;color:var(--faint);font-size:11.5px}
.in-tag{color:var(--okFg);font-weight:600} .out-tag{color:var(--exFg);font-weight:600}
.hm-flush .tbl-head{padding:9px 16px}
.hm-flush .tbl-row{padding:9px 16px}

@media (max-width:1280px){
  .hm{grid-template-columns:minmax(0,1fr) 300px}
  .hm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-two,.hm-two.even{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:940px){
  .hm{grid-template-columns:minmax(0,1fr)}
  .hm-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
}
@media (max-width:720px){
  .hm,.hm-main,.hm-side{gap:12px}
  .hm-kpis{gap:10px}
  .hm-kv{font-size:24px}
  .hm-strip{flex-wrap:wrap}
  .hm-strip .btn{width:100%}
  .hm-side{grid-template-columns:minmax(0,1fr)}
  .hm-sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-flush .tbl-inner>.tbl-row{padding:14px 16px}
  .cd-title{max-width:150px}
}

.hm-stg{list-style:none;margin:0;padding:0}
.hm-stg li{display:flex;align-items:baseline;gap:8px;padding:8px 0;border-top:1px solid var(--line2);font-size:13px}
.hm-stg li:first-child{border-top:0;padding-top:0}
.hm-stg span{flex:1;font-weight:600;min-width:0}
.hm-stg em{font-style:normal;font-size:12px;color:var(--faint)}
.hm-stg b{min-width:48px;text-align:right;font-variant-numeric:tabular-nums}
.hm-side{position:static}

/* On a phone the order is: summary, numbers, what needs me, then the detail. */
@media (max-width:940px){
  .hm{display:flex;flex-direction:column;gap:12px}
  .hm-main,.hm-side{display:contents}
  .hm-main>.hm-panel,.hm-main>.hm-two{order:2}
  .hm-side>*{order:3}
  .hm-side>.hm-first{order:1}
}

/* Filter bars: the search takes the spare width, the buttons stay together on the right. */
.bar .field.grow{flex:1 1 240px;min-width:0}
.bar .field.grow input{min-width:0;width:100%}
.bar-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.bar-actions .btn{padding:0 15px}
@media (max-width:720px){
  .bar-actions{margin-left:0;width:100%}
  .bar-actions .btn{flex:1 1 auto}
}
.bar .field select{min-width:150px}
.hm-sublbl{margin:14px 0 6px}
.hm-forms em{max-width:46%;overflow:hidden;text-overflow:ellipsis}
.gate-crest{width:56px;height:56px;margin-bottom:18px;object-fit:contain}

/* ------------------------------ sidebar ------------------------------- */
/* Soft tinted rail, folding groups on a thin tree line, the current screen as a raised white pill. */

.rail{background:var(--bg);border-right:1px solid var(--line)}
.rail>nav{gap:2px}
.nav-flat{display:flex;flex-direction:column;gap:2px}
.nav-group{display:flex;flex-direction:column}
.nav-flat+.nav-group,.nav-group+.nav-group,.nav-group+.nav-flat,.nav-flat+.nav-flat{margin-top:2px}

.nav-item{min-height:42px;border-radius:12px;font-size:13.5px;font-weight:600;color:var(--muted)}
.nav-item:hover{background:rgba(27,59,111,.06);color:var(--text)}
html[data-theme="dark"] .nav-item:hover{background:rgba(255,255,255,.05)}
.nav-item.is-on{
  background:var(--surface);color:var(--text);
  box-shadow:0 1px 2px rgba(20,29,56,.08),0 6px 16px -6px rgba(20,29,56,.18);
}
html[data-theme="dark"] .nav-item.is-on{box-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px -6px rgba(0,0,0,.5)}
.nav-item.is-on .ico{color:var(--accent2)}

.nav-grp-head{
  display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 13px;border-radius:12px;
  font-size:13.5px;font-weight:600;color:var(--text);text-align:left;cursor:pointer;
  transition:background .2s ease;
}
.nav-grp-head:hover{background:rgba(27,59,111,.06)}
html[data-theme="dark"] .nav-grp-head:hover{background:rgba(255,255,255,.05)}
.nav-grp-head:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.nav-grp-head>.ico:first-child{color:var(--faint)}
.nav-grp-head>.ico:last-child{margin-left:auto;color:var(--faint);transition:transform .25s ease}
.nav-grp-head .nav-grp-badge+.ico{margin-left:0}
.nav-group:not(.closed) .nav-grp-head>.ico:last-child{transform:rotate(180deg)}
.nav-group:not(.closed) .nav-grp-badge{display:none}
.nav-grp-badge{margin-left:auto}

/* the folding part */
.nav-sub-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s cubic-bezier(.3,1,.35,1),visibility 0s}
.nav-group.closed .nav-sub-wrap{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .28s cubic-bezier(.3,1,.35,1),visibility 0s .28s}
.nav-sub{
  position:relative;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px;
  margin:2px 0 4px 21px;padding:2px 0 2px 14px;
}
.nav-sub::before{content:'';position:absolute;left:0;top:4px;bottom:16px;width:1.5px;background:var(--line);border-radius:2px}
.nav-item.sub{min-height:38px;padding:0 10px 0 8px;gap:9px;font-size:13px;font-weight:500}
.nav-item.sub::before{
  content:'';position:absolute;left:-14px;top:50%;width:11px;height:1.5px;background:var(--line);border-radius:2px;
}
.nav-item.sub.is-on{font-weight:600}
.nav-subico{display:grid;place-items:center;color:var(--faint);flex:none}
.nav-item.sub.is-on .nav-subico{color:var(--accent2)}

/* soft coloured counters */
.nav-badge{padding:2px 8px;font-size:11px;font-weight:700;line-height:1.35;background:var(--exBg);color:var(--exFg)}
.nav-badge.b-warn{background:var(--exBg);color:var(--exFg)}
.nav-badge.b-info{background:rgba(28,114,147,.14);color:var(--accent3)}
.nav-item.is-on .nav-badge.b-warn{background:var(--exBg);color:var(--exFg)}
.nav-item.is-on .nav-badge.b-info{background:rgba(28,114,147,.14);color:var(--accent3)}

.rail-foot{border-top:1px solid var(--line)}

/* narrow rail: icons only, every screen visible, no folding */
.shell.slim .nav-grp-head{display:none}
.shell.slim .nav-sub-wrap,.shell.slim .nav-group.closed .nav-sub-wrap{grid-template-rows:1fr;visibility:visible}
.shell.slim .nav-sub{margin:0;padding:0;gap:2px;overflow:visible}
.shell.slim .nav-sub::before,.shell.slim .nav-item.sub::before{display:none}
.shell.slim .nav-item.sub{padding:0;gap:0;justify-content:center;min-height:42px}
.shell.slim .nav-item.sub .nav-subico svg{width:18px;height:18px}
.shell.slim .nav-group,.shell.slim .nav-flat+.nav-group,.shell.slim .nav-flat+.nav-flat{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.shell.slim .nav-item .nav-badge{position:absolute;top:2px;right:4px;min-width:16px;padding:1px 5px;font-size:10px;margin:0}

@media (max-width:880px){
  .nav-item,.nav-grp-head{min-height:48px}
  .nav-item.sub{min-height:44px}
  .shell.nav-open .rail .nav-grp-head{animation:rise .34s cubic-bezier(.2,.8,.3,1) both;animation-delay:90ms}
}
@media (prefers-reduced-motion:reduce){
  .nav-sub-wrap,.nav-grp-head>.ico:last-child{transition:none !important}
}

/* ======================================================================
   MINIMAL LAYER (Oct 2026)
   One accent, hairlines instead of shadows, quiet buttons, no gradients,
   soft tints only for status. Everything below overrides what is above.
   ====================================================================== */

/* avatars */
.av{display:block;width:100%;height:100%;border-radius:50%}
.avatar,.ravatar,.hm-avatar,.tb-avatar{
  display:block;flex:none;padding:0;overflow:hidden;border-radius:50%;background:none;box-shadow:none;border:0;
}
.avatar{width:40px;height:40px}
.avatar.lg{width:72px;height:72px;box-shadow:none}
.ravatar{width:36px;height:36px}
.hm-avatar{width:44px;height:44px}
.tb-avatar{width:36px;height:36px}
.rrow.st-A .ravatar,.rrow.st-E .ravatar{background:none}

/* surfaces */
.card{border-radius:16px;box-shadow:none}
.lift:hover,.srow:hover,.frow:hover{transform:none;box-shadow:none}
.srow,.frow{box-shadow:none;border-radius:14px}
.srow:hover,.frow:hover{background:var(--surface2)}
.sheet-panel{border-radius:20px 0 0 20px}
.empty{border-radius:14px;background:transparent}

/* type: calmer labels */
.eyebrow,.hm-lbl,.nav-sec{letter-spacing:.06em;font-weight:600;color:var(--faint)}
.eyebrow{color:var(--muted)}
.tbl-head{letter-spacing:.06em;font-weight:600;font-size:11px}
.hm-ph h3{font-size:14px;font-weight:600}

/* buttons: solid accent, no gloss */
.btn{height:40px;padding:0 16px;border-radius:10px;background:var(--accent);box-shadow:none;font-size:13.5px}
.btn:hover{filter:none;background:color-mix(in srgb,var(--accent) 88%,#fff)}
.btn:active{transform:none;background:color-mix(in srgb,var(--accent) 92%,#000)}
.btn.quiet{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.btn.quiet:hover{background:var(--surface2)}
.btn.danger,.btn.done{box-shadow:none}
.btn.sm{height:34px;padding:0 13px;font-size:13px;border-radius:9px}
.icon-btn,.dn-btn{border-radius:10px}
.lang.is-on{background:var(--accent)}

/* fields */
.field input,.field select,.field textarea{height:40px;border-radius:10px;background:var(--surface)}
.field label{letter-spacing:.04em;font-weight:600}

/* tabs: a quiet underline instead of a boxed control */
.tabs{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;gap:6px;width:100%;margin-bottom:18px}
.tab{height:40px;padding:0 12px;border-radius:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600}
.tab.is-on{background:none;box-shadow:none;color:var(--text);border-bottom-color:var(--accent)}
.seg{background:var(--surface2)}
.seg button.is-on{background:var(--surface);color:var(--text);box-shadow:0 0 0 1px var(--line)}

/* top bar */
.topbar{padding:12px 28px}
.tb-btn{border:0;background:transparent}
.tb-btn:hover{background:var(--line2);box-shadow:none}
.tb-search input{border-radius:10px;height:40px;background:var(--surface)}
.tb-chip{border:0;background:transparent;height:44px;padding:0 8px 0 4px}
.tb-chip:hover{background:var(--line2);box-shadow:none}
.tb-menu{border-radius:14px}

/* tiles: icons lose their boxes */
.kpi-ico,.hm-kico,.bi,.hm-nico,.hm-strip-ico{background:none;border:0;border-radius:0;width:auto;height:auto;color:var(--faint)}
.hm-kpi.good .hm-kico,.hm-kpi.flag .hm-kico,.kpi.flag .kpi-ico,.kpi.good .kpi-ico{background:none;color:var(--faint)}
.is-new .hm-nico{background:none;color:var(--accent2)}
.fkind{background:none;border:0;color:var(--faint)}
.hm-strip{background:var(--surface);border-color:var(--line)}
.hm-chip{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.hm-sc,.hm-reg,.hm-forms li{background:transparent}

/* sidebar: keep it quiet */
.nav-item.is-on{box-shadow:0 0 0 1px var(--line)}
html[data-theme="dark"] .nav-item.is-on{box-shadow:0 0 0 1px var(--line)}
.rail-crest,.sf-crest{box-shadow:none}

/* the register: one clean list, status shown by a soft tint on the chosen button */
.rsum{padding:20px 22px 18px}
.rsum .reg-title{font-size:22px}
.rsum-rate b{font-size:38px}
.rsum-bar{height:6px}
.fchip{height:36px;border-radius:10px;font-size:12.5px}
.fchip.is-on{background:var(--text);color:var(--surface)}
.fchip.is-on b{color:var(--surface)}
.rsum-search input{height:36px;border-radius:10px}

.rlist{
  gap:0;grid-template-columns:minmax(0,1fr);
  background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
@media (min-width:1360px){.rlist{grid-template-columns:repeat(2,minmax(0,1fr))}.rlist .rrow:nth-child(odd){border-right:1px solid var(--line2)}}
.rrow{
  border-radius:0;border:0;border-bottom:1px solid var(--line2);box-shadow:none;background:transparent;
  padding:9px 14px;gap:12px;
}
.rrow.st-A{background:var(--noBg);border-color:var(--line2)}
.rrow.st-E{background:var(--exBg);border-color:var(--line2)}
.rname{font-size:14px;font-weight:600}
.ridx{font-size:11.5px}
.rseg{padding:3px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);gap:2px}
.rs-btn{height:34px;padding:0 11px;border-radius:8px;font-size:12.5px;font-weight:600;gap:6px}
.rs-btn[aria-pressed="true"][data-s="P"]{background:var(--okBg);color:var(--okFg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 35%,transparent)}
.rs-btn[aria-pressed="true"][data-s="A"]{background:var(--noBg);color:var(--noFg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--no) 35%,transparent)}
.rs-btn[aria-pressed="true"][data-s="E"]{background:var(--exBg);color:var(--exFg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ex) 35%,transparent)}
.rrow.st-A .rseg,.rrow.st-E .rseg{background:var(--surface)}
.rbadge{border-radius:8px}

/* tables and lists */
.tbl-head,.tbl-row{padding:10px 18px}
.tbl-row:hover{background:var(--surface2)}
.slist{gap:8px}
.srow{padding:10px 14px;gap:12px}

/* badges, pills and form chips: flat tints */
.fbadge,.pchip,.pill{box-shadow:none}
.nav-badge,.hm-count,.side-count,.tab-count{box-shadow:none}
.rf-dot.dirty{box-shadow:none}

/* the save bar under the register */
.reg-foot{box-shadow:0 -6px 18px -12px rgba(16,24,40,.18);border:1px solid var(--line);background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:14px}

@media (max-width:720px){
  .topbar{padding:10px 14px}
  .rseg .rs-btn span{display:none}
  .rs-btn{padding:0 12px}
}
.gap-tag{background:none;color:var(--faint);padding:0;margin-left:8px;font-weight:500;border-radius:0}
.gap-tag::before{content:'· '}

/* record sheets: plain rows with hairlines, no boxes */
.rec-head{background:none;padding:22px 24px}
.rec-index{letter-spacing:.08em;color:var(--faint)}
.fields{padding:8px 24px 16px;gap:0 36px}
.f-row{background:none;border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:12px 0;min-height:0}
.f-key{letter-spacing:.05em;font-weight:500;font-size:11.5px;text-transform:none;width:120px;color:var(--faint)}
.f-val{font-weight:500}
.sheet-head{border-bottom:1px solid var(--line)}
.avatar.sm{width:30px;height:30px}
.who-cell{display:flex;align-items:center;gap:10px;min-width:0}
.who-cell b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-grid{grid-template-columns:1.5fr 1.6fr 1.1fr 1fr .8fr .7fr}

/* phone: name on the left, the three marks on the right, one line per child */
@media (max-width:720px){
  .rrow{flex-wrap:nowrap;padding:10px 12px;gap:10px}
  .rseg{width:auto;padding:2px}
  .rs-btn{flex:none;width:40px;height:40px;padding:0;border-radius:8px}
  .ravatar{width:34px;height:34px}
  .rname{font-size:14px}
  .rtext{flex:1 1 0;min-width:0}
}

/* ======================================================================
   PHONE DECLUTTER (Oct 2026): fewer boxes, one clear thing per section.
   ====================================================================== */
.hm-classes-list{display:none}
.hm-clist{list-style:none;margin:0;padding:0}
.hm-clist li{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid var(--line2);font-size:13.5px}
.hm-clist li:first-child{border-top:0;padding-top:0}
.hm-clist b{font-weight:600}
.hm-clist span{flex:1;color:var(--faint);font-size:12px}
.hm-clist em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.hm-clist em.in{color:var(--okFg)} .hm-clist em.out{color:var(--exFg)}

@media (max-width:720px){
  /* top bar: plain icons, a title, a hairline */
  .topbar{padding:6px 12px;min-height:54px;gap:6px;background:var(--bg);border-bottom:1px solid var(--line)}
  .menu-btn{border:0;background:none;box-shadow:none;width:40px;height:40px;border-radius:10px}
  .tb-h1{font-size:17px}
  .tb-sub{display:none}
  .tb-btn{width:40px;height:40px}
  .tb-chip{padding:0;height:40px}
  .tb-avatar{width:32px;height:32px}
  .view{padding:12px 12px 24px}
  .card{border-radius:14px}

  /* the exam countdown becomes one quiet line */
  .countdowns{flex-wrap:nowrap;overflow-x:auto;padding:8px 14px 0;gap:14px;scrollbar-width:none}
  .cd-pill{border:0;background:none;padding:0;gap:6px;flex:none}
  .cd-pill.exam{background:none}
  .cd-num{font-size:13px}
  .cd-when{display:none}
  .cd-title{font-size:12.5px;font-weight:500;color:var(--muted);max-width:none}

  /* home: summary, one card of numbers, then lists */
  .hm-strip{border:0;background:none;padding:2px 2px 0;flex-wrap:wrap;gap:10px}
  .hm-strip-ico{display:none}
  .hm-strip p{font-size:15px}
  .hm-strip .btn{width:100%;height:42px}
  .hm-kpis{gap:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .hm-kpi{border:0;border-radius:0;background:none;padding:14px 16px}
  .hm-kpi:nth-child(odd){border-right:1px solid var(--line2)}
  .hm-kpi:nth-child(-n+2){border-bottom:1px solid var(--line2)}
  .hm-kt{font-size:12px}
  .hm-kv{font-size:22px}
  .hm-trend,.hm-stage,.hm-classes-table,.hm-month,.hm-quick{display:none}
  .hm-classes-list{display:block}
  .hm-panel{padding:14px 16px}
  .hm-me{gap:10px}
  .hm-nbody p{-webkit-line-clamp:1}
  .hm-link{height:34px;margin-top:8px;background:none;border:0;justify-content:flex-start;padding:0}

  /* register: lighter header block */
  .rsum{padding:14px 14px 12px;gap:12px}
  .rsum .reg-title{font-size:19px}
  .rsum-rate b{font-size:28px}
  .rsum-rate span{font-size:11px}
  .fchip{height:36px;font-size:12px}
  .rsum-search{width:100%}
  .rsum-search input{height:38px}
  .tabs{margin-bottom:12px}
  .tab{padding:0 10px;font-size:13px}
}
@media (max-width:940px){.hm{align-items:stretch}.hm>*{min-width:0}.hm-main>*,.hm-side>*{align-self:stretch}}

@media (max-width:720px){
  /* register: class and date share a line; the box around them goes */
  .reg-top{border:0;background:none;padding:0;margin-bottom:6px}
  .reg-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px;align-items:end}
  .reg-pick .field label{font-size:10.5px}
  .reg-pick select{min-width:0;width:100%}
  .reg-pick .datenav{display:flex;gap:4px}
  .reg-pick .datenav input{min-width:0;flex:1;padding:0 8px}
  .reg-pick .dn-btn{width:36px;height:40px;flex:none;border:0;background:none}
  .reg-pick #a-today{grid-column:1/-1;height:34px}
  .reg-top .tabs{margin:10px 0 0}
}

@media (max-width:720px){
  /* students: search, two filters, one button. Import and export stay on the computer. */
  .bar:has(#s-q){gap:8px;margin-bottom:12px}
  .bar:has(#s-q) .field label{display:none}
  .bar:has(#s-q) .field.grow{flex:1 1 100%}
  .bar:has(#s-q) .field:not(.grow){flex:1 1 calc(50% - 4px)}
  .bar:has(#s-q) select{width:100%;min-width:0}
  #s-import,#s-export{display:none}
  .bar:has(#s-q) .bar-actions{width:100%}
  #s-add{width:100%}
}

@media (max-width:720px){
  /* staff lists: name, role, and an Edit button. The rest is one tap away in the record. */
  .tbl-inner>.tbl-row.hr-grid,.tbl-inner>.tbl-row.usr-grid{
    grid-template-columns:minmax(0,1fr) auto !important;gap:2px 10px;padding:12px 14px;align-items:center;
  }
  .hr-grid>span[data-label]::before,.usr-grid>span[data-label]::before{display:none}
  .hr-grid>span:nth-child(2),.hr-grid>span:nth-child(4),.hr-grid>span:nth-child(5),
  .usr-grid>span:nth-child(2),.usr-grid>span:nth-child(4),.usr-grid>span:nth-child(5){display:none}
  .hr-grid>span:nth-child(1),.usr-grid>span:nth-child(1){grid-column:1;grid-row:1;font-size:14.5px}
  .hr-grid>span:nth-child(3),.usr-grid>span:nth-child(3){grid-column:1;grid-row:2;color:var(--muted);font-size:12.5px}
  .hr-grid>span:last-child,.usr-grid>span:last-child{grid-column:2;grid-row:1/3;text-align:right}
}
@media (max-width:720px){
  .tbl-row.hr-grid>span:last-child:not([data-label]),.tbl-row.usr-grid>span:last-child:not([data-label]){grid-column:2;grid-row:1/3;text-align:right}
  .tbl-row.hr-grid>span:last-child:not([data-label]) .btn,.tbl-row.usr-grid>span:last-child:not([data-label]) .btn{width:auto}
}
@media (max-width:720px){.who-cell b{white-space:normal;overflow:visible}}
@media (max-width:720px){
  .bar-note{display:none}
  .frow .fkind{display:none}
  .frow{padding:12px 14px;gap:8px}
}