@font-face{font-family:"Public Sans";font-weight:100 900;font-display:swap;src:url(fonts/public-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";font-weight:100 900;font-display:swap;src:url(fonts/public-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--brand:#2563EB;--brand-dark:#1D4ED8;--brand-soft:#EFF6FF;--green:#16A34A;--red:#DC2626;--amber:#B45309;
  --canvas:#F8FAFC;--ink:#0F172A;--muted:#475569;--line:#E2E8F0;--r:10px;--r-sm:6px;
  --font:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--canvas);line-height:1.5;font-size:1rem;-webkit-font-smoothing:antialiased}
a{color:var(--brand-dark)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:100;background:#fff;padding:.5rem 1rem}
h1{font-size:1.65rem;letter-spacing:-.02em;margin:0 0 .2rem;line-height:1.2}
h2{font-size:1.1rem;margin:0 0 .8rem}
h3{font-size:1.05rem;margin:0}
p{margin:0 0 .8rem}
.muted{color:var(--muted)}.small{font-size:.875rem}
code{background:var(--canvas);border:1px solid var(--line);border-radius:4px;padding:.05rem .3rem;font-size:.85em}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1.05rem;border-radius:var(--r-sm);font:inherit;font-weight:650;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;line-height:1.2}
.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}.btn-ghost:hover{border-color:#94A3B8}
.btn-danger{background:var(--red);color:#fff}
.btn-small{padding:.35rem .7rem;font-size:.85rem}
.btn[aria-disabled=true],.btn:disabled{opacity:.6;cursor:default}
.linkbtn{white-space:nowrap;background:none;border:0;padding:0;font:inherit;font-size:.9rem;color:var(--brand-dark);text-decoration:underline;cursor:pointer}
.linkbtn.danger{color:var(--red)}
form.inline{display:inline}

/* App shell */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;height:60px;padding:0 1.25rem;background:#fff;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:750;min-width:0}
.logo span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo small{display:block;font-weight:500;font-size:.72rem;color:var(--muted)}
.logo-mark{flex:none;width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:.9rem}
.who{margin-left:auto;display:flex;align-items:center;gap:1rem}
.menu-btn{display:none;margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.4rem .8rem;font:inherit;font-weight:600;cursor:pointer}
.shell{display:flex;min-height:calc(100vh - 60px)}
.sidenav{flex:none;width:220px;padding:1rem .75rem;border-right:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:.15rem}
.sidenav a{padding:.5rem .75rem;border-radius:var(--r-sm);color:var(--muted);text-decoration:none;font-weight:550;font-size:.95rem}
.sidenav a:hover{background:var(--canvas);color:var(--ink)}
.sidenav a[aria-current=page]{background:var(--brand-soft);color:var(--brand-dark)}
.main{flex:1;min-width:0;padding:1.75rem 2rem 4rem;max-width:1100px}
@media (max-width:860px){
  .menu-btn{display:block}.who{margin-left:0}.who .muted{display:none}
  .shell{display:block}
  .sidenav{display:none;width:auto;border-right:0;border-bottom:1px solid var(--line)}
  .sidenav.open{display:flex}
  .main{padding:1.25rem 1rem 3rem}
}
.pagehead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
.actions{display:flex;flex-wrap:wrap;gap:.5rem}
.trial{background:var(--brand-soft);border:1px solid #BFDBFE;border-radius:var(--r);padding:.6rem 1rem;margin-bottom:1rem;font-size:.92rem}

/* Cards, stats, lists */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;margin-bottom:1rem}
.card.flush{padding:0;overflow:hidden}
.card.empty{text-align:center;padding:2.5rem 1.25rem}
.card.start{border-color:#BFDBFE;background:linear-gradient(#fff,var(--brand-soft))}
.card.notice{border-left:4px solid var(--brand)}
.pad{padding:1rem 1.25rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.grid2>.card{margin-bottom:0}.grid2{margin-bottom:1rem}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.75rem;margin-bottom:1rem}
.stats.tight{grid-template-columns:repeat(4,1fr);margin:0}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem}
.stat span{display:block;color:var(--muted);font-size:.82rem}
.stat b{font-size:1.5rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat b.sm{font-size:1.1rem}.stat small{display:block;color:var(--muted)}
.stat.warn b{color:var(--amber)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 0;border-bottom:1px solid #F1F5F9}
.list li:last-child{border-bottom:0}
.steps-list{padding-left:1.2rem}.steps-list li{margin-bottom:.5rem}
.row-between{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.nowrap{white-space:nowrap}

/* Badges */
.badge{display:inline-block;font-size:.76rem;font-weight:650;padding:.15rem .55rem;border-radius:999px;white-space:nowrap}
.b-green{background:#F0FDF4;color:#15803D}.b-red{background:#FEF2F2;color:#B91C1C}.b-amber{background:#FFFBEB;color:#B45309}
.b-blue{background:var(--brand-soft);color:var(--brand-dark)}.b-violet{background:#F5F3FF;color:#6D28D9}.b-grey{background:#F1F5F9;color:#475569}

/* Flash messages */
.flash{border-radius:var(--r);padding:.75rem 1rem;margin-bottom:1rem;font-size:.95rem;word-break:break-word}
.flash-ok{background:#F0FDF4;border:1px solid #BBF7D0}
.flash-error{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.flash-info{background:var(--brand-soft);border:1px solid #BFDBFE}

/* Tables */
.scroll{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.93rem}
.table th,.table td{text-align:left;padding:.65rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table thead th{background:var(--canvas);font-weight:650;font-size:.85rem;color:var(--muted)}
.table tbody tr:last-child td{border-bottom:0}
.table input,.table select{width:100%;min-width:7rem}
.table input.narrow{width:6rem;min-width:0}

/* Forms */
label{display:block;font-weight:600;font-size:.92rem}
input,select,textarea{display:block;width:100%;margin-top:.3rem;font:inherit;font-size:1rem;font-weight:400;padding:.55rem .7rem;border:1px solid #CBD5E1;border-radius:var(--r-sm);background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px #BFDBFE}
input[type=checkbox],input[type=radio]{display:inline;width:auto;margin:0;box-shadow:none}
input.narrow{width:6rem}
.check{display:flex;gap:.5rem;align-items:flex-start;font-weight:500}
.check input{margin-top:.25rem}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem}
fieldset{border:1px solid var(--line);border-radius:var(--r-sm);padding:.75rem 1rem;margin:0}
legend{font-weight:600;font-size:.92rem;padding:0 .3rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-grid .full,.form-grid h2{grid-column:1/-1}.form-grid h2{margin:0}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.stack{display:grid;gap:1rem}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem}
.filters input,.filters select{width:auto;margin:0}
.filters input[type=search]{flex:1;min-width:14rem}
.inline-label{display:flex;align-items:center;gap:.4rem;font-weight:500}
.inline-label input{margin:0}
.danger-zone{border-color:#FECACA}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:1rem;border-bottom:1px solid var(--line)}
.tabs a{padding:.5rem .9rem;text-decoration:none;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a[aria-current=page]{color:var(--brand-dark);border-color:var(--brand)}

/* Attendance register */
.register{margin-bottom:1rem}
.reg-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;border:0;border-bottom:1px solid #F1F5F9;border-radius:0;padding:.6rem 0}
.reg-row legend{float:left;padding:0;font-weight:550}
.seg{display:flex;gap:.3rem;flex-wrap:wrap}
.seg label{position:relative;font-weight:600;font-size:.85rem}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:block;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;color:#64748B;background:#fff}
.seg input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}
.seg-present input:checked+span{background:#F0FDF4;border-color:#86EFAC;color:#15803D}
.seg-absent input:checked+span{background:#FEF2F2;border-color:#FCA5A5;color:#B91C1C}
.seg-late input:checked+span{background:#FFFBEB;border-color:#FCD34D;color:#B45309}
.seg-excused input:checked+span{background:var(--brand-soft);border-color:#93C5FD;color:var(--brand-dark)}

/* Timetable */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem}
@media (max-width:1000px){.week{grid-template-columns:1fr}}
.day{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.8rem}
.day.today{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.day h2{font-size:.95rem}
.slot{padding:.5rem 0;border-top:1px solid #F1F5F9;font-size:.9rem}.slot span{display:block}

/* Plans & usage */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;display:flex;flex-direction:column}
.plan.pop{border:2px solid var(--brand)}
.plan ul{flex:1;padding-left:1.1rem;color:var(--muted);font-size:.92rem}
.plan .btn,.plan form{width:100%}.plan form .btn{width:100%}
.price{font-size:1.8rem;font-weight:800;letter-spacing:-.03em}.price small{font-size:.85rem;font-weight:500;color:var(--muted)}
.usage{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0}
.usage span{display:block;color:var(--muted);font-size:.85rem}
.usage i{display:block;height:6px;border-radius:9px;background:var(--line);margin-top:.4rem;position:relative;overflow:hidden}
.usage i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--brand)}
@media (max-width:560px){.usage{grid-template-columns:1fr}}

/* Invoice */
.inv-head{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
.inv-rows{font-variant-numeric:tabular-nums;max-width:32rem}
.inv-rows div{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0}
.inv-rows .total{border-top:1px solid var(--line);font-weight:750;padding-top:.6rem;margin-top:.3rem}
@media print{
  .topbar,.sidenav,.no-print,.trial,.flash{display:none!important}
  body{background:#fff}.main{padding:0}.card{border:0}
}

/* Sign-up / login pages */
body.bare{background:var(--canvas)}
.auth{max-width:27rem;margin:3rem auto;padding:2rem;background:#fff;border:1px solid var(--line);border-radius:14px}
.auth .logo{margin-bottom:1.5rem}
.auth h1{margin-bottom:.5rem}
@media (max-width:480px){.auth{margin:0;border:0;border-radius:0;min-height:100vh}}