/* Fonts served from this site (free, SIL Open Font License), so pages don't wait for Google's servers. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/dm-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/dm-sans-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/manrope-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/manrope-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/patrick-hand-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/patrick-hand-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root{--ink:#172238;--muted:#748097;--line:#e7ebf2;--paper:#fff;--bg:#f5f7fb;--blue:#315cf5;--blue-dark:#2449d6;--blue-soft:#edf1ff;--mint:#dff7ef;--green:#188565;--amber:#fff4dc;--shadow:0 16px 48px rgba(31,47,82,.09);font-family:'DM Sans',sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}.loading{height:100vh;display:grid;place-content:center;justify-items:center;gap:16px;color:var(--muted);font-size:15px}.brand-mark{width:43px;height:43px;border-radius:10px;background:var(--blue);display:grid;place-items:center;color:white;font:800 23px Manrope;box-shadow:0 8px 20px color-mix(in srgb,var(--brand-main,#315cf5) 30.2%,transparent)}.shell{min-height:100vh;display:flex}.side{width:248px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;z-index:4}.brand{display:flex;align-items:center;gap:12px;padding:0 9px 32px}.brand-mark.small{width:38px;height:38px;border-radius:10px;font-size:20px}.brand-name{font:800 17px Manrope;letter-spacing:-.5px}.brand-caption{font-size:12.5px;color:var(--muted);margin-top:2px}.nav-label{font-size:12px;font-weight:700;color:#9aa4b5;letter-spacing:1.2px;padding:0 12px;margin:5px 0 10px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 13px;color:#67748c;border-radius:10px;font-size:15px;font-weight:600;margin:2px 0}.nav-item.active{background:var(--blue-soft);color:var(--blue)}.nav-icon{width:19px;text-align:center;font-size:17px}.side-bottom{margin-top:auto;padding:16px 10px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}.user-mini{display:flex;gap:10px;align-items:center;margin-bottom:15px;color:var(--ink);font-weight:600}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft,#e8edff);color:var(--blue);font-weight:700}.main{margin-left:248px;flex:1;min-width:0;padding:30px 42px 54px;max-width:1600px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#8490a5}.page-title{font:800 27px Manrope;letter-spacing:-1px;margin:6px 0 0}.top-actions{display:flex;align-items:center;gap:11px}.pill{font-size:13.5px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;color:#627089}.btn{border:1px solid transparent;border-radius:10px;background:var(--blue);color:white;padding:11px 16px;font-size:14.5px;font-weight:700;box-shadow:0 5px 12px color-mix(in srgb,var(--brand-main,#315cf5) 16.9%,transparent)}.btn:hover{background:var(--blue-dark)}.btn.secondary{color:#46536a;background:#fff;border:1px solid var(--line);box-shadow:none}.btn.ghost{color:var(--blue);background:var(--blue-soft);box-shadow:none}.btn.danger{color:#b34747;background:#fff0f0;box-shadow:none}.btn.small{padding:8px 11px;font-size:13.5px}.btn.full{width:100%}.hero{background:linear-gradient(110deg,var(--brand-main,#315cf5) 0%,var(--brand-main,#5c76f8) 60%,var(--brand-light,#879bff) 100%);color:#fff;border-radius:10px;padding:27px 30px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative;min-height:150px;box-shadow:0 12px 30px color-mix(in srgb,var(--brand-main,#315cf5) 16.5%,transparent)}.hero:after{content:'';width:250px;height:250px;border:1px solid #ffffff33;border-radius:50%;position:absolute;right:60px;top:-117px;box-shadow:0 0 0 28px #ffffff0c,0 0 0 57px #ffffff0c}.hero h2{font:800 23px Manrope;margin:0 0 8px;letter-spacing:-.6px}.hero p{margin:0;color:var(--brand-soft,#edf0ff);font-size:15px;max-width:530px;line-height:1.55}.hero-art{position:relative;z-index:1;font-size:48px;opacity:.94;margin-right:65px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0 30px}.stat,.panel,.class-card,.work-card{background:#fff;border:1px solid var(--line);border-radius:10px}.stat{padding:19px 20px}.stat-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13.5px;font-weight:600}.stat-icon{width:31px;height:31px;border-radius:10px;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue);font-size:16px}.stat-num{font:800 25px Manrope;margin:11px 0 2px;letter-spacing:-.8px}.stat-note{font-size:12.5px;color:#98a1b2}.section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:28px 0 14px}.section-head h2{font:800 17px Manrope;margin:0;letter-spacing:-.4px}.section-head p{margin:5px 0 0;color:var(--muted);font-size:13.5px}.class-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.class-card{padding:18px;transition:.18s}.class-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand-light,#d8e0f3)}.class-card-top{display:flex;align-items:center;justify-content:space-between}.class-badge{width:42px;height:42px;border-radius:10px;background:var(--brand-faint,#eef2ff);color:var(--blue);display:grid;place-items:center;font:800 15px Manrope}.subtle-icon{color:#99a3b5;font-size:18px}.class-card h3{font:700 15px Manrope;margin:14px 0 4px}.class-meta{font-size:13.5px;color:var(--muted)}.class-card-footer{border-top:1px solid var(--line);padding-top:13px;margin-top:17px;display:flex;justify-content:space-between;align-items:center}.link-button{color:var(--blue);font-size:13.5px;font-weight:700;text-decoration:none}.empty{padding:38px 20px;text-align:center;border:1px dashed #d4dbea;border-radius:10px;color:var(--muted);background:var(--brand-faint,#fbfcff)}.empty-emoji{font-size:29px;margin-bottom:9px}.empty strong{display:block;color:var(--ink);font:700 15px Manrope;margin-bottom:6px}.panel{padding:23px;margin:20px 0}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.panel-head h2{font:700 16px Manrope;margin:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:flex;flex-direction:column;gap:7px}.field.wide{grid-column:1/-1}.field label{font-size:13.5px;font-weight:700;color:#56627a}.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid #dfe4ed;border-radius:9px;padding:11px 12px;outline:none;font-size:14.5px;color:var(--ink)}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-light,#849aff);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-main,#315cf5) 7.8%,transparent)}.field textarea{min-height:112px;resize:vertical;line-height:1.55}.hint{font-size:12.5px;color:#8b96a8;line-height:1.5}.file-drop{border:1px dashed #cbd4e4;border-radius:10px;padding:14px;background:var(--brand-faint,#fafbfe)}.file-drop input{padding:6px;border:0;background:transparent}.work-list{display:grid;gap:11px}.work-row{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:14px}.work-date{width:47px;height:49px;border-radius:10px;background:var(--brand-faint,#f0f3ff);color:var(--blue);display:grid;align-content:center;justify-items:center;flex:none}.work-date b{font:800 17px Manrope}.work-date span{font-size:11px;font-weight:700;text-transform:uppercase}.work-info{min-width:0;flex:1}.work-info h3{margin:0 0 4px;font:700 15px Manrope}.work-info p{margin:0;color:var(--muted);font-size:13.5px}.work-row-actions{display:flex;gap:8px;align-items:center}.tag{display:inline-flex;align-items:center;background:#eef8f4;color:var(--green);border-radius:99px;padding:5px 8px;font-size:12px;font-weight:700}.public-page{min-height:100vh;background:#f7f8fc}.public-header{background:#fff;border-bottom:1px solid var(--line);padding:17px max(22px,calc((100vw - 1120px)/2));display:flex;align-items:center;justify-content:space-between}.public-header .brand{padding:0}.public-main{max-width:1120px;margin:0 auto;padding:38px 24px}.public-school{font-size:13.5px;color:var(--muted);font-weight:600}.public-title{font:800 30px Manrope;letter-spacing:-1px;margin:6px 0 5px}.public-subtitle{font-size:15px;color:var(--muted);margin:0}.public-banner{margin:22px 0 25px;border-radius:10px;background:linear-gradient(110deg,var(--brand-faint,#eef2ff),var(--brand-faint,#f5f7ff));padding:19px 22px;display:flex;justify-content:space-between;align-items:center;color:#34436a}.public-banner strong{font:700 15px Manrope}.public-banner span{font-size:13.5px;color:#7583a4}.subject-group{margin:26px 0}.subject-heading{font:700 15px Manrope;margin:0 0 12px;display:flex;align-items:center;gap:9px}.subject-dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}.public-work{display:flex;align-items:center;gap:14px;background:white;border:1px solid var(--line);padding:14px;border-radius:10px;margin:9px 0;cursor:pointer;transition:.15s}.public-work:hover{box-shadow:var(--shadow);transform:translateY(-1px)}.thumb{width:60px;height:60px;border-radius:9px;background:#eef1f6;object-fit:cover;flex:none}.public-work-copy{flex:1;min-width:0}.public-work-copy h3{font:700 15px Manrope;margin:0 0 5px}.public-work-copy p{color:var(--muted);font-size:13.5px;margin:0}.date-label{font-size:12.5px;color:#8893a5;white-space:nowrap}.modal-backdrop{position:fixed;inset:0;background:#18233c99;z-index:10;display:grid;place-items:center;padding:18px}.modal{width:min(1080px,100%);max-height:min(92vh,900px);background:#f7f8fb;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 25px 90px #0c163640}.modal-header{background:white;padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px}.modal-title{font:800 17px Manrope;margin:0}.modal-subtitle{font-size:13.5px;color:var(--muted);margin-top:4px}.modal-actions{display:flex;gap:8px;align-items:center}.icon-btn{border:1px solid var(--line);background:#fff;width:37px;height:37px;border-radius:10px;color:#59657b;font-size:18px}.modal-content{padding:17px;overflow:auto;flex:1}.reader{display:grid;grid-template-columns:1fr 1fr;gap:15px;min-height:510px}.reader-pane{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;min-width:0}.pane-head{padding:12px 15px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;color:#64718a;display:flex;justify-content:space-between}.pane-body{padding:18px;overflow:auto;flex:1}.source-image{width:100%;height:auto;display:block;object-fit:contain;max-height:65vh}.transcription{font-size:15px;line-height:1.75;white-space:pre-wrap;color:#263149}.unreviewed{font-size:12.5px;color:#a36b10;background:var(--amber);padding:8px 10px;border-radius:8px;margin-bottom:12px}.print-head{display:none}.toast{position:fixed;z-index:30;bottom:23px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#1d2a43;color:white;padding:11px 16px;border-radius:10px;font-size:14.5px;box-shadow:var(--shadow);transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}.auth-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(330px,1fr) 1fr;background:white}.auth-aside{background:linear-gradient(150deg,var(--brand-main,#2146e7),var(--brand-light,#7087ff));padding:8vw;color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.auth-aside:after{content:'';position:absolute;width:500px;height:500px;border-radius:50%;border:1px solid #ffffff44;right:-230px;bottom:-230px;box-shadow:0 0 0 45px #ffffff12,0 0 0 90px #ffffff0c}.auth-aside h1{font:800 clamp(30px,4vw,50px)/1.15 Manrope;letter-spacing:-1.8px;max-width:490px;margin:23px 0 14px;position:relative;z-index:1}.auth-aside p{font-size:15px;line-height:1.7;color:var(--brand-soft,#e8edff);max-width:420px;margin:0;position:relative;z-index:1}.auth-form-wrap{display:grid;place-items:center;padding:30px}.auth-form{width:min(390px,100%)}.auth-form h2{font:800 25px Manrope;letter-spacing:-.8px;margin:0 0 7px}.auth-form>p{font-size:14.5px;color:var(--muted);margin:0 0 25px;line-height:1.5}.auth-form .field{margin:15px 0}.role-chip{display:inline-flex;background:var(--brand-faint,#eff3ff);color:var(--blue);border-radius:99px;padding:6px 10px;font-size:12px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}.text-button{border:0;background:none;padding:0;color:var(--blue);font-weight:700;font-size:13.5px}.error{color:#b84f4f;background:#fff0f0;padding:10px;border-radius:8px;font-size:13.5px;display:none;margin:12px 0}.footer-note{color:#98a1b2;font-size:12.5px;margin-top:24px;line-height:1.6}.admin-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 19px;overflow-x:auto}.admin-tab{border:0;background:none;padding:12px 13px;color:#7d889a;font-size:13.5px;font-weight:700;white-space:nowrap;border-bottom:2px solid transparent}.admin-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
@media(max-width:1050px){.main{padding:25px}.class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art{margin-right:20px}.side{width:215px}.main{margin-left:215px}}
@media(max-width:720px){.side{position:static;width:100%;height:auto;padding:13px 16px;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center}.brand{padding:0}.side .nav-label,.side nav,.side-bottom{display:none}.shell{display:block}.main{margin:0;padding:22px 17px 40px}.topbar{align-items:flex-start;margin-bottom:22px}.page-title{font-size:23px}.top-actions .pill{display:none}.hero{padding:23px 20px;min-height:140px}.hero h2{font-size:20px}.hero p{font-size:14.5px;max-width:80%}.hero-art{font-size:36px;margin:0 8px}.stats{gap:9px;margin:15px 0 23px}.stat{padding:13px 12px}.stat-top{font-size:12px}.stat-icon{width:27px;height:27px}.stat-num{font-size:21px}.stat-note{font-size:11px}.class-grid{grid-template-columns:1fr}.public-header{padding:14px 17px}.public-main{padding:28px 17px}.public-title{font-size:26px}.public-banner{padding:15px;align-items:flex-start;gap:10px;flex-direction:column}.date-label{display:none}.thumb{width:50px;height:50px}.public-work{gap:11px;padding:11px}.reader{grid-template-columns:1fr;min-height:0}.reader-pane{min-height:300px}.source-image{max-height:56vh}.modal{max-height:96vh}.modal-backdrop{padding:8px}.modal-header{padding:12px}.modal-title{font-size:15px}.modal-actions .btn{padding:9px 10px}.modal-content{padding:9px}.auth-wrap{grid-template-columns:1fr}.auth-aside{display:none}.auth-form-wrap{min-height:100vh;padding:25px}.form-grid{grid-template-columns:1fr}.field.wide{grid-column:auto}.work-row{align-items:flex-start}.work-row-actions{flex-direction:column}.section-head{align-items:flex-start}}
@media print{body{background:white}body>#app,body>#toast{display:none!important}.modal-backdrop{position:static;padding:0;background:white;display:block}.modal{width:100%;max-height:none;box-shadow:none;border-radius:0;background:white;overflow:visible}.modal-header .modal-actions,.icon-btn,.modal-header{display:none!important}.modal-content{padding:0;overflow:visible}.reader{display:grid;grid-template-columns:1fr 1fr;min-height:0;gap:12px}.reader-pane{break-inside:avoid}.pane-head{padding:7px 10px}.pane-body{padding:10px}.source-image{max-height:9in}.transcription{font-size:12pt;line-height:1.5}.print-head{display:block;font:700 16pt Manrope;margin:0 0 8px}.unreviewed{display:none}}
.view-banner{background:#fff8e9;border:1px solid #f2e2bc;border-radius:10px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#775a1d;font-size:13.5px;font-weight:600;margin:0 0 18px}.view-banner .text-button{color:#8d6716}.school-card{min-width:0}.school-plan-date{font-size:12.5px;color:var(--muted);margin-top:8px}.school-card-actions{gap:6px;flex-wrap:wrap}.school-card-actions .btn{font-size:12.5px;padding:8px 10px}.subscription-card{margin:19px 0 27px;padding:19px 22px;border:1px solid var(--brand-soft,#d9e4ff);border-radius:10px;background:linear-gradient(110deg,var(--brand-faint,#f2f5ff),#fff);display:flex;align-items:center;justify-content:space-between}.subscription-card h2{font:800 19px Manrope;letter-spacing:-.5px;margin:6px 0 3px}.subscription-card p{margin:0;color:var(--muted);font-size:13.5px}.subscription-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;color:var(--blue);background:var(--brand-soft,#e5ebff);font-size:20px}.tutor-assignment{font-size:12.5px;color:var(--muted);margin-top:11px}.tutor-assignment b{color:#495774}.backup-callout{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);padding:15px;border-radius:10px;margin:20px 0}.backup-callout b{font:700 14.5px Manrope}.backup-callout p{font-size:12.5px;color:var(--muted);margin:4px 0 0}.update-warning{font-size:13.5px;line-height:1.55;color:#785b1f;background:#fff8e9;border:1px solid #f0e2c3;border-radius:9px;padding:12px 14px}.role-link{display:flex;align-items:center;justify-content:center;text-decoration:none;margin:10px 0}.work-row-actions.horizontal{flex-direction:row;gap:6px}.work-row-actions a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:720px){.view-banner{align-items:flex-start;flex-direction:column;gap:6px}.subscription-card{padding:16px}.school-card-actions{justify-content:flex-start}.work-row-actions.horizontal{flex-direction:row;flex-wrap:wrap}.work-row-actions.horizontal .btn{padding:7px 8px}.backup-callout{align-items:flex-start}}
@media(max-width:720px){.side nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:8;background:#fff;border-top:1px solid var(--line);justify-content:space-around;padding:5px 6px calc(5px + env(safe-area-inset-bottom));gap:2px}.side .nav-item{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center;gap:3px;padding:7px 3px;margin:0;font-size:12px;line-height:1.1}.side .nav-icon{font-size:16px;width:auto}.main{padding-bottom:100px}}
.assignment-board{margin:24px 0 27px}.assignment-board .section-head{margin:0 0 14px}.assignment-count{padding:8px 11px;border-radius:99px;background:var(--brand-faint,#eef2ff);color:var(--blue);font-size:12.5px;font-weight:700;white-space:nowrap}.assignment-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.assignment-group{background:var(--brand-faint,#f9faff);border:1px solid var(--line);border-radius:10px;padding:14px;min-width:0}.assignment-group-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 11px}.assignment-group-head h3{font:700 14.5px Manrope;margin:0}.assignment-group-head span{min-width:25px;height:25px;border-radius:99px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:700}.assignment-card{background:white;border:1px solid var(--line);border-radius:10px;padding:15px;margin:9px 0;min-width:0}.assignment-card-top{display:flex;align-items:center;justify-content:space-between}.assignment-status{padding:5px 8px;border-radius:99px;font-size:12px;font-weight:700}.assignment-status.is-assigned{background:#e5f7f0;color:#187858}.assignment-status.is-open{background:#fff4dc;color:#986514}.assignment-card h3{font:700 15px Manrope;margin:12px 0 4px}.assignment-card p{font-size:12.5px;color:var(--muted);margin:0;overflow-wrap:anywhere}.assignment-card p b{color:#43516b}.assignment-card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}.assignment-card-actions .btn{box-shadow:none}.assignment-empty{border:1px dashed #d6ddeb;border-radius:10px;padding:18px 12px;text-align:center;color:#8a95a8;font-size:12.5px;background:#fff}.qr-backdrop{z-index:50}.qr-modal{width:min(570px,100%);max-height:92vh}.qr-modal .modal-content{padding:24px}.qr-print-sheet{background:#fff;border:1px solid var(--line);border-radius:10px;padding:25px 20px;text-align:center;display:flex;align-items:center;flex-direction:column}.qr-print-heading h1{font:800 22px Manrope;letter-spacing:-.6px;margin:8px 0}.qr-print-heading p{font-size:13.5px;color:var(--muted);margin:0}.qr-code{display:grid;place-items:center;min-height:274px;margin:16px 0 10px}.qr-code img,.qr-code canvas{display:block!important;width:256px;height:256px;image-rendering:pixelated}.qr-url{font-size:12px;line-height:1.4;overflow-wrap:anywhere;color:#748097;max-width:430px}.qr-footer{font-size:12px;color:#94a0b3;border-top:1px solid var(--line);margin-top:18px;padding-top:13px;width:100%}.qr-error{padding:12px;color:#a14747;background:#fff0f0;border-radius:9px;font-size:13.5px;margin-top:12px}.qr-error[hidden]{display:none}
@media(max-width:720px){.assignment-columns{grid-template-columns:1fr}.assignment-board .section-head{align-items:center}.assignment-card-actions .btn{font-size:12px;padding:8px 9px}.qr-modal .modal-content{padding:13px}.qr-print-sheet{padding:20px 13px}}
@media print{body>*:not(.qr-backdrop){display:none!important}.qr-backdrop{position:static!important;display:block!important;padding:0!important;background:white!important}.qr-modal{width:100%!important;max-height:none!important;border-radius:0!important;overflow:visible!important;box-shadow:none!important}.qr-modal .modal-header,.qr-modal .modal-actions,.qr-modal .qr-error{display:none!important}.qr-modal .modal-content{padding:0!important;overflow:visible!important}.qr-print-sheet{min-height:9in;border:0!important;border-radius:0!important;justify-content:center;padding:0!important}.qr-print-heading h1{font-size:28pt}.qr-print-heading p{font-size:13pt}.qr-code{min-height:3.25in}.qr-code img,.qr-code canvas{width:3in!important;height:3in!important}.qr-url{font-size:10pt;max-width:6.5in}.qr-footer{font-size:10pt}}
.demo-tools{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(110deg,#fff,var(--brand-faint,#f0f4ff));border-color:var(--brand-soft,#dce5ff);margin:23px 0;padding:22px}.demo-tools h2{font:800 16px Manrope;margin:6px 0}.demo-tools p{font-size:13.5px;color:var(--muted);margin:0;max-width:650px;line-height:1.6}.demo-result[hidden]{display:none}.demo-result{border-color:#d5e8de}.demo-result .panel-head{margin-bottom:12px}.demo-result .panel-head h2{font:800 17px Manrope;margin:5px 0}.demo-warning{font-size:13.5px;color:#775a1d;background:#fff8e9;border:1px solid #f2e2bc;border-radius:9px;padding:11px 13px;margin:10px 0 14px}.demo-login-row{display:grid;grid-template-columns:1.2fr 1.2fr 1.5fr 1fr;gap:9px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:11px 12px;margin:7px 0;background:#fff;font-size:12.5px}.demo-login-row b{font-size:13.5px}.demo-login-row span{color:var(--muted)}.demo-login-row code{font-family:ui-monospace,monospace;font-size:12px;overflow-wrap:anywhere;background:#f5f7fb;padding:5px;border-radius:5px}.demo-login-list{max-height:280px;overflow:auto}.demo-result .assignment-card-actions{margin-top:13px}.assignment-staff{display:grid;gap:3px;margin:10px 0 0}.assignment-teacher{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;background:#f7f8fc;font-size:12.5px}.assignment-teacher>span{display:flex;flex-direction:column;gap:3px}.assignment-teacher small{color:var(--muted);font-size:12px}.assignment-teacher .text-button{font-size:12px;white-space:nowrap}
@media(max-width:720px){.demo-tools{align-items:flex-start;flex-direction:column;padding:17px}.demo-login-row{grid-template-columns:1fr;gap:5px}.demo-result .assignment-card-actions{align-items:flex-start}.assignment-teacher{padding:8px}}
.tutor-assignment-rows{display:grid;gap:9px;margin:8px 0 11px}.tutor-assignment-edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end;background:#f8f9fc;border:1px solid var(--line);border-radius:10px;padding:12px}.tutor-assignment-edit .field{min-width:0}.tutor-assignment-edit .field label{font-size:12px}.tutor-assignment-edit .icon-btn{margin-bottom:1px}
@media(max-width:720px){.tutor-assignment-edit{grid-template-columns:1fr auto}.tutor-assignment-edit .field:first-child{grid-column:1/-1}.tutor-assignment-edit .field:nth-child(2){grid-column:1}.tutor-assignment-edit .icon-btn{grid-column:2;grid-row:2}}

/* Class subject accordion and tutor workspace refinements */
.class-expand-toggle{border:0;background:transparent;display:flex;align-items:center;gap:8px;padding:0;color:var(--blue)}
.chevron{font-size:18px;line-height:1;color:#78859b;transition:transform .18s}
.class-expand-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.class-subject-panel{margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.class-subject-panel[hidden]{display:none}
.class-subject-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.class-subject-head b{display:block;font:700 13.5px Manrope}
.class-subject-head small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.class-subject-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;padding:10px 0;border-top:1px solid #f0f2f6;font-size:12.5px;align-items:center}
.subject-name{font-weight:700;display:flex;align-items:center;gap:8px}.subject-name .subject-dot{flex:none;width:7px;height:7px}
.subject-teachers{text-align:right;color:#526079}.subject-teachers em{font-style:normal;color:#98a1b2}
.tutor-hero{margin-bottom:19px}
.tutor-welcome-label{display:inline-block;font-size:12px;letter-spacing:1px;font-weight:800;margin-bottom:8px;color:var(--brand-soft,#e4eaff)}
.tutor-overview-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:stretch;margin:0 0 29px}
.tutor-overview-stats>div{background:white;border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
.tutor-overview-stats span{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.tutor-overview-stats b{display:block;font:800 17px Manrope;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tutor-overview-stats>.btn{align-self:center;white-space:nowrap}
.tutor-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tutor-class-card{padding:21px}
.tutor-class-kicker{display:flex;align-items:center;justify-content:space-between}
.tutor-class-card h3{font-size:17px;margin-top:18px}
.tutor-subject-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px;min-height:32px}
.tutor-subject-list span{font-size:12px;font-weight:700;color:#465675;background:var(--brand-faint,#f0f3ff);border:1px solid var(--brand-soft,#e5eaff);border-radius:99px;padding:7px 10px}
.tutor-card-footer{margin-top:19px}
.tutor-qr-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.tutor-qr-actions .btn{box-shadow:none}
.tutor-assignment-edit .field select{min-width:0}
/* qrcodejs creates a canvas and a fallback image; show one QR only. */
.qr-code canvas{display:block!important;width:256px;height:256px;image-rendering:pixelated}
.qr-code img{display:none!important}
@media(max-width:850px){.tutor-overview-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.tutor-overview-stats>.btn{grid-column:1/-1;justify-self:start}.tutor-class-grid{grid-template-columns:1fr}}
@media(max-width:520px){.class-subject-row{grid-template-columns:1fr;gap:5px}.subject-teachers{text-align:left;padding-left:15px}.tutor-overview-stats{gap:8px}.tutor-overview-stats>div{padding:12px}.class-subject-head{align-items:flex-start}}
@media print{.qr-code canvas{width:3in!important;height:3in!important}.qr-code img{display:none!important}}

/* Daily tutor upload checklist */
.today-reminder,.today-all-done{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:10px;margin:-9px 0 17px}
.today-reminder{background:#fff5e2;border:1px solid #f4dfb6;color:#775316}
.reminder-icon{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:#f2d18b;color:#65460f;font-weight:900}
.today-reminder>div{flex:1;min-width:0}.today-reminder b,.today-all-done b{display:block;font:800 14.5px Manrope}.today-reminder p{font-size:12.5px;margin:4px 0 0;line-height:1.5;color:#8b6b30}
.today-reminder .btn{background:#d99b28;color:white;box-shadow:none;white-space:nowrap}
.today-all-done{background:#eaf8f1;border:1px solid #ccebdd;color:#176747}
.today-all-done>span{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:#cdeedd;font-weight:900}
.today-all-done small{display:block;font-size:12.5px;color:#50836b;margin-top:4px}
.tutor-subject-list{display:flex;flex-direction:column;gap:8px;margin-top:16px;min-height:0}
.tutor-subject-status{display:grid;grid-template-columns:minmax(0,1fr) 25px auto;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:10px 11px}
.tutor-subject-status.is-pending{background:#fffaf0;border-color:#f2e0bd}
.tutor-subject-status.is-uploaded{background:#f2fbf6;border-color:#d4eddf}
.tutor-subject-status b{display:block;color:var(--ink);font-size:12.5px}
.tutor-subject-status small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.status-mark{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:900}
.is-pending .status-mark{background:#f8e7c2;color:#916014}.is-uploaded .status-mark{background:#d6f0e1;color:#218157}
.tutor-subject-status .btn{white-space:nowrap;box-shadow:none}
@media(max-width:600px){.today-reminder{align-items:flex-start;flex-wrap:wrap}.today-reminder>div{width:calc(100% - 48px)}.today-reminder .btn{margin-left:43px}.tutor-subject-status{grid-template-columns:minmax(0,1fr) 23px auto;gap:6px;padding:9px}.tutor-subject-status .btn{font-size:12px;padding:7px 8px}}

/* School admin contact details and pending uploads */
.school-hero{margin-bottom:26px}
.school-pending-callout{margin:0 0 20px}
.pending-hero,.profile-hero{margin:0 0 22px}
.pending-filter-panel{margin:0 0 17px;padding:16px 18px}
.pending-date-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.pending-date-form>div{display:flex;flex-direction:column;gap:6px;min-width:210px}
.pending-date-form label{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#758199;font-weight:800}
.pending-date-form input{min-height:42px;border:1px solid #dfe4ed;border-radius:10px;background:#fff;padding:9px 12px;color:var(--ink);font:500 13.5px Manrope}
.pending-filter-note{font-size:12.5px;color:var(--muted);padding:0 0 12px}
.pending-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;margin:0 0 12px;border:1px solid #f0dfbd;border-radius:10px;background:#fffaf0}
.pending-summary>div{display:flex;align-items:center;gap:12px;min-width:0}
.pending-summary>div>span{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:10px;background:#f8e7c2;color:#8b6113;font:800 16px Manrope}
.pending-summary b{display:block;font:800 14.5px Manrope;color:#4c5669}.pending-summary small{display:block;margin-top:4px;color:#8791a3;font-size:12px}
.pending-task-list{display:grid;gap:9px}
.pending-task-row{display:grid;grid-template-columns:minmax(170px,1.1fr) minmax(150px,1fr) auto;align-items:center;gap:15px;padding:13px 15px;background:#fff;border:1px solid var(--line);border-radius:10px}
.pending-task-class{display:flex;align-items:center;gap:10px;min-width:0}.pending-task-class .class-badge{width:37px;height:37px;font-size:12.5px;flex:none}
.pending-task-class b,.pending-task-teacher b{display:block;font:700 13.5px Manrope;overflow-wrap:anywhere}.pending-task-class small,.pending-task-teacher small{display:block;margin-top:4px;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.pending-remind{background:#198754;color:#fff;text-decoration:none;box-shadow:none;white-space:nowrap}.pending-remind:hover{background:#147448;color:#fff}
.pending-whatsapp-note{margin:13px 2px;color:#78849a;font-size:12px;line-height:1.5}.pending-empty{margin-top:13px}.pending-holiday{margin:0 0 18px}
.school-profile-panel{max-width:900px}.school-profile-panel textarea{min-height:78px}
@media(max-width:720px){.school-hero{margin-bottom:18px}.pending-date-form{align-items:stretch}.pending-date-form>div{min-width:0;width:100%}.pending-date-form .btn{width:100%}.pending-filter-note{padding:0}.pending-task-row{grid-template-columns:minmax(0,1fr) auto;gap:11px;padding:12px}.pending-task-teacher{grid-column:1;grid-row:2;padding-left:47px}.pending-task-row>.btn{grid-column:2;grid-row:1/3;white-space:normal;max-width:120px;text-align:center;line-height:1.25}.pending-summary{align-items:flex-start;padding:13px}.pending-summary>.tag{flex:none}}
@media(max-width:420px){.pending-task-row{grid-template-columns:minmax(0,1fr)}.pending-task-teacher{grid-column:1;grid-row:auto;padding-left:47px}.pending-task-row>.btn{grid-column:1;grid-row:auto;max-width:none;justify-self:start;margin-left:47px}.pending-summary small{line-height:1.4}}

/* School overview subject coverage and class assignment view */
.school-overview-cards{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(150px,.8fr) minmax(300px,1.8fr);gap:13px;margin:20px 0 28px}
.school-count-card,.school-coverage-card{min-width:0;min-height:118px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:16px;display:flex;align-items:flex-start;gap:12px}
.school-count-icon,.overview-coverage-icon{width:37px;height:37px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--brand-faint,#eef2ff);color:var(--blue);font-size:17px;font-weight:900}
.overview-card-label{display:block;color:#7c8799;font-size:11px;font-weight:800;letter-spacing:.8px}
.school-count-card strong{display:block;font:800 24px Manrope;margin:7px 0 1px}.school-count-card small{color:var(--muted);font-size:12px}
.school-coverage-card.complete{background:#effaf4;border-color:#ccebd8;color:#176c48}.school-coverage-card.complete .overview-coverage-icon{background:#d9f2e3;color:#168054}
.school-coverage-card.pending{background:#fff3f2;border-color:#f2ceca;color:#8e3835}.school-coverage-card.pending .overview-coverage-icon{background:#ffe0dd;color:#ad433d}
.school-coverage-card.empty{background:var(--brand-faint,#f8faff);border-color:var(--brand-soft,#dce5fb);color:#43516b;text-align:left;padding:16px}
.school-coverage-card h3{font:800 14.5px Manrope;margin:5px 0 3px}.school-coverage-card p{font-size:12px;line-height:1.45;margin:4px 0 0;color:inherit;opacity:.8}
.school-coverage-card ul{list-style:none;padding:0;margin:7px 0 0;max-height:108px;overflow:auto;display:grid;gap:4px}
.school-coverage-card li{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;font-size:12px;line-height:1.35}.school-coverage-card li b{font-weight:800}.school-coverage-card li span:before{content:'· ';font-weight:800}
.class-management-grid{align-items:stretch}.class-expand-card{display:flex;flex-direction:column;min-width:0}.class-expand-card .class-subject-panel{flex:1}.class-subject-row.is-unassigned{background:#fff8e8;border-top-color:#f3e2bd;border-radius:8px;margin:4px 0;padding:10px 9px}.class-subject-row.is-unassigned .subject-name{color:#775316}.class-subject-row.is-unassigned .subject-dot{background:#e8ad3a}.class-subject-row.is-unassigned .subject-teachers{display:flex;justify-content:flex-end}.class-subject-row.is-unassigned .btn{white-space:nowrap;background:#fff1cf;color:#825d12;box-shadow:none;padding:7px 10px;font-size:12.5px}.class-qr-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px;padding-top:12px;border-top:1px solid var(--line)}.class-qr-actions .btn{box-shadow:none}
.class-assign-backdrop{z-index:65}.class-assign-modal{width:min(480px,100%);max-height:90vh}.class-assign-modal .modal-content{padding:20px}.class-assign-help{margin:0 0 15px;color:var(--muted);font-size:13.5px;line-height:1.55}.class-assign-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:15px}.class-assign-actions .text-button{margin-left:auto}
@media(max-width:900px){.school-overview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.school-coverage-card{grid-column:1/-1}}
@media(max-width:720px){.school-overview-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:17px 0 24px}.school-count-card,.school-coverage-card{padding:13px;min-height:104px}.school-count-icon,.overview-coverage-icon{width:32px;height:32px}.school-coverage-card{grid-column:1/-1}.class-subject-row.is-unassigned{grid-template-columns:minmax(0,1fr) auto;gap:8px}.class-subject-row.is-unassigned .subject-teachers{padding:0}.class-qr-actions{gap:7px}.class-qr-actions .btn{font-size:12px;padding:8px 9px}.class-assign-actions .text-button{margin-left:0}}
@media(max-width:420px){.class-subject-row.is-unassigned{grid-template-columns:1fr}.class-subject-row.is-unassigned .subject-teachers{justify-content:flex-start;padding-left:15px}.class-subject-row.is-unassigned .btn{font-size:12px}.school-count-card{gap:8px;padding:11px}.school-count-card strong{font-size:21px}}

/* Student QR landing page: subject selection followed by a date picker */
.public-section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 15px}
.public-section-heading h2{font:800 17px Manrope;margin:0}.public-section-heading p{margin:5px 0 0;font-size:13.5px;color:var(--muted)}
.public-subject-count{background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 10px;font-size:12px;font-weight:700;color:#68758d;white-space:nowrap}
.public-subject-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.public-subject-grid[hidden],.student-work-area[hidden]{display:none}
.public-subject-card{display:flex;align-items:center;gap:12px;min-width:0;text-align:left;border:1px solid var(--line);border-radius:10px;background:#fff;padding:16px;transition:.16s;color:var(--ink)}
.public-subject-card:hover{transform:translateY(-2px);border-color:var(--brand-light,#cbd6ff);box-shadow:var(--shadow)}
.public-subject-icon{width:43px;height:43px;flex:none;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font:800 16px Manrope}
.public-subject-info{display:block;flex:1;min-width:0}.public-subject-info b{display:block;font:700 14.5px Manrope;overflow-wrap:anywhere}.public-subject-info small{display:block;color:var(--muted);font-size:12px;margin-top:5px}.public-subject-info .public-subject-latest{color:var(--brand-main,#4b68c7)}
.public-subject-arrow{font-size:22px;color:#9aa5b7;line-height:1}
.student-work-area{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.student-subject-toolbar{display:flex;align-items:end;justify-content:space-between;gap:14px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.student-date-select{display:flex;flex-direction:column;gap:6px;min-width:190px}.student-date-select label{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:#738098;font-weight:800}.student-date-select select{border:1px solid #dfe4ed;border-radius:9px;background:#fff;color:var(--ink);padding:10px 12px;font-size:13.5px}
.student-work-heading{display:flex;align-items:center;gap:9px;margin:18px 0 10px}.student-work-heading h2{font:800 16px Manrope;margin:0}.student-date-work .public-work{margin:9px 0}.student-date-work .public-work:last-child{margin-bottom:0}
@media(max-width:900px){.public-subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.public-subject-grid{grid-template-columns:1fr}.public-subject-card{padding:14px}.student-work-area{padding:13px}.student-subject-toolbar{align-items:stretch;flex-direction:column-reverse}.student-date-select{min-width:0;width:100%}.public-section-heading{align-items:flex-start}}

/* Shared modern white dropdown styling */
select,.field select,.student-date-select select{
  -webkit-appearance:none;appearance:none;color-scheme:light;
  color:var(--ink);background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23748297' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;
  border:1px solid #dfe4ed;border-radius:10px;padding-right:42px!important;
  min-height:42px;cursor:pointer;transition:border-color .16s,box-shadow .16s,background-color .16s;
}
select:hover,.field select:hover,.student-date-select select:hover{border-color:#bdc9df;background-color:#fff}
select:focus,.field select:focus,.student-date-select select:focus{outline:none;border-color:var(--brand-light,#849aff);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-main,#315cf5) 7.8%,transparent)}
select:disabled,.field select:disabled,.student-date-select select:disabled{cursor:not-allowed;color:#98a1b2;background-color:#f7f8fb;opacity:1}
select option{color:var(--ink);background:#fff;padding:10px 12px}
select option:disabled{color:#a0a9b8;background:#f3f5f9}

/* Floating single-select menus for tutor class and subject assignments */
.modern-dropdown{position:relative;width:100%;min-width:0}
.modern-dropdown-native{position:absolute!important;inset:0 auto auto 0!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.modern-dropdown-trigger{width:100%;min-height:43px;border:1px solid #dfe4ed;border-radius:10px;background:#fff;color:var(--ink);padding:10px 13px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;font-size:13.5px;transition:border-color .16s,box-shadow .16s}
.modern-dropdown-trigger:hover{border-color:#bdc9df;background:#fff}
.modern-dropdown-trigger:focus-visible,.modern-dropdown-trigger[aria-expanded="true"]{outline:none;border-color:var(--brand-light,#849aff);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-main,#315cf5) 7.8%,transparent)}
.modern-dropdown-trigger:disabled{cursor:not-allowed;color:#a0a9b8;background:#f6f7fa}
.modern-dropdown-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modern-dropdown-chevron{width:8px;height:8px;flex:none;border-right:1.6px solid #748297;border-bottom:1.6px solid #748297;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.modern-dropdown-trigger[aria-expanded="true"] .modern-dropdown-chevron{transform:rotate(225deg) translate(-1px,-1px)}
.modern-dropdown-menu{position:absolute;z-index:25;left:0;right:0;top:calc(100% + 7px);padding:6px;background:#fff;border:1px solid #edf0f5;border-radius:10px;box-shadow:0 14px 34px rgba(25,39,66,.16);max-height:235px;overflow-y:auto}
.modern-dropdown-menu[hidden]{display:none}
.modern-dropdown-option{display:flex;width:100%;min-height:38px;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:8px;background:#fff;color:#38455e;text-align:left;font-size:13.5px;cursor:pointer}
.modern-dropdown-option:hover,.modern-dropdown-option:focus-visible{outline:none;background:#f4f6fb}
.modern-dropdown-option.is-selected{background:var(--brand-faint,#eef2ff);color:var(--brand-main,#315cf5);font-weight:700}
.modern-dropdown-option:disabled{color:#a0a9b8;background:#fafbfc;cursor:not-allowed}
.modern-dropdown-dot{width:12px;height:12px;flex:none;border:1.5px solid #d1d7e1;border-radius:50%;background:#f0f2f5}
.modern-dropdown-option.is-selected .modern-dropdown-dot{border:4px solid var(--brand-light,#7488f8);background:#fff}
.modern-dropdown-option small{margin-left:auto;white-space:nowrap;color:#98a1b2;font-size:11px;font-weight:700}

/* Tutor sign-in: compact, touch-friendly card on phone screens only */
@media(max-width:720px){
  .tutor-login{min-height:100svh;background:#f5f7fb}
  .tutor-login .auth-form-wrap{min-height:100svh;padding:18px 16px max(18px,env(safe-area-inset-bottom));}
  .tutor-login .auth-form{width:min(100%,430px);padding:clamp(20px,6vw,26px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 38px rgba(31,47,82,.09)}
  .tutor-login .auth-form h2{font-size:24px;margin-top:12px!important}
  .tutor-login .auth-form>p{font-size:15px;margin-bottom:18px}
  .tutor-login .auth-form .field{margin:12px 0}
  .tutor-login .auth-form .field input{min-height:48px;padding:12px 13px;font-size:16px}
  .tutor-login .auth-form .btn{min-height:48px;font-size:15px}
  .tutor-login .auth-form .footer-note{margin-top:16px}
}
@media(max-width:720px) and (max-height:560px){
  .tutor-login .auth-form-wrap{align-items:start;padding-top:12px;padding-bottom:12px}
  .tutor-login .auth-form .footer-note{display:none}
}

/* Center the status glyph and keep the classwork form badge on one line */
.tutor-subject-status .status-mark{display:flex;align-items:center;justify-content:center;justify-self:center;align-self:center;text-align:center;line-height:1}
.new-work-post-tag{flex:0 0 auto;white-space:nowrap}

/* Searchable work records, school closures, and revision details */
.work-search-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0}.work-search{display:flex;align-items:center;gap:8px;min-width:min(100%,310px);padding:0 11px;border:1px solid #dfe4ed;border-radius:10px;background:#fff;color:#8490a4}.work-search>span{font-size:20px;line-height:1}.work-search input{width:100%;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent;padding:10px 0;font-size:13.5px}.work-search-help{font-size:12px;color:var(--muted)}.public-work-type{align-self:center;white-space:nowrap;border-radius:99px;background:var(--brand-faint,#f0f3ff);color:var(--brand-main,#4c61aa);font-size:12px;font-weight:700;padding:6px 9px}.public-work[hidden]{display:none}.tutor-post-library{margin-top:35px}.tutor-post-library .section-head{align-items:end}.tutor-post-library .work-row{margin:8px 0}.tutor-post-library .work-row-actions{flex-direction:row}.holiday-reminder{background:#eef8ff;border-color:var(--brand-soft,#d6eaff);color:#315978}.holiday-reminder>span{background:var(--brand-soft,#d9efff);color:#316b94}.edit-post-modal{width:min(800px,100%)}.edit-post-modal .modal-content{padding:22px}.edit-post-image{margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:10px;text-align:center;background:#f8f9fc}.edit-post-image img{max-height:250px;max-width:100%;object-fit:contain;border-radius:8px}.history-modal{width:min(680px,100%)}.revision-row{border:1px solid var(--line);border-radius:10px;background:#fff;margin:8px 0;padding:12px}.revision-row summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}.revision-row summary::-webkit-details-marker{display:none}.revision-row summary b,.revision-row summary small{display:block}.revision-row summary b{font:700 13.5px Manrope}.revision-row summary small{font-size:12px;color:var(--muted);margin-top:4px}.revision-details{font-size:12.5px;color:#536079;padding-top:11px;margin-top:10px;border-top:1px solid var(--line);white-space:pre-wrap}.revision-details p,.revision-details pre{font:inherit;white-space:pre-wrap;background:#f7f8fb;border-radius:8px;padding:10px;margin:8px 0}.revision-details pre{max-height:180px;overflow:auto}
@media(max-width:650px){.work-search-row{align-items:stretch;flex-direction:column}.work-search{min-width:0;width:100%}.public-work-type{grid-column:2;justify-self:start}.tutor-post-library .section-head{align-items:flex-start;flex-direction:column}.tutor-post-library .work-row{align-items:flex-start}.tutor-post-library .work-row-actions{flex-wrap:wrap}.edit-post-modal .modal-content{padding:13px}}

/* Keep the public class name in the upper-right corner on desktop and phones. */
.public-class-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:0}
.public-school{grid-column:1;grid-row:1;font-size:12.5px}
.public-title{grid-column:2;grid-row:1;text-align:right;margin:0}
.public-subtitle{grid-column:2;grid-row:2;text-align:right;margin:0}

/* Compact the student class header on phones and align its class name right. */
@media(max-width:600px){.public-main{padding:20px 18px}.public-class-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:0}.public-school{grid-column:1;grid-row:1;font-size:12.5px}.public-title{grid-column:2;grid-row:1;text-align:right;font-size:24px;letter-spacing:-.7px;margin:0}.public-subtitle{grid-column:2;grid-row:2;text-align:right;font-size:13.5px;margin:0}.public-banner{margin:13px 0 16px;padding:12px 14px;border-radius:10px;align-items:flex-start;gap:6px;flex-direction:column}.public-banner>div{font-size:14.5px;line-height:1.4}.public-banner strong{font-size:14.5px}.public-banner span{font-size:12.5px}}

/* Phone-first refinements for the public class page. */
.all-subjects-btn{background:var(--blue)!important;color:#fff!important;border:1px solid var(--blue)!important;box-shadow:0 5px 12px color-mix(in srgb,var(--brand-main,#315cf5) 16.9%,transparent)!important}.all-subjects-btn:hover{background:var(--blue-dark)!important;border-color:var(--blue-dark)!important;color:#fff!important}
@media(max-width:600px){.public-header{padding:9px 14px;gap:8px}.public-header .brand{gap:8px}.public-header .brand-mark.small{width:34px;height:34px;border-radius:10px;font-size:18px}.public-header .brand-name{font-size:15px}.public-header .brand-caption{font-size:11px}.public-header .pill{font-size:11px;padding:7px 9px;white-space:nowrap}.public-main{padding:16px 14px 24px}.public-banner{margin:11px 0 14px}.public-subject-section .public-section-heading{gap:8px;margin-bottom:11px}.public-section-heading h2{font-size:15px}.public-section-heading p{font-size:12.5px}.public-subject-count{font-size:11px;padding:6px 8px}.public-subject-grid{grid-template-columns:minmax(0,1fr);gap:9px}.public-subject-card{min-height:70px;padding:11px 12px;border-radius:10px;gap:10px}.public-subject-card:hover{transform:none;box-shadow:none}.public-subject-icon{width:38px;height:38px;border-radius:10px;font-size:15px}.public-subject-info b{font-size:13.5px}.public-subject-info small{font-size:11px;margin-top:3px}.public-subject-arrow{font-size:20px}.student-work-area{margin-top:12px;padding:12px;border-radius:10px}.student-subject-toolbar{align-items:stretch;flex-direction:column;gap:10px;padding-bottom:12px}.all-subjects-btn{width:100%;min-height:44px;font-size:13.5px!important}.student-date-select{min-width:0;width:100%}.student-date-select label{font-size:11px}.student-date-select select{min-height:44px;font-size:13.5px}.student-work-heading{margin:14px 0 8px}.student-work-heading h2{font-size:15px}.work-search-row{margin:10px 0}.student-date-work .public-work{gap:9px;padding:10px}.student-date-work .thumb{width:48px;height:48px}.student-date-work .public-work-copy h3{font-size:13.5px}.student-date-work .public-work-copy p{font-size:12px;line-height:1.35}.student-date-work .public-work-type{font-size:11px;padding:5px 7px}.student-date-work .link-button{font-size:12px;white-space:nowrap}.public-main>.footer-note{font-size:12px!important;margin:24px 0 6px!important}}
.public-banner[hidden],.public-section-heading[hidden]{display:none!important}

/* Search field used by the shared searchable dropdown menu. */
.modern-dropdown-search{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;margin:0 0 5px;padding:0 10px;min-height:38px;border:1px solid #e6e9ef;border-radius:8px;background:#f4f5f7;color:#7d8798}
.modern-dropdown-search>span{font-size:19px;line-height:1}
.modern-dropdown-search input{width:100%;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:8px 0!important;color:#344054;font-size:13.5px}
.modern-dropdown-search input::placeholder{color:#9aa2af}
.modern-dropdown-option[hidden]{display:none!important}
.school-overview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.school-overview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.school-overview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.student-date-select input[type="date"]{width:100%;min-height:42px;border:1px solid #dfe4ed;border-radius:10px;background:#fff;color:var(--ink);padding:10px 12px;font-size:13.5px;cursor:pointer;transition:border-color .16s,box-shadow .16s}
.student-date-select input[type="date"]:hover{border-color:#bdc9df}
.student-date-select input[type="date"]:focus{outline:none;border-color:var(--brand-light,#849aff);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-main,#315cf5) 7.8%,transparent)}

.student-holiday-banner{display:flex;align-items:center;gap:12px;margin:14px 0;padding:14px 16px;border:1px solid #edcf7d;border-radius:10px;background:linear-gradient(100deg,#fff7df,#fff1c7);color:#74520b;box-shadow:0 5px 16px rgba(144,104,8,.07)}
.student-holiday-banner>span{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:#ffe7a2;color:#976900;font-size:20px}
.student-holiday-banner strong,.student-holiday-banner small{display:block}
.student-holiday-banner strong{font:800 15px Manrope;color:#704d00}
.student-holiday-banner small{margin-top:3px;color:#8a6819;font-size:12.5px}
.student-holiday-banner.selected-date-holiday{margin:14px 0 0}
@media(max-width:600px){.student-holiday-banner{margin:11px 0;padding:12px;gap:10px}.student-holiday-banner>span{width:34px;height:34px}.student-holiday-banner strong{font-size:14.5px}}

.public-header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.public-header-meta{display:flex;align-items:center;gap:14px}
.public-datetime{display:flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#66738a}
.public-datetime>span{font-size:18px;color:var(--blue)}
.public-datetime b,.public-datetime small{display:block;white-space:nowrap}
.public-datetime b{font:700 12.5px Manrope;color:#35425a}
.public-datetime small{margin-top:2px;color:#8290a5;font-size:12px}
.public-class-heading{grid-template-columns:minmax(0,1fr) auto;gap:14px}
.public-school{display:flex;align-items:center;gap:11px;min-width:0;padding:12px 15px;border:1px solid var(--brand-soft,#dce4f5);border-radius:10px;background:linear-gradient(115deg,#fff,var(--brand-faint,#f4f7ff));box-shadow:0 5px 17px color-mix(in srgb,var(--brand-dark,#27417d) 6.0%,transparent)}
.public-school-mark{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:var(--blue);color:#fff;font-size:20px;font-weight:800}
.public-school-text{display:block;min-width:0}
.public-school-text small{display:block;margin-bottom:3px;color:#8793a8;font-size:11px;font-weight:800;letter-spacing:1.1px}
.public-school-text strong{display:block;overflow-wrap:anywhere;color:#1f2d46;font:800 16px/1.2 Manrope;letter-spacing:-.2px}
@media(max-width:600px){.public-header{align-items:center;gap:8px}.public-header-meta{gap:0}.public-header .public-header-meta>.pill{display:none}.public-datetime{gap:6px;padding:6px 8px;border-radius:10px}.public-datetime>span{font-size:16px}.public-datetime b{font-size:12px}.public-datetime small{font-size:11px}.public-class-heading{gap:8px}.public-school{gap:7px;padding:8px;border-radius:10px}.public-school-mark{width:30px;height:30px;border-radius:9px;font-size:16px}.public-school-text small{font-size:8px}.public-school-text strong{font-size:13.5px;line-height:1.2}}

/* School branding for staff workspaces and public class pages. */
.school-brand{min-width:0;gap:11px;align-items:center}
.school-brand-logo,.school-brand-mark{width:40px;height:40px;flex:none;border-radius:10px;object-fit:cover}
.school-brand-mark{display:grid;place-items:center;background:linear-gradient(145deg,var(--brand-main,#315cf5),var(--brand-light,#6f86ff));color:#fff;font:800 15px Manrope;letter-spacing:.3px}
.school-brand-copy{min-width:0;max-width:220px}
.school-brand .brand-name{max-width:100%;overflow-wrap:anywhere;font-size:15px;line-height:1.25}
.school-brand .brand-caption{max-width:100%;overflow-wrap:anywhere;line-height:1.3}
.public-header .school-brand .brand-name{font-size:16px}
.school-logo-setting{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px dashed #d5dbea;border-radius:10px;padding:13px;background:var(--brand-faint,#fbfcff)}
.school-logo-preview{width:76px;height:76px;flex:none;border-radius:10px;object-fit:contain;background:#fff;border:1px solid #e6eaf2;padding:5px}
.school-logo-placeholder{display:grid;place-items:center;color:#8994a7;font-size:12px;text-align:center}
.school-logo-setting input[type=file]{max-width:min(100%,320px);border:0;background:transparent;padding:6px}
@media(max-width:720px){.side .school-brand{max-width:calc(100% - 8px)}.side .school-brand-logo,.side .school-brand-mark{width:34px;height:34px;border-radius:9px}.side .school-brand-copy{max-width:210px}.side .school-brand .brand-name{font-size:14.5px}.side .school-brand .brand-caption{font-size:12px}.public-header .school-brand{gap:8px}.public-header .school-brand-logo,.public-header .school-brand-mark{width:34px;height:34px;border-radius:9px}.public-header .school-brand .brand-name{font-size:14.5px}.public-header .school-brand .brand-caption{font-size:11px}}

/* Put the student class and page description together in a single row. */
.public-class-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:14px 17px;border:1px solid #e3e8f1;border-radius:10px;background:linear-gradient(110deg,#fff,var(--brand-faint,#f8faff));box-shadow:0 5px 16px color-mix(in srgb,var(--brand-dark,#27417d) 4.5%,transparent)}
.public-class-heading .public-title{flex:1;min-width:0;grid-column:auto;grid-row:auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 21px/1.25 Manrope;letter-spacing:-.55px;color:#1f2d46}
.public-class-heading .public-subtitle{flex:none;grid-column:auto;grid-row:auto;text-align:right;white-space:nowrap;margin:0;padding:7px 11px;border-radius:999px;background:var(--brand-soft,#edf1ff);color:var(--brand-main,#435aaf);font-size:12.5px;font-weight:700}
@media(max-width:600px){.public-class-heading{gap:8px;margin-bottom:14px;padding:10px 12px;border-radius:10px}.public-class-heading .public-title{font-size:16px;letter-spacing:-.3px}.public-class-heading .public-subtitle{padding:6px 8px;font-size:11px}}

.photo-editor{display:grid;gap:10px;margin-top:13px;padding:12px;border:1px solid #e4e9f2;border-radius:10px;background:#fff}
.photo-editor[hidden]{display:none}
.photo-editor-help{font-size:12.5px;color:#64718a}
.photo-canvas-wrap{display:grid;place-items:center;min-height:90px;max-height:440px;overflow:auto;border-radius:9px;background:#202a3a}
.photo-edit-canvas{display:block;width:auto;max-width:100%;max-height:420px;touch-action:pan-y;cursor:crosshair}
.photo-editor-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.photo-brightness{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#59657b;font-size:12.5px;font-weight:700}
.photo-brightness-range{width:120px;accent-color:var(--blue)}
.photo-brightness-value{min-width:34px;color:#758198;font-size:12px}
.photo-editor-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.photo-edit-status{color:var(--green);font-size:12.5px;font-weight:700}
@media(max-width:600px){.photo-editor{padding:9px}.photo-editor-controls{gap:6px}.photo-brightness{flex:1;min-width:170px}.photo-brightness-range{flex:1;width:auto}.photo-canvas-wrap{max-height:340px}.photo-edit-canvas{max-height:320px}}
.photo-multi-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.photo-image-count{color:#657188;font-size:12.5px;font-weight:700}
.photo-crop-toggle.active{background:var(--brand-soft,#e8edff)!important;border-color:var(--brand-light,#b9c8ff)!important;color:var(--brand-main,#294fd1)!important}
.photo-edit-canvas.crop-mode,.photo-edit-canvas.crop-adjusting{cursor:crosshair;touch-action:none}
.reader-image-gallery{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:8px;min-height:230px}
.reader-image-gallery .source-image{min-width:0;max-width:100%;max-height:65vh;justify-self:center}
.reader-image-gallery .icon-btn{width:36px;height:36px;background:#f4f6fb;border-color:#e5e9f1;font-size:21px}
.reader-image-gallery .icon-btn[hidden]{display:none}
.reader-image-count{text-align:center;margin-top:9px;color:#7f8ba0;font-size:12.5px;font-weight:700}
.reader-image-count[hidden]{display:none}
@media(max-width:720px){.reader-image-gallery{grid-template-columns:32px minmax(0,1fr) 32px;gap:5px;min-height:180px}.reader-image-gallery .icon-btn{width:31px;height:31px}.reader-image-gallery .source-image{max-height:52vh}}

.activities-filter{margin:18px 0 20px;padding:15px 17px}
.activities-filter form{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.activities-filter label{color:#56627a;font-size:13.5px;font-weight:700}
.activity-date-control{display:flex;align-items:center;gap:6px}
.activity-date-control input{min-height:40px;border:1px solid #dfe4ed;border-radius:9px;background:#fff;color:var(--ink);padding:9px 11px;font-size:13.5px}
.activity-date-control input:focus{outline:none;border-color:var(--brand-light,#849aff);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-main,#315cf5) 7.8%,transparent)}
.activity-class-list{display:grid;gap:14px}
.activity-class-card{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 5px 18px rgba(31,47,82,.035)}
.activity-class-card>header{display:flex;align-items:center;gap:12px;padding:15px 17px;border-bottom:1px solid #edf0f5;background:linear-gradient(100deg,#fff,var(--brand-faint,#fafbff))}
.activity-class-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--brand-soft,#edf1ff);color:var(--blue);font:800 13.5px Manrope}
.activity-class-title{min-width:0;flex:1}
.activity-class-title h2{margin:0;color:#26344d;font:800 15px Manrope}
.activity-class-title p{margin:4px 0 0;color:#8490a3;font-size:12.5px}
.activity-count{background:var(--brand-faint,#eef2ff);color:var(--brand-main,#3f5ed4)}
.activity-rows{padding:3px 16px}
.activity-row{display:flex;align-items:center;gap:11px;padding:12px 2px;border-bottom:1px solid #f0f2f6}
.activity-row:last-child{border-bottom:0}
.activity-kind{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:10px;background:#e9f8f1;color:#188565;font-size:17px;font-weight:800}
.activity-kind.edited{background:#fff4df;color:#ad7412}
.activity-copy{min-width:0;flex:1}
.activity-summary{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.activity-summary b{color:#2b3850;font-size:13.5px}
.activity-summary span{color:#748097;font-size:12.5px}
.activity-copy p{overflow:hidden;margin:4px 0 0;color:#7c8799;font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.activity-copy p strong{color:#53617a}
.activity-row time{flex:none;color:#8792a5;font-size:12px;white-space:nowrap}
.activity-empty{padding:17px 5px;color:#8893a4;font-size:12.5px}
.activity-holiday-banner{display:flex;align-items:center;gap:13px;margin:18px 0;padding:18px;border:1px solid #efd68e;border-radius:10px;background:linear-gradient(110deg,#fff9e8,#fff2cc);color:#72520d;box-shadow:0 7px 20px rgba(144,104,8,.07)}
.activity-holiday-banner>span{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:10px;background:#ffe9a8;color:#9a700d;font-size:22px}
.activity-holiday-banner b,.activity-holiday-banner small{display:block}
.activity-holiday-banner b{font:800 15px Manrope;color:#704d00}
.activity-holiday-banner small{margin-top:4px;color:#87681c;font-size:12.5px}
@media(max-width:600px){.activities-filter{padding:12px}.activities-filter form{gap:9px}.activities-filter label{width:100%}.activity-date-control{flex:1}.activity-date-control input{flex:1;min-width:0}.activities-filter form>.btn{min-height:40px}.activities-filter .tag{font-size:11px}.activity-class-card>header{padding:12px}.activity-rows{padding:2px 11px}.activity-row{gap:8px;padding:11px 1px}.activity-kind{width:29px;height:29px}.activity-row time{font-size:11px}.activity-summary b,.activity-summary span{font-size:12px}.activity-copy p{font-size:12px}}
@media(max-width:600px){.activity-holiday-banner{margin:13px 0;padding:14px;gap:10px}.activity-holiday-banner>span{width:37px;height:37px;border-radius:10px;font-size:19px}.activity-holiday-banner b{font-size:14.5px}.activity-holiday-banner small{font-size:12px}}

/* Clear, scannable teacher account and class assignment cards. */
.teacher-account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,370px),1fr));gap:16px;align-items:stretch}
.teacher-account-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid #e4e9f2;border-radius:10px;background:#fff;box-shadow:0 7px 23px rgba(31,47,82,.045)}
.teacher-account-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 18px;border-bottom:1px solid #edf0f5;background:linear-gradient(110deg,#fff,var(--brand-faint,#f8faff))}
.teacher-identity{display:flex;align-items:center;gap:12px;min-width:0}
.teacher-avatar{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:10px;background:linear-gradient(145deg,var(--brand-main,#315cf5),var(--brand-light,#7188ff));color:#fff;font:800 14.5px Manrope;box-shadow:0 5px 12px color-mix(in srgb,var(--brand-main,#315cf5) 14.9%,transparent)}
.teacher-identity-copy{min-width:0}
.teacher-account-label{color:#8a96aa;font-size:11px;font-weight:800;letter-spacing:1px}
.teacher-identity-copy h3{overflow-wrap:anywhere;margin:4px 0 0;color:#25334d;font:800 15px/1.3 Manrope}
.teacher-assignment-count{flex:none;padding:6px 9px;border:1px solid var(--brand-soft,#dce5ff);border-radius:999px;background:var(--brand-faint,#eff3ff);color:var(--brand-main,#3f5fd1);font-size:12px;font-weight:800}
.teacher-contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:9px;padding:14px 17px 4px}
.teacher-contact-item{display:flex;align-items:center;gap:9px;min-width:0;padding:9px;border:1px solid #edf0f5;border-radius:10px;background:var(--brand-faint,#fbfcfe)}
.teacher-contact-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--brand-soft,#edf1ff);color:var(--brand-main,#4d67d2);font-size:14.5px}
.teacher-contact-icon.whatsapp-icon{background:#e8f7f0;color:#19885d}
.teacher-contact-item>span:last-child{display:block;min-width:0}
.teacher-contact-item small,.teacher-contact-item b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teacher-contact-item small{margin-bottom:3px;color:#8a96a9;font-size:11px;font-weight:700}
.teacher-contact-item b{color:#49566d;font-size:12px;font-weight:700}
.teacher-classes-section{flex:1;padding:13px 17px 15px}
.teacher-classes-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.teacher-classes-heading b{color:#35425a;font:800 12.5px Manrope}
.teacher-classes-heading span{color:#8792a5;font-size:12px}
.teacher-class-list{display:flex;flex-wrap:wrap;gap:7px}
.teacher-class-chip{display:flex;align-items:center;gap:8px;min-width:calc(50% - 4px);max-width:100%;padding:7px 9px;border:1px solid #e7ebf2;border-radius:10px;background:#fff}
.teacher-class-mark{display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:8px;background:var(--brand-soft,#f0f3fb);color:#566682;font:800 11px Manrope}
.teacher-class-chip>span:last-child{display:block;min-width:0}
.teacher-class-chip b,.teacher-class-chip small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teacher-class-chip b{color:#3d4a62;font-size:12px}
.teacher-class-chip small{margin-top:3px;color:#8590a3;font-size:11px}
.teacher-no-classes{padding:11px;border:1px dashed #e1e6ef;border-radius:9px;color:#939daf;font-size:12px;text-align:center}
.teacher-card-actions{display:flex;align-items:center;gap:7px;padding:11px 17px;border-top:1px solid #edf0f5;background:var(--brand-faint,#fbfcfe)}
.teacher-card-actions .open-tutor{margin-right:auto}
.teacher-card-actions .btn{box-shadow:none}
@media(max-width:600px){.teacher-account-grid{grid-template-columns:1fr;gap:12px}.teacher-account-head{padding:14px}.teacher-contact-grid{grid-template-columns:1fr 1fr;gap:7px;padding:11px 12px 3px}.teacher-contact-item{gap:7px;padding:7px}.teacher-contact-icon{width:25px;height:25px}.teacher-contact-item b{font-size:11px}.teacher-classes-section{padding:11px 12px 13px}.teacher-class-chip{min-width:calc(50% - 4px);padding:6px}.teacher-card-actions{padding:10px 12px}.teacher-card-actions .btn{padding:8px 9px;font-size:12px}}

/* Make the student work image large enough to read on desktop and phones. */
.work-reader-modal{width:min(1460px,99vw);max-height:98vh}
.reader-image-pane{min-height:0}
.reader-image-pane .pane-body{padding:8px;overflow:auto}
.reader-image-gallery{grid-template-columns:40px minmax(0,1fr) 40px;min-height:min(78vh,820px)}
.reader-image-gallery .source-image{width:100%;height:auto;max-width:100%;max-height:78vh;object-fit:contain}
.photo-apply-edits{background:#168565;box-shadow:0 5px 12px #1685652b}
.photo-apply-edits:hover{background:#116d52}
.photo-apply-edits[hidden]{display:none}
.photo-scan-result{display:grid;gap:8px;padding:12px;border:1px solid #cde9de;border-radius:10px;background:#f4fbf8}
.photo-scan-result[hidden]{display:none}
.photo-scan-result-heading{font-size:12.5px;font-weight:800;color:#257558}
.photo-scan-result-image{display:block;width:auto;max-width:100%;max-height:56vh;justify-self:center;border-radius:8px;background:#202a3a;object-fit:contain}
@media(max-width:720px){.work-reader-modal{width:100%;max-height:100dvh;border-radius:10px}.reader-image-gallery{grid-template-columns:30px minmax(0,1fr) 30px;gap:4px;min-height:78vh}.reader-image-gallery .source-image{width:100%;max-height:78vh}.reader-image-gallery .icon-btn{width:30px;height:30px}.reader-image-pane .pane-body{padding:4px}.photo-scan-result-image{max-height:48vh}}

/* Keep the classwork image in the wide center track even when gallery arrows are hidden. */
.reader-image-gallery .source-image{grid-column:2;justify-self:stretch;width:100%;}
.calendar-panel{padding:20px}
.calendar-toolbar{display:grid;grid-template-columns:42px 1fr 42px minmax(130px,190px);align-items:center;gap:10px;margin-bottom:16px}
.calendar-toolbar h2{text-align:center;margin:0;font:800 18px Manrope}
.calendar-toolbar input{width:100%;padding:9px 10px;border:1px solid #dfe4ed;border-radius:9px;background:#fff;color:var(--ink);font-size:13.5px}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.calendar-weekdays{margin-bottom:7px}
.calendar-weekdays span{text-align:center;padding:8px 3px;color:#7d889c;font-size:12px;font-weight:800;text-transform:uppercase}
.calendar-day,.calendar-blank{min-height:72px;border-radius:10px}
.calendar-day{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border:1px solid #e7ebf2;background:#fff;color:var(--ink);text-align:left}
.calendar-day:hover{border-color:var(--brand-light,#9babff);background:var(--brand-faint,#f8f9ff)}
.calendar-day b{font:700 14.5px Manrope}
.calendar-day small{font-size:11px;color:#8994a7}
.calendar-day.is-weekend{background:#f7f8fb;color:#8792a4}
.calendar-day.has-holiday{border-color:#f1c3b8;background:#fff3ef;color:#9c4936}
.calendar-day.has-holiday small{color:#a84d39;font-weight:700}
.calendar-day.is-today{box-shadow:inset 0 0 0 1.5px var(--blue)}
.calendar-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;color:#748097;font-size:12px}
.calendar-legend span{display:flex;align-items:center;gap:6px}
.calendar-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;background:#fff3ef;border:1px solid #f1c3b8}
.calendar-legend .calendar-legend-weekend{background:#f7f8fb;border-color:#e7ebf2}
.calendar-holiday-form{display:grid;grid-template-columns:1fr 1.5fr auto;align-items:end;gap:12px}
.calendar-events-panel{margin-top:18px}
.calendar-event-list{display:grid;gap:8px}
.calendar-event-row{display:grid;grid-template-columns:minmax(110px,160px) 1fr auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13.5px}
.calendar-event-date{color:var(--muted);font-size:12.5px}
.calendar-no-events{padding:16px;text-align:center;color:var(--muted);background:var(--brand-faint,#fafbfe);border:1px dashed #d4dbea;border-radius:10px;font-size:13.5px}
@media(max-width:650px){.calendar-panel{padding:12px}.calendar-toolbar{grid-template-columns:36px 1fr 36px;gap:6px}.calendar-toolbar h2{font-size:15px}.calendar-toolbar input{grid-column:1/-1}.calendar-weekdays,.calendar-grid{gap:4px}.calendar-weekdays span{font-size:8px;padding:6px 0}.calendar-day,.calendar-blank{min-height:52px}.calendar-day{padding:6px 5px;gap:3px;border-radius:8px}.calendar-day b{font-size:12.5px}.calendar-day small{font-size:7px;line-height:1.1}.calendar-holiday-form{grid-template-columns:1fr}.calendar-event-row{grid-template-columns:1fr auto;gap:6px}.calendar-event-row b{grid-column:1}.calendar-event-date{grid-column:1}.calendar-event-row .btn{grid-column:2;grid-row:1/3}}

/* Student work date picker: mark dates that have a post for the selected subject. */
.student-date-select{position:relative;display:grid;gap:5px;justify-items:end;z-index:4}
.student-date-select>label{font-size:12px;font-weight:700;color:#7c879a}
.student-date-trigger{display:flex;align-items:center;gap:10px;min-width:170px;justify-content:space-between;padding:9px 12px;border:1px solid #dfe5ef;border-radius:10px;background:#fff;color:#24324b;font:700 13.5px 'DM Sans',sans-serif;box-shadow:0 3px 10px rgba(37,55,91,.05);cursor:pointer}
.student-date-trigger:hover,.student-date-trigger[aria-expanded="true"]{border-color:var(--brand-light,#9aabff);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-main,#4865ee) 9.0%,transparent)}
.student-date-calendar{position:absolute;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 32px));padding:12px;border:1px solid #e0e6f0;border-radius:10px;background:#fff;box-shadow:0 16px 42px rgba(29,43,75,.18)}
.student-date-calendar[hidden]{display:none}
.student-date-calendar-head{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:6px;margin-bottom:10px}
.student-date-calendar-head b{text-align:center;font:800 14.5px Manrope;color:#24324b}
.student-date-calendar-head button{height:32px;border:1px solid #e5e9f1;border-radius:8px;background:#f8f9fc;color:#40516f;font-size:20px;line-height:1;cursor:pointer}
.student-date-calendar-weekdays,.student-date-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.student-date-calendar-weekdays{margin-bottom:4px}
.student-date-calendar-weekdays span{text-align:center;padding:4px 0;color:#8792a5;font-size:11px;font-weight:800}
.student-date-empty,.student-date-day{min-width:0;aspect-ratio:1}
.student-date-day{position:relative;display:grid;place-items:center;border:1px solid transparent;border-radius:9px;background:#fff;color:#34425b;font:600 12.5px 'DM Sans',sans-serif;cursor:pointer}
.student-date-day:hover{border-color:var(--brand-light,#b7c4ff);background:var(--brand-faint,#f4f6ff)}
.student-date-day.has-work{background:#eaf8f1;color:#19724e;font-weight:800}
.student-date-day.has-work i{position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:#21a66d}
.student-date-day.is-selected{border-color:var(--brand-main,#4969ed);background:var(--brand-main,#4969ed);color:#fff}
.student-date-day.is-selected.has-work i{background:#fff}
.student-date-day.is-today:not(.is-selected){box-shadow:inset 0 0 0 1px var(--brand-main,#4969ed)}
.student-date-calendar-key{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:9px;border-top:1px solid #edf0f5;color:#6f7b90;font-size:12px}
.student-date-calendar-key i{width:9px;height:9px;border-radius:50%;background:#21a66d}

/* Keep the scanner controls and the persistent image preview side by side on desktop. */
.photo-editor{grid-template-columns:minmax(0,1.55fr) minmax(230px,.85fr);align-items:start;gap:12px}
.photo-editor-tools{display:grid;align-content:start;gap:10px;min-width:0}
.photo-scan-result{position:sticky;top:12px;min-width:0;min-height:260px;align-content:start}
.photo-scan-result-image{width:100%;max-width:100%;max-height:58vh;min-height:180px;object-fit:contain}
.photo-preview-caption{margin:0;color:#68758b;font-size:12px;line-height:1.45}
.photo-scan-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(min-width:1200px){.photo-editor{grid-template-columns:minmax(360px,.88fr) minmax(420px,1.12fr);align-items:stretch;min-height:calc(100vh - 230px);min-height:calc(100dvh - 230px)}.photo-scan-result{position:sticky;top:14px;height:calc(100vh - 230px);height:calc(100dvh - 230px);min-height:470px;max-height:780px;grid-template-rows:auto minmax(0,1fr) auto auto}.photo-scan-result-image{width:100%;height:100%;min-height:0;max-height:none;justify-self:stretch}.photo-editor-tools{grid-template-rows:auto auto minmax(200px,1fr) auto auto;align-content:stretch}.photo-canvas-wrap{max-height:none;min-height:300px}.photo-edit-canvas{max-height:min(58vh,760px);max-height:min(58dvh,760px)}.edit-post-modal{width:min(1480px,100%);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}.edit-post-modal .modal-content{max-height:calc(100vh - 105px);max-height:calc(100dvh - 105px);padding:16px}.edit-post-modal .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.edit-post-modal .field.wide{grid-column:1/-1}}
@media(min-width:761px) and (max-width:1199px){.photo-editor{grid-template-columns:minmax(0,1fr);min-height:0}.photo-editor-tools{grid-row:1}.photo-scan-result{position:static;grid-row:2;height:auto;min-height:0}.photo-scan-result-image{height:auto;min-height:200px;max-height:65vh}.edit-post-modal{width:min(980px,100%)}}
@media(max-width:760px){.photo-editor{grid-template-columns:minmax(0,1fr);align-items:start;min-height:0;max-height:none;overflow:visible}.photo-editor-tools{grid-row:1;overflow:visible}.photo-scan-result{position:static;grid-row:2;min-height:0;height:auto;max-height:none}.photo-scan-result-image{width:100%;min-height:170px;max-height:54vh}.photo-canvas-wrap{max-height:none;min-height:90px;overflow:visible}.photo-edit-canvas{max-height:360px;touch-action:pan-y}.photo-edit-canvas.crop-mode,.photo-edit-canvas.crop-adjusting{touch-action:none}.photo-editor-help{line-height:1.45}.file-drop{overflow:visible;touch-action:pan-y}.edit-post-modal{width:100%;max-height:calc(100dvh - 12px);overflow:hidden}.edit-post-modal .modal-content{min-height:0;max-height:calc(100dvh - 68px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:auto;padding:12px}.edit-post-modal .form-grid{padding-bottom:20px}.student-date-select{justify-items:stretch}.student-date-trigger{min-width:0}}

/* Accessibility polish */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--brand-main,#315cf5);outline-offset:2px}
::selection{background:var(--brand-soft,#d9e1ff);color:#172238}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* School branding */
html.branded .hero{background:linear-gradient(110deg,var(--blue) 0%,var(--blue-light) 100%)}
html.branded .school-brand-mark,html.branded .teacher-avatar{background:linear-gradient(145deg,var(--blue),var(--blue-light))}
html.branded .modern-dropdown-option.is-selected{color:var(--blue);background:var(--blue-soft)}
html.branded .btn:not(.secondary):not(.ghost):not(.danger),html.branded .all-subjects-btn{box-shadow:none!important}
.brand-color-setting{display:flex;align-items:center;gap:10px}.brand-color-setting input[type=color]{width:46px;height:40px;padding:2px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}.brand-color-setting input[name=brand_color]{max-width:120px}
/* Reminder settings */
.reminder-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.reminder-check{display:flex!important;align-items:center;gap:8px;font-weight:500!important;margin:0!important}.reminder-row input[type=time]{width:auto}
/* Current photos in the edit dialog */
.current-photos{display:flex;flex-wrap:wrap;gap:10px}.current-photos a{display:block;width:96px;height:96px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#f4f6fb}.current-photos img{width:100%;height:100%;object-fit:cover;display:block}
/* Reports */
.report-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0}.report-stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px}.report-stat span{display:block;font-size:13.5px;color:var(--muted);font-weight:600}.report-stat b{display:block;font:800 26px Manrope;margin-top:6px;letter-spacing:-.5px}
.report-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.report-controls input{border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.report-table-wrap{overflow-x:auto}.report-table{width:100%;border-collapse:collapse;font-size:15px}.report-table th{text-align:left;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}.report-table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}.report-table td small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.report-rate.good{color:var(--green)}.report-rate.warn{color:#b7791f}.report-rate.bad{color:#c24141}span.report-rate{font-weight:700}
@media (max-width:800px){.report-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Work viewer: image fits its content (no empty bands), compact header actions */
.reader-image-gallery{min-height:0!important;align-items:center}
.reader-image-gallery .source-image{max-height:78vh;height:auto}
.work-reader-modal .modal-header{align-items:flex-start}
.work-reader-modal .modal-actions{flex:none;flex-wrap:nowrap}
.work-reader-modal .modal-actions .btn{white-space:nowrap;padding:9px 12px;line-height:1.2}
@media(max-width:720px){
.work-reader-modal .modal-header>div:first-child{min-width:0;flex:1}
.work-reader-modal .modal-actions{gap:6px}
.work-reader-modal .modal-actions .btn{font-size:13.5px;padding:8px 10px}
/* Student work rows: thumbnail left, text stacked on the right */
.student-date-work .public-work,.public-work{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:start}
.public-work>.thumb{grid-row:1/span 3;width:64px;height:64px;object-fit:cover}
.public-work>.public-work-copy,.public-work>.public-work-type,.public-work>.link-button{grid-column:2}
.public-work-copy h3{overflow-wrap:anywhere}
.public-work>.public-work-type{justify-self:start;white-space:normal}
.public-work>.link-button{justify-self:start;font-size:13.5px}
}

/* Work viewer v2: themed one-row header, swipeable images, notes below, action bar */
.reader-v2{display:flex;flex-direction:column;padding:0;overflow:hidden;width:min(980px,96vw);max-height:96dvh;background:#fff}
.reader-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 18px;background:var(--blue);color:#fff;flex:none}
.reader-title{flex:1;min-width:0;margin:0;font:800 17px Manrope;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-kind{flex:none;background:#fff;color:var(--blue);border-radius:99px;padding:5px 11px;font-size:13.5px;font-weight:800;letter-spacing:.2px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.reader-close{flex:none;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;display:grid;place-items:center}
.reader-close:hover{background:rgba(255,255,255,.26)}
.reader-body{flex:1;min-height:0;overflow-y:auto;padding:10px 12px 14px}
.reader-stage{position:relative}
.reader-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:10px;background:#f4f6fb;outline:none}
.reader-track::-webkit-scrollbar{display:none}
.reader-slide{flex:0 0 100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.reader-slide img{display:block;max-width:100%;width:auto;height:auto;max-height:calc(96dvh - 210px);object-fit:contain}
.reader-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-size:24px;line-height:1;box-shadow:0 4px 14px rgba(20,30,50,.18);display:grid;place-items:center}
.reader-nav.prev{left:8px}.reader-nav.next{right:8px}.reader-nav:disabled{opacity:0;pointer-events:none}
.reader-dots{display:flex;justify-content:center;gap:6px;margin:10px 0 2px}.reader-dots span{width:7px;height:7px;border-radius:99px;background:#d3d9e6;transition:width .2s,background .2s}.reader-dots span.active{width:20px;background:var(--blue)}
.reader-count{text-align:center;color:var(--muted);font-size:13.5px;margin-top:4px}
.reader-meta{color:var(--muted);font-size:14.5px;margin:12px 4px 0}.reader-meta b{color:var(--ink)}
.reader-notes{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe}
.reader-notes summary{cursor:pointer;list-style:none;padding:12px 14px;font:700 15px Manrope;display:flex;justify-content:space-between;align-items:center}
.reader-notes summary::-webkit-details-marker{display:none}
.reader-notes summary::after{content:'＋';color:var(--blue);font-weight:800}.reader-notes[open] summary::after{content:'−'}
.reader-notes p{margin:0;padding:0 14px 14px;white-space:pre-wrap;line-height:1.55}
.reader-actions{flex:none;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.reader-action{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:700}
.reader-action span{font-size:18px;line-height:1;color:var(--blue)}
.reader-action:hover{border-color:var(--blue);background:var(--blue-soft)}
.reader-action:disabled{opacity:.6}
@media(max-width:720px){
.reader-backdrop{padding:0!important;align-items:stretch}
.reader-v2{width:100%;max-height:100dvh;height:100dvh;border-radius:0}
.reader-head{padding:10px 10px 10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
.reader-title{font-size:15px}
.reader-body{padding:8px 8px 12px}
.reader-slide img{max-height:calc(100dvh - 230px)}
.reader-nav{display:none}
.reader-action{font-size:12.5px}
}

/* School-branded login */
.auth-aside .login-school-brand{position:relative;z-index:1;padding:0 0 8px}
.auth-aside .login-school-brand .brand-name{color:#fff;font-size:22px}
.auth-aside .login-school-brand .brand-caption{color:rgba(255,255,255,.85);font-size:14.5px}
.auth-aside .login-school-brand .school-brand-logo{width:64px;height:64px;border-radius:10px;background:#fff;object-fit:contain;padding:6px}
.auth-aside .login-school-brand .school-brand-mark{width:64px;height:64px;border-radius:10px;background:rgba(255,255,255,.18);font-size:22px}
.auth-form-brand{display:none;margin-bottom:18px}
.auth-form-brand .brand{padding:0}
.auth-form-brand .school-brand-logo{width:52px;height:52px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:4px}
.auth-form-brand .school-brand-mark{width:52px;height:52px;border-radius:10px;font-size:18px}
@media(max-width:720px){.auth-form-brand{display:block}}
.login-links{display:grid;gap:8px}.login-link-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px;align-items:center}.login-link-row span{font-size:14.5px;font-weight:600;color:var(--muted)}.login-link-row input{font-size:13.5px;color:var(--muted)}
@media(max-width:600px){.login-link-row{grid-template-columns:1fr auto}.login-link-row span{grid-column:1/-1}}
.address-input{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}.address-input span{display:flex;align-items:center;padding:0 8px 0 11px;background:#f7f8fb;color:var(--muted);font-size:13.5px;white-space:nowrap;max-width:55%;overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--line)}.address-input input{border:0!important;box-shadow:none!important;flex:1;min-width:0}
.school-address-line{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;color:var(--blue)}

/* Branded loading screen and the school-link notice */
.loading{background:var(--brand-faint,var(--bg))}
.school-loading .loading-logo{width:84px;height:84px;object-fit:contain;border-radius:10px;background:#fff;padding:8px;box-shadow:0 10px 30px color-mix(in srgb,var(--blue) 25%,transparent);animation:loading-pulse 1.6s ease-in-out infinite}
.school-loading .loading-initials{width:72px;height:72px;border-radius:10px;font-size:26px;background:var(--blue);box-shadow:0 10px 30px color-mix(in srgb,var(--blue) 30%,transparent);animation:loading-pulse 1.6s ease-in-out infinite}
.loading-school{font:800 19px Manrope;color:var(--ink);letter-spacing:-.3px;text-align:center;padding:0 16px}
@keyframes loading-pulse{50%{transform:scale(.94);opacity:.85}}
.link-notice{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.link-notice-card{max-width:480px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px;box-shadow:var(--shadow)}
.link-notice-card .brand{padding:0 0 18px}.link-notice-card h1{font:800 24px Manrope;letter-spacing:-.6px;margin:0 0 10px}.link-notice-card p{color:var(--muted);line-height:1.6;margin:0 0 10px}.link-notice-card b{color:var(--ink);word-break:break-all}

/* Public home page */
.landing{min-height:100vh;background:#f6f8fd;color:var(--ink);position:relative}
.landing-hero{position:relative;overflow:hidden;background-image:var(--doodle);background-size:250px 250px}
.landing-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 28% 45%,rgba(246,248,253,.9),rgba(246,248,253,.35) 62%);pointer-events:none}
.landing-hero>*{position:relative}
#school-login-help{background-image:var(--words);background-size:520px 340px;border-top:1px solid var(--line)}
.landing>*{position:relative}
.landing-wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.landing-nav{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.landing-nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}.landing-nav .brand{padding:0}
.landing-hero{padding:64px 0 56px}
.landing-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.landing-kicker{display:inline-block;background:#fff;border:1px solid #dfe6fb;color:var(--blue);font-weight:700;font-size:13.5px;letter-spacing:.4px;padding:7px 12px;border-radius:99px;box-shadow:0 4px 14px rgba(49,92,245,.08)}
.landing-hero h1{font:800 clamp(34px,5vw,56px)/1.06 Manrope;letter-spacing:-2px;margin:18px 0 16px}
.landing-hero p{font-size:18px;line-height:1.65;color:#4f5c74;max-width:560px;margin:0}
.landing-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.landing-cta .btn{padding:14px 20px;font-size:15px;text-decoration:none}
.landing-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;color:#5b667a;font-size:14.5px;font-weight:600}
.landing-mock{position:relative;display:flex;justify-content:center}
.mock-phone{width:290px;background:#fff;border-radius:10px;border:10px solid #172238;padding:16px 14px 22px;box-shadow:0 30px 70px rgba(23,34,56,.22);transform:rotate(3deg)}
.mock-head{display:flex;align-items:center;gap:8px;font:800 15px Manrope;margin:6px 4px 14px}.mock-dot{width:10px;height:10px;border-radius:50%;background:var(--blue)}
.mock-card{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:9px}.mock-card b{display:block;font-size:14.5px}.mock-card small{color:var(--muted);font-size:12.5px}
.mock-thumb{width:44px;height:44px;border-radius:10px;flex:none;background:repeating-linear-gradient(0deg,#fdf6dc 0 6px,#e9e2c4 6px 7px)}.mock-thumb.alt{background:repeating-linear-gradient(0deg,#eef3ff 0 6px,#d5def7 6px 7px)}.mock-thumb.alt2{background:repeating-linear-gradient(90deg,#f1f8f4 0 6px,#d3eadc 6px 7px)}
.mock-badge{position:absolute;left:-6px;bottom:-18px;background:#fff;border-radius:10px;padding:11px 14px;font-size:14.5px;font-weight:700;box-shadow:0 14px 34px rgba(23,34,56,.14);transform:rotate(-4deg)}
.landing-section{padding:56px 0}
.landing-section h2{font:800 clamp(26px,3.4vw,36px) Manrope;letter-spacing:-1px;margin:0 0 26px;text-align:center}
.landing-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.landing-feature{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:10px;padding:22px;box-shadow:0 10px 30px rgba(31,47,82,.05)}
.landing-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#edf1ff;font-size:22px}
.landing-feature h3{font:800 17px Manrope;margin:14px 0 6px}.landing-feature p{margin:0;color:#5b667a;line-height:1.6;font-size:15px}
.landing-steps-band{background:linear-gradient(120deg,#315cf5,#5c76f8);color:#fff}
.landing-steps-band h2{color:#fff}
.landing-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.landing-step{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:22px}
.landing-step span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#315cf5;font:800 17px Manrope}
.landing-step h3{font:800 18px Manrope;margin:14px 0 6px}.landing-step p{margin:0;opacity:.9;line-height:1.6}
.landing-login-help{background:#fff;border:1px solid var(--line);border-radius:10px;padding:34px;box-shadow:var(--shadow);max-width:760px;text-align:center}
.landing-login-help h2{margin-bottom:12px}.landing-login-help p{color:#5b667a;line-height:1.6}
.landing-login-help code{display:inline-block;margin:6px 0 10px;padding:12px 16px;border-radius:10px;background:#f4f6fb;border:1px dashed #c9d3ee;font:600 15px ui-monospace,Menlo,monospace;word-break:break-all}.landing-login-help code b{color:var(--blue)}
.landing-footer{padding:30px 0 40px;border-top:1px solid var(--line);background:rgba(255,255,255,.8)}
.landing-footer .landing-wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14.5px}.landing-footer .brand{padding:0}
html{scroll-behavior:smooth}
@media(max-width:900px){.landing-hero-grid{grid-template-columns:1fr}.landing-mock{margin-top:10px}.landing-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.landing-hero{padding:38px 0 36px}.landing-hero p{font-size:16px}.landing-features,.landing-steps{grid-template-columns:1fr}.landing-section{padding:40px 0}.landing-login-help{padding:24px 18px}.mock-phone{width:250px}.mock-badge{left:4px}.landing-cta .btn{flex:1;text-align:center}}

.photo-scan-look{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--muted)}.photo-scan-look select{border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-size:14.5px;background:#fff;color:var(--ink)}

/* Version 48 */
.section-actions{display:flex;gap:8px;flex-wrap:wrap}
.sub-badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:99px;font-size:12.5px;font-weight:700;vertical-align:middle}.sub-badge.ok{background:#eaf8f1;color:#188565}.sub-badge.warn{background:#fff4dc;color:#8a5a00}.sub-badge.bad{background:#fff0f0;color:#b34747}
.school-stats-line{font-size:13.5px}
.owner-stats{margin-top:0}
.sub-banner{border-radius:10px;padding:12px 16px;margin-bottom:16px;font-weight:600;font-size:15px}.sub-banner.warn{background:#fff4dc;color:#704d00;border:1px solid #f2e2bc}.sub-banner.bad{background:#fff0f0;color:#9b2c2c;border:1px solid #f1c3b8}
.forgot-password,.back-to-login{display:block;margin:12px auto 0;font-size:14.5px}
.small-modal{width:min(560px,96vw)}
.form-grid.single{grid-template-columns:1fr}
.import-help p{margin:0 0 10px;color:var(--muted);line-height:1.55}
.import-columns{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 10px;display:block;overflow-x:auto}.import-columns th,.import-columns td{border:1px solid var(--line);padding:6px 8px;text-align:left;white-space:nowrap}.import-columns th{background:#f7f8fb}
.import-summary{font-weight:700;margin:14px 0 8px}.import-summary.ok{color:var(--green)}
.import-table{max-height:260px;overflow:auto;margin-bottom:12px;border:1px solid var(--line);border-radius:10px}
#import-preview .error ul{margin:8px 0 0;padding-left:18px;font-weight:400}
.reader-delete span{color:#c24141!important}
#change-password{display:block;margin-bottom:8px}

/* Edit dialog: photo order */
.photo-order{display:flex;flex-wrap:wrap;gap:10px}
.photo-tile{position:relative;width:112px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f4f6fb}
.photo-tile.cover{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 25%,transparent)}
.photo-tile img{display:block;width:100%;height:112px;object-fit:cover;background:#eef1f6}
.photo-tile-num{position:absolute;left:6px;top:6px;background:rgba(23,34,56,.78);color:#fff;font-size:12px;font-weight:700;padding:2px 7px;border-radius:99px}
.photo-tile.cover .photo-tile-num{background:var(--blue)}
.photo-tile-new{position:absolute;right:6px;top:6px;background:#188565;color:#fff;font-size:12px;font-weight:700;padding:2px 7px;border-radius:99px}
.photo-tile-actions{display:flex;border-top:1px solid var(--line);background:#fff}
.photo-tile-actions button{flex:1;border:0;background:none;padding:7px 0;font-size:16px;line-height:1;color:var(--ink)}
.photo-tile-actions button+button{border-left:1px solid var(--line)}
.photo-tile-actions button[data-remove]{color:#c24141;font-weight:700}
.photo-tile-actions button:disabled{opacity:.3}
.photo-tile-actions button:not(:disabled):hover{background:var(--blue-soft)}
.photo-order-empty{padding:14px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:14.5px}
.photo-order-count.over{color:#c24141;font-weight:700}

/* Teacher notes: speech typing + voice note */
.notes-tools{display:grid;gap:10px;margin-top:8px}
.dictate-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dictate-lang{border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-size:14.5px;background:#fff}
.dictate-status{font-size:13.5px;color:var(--muted);flex-basis:100%}
.dictate-btn.listening{background:#fff0f0;color:#b34747;border-color:#f1c3b8;animation:loading-pulse 1.4s ease-in-out infinite}
.voice-note{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;background:#fbfcfe}
.voice-note-head{font-size:14.5px;margin-bottom:8px}
.voice-note audio{width:100%;max-width:420px;height:40px;display:block}
.voice-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:6px 0 2px}
.voice-recording{display:flex;align-items:center;gap:10px}
.rec-dot{width:11px;height:11px;border-radius:50%;background:#e03b3b;display:inline-block;animation:loading-pulse 1s ease-in-out infinite}.rec-dot.static{animation:none;margin-right:4px}
.rec-time{font:700 16px ui-monospace,Menlo,monospace}
.reader-voice{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--blue-soft)}
.reader-voice span{font:700 15px Manrope}.reader-voice audio{width:100%;height:40px}
.dictate-row .modern-dropdown{width:auto;min-width:180px;flex:0 0 auto}.dictate-row .modern-dropdown-trigger{padding-top:8px;padding-bottom:8px}
.notes-tools .dictate-row .modern-dropdown{width:auto!important;min-width:190px;max-width:240px;flex:0 0 auto!important}

/* Mobile fixes: date fields, school card, post actions */
input[type=date],input[type=time],input[type=month]{min-width:0;max-width:100%;width:100%;display:block;-webkit-appearance:none;appearance:none;box-sizing:border-box}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0}
.field{min-width:0}
@media(max-width:720px){
.tutor-overview-stats .stat-school{grid-column:1/-1}
.tutor-overview-stats .stat-school b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
.tutor-post-library .work-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px}
.tutor-post-library .work-row .work-row-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tutor-post-library .work-row .work-row-actions .btn{width:100%;text-align:center}
}

/* iOS: empty date fields keep the same height as other inputs */
.field input[type=date],.field input[type=time],.field input[type=month]{height:48px;min-height:48px;line-height:22px}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{min-height:1.4em;line-height:1.4em}
/* Sign out in the phone bottom bar only */
.nav-signout{display:none}
@media(max-width:720px){.side nav .nav-signout{display:flex;color:#b34747}.side nav .nav-signout .nav-icon{color:#b34747}}
/* Phones: tutors don't need the page title or the school card (the header shows the school) */
@media(max-width:720px){.shell.role-teacher .topbar{display:none}.shell.role-teacher .tutor-overview-stats .stat-school{display:none}.side nav .nav-signout,.side nav .nav-signout .nav-icon{color:inherit}}

/* Class PIN */
.btn.pin-on{background:var(--blue-soft);color:var(--blue);box-shadow:none}
.pin-toggle{display:flex;align-items:center;gap:10px;font-weight:600}
.pin-input-admin{letter-spacing:.5em;font:700 22px ui-monospace,Menlo,monospace!important;max-width:180px}
.pin-card{text-align:center}.pin-card .brand{justify-content:center}.pin-lock{font-size:34px;margin:6px 0 2px}
.pin-boxes{display:flex;justify-content:center;gap:10px;margin:18px 0}
.pin-box{width:54px;height:62px;text-align:center;font:800 26px ui-monospace,Menlo,monospace;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.pin-box:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
/* Views */
.view-count{white-space:nowrap;color:var(--blue);font-weight:600}
.top-posts{margin-top:18px}.top-post-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.top-post-row small{display:block;color:var(--muted);font-size:13.5px}.top-post-row>div{flex:1;min-width:0}
.top-rank{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:800;flex:none}.top-views{font-weight:700;white-space:nowrap}

/* Subscriptions: Expiring Soon, banners, renew popup */
.nav-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:99px;background:#e03b3b;color:#fff;font-size:12.5px;font-weight:800;line-height:1}
.sub-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sub-banner-actions{display:flex;align-items:center;gap:8px}
.sub-banner .renew-wa,.renew-actions .renew-wa{background:#1fa855;color:#fff;text-decoration:none;box-shadow:none}
.sub-banner-close{font-size:16px;color:inherit;opacity:.7}
.renew-modal{text-align:center}.renew-icon{font-size:38px;margin-bottom:6px}.renew-modal p{color:var(--muted);line-height:1.6}
.renew-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}.renew-actions .btn{text-decoration:none}
.owner-wa-form{display:flex;gap:8px;flex-wrap:wrap}.owner-wa-form input{flex:1;min-width:180px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px}
.expiring-group{margin-top:16px}.expiring-group.expiring{border-left:4px solid #f0b429}.expiring-group.grace{border-left:4px solid #e8833a}.expiring-group.readonly{border-left:4px solid #e03b3b}
.expiring-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.expiring-main{display:flex;flex-direction:column;gap:2px;min-width:0}.expiring-main small{color:var(--muted);font-size:13.5px}
.expiring-actions{display:flex;gap:8px;flex-wrap:wrap}.expiring-actions .wa-remind{background:#1fa855;color:#fff;text-decoration:none;box-shadow:none}

/* ClassWork.pk home page */
.lp-ico{width:22px;height:22px;flex:none}
.lp-links{display:flex;gap:22px}.lp-links a{color:#4f5c74;text-decoration:none;font-size:15px;font-weight:600}.lp-links a:hover{color:var(--blue)}
.lp-nav-cta{display:flex;gap:8px}.lp-nav-cta .btn{text-decoration:none}
.lp-wa,.lp-btn-main{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.lp-hero h1{font:800 clamp(36px,5.2vw,60px)/1.04 Manrope;letter-spacing:-2.2px}
.lp-accent{background:linear-gradient(90deg,#315cf5,#7b5cf5);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-ticks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;color:#4f5c74;font-size:14.5px;font-weight:600}.lp-ticks li{display:flex;align-items:center;gap:6px}.lp-ticks .lp-ico{width:16px;height:16px;color:#188565}
.landing-cta .btn{display:inline-flex;align-items:center;gap:8px}
.lp-chip{position:absolute;display:flex;align-items:center;gap:6px;background:#fff;border-radius:10px;padding:9px 12px;font-size:13.5px;font-weight:700;box-shadow:0 14px 34px rgba(23,34,56,.14);white-space:nowrap}.lp-chip .lp-ico{width:16px;height:16px;color:#188565}
.lp-chip-a{top:6%;right:-4%;transform:rotate(3deg)}.lp-chip-b{bottom:18%;left:-8%;transform:rotate(-3deg)}.lp-chip-c{bottom:-2%;right:4%;transform:rotate(2deg)}.lp-chip-c .lp-ico{color:var(--blue)}
.landing-mock .mock-badge{display:none}
.lp-facts{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-facts-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding-top:26px;padding-bottom:26px}.lp-facts-grid div{display:flex;flex-direction:column;gap:4px}.lp-facts-grid div+div{border-left:1px solid var(--line)}
.lp-facts-grid b{font:800 30px Manrope;letter-spacing:-1px;color:var(--ink)}.lp-facts-grid span{font-size:14.5px;color:var(--muted);font-weight:600}
.lp-eyebrow{display:block;text-align:center;color:var(--blue);font-weight:800;font-size:13.5px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:8px}
.lp-audiences{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-audience{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px;box-shadow:0 10px 30px rgba(31,47,82,.05)}
.lp-audience h3{font:800 20px Manrope;margin:14px 0 4px}.lp-audience>p{color:#5b667a;margin:0 0 14px}
.lp-audience ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}.lp-audience li{display:flex;gap:8px;align-items:flex-start;font-size:15px;color:#33415a}.lp-audience li .lp-ico{width:17px;height:17px;color:#188565;margin-top:1px}
.lp-ico-wrap{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:10px;background:#edf1ff;color:#315cf5}.lp-ico-wrap .lp-ico{width:26px;height:26px}.lp-ico-wrap.small{width:44px;height:44px;border-radius:10px}.lp-ico-wrap.small .lp-ico{width:22px;height:22px}
.lp-features-band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-features{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
.lp-feature{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:10px;transition:background .15s}.lp-feature:hover{background:#f6f8fd}
.lp-feature h3{font:800 16px Manrope;margin:2px 0 4px}.lp-feature p{margin:0;color:#5b667a;font-size:15px;line-height:1.55}
.lp-faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.lp-faq-wrap .lp-eyebrow{text-align:left}.lp-left{text-align:left!important}.lp-muted{color:#5b667a;line-height:1.6}.lp-muted a{color:var(--blue);font-weight:700}
.lp-faq details{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.lp-faq summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;display:flex;justify-content:space-between;gap:12px}.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:'+';color:var(--blue);font-size:20px;line-height:1}.lp-faq details[open] summary::after{content:'−'}
.lp-faq details p{margin:0;padding:0 18px 16px;color:#5b667a;line-height:1.6}
.lp-cta-band{background:linear-gradient(120deg,#172238,#2c3d6b);color:#fff;padding:44px 0}
.lp-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.lp-cta-inner h2{font:800 clamp(24px,3vw,32px) Manrope;margin:0 0 6px;letter-spacing:-.8px}.lp-cta-inner p{margin:0;opacity:.8}
.lp-btn-light{background:#fff;color:#172238;padding:14px 20px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:none}.lp-btn-light:hover{background:#eef2ff}.lp-btn-light .lp-ico{color:#1fa855}
.lp-login-band .landing-login-help .lp-ico-wrap{margin-bottom:8px}
.lp-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:900px){.lp-links{display:none}.lp-audiences{grid-template-columns:1fr}.lp-features{grid-template-columns:1fr}.lp-faq-wrap{grid-template-columns:1fr;gap:10px}.lp-chip-a{right:2%}.lp-chip-b{left:0}}
@media(max-width:620px){.lp-facts-grid{grid-template-columns:repeat(2,1fr);row-gap:18px}.lp-facts-grid div:nth-child(3){border-left:0}.lp-nav-cta .btn.secondary{display:none}.lp-cta-inner{flex-direction:column;align-items:flex-start}.lp-hero h1{letter-spacing:-1.4px}}

/* Free trial section */
.lp-trial{position:relative;padding:70px 0 36px;background:linear-gradient(135deg,#eef2ff 0%,#f6efff 55%,#fff4ea 100%);overflow:hidden}
.lp-trial::before{content:'';position:absolute;inset:0;background-image:var(--words);background-size:520px 340px;opacity:.7;pointer-events:none}
.lp-trial>*{position:relative}
.lp-trial-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.lp-trial-badge{display:inline-block;background:linear-gradient(90deg,#ff7a59,#f5487f);color:#fff;font-weight:800;font-size:14.5px;padding:7px 14px;border-radius:99px;box-shadow:0 8px 20px rgba(245,72,127,.3);animation:lp-bob 2.6s ease-in-out infinite}
@keyframes lp-bob{50%{transform:translateY(-4px)}}
.lp-trial-pitch h2{font:800 clamp(30px,4.2vw,46px)/1.08 Manrope;letter-spacing:-1.6px;margin:16px 0 12px;text-align:left}
.lp-trial-pitch>p{font-size:17px;color:#4f5c74;line-height:1.6;margin:0 0 18px}
.lp-trial-pitch ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}.lp-trial-pitch li{display:flex;gap:10px;align-items:center;font-weight:600;color:#33415a}
.lp-trial-pitch li .lp-ico{width:20px;height:20px;color:#fff;background:#188565;border-radius:50%;padding:3px}
.lp-trial-note{font-size:14.5px;color:#5b667a;background:rgba(255,255,255,.7);border:1px dashed #c9d3ee;border-radius:10px;padding:10px 12px}
.lp-trial-form{background:#fff;border-radius:10px;padding:28px;box-shadow:0 30px 70px rgba(49,92,245,.18),0 2px 0 rgba(255,255,255,.8) inset;border:1px solid #e3e8fb}
.lp-trial-form h3{font:800 22px Manrope;margin:0 0 16px}
.lp-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}.lp-field label{font-size:13.5px;font-weight:700;color:#4f5c74}
.lp-field input{border:1px solid #dfe4ed;border-radius:10px;padding:12px 13px;font-size:15px;min-height:46px}.lp-field input:focus{outline:none;border-color:#849aff;box-shadow:0 0 0 3px rgba(49,92,245,.1)}
.lp-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lp-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.lp-trial-form .lp-btn-main{width:100%;justify-content:center;padding:15px;font-size:15px;margin-top:4px;background:linear-gradient(90deg,#315cf5,#7b5cf5);box-shadow:0 12px 26px rgba(80,90,245,.35)}
.lp-trial-form .error{margin-top:10px}
.lp-terms{font-size:12.5px;color:var(--muted);text-align:center;margin:10px 0 0}
.lp-trial-done{text-align:center}.lp-done-icon{font-size:44px}.lp-trial-done p{color:#5b667a}
.lp-link-box{text-align:left;background:#f6f8fd;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}.lp-link-box small{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:3px}.lp-link-box code{font-size:14.5px;word-break:break-all}
.lp-login-line{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:30px;color:#4f5c74;font-size:15px;flex-wrap:wrap;text-align:center}.lp-login-line code{background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:14.5px}.lp-login-line code b{color:var(--blue)}.lp-login-line .lp-ico{color:var(--blue)}
.lp-trial-cta{background:linear-gradient(90deg,#315cf5,#7b5cf5)!important;color:#fff!important;text-decoration:none;box-shadow:0 10px 22px rgba(80,90,245,.3)}
.lp-nocard{margin:12px 0 0!important;font-size:14.5px!important;color:#5b667a!important}
.lp-demo{display:inline-flex;align-items:center;gap:8px;text-decoration:none}.lp-demo .lp-ico{color:#1fa855}
@media(max-width:900px){.lp-trial-grid{grid-template-columns:1fr;gap:26px}}
@media(max-width:520px){.lp-row{grid-template-columns:1fr}.lp-trial-form{padding:22px 18px}}
/* School filters + trial tag */
.school-filters{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.school-filter{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 14px;font-size:14.5px;font-weight:700;color:#4f5c74;cursor:pointer}
.school-filter span{display:inline-block;margin-left:4px;min-width:20px;padding:1px 6px;border-radius:99px;background:#f0f3fb;font-size:12.5px}
.school-filter.active{background:var(--blue);border-color:var(--blue);color:#fff}.school-filter.active span{background:rgba(255,255,255,.25)}
.school-filter:disabled{opacity:.45;cursor:default}
.tag.tag-trial{background:linear-gradient(90deg,#ff7a59,#f5487f);color:#fff}
.school-started{font-size:13.5px}
.trial-banner{background:linear-gradient(90deg,#fff4ea,#fdeef5)!important;border-color:#f6c9b5!important;color:#7a3a1d!important}

/* Pricing cards */
.lp-pricing{background:#fff;border-top:1px solid var(--line)}
.lp-pricing-sub{text-align:center;color:#5b667a;margin:-14px 0 28px}
.lp-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.lp-price{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px;box-shadow:0 10px 30px rgba(31,47,82,.06);transition:transform .2s,box-shadow .2s}
.lp-price:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(31,47,82,.12)}
.lp-price.featured{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#315cf5,#7b5cf5,#f5487f) border-box;box-shadow:0 26px 60px rgba(80,90,245,.22);transform:scale(1.03)}
.lp-price.featured:hover{transform:scale(1.03) translateY(-4px)}
.lp-ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#f5a524,#f5487f);color:#fff;font-weight:800;font-size:13.5px;padding:6px 14px;border-radius:99px;box-shadow:0 8px 18px rgba(245,72,127,.3);white-space:nowrap}
.lp-price-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.lp-price-head h3{font:800 20px Manrope;margin:0}
.lp-price-tags{display:flex;gap:6px;flex-wrap:wrap}
.lp-tag{font-size:12.5px;font-weight:800;padding:4px 9px;border-radius:99px;white-space:nowrap}.lp-tag.green{background:#eaf8f1;color:#188565}.lp-tag.pink{background:linear-gradient(90deg,#ff7a59,#f5487f);color:#fff}.lp-tag.gold{background:#fff4dc;color:#8a5a00}
.lp-price-amount{font:800 34px Manrope;letter-spacing:-1px;margin:18px 0 2px;color:var(--ink)}.lp-price-amount s{font-size:18px;color:#a0a9b8;font-weight:600;margin-right:4px}.lp-price-amount span{font-size:15px;color:var(--muted);font-weight:600;letter-spacing:0}
.lp-price-note{color:#5b667a;font-size:15px;margin:0 0 16px;min-height:2.6em}
.lp-price ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;flex:1}.lp-price li{display:flex;gap:8px;align-items:flex-start;font-size:15px;color:#33415a}.lp-price li .lp-ico{width:17px;height:17px;color:#188565;margin-top:1px}
.lp-price-btn{text-align:center;justify-content:center;text-decoration:none;display:flex;padding:13px}
/* Sign-up form: plan picker + slug */
.lp-plan-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.lp-plan-opt{position:relative;cursor:pointer}.lp-plan-opt input{position:absolute;opacity:0}
.lp-plan-opt span{display:flex;flex-direction:column;gap:2px;border:1.5px solid #dfe4ed;border-radius:10px;padding:10px;text-align:center;transition:.15s}.lp-plan-opt b{font-size:15px}.lp-plan-opt small{font-size:12.5px;color:var(--muted)}
.lp-plan-opt input:checked+span{border-color:#315cf5;background:#eef2ff;box-shadow:0 0 0 3px rgba(49,92,245,.12)}.lp-plan-opt input:focus-visible+span{outline:3px solid #315cf5}
.lp-opt-tag{font-weight:600;color:var(--muted);font-size:12.5px;margin-left:4px}
.lp-slug{display:flex;align-items:stretch;border:1px solid #dfe4ed;border-radius:10px;overflow:hidden}.lp-slug span{display:flex;align-items:center;padding:0 4px 0 12px;background:#f6f8fd;color:var(--muted);font-size:14.5px;white-space:nowrap;max-width:55%;overflow:hidden;text-overflow:ellipsis}.lp-slug input{border:0!important;box-shadow:none!important;flex:1;min-width:0;border-radius:0!important}
.lp-slug-preview{display:grid;gap:3px;margin-top:6px;font-size:13.5px;color:#5b667a}.lp-slug-preview b{font-family:ui-monospace,Menlo,monospace;font-weight:600;color:var(--ink)}.lp-slug-preview i{font-style:normal;color:#315cf5;font-weight:800}
.slug-status{font-weight:700}.slug-status.ok{color:#188565}.slug-status.bad{color:#c24141}
@media(max-width:900px){.lp-prices{grid-template-columns:1fr;max-width:460px;margin:0 auto}.lp-price.featured{transform:none}.lp-price.featured:hover{transform:translateY(-4px)}}
@media(max-width:520px){.lp-plan-pick{grid-template-columns:1fr}}
.pricing-preview{background:#f6f8fd;border:1px dashed #c9d3ee;border-radius:10px;padding:12px 14px;font-size:15px}
.request-row.rejected,.request-row.approved{opacity:.65}

/* Approved popup */
.approved-pop{text-align:center}.approved-icon{font-size:44px}.approved-pop h3{font:800 20px Manrope;margin:6px 0}
.approved-plan{margin:0 0 14px}
.approved-links{display:grid;gap:8px;text-align:left;margin-bottom:16px}
.approved-link{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:8px;align-items:center;background:#f6f8fd;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.approved-link small{font-weight:800;color:var(--muted);font-size:13.5px}.approved-link code{font-size:14.5px;word-break:break-all}
.approved-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.notify-wa{background:#1fa855!important;color:#fff!important;text-decoration:none;box-shadow:0 10px 22px rgba(31,168,85,.3)}
.lp-req-tag{font-weight:700;color:#188565;font-size:12.5px;margin-left:4px}

/* Sidebar tabs: always the normal arrow, never the text cursor */
.nav-item,.nav-item *{cursor:default;-webkit-user-select:none;user-select:none}

/* ===== Home page motion ===== */
.lp-hero{isolation:isolate}
.lp-glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-1;pointer-events:none}
.lp-glow.g1{width:420px;height:420px;background:#8fa6ff;top:-120px;left:-80px;animation:lp-drift1 14s ease-in-out infinite}
.lp-glow.g2{width:360px;height:360px;background:#d6a8ff;top:40px;right:-60px;animation:lp-drift2 17s ease-in-out infinite}
.lp-glow.g3{width:300px;height:300px;background:#ffc9a8;bottom:-140px;left:40%;animation:lp-drift1 19s ease-in-out infinite reverse}
@keyframes lp-drift1{50%{translate:60px 40px;scale:1.12}}
@keyframes lp-drift2{50%{translate:-50px 30px;scale:.9}}
.lp-motion .landing-hero{animation:lp-doodle-drift 60s linear infinite}
@keyframes lp-doodle-drift{to{background-position:250px 250px}}
/* rotating headline word */
.lp-rotator{display:inline-block;min-width:7.5em}
.lp-rot-word{display:inline-block;transition:opacity .38s ease,translate .38s ease,filter .38s ease}
.lp-rot-word.out{opacity:0;translate:0 -18px;filter:blur(4px)}
.lp-rot-word.enter{opacity:0;translate:0 18px;filter:blur(4px);transition:none}
/* phone: float + tilt to pointer, chips pop in */
.lp-motion .mock-phone{transform:perspective(900px) rotateY(var(--tx,0deg)) rotateX(var(--ty,0deg)) rotate(3deg);transition:transform .25s ease-out;animation:lp-float 6s ease-in-out infinite}
@keyframes lp-float{50%{translate:0 -12px}}
.lp-motion .lp-chip{animation:lp-pop .6s cubic-bezier(.2,1.4,.4,1) both,lp-bob2 4s ease-in-out infinite}
.lp-motion .lp-chip-a{animation-delay:.6s,1.2s}.lp-motion .lp-chip-b{animation-delay:1s,1.6s}.lp-motion .lp-chip-c{animation-delay:1.4s,2s}
@keyframes lp-pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes lp-bob2{50%{translate:0 -6px}}
/* mock cards slide in */
.lp-motion .mock-card{animation:lp-slide-in .6s ease both}.lp-motion .mock-card:nth-child(2){animation-delay:.25s}.lp-motion .mock-card:nth-child(3){animation-delay:.45s}.lp-motion .mock-card:nth-child(4){animation-delay:.65s}
@keyframes lp-slide-in{from{opacity:0;translate:24px 0}}
/* scroll reveal */
.lp-motion .reveal{opacity:0;translate:0 26px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.lp-motion .reveal.in{opacity:1;translate:0 0}
/* button shine */
.lp-btn-main{position:relative;overflow:hidden}
.lp-motion .lp-btn-main::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:lp-shine 3.6s ease-in-out infinite}
@keyframes lp-shine{0%,60%{left:-60%}100%{left:130%}}
/* feature hover: icon wiggle, card lift */
.lp-feature:hover .lp-ico-wrap,.lp-audience:hover .lp-ico-wrap{animation:lp-wiggle .5s ease}
@keyframes lp-wiggle{25%{rotate:-10deg}50%{rotate:8deg}75%{rotate:-4deg}}
.lp-audience{transition:transform .2s,box-shadow .2s}.lp-audience:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(31,47,82,.12)}
/* trial badge pulse */
.lp-motion .lp-trial-badge{animation:lp-bob 2.6s ease-in-out infinite,lp-pulse 2.6s ease-out infinite}
@keyframes lp-pulse{0%{box-shadow:0 0 0 0 rgba(245,72,127,.45)}70%{box-shadow:0 0 0 14px rgba(245,72,127,0)}100%{box-shadow:0 0 0 0 rgba(245,72,127,0)}}
/* step numbers pop */
.lp-motion .landing-step.in span{animation:lp-pop .5s cubic-bezier(.2,1.4,.4,1) both;animation-delay:inherit}
/* word ticker */
.lp-ticker{overflow:hidden;background:#172238;color:#fff;padding:14px 0;white-space:nowrap}
.lp-ticker-track{display:inline-flex;gap:46px;animation:lp-marquee 32s linear infinite;padding-left:46px}
.lp-ticker span{font:700 15px Manrope;opacity:.9}
@keyframes lp-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.lp-glow,.lp-ticker-track,.mock-phone,.lp-chip{animation:none!important}}

/* Soft white "spray" behind the trial text so it stands out from the word pattern */
.lp-trial-pitch{position:relative;isolation:isolate}
.lp-trial-pitch::before{content:'';position:absolute;inset:-40px -50px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 45% 50%,rgba(255,255,255,.6) 0%,rgba(255,255,255,.45) 40%,rgba(255,255,255,.2) 62%,rgba(255,255,255,0) 78%);
  filter:blur(6px)}
@media(max-width:900px){.lp-trial-pitch::before{inset:-24px -16px;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.6) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.2) 72%,rgba(255,255,255,0) 90%)}}

/* Payment step (home page) */
.pay-step{text-align:left}.pay-step .lp-done-icon,.pay-step h3{text-align:center}.pay-step>p{text-align:center}
.pay-amount{text-align:center;font:800 30px Manrope;letter-spacing:-.8px;margin:2px 0 14px;background:linear-gradient(90deg,#315cf5,#7b5cf5);-webkit-background-clip:text;background-clip:text;color:transparent}
.pay-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fbfcfe}
.pay-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}.pay-head b{font:800 15px Manrope}.pay-head small{color:var(--muted)}
.pay-bank .pay-head b{color:#315cf5}.pay-easypaisa .pay-head b{color:#18a35a}.pay-jazzcash .pay-head b{color:#d4252b}.pay-nayapay .pay-head b{color:#ef6c00}
.pay-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 0;border-top:1px dashed #e4e9f2}.pay-row:first-of-type{border-top:0}
.pay-row span{font-size:13.5px;color:var(--muted);font-weight:600}.pay-row code{font:700 15px ui-monospace,Menlo,monospace;word-break:break-all;color:var(--ink)}
.pay-copy{border:1px solid #c9d3ee;background:#fff;color:#315cf5;border-radius:8px;padding:5px 10px;font-size:13.5px;font-weight:800;cursor:pointer}.pay-copy.done{background:#eaf8f1;border-color:#9bd8b9;color:#188565}
.pay-highlight{margin:14px 0 12px;padding:12px 14px;border-radius:10px;background:linear-gradient(90deg,#fff4dc,#fde8ef);border:1px solid #f5c98b;color:#7a3a1d;font-weight:800;text-align:center;animation:lp-pulse-soft 2.4s ease-in-out infinite}
@keyframes lp-pulse-soft{50%{box-shadow:0 0 0 6px rgba(245,165,36,.18)}}
.pay-wa{display:flex!important;justify-content:center;width:100%;padding:14px;font-size:15px}
.pay-terms{text-align:center;font-size:14.5px;color:#188565;font-weight:700;margin:12px 0 6px}
.pay-links{margin-top:8px;font-size:14.5px}.pay-links summary{cursor:pointer;color:var(--muted);font-weight:700;text-align:center}
@media(max-width:520px){.pay-row{grid-template-columns:1fr auto}.pay-row span{grid-column:1/-1}}
/* Payment accounts (owner) */
.pay-admin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pay-admin-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px 4px;margin:0;display:grid;gap:4px}.pay-admin-card legend{padding:0 6px}
.pay-toggle{display:flex;align-items:center;gap:8px;font-size:14.5px}
.pay-admin .field.wide{grid-column:1/-1}
@media(max-width:800px){.pay-admin{grid-template-columns:1fr}}

/* Version 66 */
.pay-upload{margin:6px 0 4px}
.pay-upload-box{display:flex;flex-direction:column;align-items:center;gap:3px;border:2px dashed #b9c6ee;border-radius:10px;padding:14px;background:#f7f9ff;cursor:pointer;text-align:center}
.pay-upload-box:hover{border-color:#315cf5;background:#eef2ff}.pay-upload-box input{position:absolute;opacity:0;width:1px;height:1px}
.pay-upload-box span{font-weight:800;color:#315cf5}.pay-upload-box small{color:var(--muted);font-size:13.5px}
.pay-upload-status{text-align:center;font-size:14.5px;font-weight:700;margin-top:6px}.pay-upload-status.ok{color:#188565}.pay-upload-status.bad{color:#c24141}
.pay-or{text-align:center;color:var(--muted);font-size:13.5px;margin:8px 0}
.tag.tag-renewal{background:#e7f6ee;color:#188565}
.proof-modal{width:min(720px,96vw)}.proof-view{text-align:center}.proof-view img{max-width:100%;max-height:72vh;border-radius:10px;border:1px solid var(--line)}
.pay-record-title{margin:14px 0 6px;font:800 15px Manrope}
.pay-record{grid-template-columns:repeat(2,minmax(0,1fr))}
.approve-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pay-history{display:grid;gap:8px}.pay-history-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 12px}.pay-history-row small{display:block;color:var(--muted);font-size:13.5px}.pay-history-meta{text-align:right}
.billing-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;font-size:15px}
.renew-form{display:grid;gap:10px}.renew-form .lp-plan-pick{grid-template-columns:1fr 1fr}.renew-amount{margin:0}
.renew-submit{width:100%;justify-content:center;padding:13px}.renew-wa-alt{text-align:center;font-size:14.5px}
.renew-pending{text-align:center}.renew-pending p{color:var(--muted)}
.tpl-panel textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;font:14px/1.5 inherit;resize:vertical}
.tpl-ph{margin-top:8px;font-size:13.5px;color:var(--muted)}.tpl-ph code{background:#f0f3fb;border-radius:6px;padding:1px 5px;margin:2px;display:inline-block}
#tpl-form>.btn{margin-top:6px}
.log-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.log-filter select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:180px}
.log-table{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.log-row{display:grid;grid-template-columns:170px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:10px;padding:10px 12px;border-top:1px solid var(--line);font-size:14.5px;align-items:center}
.log-row:first-child{border-top:0}.log-head{background:#f7f8fb;font-weight:800;font-size:13.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.log-what small,.log-who small{display:block;color:var(--muted);font-size:13.5px}.log-when{color:var(--muted)}
.log-pager{display:flex;justify-content:space-between;margin-top:10px}
@media(max-width:800px){.log-row{grid-template-columns:1fr 1fr}.log-head{display:none}}
.restore-revision{margin-top:8px}
.newyear-classes{display:grid;gap:6px;max-height:280px;overflow:auto}.newyear-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}.newyear-row input{border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.draft-bar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:#fff8e6;border:1px solid #f2dfaa;color:#6b4c00;border-radius:10px;padding:10px 12px;font-size:14.5px}
.draft-bar .btn{margin-right:6px}
.qr-pin{margin-top:8px;font:700 18px Manrope;letter-spacing:.5px}.qr-pin b{font-family:ui-monospace,Menlo,monospace;letter-spacing:.3em;color:var(--blue)}
.qr-pin-toggle{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;font-size:14.5px;font-weight:600}
@media print{.qr-pin-toggle{display:none!important}}

/* Home page: 12 features in 3 columns, accepted payments, get-started steps */
@media(min-width:1000px){.lp-features{grid-template-columns:repeat(3,1fr)}}
.lp-accepts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:26px 0 0;font-size:14.5px;color:var(--muted);font-weight:700}
.lp-accepts b{background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 12px;color:var(--ink);box-shadow:0 4px 12px rgba(31,47,82,.05)}
.lp-getstarted{margin-top:34px;background:linear-gradient(135deg,#f3f6ff,#faf3ff);border:1px solid #e3e8fb;border-radius:10px;padding:24px;text-align:center}
.lp-getstarted h3{font:800 20px Manrope;margin:0 0 16px}
.lp-gs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.lp-gs{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.lp-gs span{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#315cf5,#7b5cf5);color:#fff;font:800 15px Manrope}
.lp-gs b{display:block;font-size:15px}.lp-gs small{color:#5b667a;font-size:14.5px;line-height:1.45}
.lp-gs-cta{margin-top:18px;display:inline-flex;text-decoration:none;padding:13px 22px}
@media(max-width:800px){.lp-gs-steps{grid-template-columns:1fr}}

/* Automatic backups panel */
.auto-backup-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.auto-backup-form label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.auto-backup-form select,.auto-backup-form input{border:1px solid var(--line);border-radius:9px;padding:7px 9px;font-size:15px}.auto-backup-form input{width:70px}
.auto-backup-status{font-size:15px;color:#188565}.auto-backup-status.bad{color:#c24141}
.auto-backup-ok{margin-top:8px;font-size:14.5px;color:#188565;font-weight:700}
.auto-backup-setup{margin-top:12px;background:#fff8e6;border:1px solid #f2dfaa;border-radius:10px;padding:12px 14px;font-size:14.5px;color:#5b4300}
.auto-backup-setup ol{margin:8px 0 0;padding-left:18px;display:grid;gap:8px}
.copy-line{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}.copy-line code{background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:13.5px;word-break:break-all;flex:1;min-width:0}

/* Home hero buttons on phones: full width, one line each */
@media(max-width:620px){
.lp-hero .landing-cta{flex-direction:column;align-items:stretch;gap:10px}
.lp-hero .landing-cta .btn{width:100%;justify-content:center;white-space:nowrap;padding:14px 16px;font-size:15px;flex:none}
.lp-hero .lp-nocard{text-align:center;font-size:13.5px!important}
.lp-hero .lp-ticks{justify-content:center}
}

/* Request status page (requested school link before approval) */
.rs-page{min-height:100vh;background:linear-gradient(135deg,#eef2ff,#f8f0ff 55%,#fff4ea);padding:20px 16px 40px;display:flex;flex-direction:column;align-items:center}
.rs-top{width:100%;max-width:640px;margin-bottom:18px}.rs-top .brand{padding:0}
.rs-card{width:100%;max-width:640px;background:#fff;border-radius:10px;padding:30px 26px;box-shadow:0 30px 70px rgba(49,92,245,.15);border:1px solid #e3e8fb;text-align:center}
.rs-card h1{font:800 clamp(24px,4vw,32px)/1.15 Manrope;letter-spacing:-.8px;margin:6px 0 10px}.rs-card>p{color:#4f5c74;line-height:1.6}
.rs-icon{font-size:48px}
.rs-btn{display:flex!important;justify-content:center;width:100%;padding:14px;font-size:15px;margin-top:12px;text-decoration:none}
.rs-steps{display:grid;gap:8px;text-align:left;margin:18px 0 6px}.rs-steps div{padding:10px 14px;border-radius:10px;background:#f6f8fd;border:1px solid var(--line);font-weight:700;color:#8a94a6}
.rs-steps .done{background:#eaf8f1;border-color:#bfe6d1;color:#188565}.rs-steps .now{background:#fff4dc;border-color:#f2d89c;color:#8a5a00}
.rs-pitch{text-align:left;background:linear-gradient(135deg,#f6f8ff,#fbf5ff);border:1px solid #e3e8fb;border-radius:10px;padding:18px;margin:18px 0}
.rs-pitch h3{font:800 18px Manrope;margin:0 0 10px;text-align:center}.rs-pitch ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.rs-pitch li{font-size:15px;line-height:1.5;color:#33415a}
.rs-quote{margin:14px 0 0;text-align:center;font-style:italic;color:#4f5c74}
.rs-card .pay-card{text-align:left}.rs-card .pay-amount{margin-top:4px}
.pay-row i{display:block}
.rs-foot{margin-top:20px;font-size:13.5px;color:var(--muted)}
.rs-handshake{width:84px;height:84px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#315cf5,#7b5cf5);box-shadow:0 14px 30px rgba(80,90,245,.3)}
.rs-handshake svg{width:50px;height:50px}
.rs-handshake svg{width:58px;height:58px;stroke-width:3}

/* Mobile admin polish: top-right sign out, scrollable bottom nav, full-width hero text, compact filters, request details, activity cards */
.side-top-right{display:none}
.school-filter-select{display:none}
.btn.icon-only{display:inline-flex;align-items:center;justify-content:center;padding:8px 11px}
.request-details{flex:1 1 100%;min-width:0}
.request-details summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding-right:28px;position:relative}
.request-details summary::-webkit-details-marker{display:none}
.request-details summary:after{content:'';position:absolute;right:6px;top:8px;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.request-details[open] summary:after{transform:rotate(-135deg);top:12px}
.request-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.request-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14.5px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.request-table th,.request-table td{padding:8px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.request-table tr:first-child th,.request-table tr:first-child td{border-top:0}
.request-table th{width:34%;background:#f7f8fb;color:var(--muted);font-weight:700;font-size:13.5px;white-space:nowrap}
.request-table td{word-break:break-word}
@media(max-width:720px){
  .side{justify-content:space-between;gap:10px}
  .side-top-right{display:flex;align-items:center;gap:8px;margin-left:auto}
  .side-role{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#8490a5;white-space:nowrap}
  .side-signout{width:38px;height:38px;border-radius:10px;border:1px solid #f3d2d2;background:#fff5f5;color:#c24141;display:grid;place-items:center;padding:0}
  .topbar .eyebrow{display:none}
  .topbar{margin-bottom:16px}
  .side nav{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .side nav::-webkit-scrollbar{display:none}
  .side .nav-item{flex:0 0 auto;min-width:68px;scroll-snap-align:start;white-space:nowrap;position:relative}
  .hero{position:relative;display:block;padding:22px 20px 26px}
  .hero>div:first-child{position:relative;z-index:1}
  .hero h2,.hero p{max-width:none}
  .hero-art{position:absolute;right:14px;bottom:10px;margin:0;font-size:28px;opacity:.55}
  .stat-inline{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}
  .stat-inline .stat-top{grid-column:1}
  .stat-inline .stat-note{grid-column:1}
  .stat-inline .stat-num{grid-column:2;grid-row:1/span 2;font-size:30px;margin:0}
  .section-head{flex-direction:row;align-items:center}
  .section-head .btn{white-space:nowrap;flex:none}
  .school-filters{display:none}
  .school-filter-select{display:block;width:100%;margin:4px 0 16px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700;color:var(--ink)}
  .school-card-actions{flex-wrap:wrap;gap:8px}
  .request-row{align-items:stretch}
  .request-row .expiring-actions{width:100%}
  .log-table{border:0;border-radius:0;display:grid;gap:10px}
  .log-row{grid-template-columns:1fr auto;grid-template-areas:"what what" "who school" "when when";gap:6px 12px;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}
  .log-row:first-child{border-top:1px solid var(--line)}
  .log-what{grid-area:what}
  .log-what small{word-break:break-all}
  .log-who{grid-area:who;font-weight:600}
  .log-school{grid-area:school;text-align:right;color:var(--muted);font-size:13.5px;align-self:start}
  .log-when{grid-area:when;font-size:12.5px;padding-top:6px;border-top:1px dashed var(--line)}
  .log-filter{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .log-filter .btn{grid-column:1/-1}
}
@media(max-width:720px){
  #school-grid{margin-top:16px}
  .school-card .school-card-actions{flex-wrap:nowrap;gap:6px}
  .school-card .school-card-actions .btn{flex:1 1 auto;min-width:0;padding:9px 6px;font-size:13.5px;white-space:nowrap;text-align:center}
  .school-card .school-card-actions .btn.icon-only{flex:0 0 auto;padding:8px 9px}
}
/* Mobile school admin polish: activities date bar, report cards, classes header, reminders */
@media(max-width:720px){
  .activities-filter form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
  .activities-filter label{grid-column:1/-1;width:auto}
  .activities-filter .activity-date-control{grid-column:1}
  .activities-filter .activity-date-control input{width:100%;min-height:44px;white-space:nowrap}
  .activities-filter form .btn{grid-column:2;min-height:44px;white-space:nowrap}
  .activities-filter form .tag{grid-column:1/-1;justify-self:start}
  .panel-head:has(.report-controls){flex-direction:column;align-items:stretch;gap:12px}
  .report-controls{display:grid;grid-template-columns:1fr auto auto;gap:8px}
  .report-controls input{min-width:0;width:100%;min-height:40px}
  .report-controls .btn{white-space:nowrap}
  .report-table-wrap{overflow:visible}
  .report-table thead{display:none}
  .report-table,.report-table tbody{display:block}
  .report-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}
  .report-table td{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:0;background:#f7f8fb;border-radius:10px;font-weight:700;font-size:15px}
  .report-table td:before{content:attr(data-label);font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
  .report-table td.report-teacher{grid-column:1/-1;background:none;padding:0 0 4px;font-size:15px}
  .report-table td.report-teacher:before{display:none}
  .report-table td.report-teacher small{font-weight:400}
  .section-head:has(.section-actions){flex-direction:column;align-items:stretch;gap:12px}
  .section-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .section-actions .btn{width:100%;padding:10px 8px;font-size:13.5px;white-space:nowrap;justify-content:center}
  .section-actions .btn:last-child{grid-column:1/-1}
  .class-subject-row.is-unassigned{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .class-subject-row.is-unassigned .subject-teachers{padding-left:0;justify-content:flex-end}
  .panel-head:has(> .tag){flex-direction:column;align-items:flex-start;gap:8px}
  .reminder-row{display:grid;grid-template-columns:auto 1fr;gap:10px}
  .reminder-check{grid-column:1/-1;align-items:flex-start!important;gap:10px}
  .reminder-check input{flex:none;margin:2px 0 0;width:20px;height:20px}
}
@media(max-width:720px){
  .report-controls input[type=month]{-webkit-appearance:none;appearance:none;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:10px;min-height:42px;padding:8px 12px;font-weight:700;font-size:15px;text-align:left;white-space:nowrap}
  .report-controls input[type=month]::-webkit-date-and-time-value{text-align:left}
  .report-controls .btn{min-height:42px}
}
/* Super Admin settings, test restore, two-factor */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.settings-grid .panel{margin:0}
.settings-form{display:grid;gap:10px;margin-top:10px}
.settings-form .field{margin:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.settings-actions,.settings-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.settings-help{margin:10px 0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14.5px}
.settings-help summary{cursor:pointer;font-weight:700}
.settings-help ol{padding-left:18px;margin:8px 0 0}.settings-help li{margin:5px 0}
.panel code{word-break:break-all}
.test-restore{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:12px;padding:12px;border:1px dashed var(--line);border-radius:10px}
.test-restore small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.restore-checks{list-style:none;padding:0;margin:8px 0 0;font-size:13.5px;color:#256b4f}.restore-checks.bad{color:#b34747}.restore-checks li{margin:2px 0}
.twofa-steps{padding-left:18px;font-size:15px}.twofa-steps li{margin:8px 0}
.twofa-qr{background:#fff;padding:10px;border-radius:10px;display:inline-block;margin:8px 0}
.twofa-key{font-size:15px;letter-spacing:1px;background:#f3f5fa;padding:3px 6px;border-radius:6px}
.recovery-codes{background:#f3f5fa;border-radius:10px;padding:12px 14px;font-size:16px;line-height:1.7;letter-spacing:1px;text-align:center}
@media(max-width:900px){.settings-grid{grid-template-columns:1fr}}
@media(max-width:720px){.field-row{grid-template-columns:1fr}.test-restore{flex-direction:column}.test-restore .btn{width:100%}}
/* Settings: masonry columns, highlighted titles, tidy status badges */
.settings-grid{display:block;columns:2 420px;column-gap:18px}
.settings-grid>.panel{display:inline-block;width:100%;break-inside:avoid;margin:0 0 18px;vertical-align:top}
.settings-grid .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.settings-grid .panel-head>div{flex:1;min-width:0}
.settings-grid .panel-head h2{display:inline-flex;align-items:center;gap:8px;font:800 17px Manrope;color:var(--blue);margin:0 0 6px;padding-left:10px;border-left:4px solid var(--blue);line-height:1.25}
.settings-grid .panel-head>.tag{flex:none;align-self:flex-start;white-space:nowrap;font-size:12.5px;line-height:1;padding:7px 11px;justify-content:center;text-align:center;margin-top:2px;max-width:none}
@media(max-width:720px){.settings-grid{columns:1}.settings-grid .panel-head{flex-wrap:wrap}.settings-grid .panel-head>.tag{order:-1}}

/* ---- Pointer cursor on everything clickable (many buttons here are styled divs, cards and labels) ---- */
a[href],button,select,summary,label[for],input[type=checkbox],input[type=radio],input[type=file],input[type=color],[role=button],[onclick],[data-tab],[data-date],[data-shift],[data-pick-plan],[data-class-toggle],[data-copy],
.nav-item,.nav-item *,.public-work,.public-subject-card,.photo-tile,.expiring-row,.calendar-day,.file-drop,.pay-upload-box,.qr-preview,.school-filter,.sub-banner,.modern-dropdown-trigger,.modern-dropdown-option,.subtab{cursor:pointer}
button:disabled,[disabled],.school-filter:disabled{cursor:not-allowed}
.side-bottom a.text-button{margin-right:14px}

/* ---- Each dashboard has its own look, so nobody mixes them up ----
   Super Admin: dark navy sidebar with gold accents · Principal: the school's colour · Teacher: green */
.role-owner .side{background:#101a33;border-right-color:#101a33;color:#c9d2e3}
.role-owner .side .brand-name,.role-owner .user-mini{color:#fff}
.role-owner .side .nav-label{color:#7f8db0}
.role-owner .side .nav-item{color:#aeb9d0}
.role-owner .side .nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.role-owner .side .nav-item.active{background:rgba(245,185,66,.16);color:#f5b942}
.role-owner .side .nav-badge{background:#f5b942;color:#101a33}
.role-owner .side-bottom{border-top-color:rgba(255,255,255,.1);color:#aeb9d0}
.role-owner .side-bottom .text-button,.role-owner .side-signout{color:#f5b942}
.role-owner .side-bottom small{color:#8d9ab8!important}
.role-owner .side-role{background:#f5b942;color:#101a33;padding:4px 9px;border-radius:999px}
.role-owner .hero{background:linear-gradient(110deg,#101a33 0%,#24346b 65%,#3b4f9a 100%);box-shadow:0 12px 30px rgba(16,26,51,.18)}
.role-owner .eyebrow{color:#b07d12}

.role-admin .side{border-top:5px solid var(--blue)}
.role-admin .side-role{background:var(--blue-soft);color:var(--blue);padding:4px 9px;border-radius:999px}
.role-admin .side .nav-item:hover{background:#f3f5fa;color:var(--ink)}

.role-teacher .side{background:#f1fbf6;border-right-color:#d7efe3;border-top:5px solid #18a06f}
.role-teacher .side .nav-item:hover{background:#e3f6ec;color:#11724f}
.role-teacher .side .nav-item.active{background:#d4f2e2;color:#11724f}
.role-teacher .side-role{background:#18a06f;color:#fff;padding:4px 9px;border-radius:999px}
.role-teacher .side-bottom{border-top-color:#d7efe3}
.role-teacher .eyebrow{color:#11724f}

/* Menu group labels (Super Admin) */
.nav-group{margin:16px 0 6px}
.nav-group:first-child{margin-top:4px}

/* In-page tabs for pages grouped under one menu item */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px;margin:0 0 18px;width:fit-content;max-width:100%}
.subtab{border:0;background:transparent;color:#5f6b82;font:600 15px 'DM Sans',sans-serif;padding:9px 16px;border-radius:10px}
.subtab:hover{background:#f3f5fa;color:var(--ink)}
.subtab.active{background:var(--blue);color:#fff}
.role-teacher .subtab.active{background:#18a06f}

/* Principal home: today's uploads */
.today-card{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin:0 0 18px;box-shadow:var(--shadow)}
.today-card h2{margin:4px 0 10px;font:800 24px Manrope;letter-spacing:-.4px}
.today-card p{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.5}
.today-card.all-done h2{color:var(--green)}
.today-progress{height:10px;background:#eef1f6;border-radius:999px;overflow:hidden;max-width:420px}
.today-progress span{display:block;height:100%;background:var(--green);border-radius:999px}
.today-card.has-missing .today-progress span{background:linear-gradient(90deg,var(--green),#f0a020)}
.today-actions{display:flex;flex-direction:column;gap:8px;min-width:190px}
.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 24px}
.school-count-card[data-tab]:hover{border-color:var(--blue);transform:translateY(-1px)}
@media(max-width:720px){
  .nav-group{display:none}
  .today-card{flex-direction:column;align-items:stretch}
  .today-actions{min-width:0}
  .subtabs{width:100%}
  .subtab{flex:1;padding:9px 8px}
  .role-owner .side{background:#101a33}
}
/* Teacher dashboard: green throughout (the school logo and name still show at the top) */
.role-teacher{--blue:#18a06f;--blue-dark:#11724f;--blue-soft:#e3f6ec;--blue-light:#7fd4b0;--brand-main:#18a06f;--brand-dark:#11724f;--brand-light:#5cc79a;--brand-soft:#d4f2e2;--brand-faint:#eefaf4}
.role-teacher .hero{background:linear-gradient(110deg,#0f7a55 0%,#18a06f 60%,#4cc596 100%);box-shadow:0 12px 30px rgba(24,160,111,.18)}
a.nav-item,a.subtab{text-decoration:none}
a.subtab{display:inline-flex;align-items:center;justify-content:center}
/* Principal home: shortcut boxes */
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:4px 0 28px}
.home-tile{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.home-tile:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow)}
.home-tile-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-size:19px;font-weight:800}
.home-tile b{font:800 16px Manrope;margin-top:4px}
.home-tile small{color:var(--muted);font-size:15px;line-height:1.45}
@media(max-width:520px){.home-grid{grid-template-columns:1fr 1fr}.home-tile{padding:14px}.home-tile small{font-size:14.5px}}
/* Principal: Website & sharing */
.embed-option{margin-bottom:16px}
.embed-preview{padding:18px;background:#f7f9fc;border:1px dashed #d5dbe6;border-radius:10px;margin:6px 0 12px}
.embed-live{padding:10px;background:#f7f9fc;border:1px solid var(--line);border-radius:10px;margin:6px 0 12px}
.embed-live iframe{background:#fff;border-radius:10px;display:block}
.embed-code{display:flex;gap:10px;align-items:flex-start}
.embed-code textarea{flex:1;font:13px/1.45 ui-monospace,Consolas,monospace;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe;color:#33405a;resize:vertical;min-height:70px}
.embed-help{margin:6px 0 0;padding-left:20px;line-height:1.9;font-size:15px}
@media(max-width:600px){.embed-code{flex-direction:column}.embed-code .btn{align-self:flex-start}}
.settings-index{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-6px 0 18px}
.settings-index span{font-size:15px;color:var(--muted);font-weight:600;margin-right:2px}
.settings-index button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:600 15px 'DM Sans',sans-serif;color:var(--ink)}
.settings-index button:hover{border-color:var(--blue);color:var(--blue)}
.settings-flash{outline:3px solid color-mix(in srgb,var(--blue) 35%,transparent);outline-offset:4px;border-radius:10px;transition:outline-color .3s}
/* Teacher form: camera button (phones and tablets; computers use "choose photos") */
.photo-sources{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
.camera-btn{font-size:16px;padding:13px 20px}
.camera-or{color:var(--muted);font-size:14px}
@media (hover:hover) and (pointer:fine){.photo-picker .camera-btn{display:none}}
/* Due date only matters for homework, projects, reading and tests: hide it for plain classwork */
form:has(select[name=work_type] option[value="classwork"]:checked) .field:has(> input[name=due_date]),form:has(select[name=work_type] option[value="diary"]:checked) .field:has(> input[name=due_date]){display:none}
/* ---- Students: school page (/school/ADDRESS/) ---- */
.sp-page{max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.sp-head{display:flex;align-items:center;gap:14px;padding:20px 16px 18px;background:linear-gradient(110deg,var(--brand-main,#315cf5),var(--brand-light,#6f86ff));color:#fff}
.sp-head h1{margin:0;font:800 20px Manrope;letter-spacing:-.3px}
.sp-head p{margin:3px 0 0;font-size:14px;opacity:.9}
.sp-logo,.sp-mark{width:52px;height:52px;border-radius:10px;flex:0 0 auto;background:#fff;object-fit:contain}
.sp-mark{display:grid;place-items:center;color:var(--brand-main,#315cf5);font:800 19px Manrope}
.sp-body{padding:16px;flex:1}
.sp-title{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px}
.sp-title h2{margin:0;font:800 17px Manrope}
.sp-title span{color:var(--muted);font-size:14px}
.sp-search{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:15px 'DM Sans',sans-serif;margin:0 0 10px;background:#fff}
.sp-list{display:grid;gap:8px}
.sp-class{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none}
.sp-class:active,.sp-class:hover{border-color:var(--brand-main,#315cf5)}
.sp-badge{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft,#edf1ff);color:var(--brand-main,#315cf5);font:800 14px Manrope;flex:0 0 auto}
.sp-text{flex:1;min-width:0}.sp-text b{display:block;font-size:16px}.sp-text small{color:var(--muted);font-size:13.5px}
.sp-go{color:var(--muted);font-size:24px;line-height:1}
.sp-foot{display:flex;justify-content:center;gap:10px;padding:18px 16px calc(18px + env(safe-area-inset-bottom));color:var(--muted);font-size:14px}
.sp-foot a{color:var(--muted)}
.sp-back{display:inline-block;margin:10px 16px 0;color:var(--brand-main,#315cf5);font-weight:700;font-size:15px;text-decoration:none}
/* Installable app */
.install-app-card{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}
.install-app-card[hidden]{display:none}
.install-app-card div{flex:1}.install-app-card b{display:block;font-size:15px}.install-app-card small{color:var(--muted);font-size:13.5px}
.install-icon{font-size:24px}
.side-install{border:0;background:var(--blue-soft);color:var(--blue);font:700 13px 'DM Sans',sans-serif;padding:8px 10px;border-radius:10px;white-space:nowrap}
.role-owner .side-install{background:rgba(245,185,66,.18);color:#f5b942}
.install-app[hidden]{display:none!important}
.side-bottom-install{display:block;margin:4px 0}
.install-steps{line-height:1.9;padding-left:20px;font-size:15px}

/* =====================================================================
   App-style compact layout (phones first). Banners are short, cards are
   tight with 10px corners, the header sticks to the top and the menu is a
   centred bottom bar, like a phone app.
   ===================================================================== */
.hero,.school-hero,.tutor-hero{min-height:0;padding:16px 20px;border-radius:10px;box-shadow:0 6px 18px color-mix(in srgb,var(--brand-main,#315cf5) 14%,transparent)}
.hero h2{font-size:20px;line-height:1.25;margin:0 0 4px;letter-spacing:-.3px}
.hero p{font-size:14px;line-height:1.45;margin:0;opacity:.92;max-width:640px}
.hero .hero-art{font-size:34px;width:auto;height:auto;opacity:.9}
.hero:after{width:150px;height:150px;right:-40px;top:-60px}
.tutor-welcome-label{font-size:11.5px!important;letter-spacing:.8px;opacity:.85}
.panel{padding:18px;margin:14px 0;border-radius:10px}
.section-head{margin:18px 0 10px}
.section-head h2{font-size:18px}
.section-head p{font-size:14px;margin-top:2px}
.subscription-card{padding:14px 18px;border-radius:10px}
.subscription-card h2{font-size:18px;margin:2px 0}
.school-overview-cards{gap:10px}
.school-count-card{padding:14px 16px;border-radius:10px}
.today-card{padding:16px 18px;border-radius:10px;box-shadow:none}
.today-card h2{font-size:20px}
.class-card,.work-row,.home-tile,.empty,.modal,.today-reminder,.today-all-done,.holiday-reminder{border-radius:10px}
.class-grid{gap:12px}
/* "Your classes": subject rows were full pills; now calm 8–10px corners */
.tutor-subject-status{border-radius:10px}
.tutor-subject-list .tutor-subject-status>span:first-child,.tutor-subject-list span:not(.status-mark){border-radius:8px}
.btn{border-radius:10px}
.page-title{font-size:24px}

@media(max-width:720px){
  body{background:var(--bg)}
  .main{padding:12px 12px 96px}
  /* Sticky app header */
  .side{position:sticky;top:0;z-index:9;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));box-shadow:0 1px 0 var(--line)}
  .side .brand-name{font-size:15px}
  .hero,.school-hero,.tutor-hero{padding:14px 16px;margin-bottom:12px}
  .hero h2{font-size:18px}
  .hero p{font-size:13.5px}
  .hero .hero-art{display:none}
  .panel{padding:14px;margin:10px 0}
  .section-head{margin:14px 0 8px}
  .section-head h2{font-size:17px}
  .class-card{padding:14px}
  .home-grid{gap:8px}
  .view-banner{padding:8px 12px;font-size:13.5px;border-radius:10px;margin-bottom:10px}
  /* Bottom bar: centred, items share the width when they fit, and scroll when there are many */
  .side nav{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .side nav::-webkit-scrollbar{display:none}
  .side nav>.nav-item:first-child{margin-left:auto}
  .side nav>.nav-item:last-child{margin-right:auto}
  .side nav:not(:has(> .nav-item:nth-child(6))) > .nav-item{flex:1 1 0;max-width:150px;min-width:0}
  .nav-item{border-radius:10px}
}

/* ---- Classwork photos: picker in the form ---- */
.photo-picker{padding:14px;border:1.5px dashed #cfd6e4;border-radius:10px;background:#fbfcfe}
.photo-picker .photo-sources{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.photo-picker .photo-sources .btn{justify-content:center;font-size:15.5px;padding:14px 12px;min-height:52px}
@media (hover:hover) and (pointer:fine){.photo-picker .photo-sources{grid-template-columns:1fr}}
.photo-picker{position:relative}
.photo-picker .photo-input{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;min-width:0!important;padding:0!important;border:0!important;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.photo-hint{margin:10px 0 0;color:var(--muted);font-size:14px}
.photo-strip{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:thin}
.photo-thumb{position:relative;flex:0 0 auto;width:86px}
.photo-thumb-open{display:block;width:86px;height:112px;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.photo-thumb-open img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb-num{position:absolute;left:6px;bottom:6px;background:rgba(15,23,42,.75);color:#fff;font:700 12px 'DM Sans',sans-serif;padding:2px 7px;border-radius:6px}
.photo-thumb-ok{position:absolute;right:6px;bottom:6px;background:#18a06f;color:#fff;font-size:12px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center}
.photo-thumb-x{position:absolute;top:-7px;right:-7px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:#e5484d;color:#fff;font-size:16px;line-height:1;display:grid;place-items:center;padding:0}
.photo-thumb-add{flex:0 0 auto;width:86px;height:112px;border:1.5px dashed #cfd6e4;border-radius:10px;background:#fff;color:var(--blue);font:800 24px Manrope;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.photo-thumb-add small{font:600 12px 'DM Sans',sans-serif;color:var(--muted)}

/* ---- Scanner: full screen, like a phone scanner app ---- */
html.scanner-open,html.scanner-open body{overflow:hidden;overscroll-behavior:none}
.scanner{position:fixed;inset:0;z-index:2000;background:#0b0f19;color:#fff;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);user-select:none;-webkit-user-select:none}
.scanner[hidden]{display:none}
.scanner-top{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;flex:0 0 auto}
.scanner-top b{font:700 15px 'DM Sans',sans-serif;opacity:.95}
.scanner-icon{width:44px;height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:19px;display:grid;place-items:center}
.scanner-icon:active{background:rgba(255,255,255,.18)}
.scanner-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;padding:4px 6px}
.scanner-canvas{display:block;touch-action:none;max-width:100%;max-height:100%}
.scanner-result{display:block;max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.scanner-busy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(11,15,25,.55)}
.scanner-busy[hidden]{display:none}
.scanner-busy span{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#4ade80;animation:scanspin .8s linear infinite}
.scanner-busy b{font:600 14px 'DM Sans',sans-serif}
@keyframes scanspin{to{transform:rotate(360deg)}}
.scanner-status{margin:0;padding:6px 16px;min-height:34px;text-align:center;font-size:13.5px;line-height:1.4;color:#cbd5e1;flex:0 0 auto}
.scanner-panel{flex:0 0 auto;padding:6px 12px 12px;background:#111827;border-top:1px solid rgba(255,255,255,.06)}
.scanner-panel[hidden]{display:none}
.scanner-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px}
.scanner-tools button{border:0;background:transparent;color:#e2e8f0;font:600 12px 'DM Sans',sans-serif;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:10px;min-height:56px}
.scanner-tools button span{font-size:21px;line-height:1}
.scanner-tools button:active{background:rgba(255,255,255,.1)}
.scanner .btn{width:100%;justify-content:center;min-height:50px;font-size:16px;border-radius:10px}
.scanner-next,.scanner-save{background:#18a06f;border-color:#18a06f}
.scanner .btn.secondary{background:rgba(255,255,255,.08);border-color:transparent;color:#fff}
.scanner-looks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.scanner-looks button{border:1.5px solid rgba(255,255,255,.18);background:transparent;color:#e2e8f0;font:600 14px 'DM Sans',sans-serif;padding:11px 4px;border-radius:10px}
.scanner-looks button.on{border-color:#4ade80;background:rgba(74,222,128,.14);color:#fff}
.scanner-row{display:grid;grid-template-columns:1fr 2fr;gap:8px}
@media(min-width:900px){.scanner-panel{display:flex;flex-direction:column;align-items:center}.scanner-tools,.scanner-looks,.scanner-row,.scanner-crop>.btn{width:100%;max-width:520px}}
.scanner-canvas[hidden],.scanner-result[hidden]{display:none!important}
.form-step-label{margin:4px 0 -6px}
.form-step-label label{font:800 15px Manrope!important;color:var(--ink)}
#post-form>.field:first-child>label{font:800 15px Manrope;color:var(--ink)}
.posted-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 12px;background:#e8f8f0;border:1px solid #bfe9d5;border-radius:10px}
.posted-banner>span{width:34px;height:34px;border-radius:50%;background:#18a06f;color:#fff;display:grid;place-items:center;font-weight:800;flex:0 0 auto}
.posted-banner div{flex:1}.posted-banner b{display:block;font-size:15px}.posted-banner small{color:#3d6b57;font-size:13.5px}
.work-row.just-posted{border-color:#18a06f;box-shadow:0 0 0 3px rgba(24,160,111,.18)}
.own-address-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.own-address-card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#fbfcfe}
.own-address-card h3{margin:0 0 8px;font:800 15.5px Manrope}
.own-address-card h3 code{font:600 13px ui-monospace,Consolas,monospace;background:#eef1f7;padding:2px 6px;border-radius:6px;white-space:nowrap}
.own-steps{margin:0 0 10px;padding-left:20px;line-height:1.65;font-size:14.5px}
.own-steps li{margin-bottom:6px}
.dns-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dns-row span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:13.5px}
.own-ok{color:var(--green);font-weight:700;margin:0 0 6px}
.own-links{margin:0;padding-left:18px;font-size:14px;line-height:1.8}
.own-note{margin-top:12px}
@media(max-width:720px){
  .tutor-overview-stats{margin:0 0 16px;gap:8px}
  .tutor-overview-stats>div{padding:10px 12px}
  .tutor-overview-stats>.btn{grid-column:1/-1;width:100%;justify-content:center;min-height:48px}
  .today-all-done,.holiday-reminder,.today-reminder{padding:10px 12px;gap:10px;margin-bottom:12px}
  .today-all-done b,.holiday-reminder b{font-size:14.5px}
  .today-all-done small,.holiday-reminder small{font-size:13px}
}
/* Class codes */
.class-code-chip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 4px;padding:8px 10px;background:var(--blue-soft);border-radius:10px}
.class-code-chip span{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.class-code-chip b{font:800 18px ui-monospace,Consolas,monospace;letter-spacing:2px;color:var(--ink)}
.class-code-chip .text-button{font-size:14px}
.code-form{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 14px}
.code-form label{display:block;font:800 15px Manrope;margin-bottom:8px}
.code-form>div{display:flex;gap:8px}
.code-form input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:700 18px ui-monospace,Consolas,monospace;letter-spacing:2px;text-transform:uppercase}
.code-form .btn{min-width:90px;justify-content:center}
.code-error{display:block;color:#c0392b;font-size:13.5px;margin-top:6px;min-height:0}
.lp-code{max-width:520px;margin:12px auto 0;padding:0 16px}
.sp-nolist{text-align:center}
/* Principal: student access choices */
.access-form{display:grid;gap:10px}
.access-opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:#fff}
.access-opt input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--blue)}
.access-opt b{display:block;font-size:15px}.access-opt small{color:var(--muted);font-size:13.5px}
.access-opt:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}

/* Speak to type + language on one row */
.dictate-row{flex-wrap:wrap}
.dictate-row .dictate-btn{flex:0 0 auto;white-space:nowrap;padding:9px 12px}
.dictate-row .modern-dropdown,.dictate-row .dictate-lang{flex:1 1 120px!important;min-width:0!important;max-width:200px!important;width:auto!important}
.dictate-row .modern-dropdown-trigger{padding-top:8px;padding-bottom:8px;min-height:40px}
.dictate-status:empty{display:none}

/* Less important boxes are smaller, so the useful parts are on screen first */
.tutor-hero{padding:12px 16px!important;margin-bottom:12px!important}
.tutor-hero h2{font-size:18px;margin:0}
.tutor-hero .tutor-welcome-label{display:none}
.tutor-hero p{font-size:13.5px;margin-top:2px}
.subscription-card{margin:10px 0 12px;padding:10px 14px}
.subscription-card .eyebrow{font-size:11px}
.subscription-card h2{font-size:16px;margin:2px 0 1px}
.subscription-card p{font-size:13px}
.subscription-icon{width:32px;height:32px;font-size:15px}
.school-count-card,.school-coverage-card{min-height:0!important;padding:10px 12px!important;align-items:center}
.school-count-card strong{font-size:20px;margin:2px 0 0}
.school-count-card .school-count-icon{width:32px;height:32px}
@media(max-width:720px){
  .tutor-hero p{display:none}
  .tutor-hero:after{display:none}
  .school-hero p{font-size:13px}
  .tutor-overview-stats>div span{font-size:11px}
  .tutor-overview-stats>div b{font-size:16px;margin-top:2px}
}
@media(max-width:720px){
  .role-teacher .section-head p{display:none}
  .tutor-class-card .tutor-class-kicker{margin-bottom:4px}
  .tutor-class-card h3{margin:4px 0 0;font-size:17px}
  .tutor-class-card .class-badge{width:34px;height:34px;font-size:13px}
  .holiday-reminder small{display:none}
}

/* ---- Live camera (finds the page while you aim) ---- */
.livecam{position:fixed;inset:0;z-index:2100;background:#000;color:#fff;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.livecam-stage{position:relative;flex:1;min-height:0}
.livecam video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.livecam-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.livecam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .25s}
.livecam-flash.on{opacity:.75;transition:none}
.livecam-hint{margin:0;padding:8px 16px;text-align:center;font-size:14px;color:#e2e8f0;min-height:36px}
.livecam-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 20px 6px;gap:12px}
.livecam-x{justify-self:start;width:48px;height:48px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:20px}
.livecam-shutter{width:76px;height:76px;border-radius:50%;border:4px solid #fff;background:transparent;padding:5px}
.livecam-shutter span{display:block;width:100%;height:100%;border-radius:50%;background:#fff}
.livecam-shutter:active span{background:#d1d5db}
.livecam-auto{justify-self:end;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;border-radius:10px;padding:7px 12px;font:700 14px 'DM Sans',sans-serif;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.livecam-auto small{font-size:11px;opacity:.8}
.livecam-auto.on{border-color:#4ade80;color:#4ade80}
.livecam-native{border:0;background:none;color:#94a3b8;font:600 13px 'DM Sans',sans-serif;padding:6px 0 12px;text-decoration:underline}
/* Post forms on phones: short fields two per row (class + subject, date + work type), long ones full width */
@media(max-width:720px){
  form.form-grid:has(select[name=work_type]){grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
  form.form-grid:has(select[name=work_type])>.field{grid-column:auto;min-width:0}
  form.form-grid:has(select[name=work_type])>.field.wide,form.form-grid:has(select[name=work_type])>.field:has(input[name=title]){grid-column:1/-1}
  form.form-grid:has(select[name=work_type]) .field label{font-size:13.5px}
  form.form-grid:has(select[name=work_type]) .modern-dropdown,form.form-grid:has(select[name=work_type]) .modern-dropdown-trigger{min-width:0;max-width:100%}
  form.form-grid:has(select[name=work_type]) input[type=date]{min-width:0;width:100%;font-size:15px}
}
/* Principal: plan badge in the top-right corner */
.sub-pill{border:1px solid var(--brand-soft,#d9e4ff);background:var(--brand-faint,#f2f5ff);color:var(--ink);font:600 13px 'DM Sans',sans-serif;padding:7px 12px;border-radius:10px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sub-pill.warn{border-color:#f3c98b;background:#fff6e8;color:#8a5200}
@media(max-width:720px){.role-admin .topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.role-admin .topbar .eyebrow{display:none}.role-admin .page-title{font-size:20px;margin:0}.sub-pill{font-size:12px;padding:6px 9px}}

/* ===== Version 82: Schools rows, approvals, principal messages, Billing ledger ===== */
.schools-head{margin-top:4px}.schools-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.school-list{display:grid;gap:8px}
.school-row{display:flex;gap:14px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-left:4px solid #3bb27f;border-radius:10px;padding:11px 14px}
.school-row.warn{border-left-color:#e7a21a}.school-row.bad{border-left-color:#d65656}
.school-row[hidden]{display:none}
.sr-main{min-width:0;flex:1;display:grid;gap:3px}
.sr-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.sr-title b{font:700 15px Manrope}
.sr-title .tag{padding:3px 7px;font-size:11.5px}
.sr-days{font-size:12.5px;font-weight:700;border-radius:99px;padding:2px 8px;background:#eaf8f1;color:#188565}.sr-days.warn{background:#fff4dc;color:#8a5a00}.sr-days.bad{background:#fff0f0;color:#b34747}
.sr-line{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.sr-line a{color:inherit;text-decoration:none;border-bottom:1px dotted #b9c2d3}.sr-line a:hover{color:var(--blue)}
.sr-dates{display:flex;flex-wrap:wrap;gap:4px 14px}.sr-dates b{color:#45526a;font-weight:600}.sr-quiet{color:#b07a12}
.sr-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:470px}
.sr-actions .btn.small{padding:7px 10px;font-size:13px}.sr-actions .icon-only{padding:7px 8px;display:inline-grid;place-items:center}
.sr-wa{background:#1fa855;text-decoration:none}.sr-wa:hover{background:#178a45}
.btn:disabled{opacity:.5;cursor:not-allowed}
.approvals{padding:16px 18px;margin:0 0 14px}.approvals .panel-head{margin-bottom:6px;gap:12px;flex-wrap:wrap}.approvals.has-pending{border-color:#f7b9a6;background:#fffaf8}
.switch-line{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#46536a;cursor:pointer;background:#f5f7fb;border:1px solid var(--line);border-radius:99px;padding:6px 12px}
.switch-line input{width:17px;height:17px;accent-color:var(--blue);margin:0}
.handled-requests{margin-top:8px}.handled-requests>summary,.notices-panel summary,.demo-details>summary,.bill-section>summary,.bill-months>summary{cursor:pointer;font-size:14px;color:#46536a;padding:2px 0}
.notices-panel,.demo-details{padding:14px 18px;margin:14px 0}
.notice-sent{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);margin-top:8px}
.notice-sent-text{min-width:0}.notice-sent-text small{display:block}.notice-sent-text p{margin:4px 0 0;font-size:13.5px;white-space:pre-wrap;color:#3d4960}
.notice-sent-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.demo-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}.demo-tools p{margin:0;color:var(--muted);font-size:13.5px;max-width:560px}
.owner-notice{display:flex;align-items:flex-start;gap:12px;background:#fff8e6;border:1px solid #f3d58b;border-radius:10px;padding:12px 12px 12px 14px;margin:0 0 12px}
.owner-notice-icon{font-size:20px;line-height:1.2}.owner-notice-text{flex:1;min-width:0}.owner-notice-text b{font:700 14.5px Manrope;display:block}
.owner-notice-text p{margin:2px 0 4px;font-size:14px;white-space:pre-wrap;color:#3d4960}.owner-notice-text small{color:#9a7a33;font-size:12px}
.owner-notice-close{width:30px;height:30px;font-size:17px;flex:none;background:transparent}
.bill-ledger{padding:14px 16px}
.bill-ledger{container-type:inline-size}
.bill-filter{display:flex;gap:8px;flex-wrap:wrap}.bill-filter>*{flex:1 1 170px;min-width:0}.bill-filter select{flex:1;min-width:150px;border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:14px;background:#fff;color:var(--ink)}
.bill-total{font-size:13.5px;color:var(--muted);margin:10px 0 6px}.bill-total b{color:var(--ink);font-size:15px}
.bill-row{display:grid;grid-template-columns:96px minmax(0,1.3fr) 104px minmax(0,1.2fr) 104px max-content;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.bill-row small{display:block;color:#8b96a8;font-size:12px;overflow-wrap:anywhere}
.bill-head{font-size:12px;font-weight:700;color:#8b96a8;text-transform:uppercase;letter-spacing:.5px;border-top:0}
.bill-row.cancelled .bill-amount b,.bill-row.cancelled .bill-school b{text-decoration:line-through;color:#a2abbb}
.bill-cancel-note{color:#b34747!important}
.bill-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.danger-text{color:#b34747!important}
.bill-section,.bill-months{padding:14px 18px;margin:12px 0}.bill-section>form,.bill-section>div,.bill-section>p{margin-top:12px}
.bill-month-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.bill-month-list div{border:1px solid var(--line);border-radius:9px;padding:8px 10px;display:grid}.bill-month-list span{font-size:12.5px;color:var(--muted)}.bill-month-list small{font-size:12px;color:#8b96a8}
.pay-history-row.cancelled b{text-decoration:line-through;color:#a2abbb}
@media (max-width:900px){
  .school-row{flex-direction:column;align-items:stretch}.sr-actions{justify-content:flex-start;max-width:none}
}
@container (max-width:760px){
  .bill-head{display:none}
  .bill-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 0}
  .bill-date{grid-column:1/-1;order:-1;font-weight:700;display:flex;gap:8px;align-items:baseline}.bill-date small{display:inline}
  .bill-amount{text-align:right}.bill-period{font-size:12.5px;color:var(--muted)}.bill-actions{justify-content:flex-end}
}
@media (max-width:640px){
  .schools-head{align-items:stretch;flex-direction:column}.schools-head-actions .btn{flex:1}
  .notice-sent{flex-direction:column}.notice-sent-meta{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
}
.school-list{container-type:inline-size}
@container (max-width:860px){.school-row{flex-direction:column;align-items:stretch}.sr-actions{justify-content:flex-start;max-width:none}}
/* The school filter dropdown is the phone version of the chips: hide its styled wrapper on wider screens. */
.modern-dropdown:has(> .school-filter-select){display:none;margin:4px 0 12px}
@media(max-width:720px){.modern-dropdown:has(> .school-filter-select){display:block}}
@media(max-width:640px){.owner-stats .report-stat{padding:10px 12px}.owner-stats .report-stat b{font-size:19px}}

/* ===== Version 83: tidy page headers and button rows ===== */
/* The page title already names the page, so the first header under it sits close. */
.topbar+.section-head,.subtabs+.section-head{margin-top:0}
@media(min-width:721px){
  /* Heading text and its buttons share a row; when there is no room, the buttons move below as one row (never a broken grid). */
  .section-head{flex-wrap:wrap;align-items:flex-end;row-gap:10px}
  .section-head>div:first-child{flex:1 1 300px;min-width:0}
  .section-actions,.schools-head-actions{display:flex;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-left:auto}
  .section-head .btn{white-space:nowrap}
}
/* Every button has a 1px border (transparent unless outlined), so buttons side by side are the same height. */
.section-actions .btn,.schools-head-actions .btn,.sr-actions .btn,.approve-actions .btn,.top-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.2}
/* Class card buttons: three equal columns instead of 2 + 1. */
.class-qr-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.class-qr-actions .btn{padding:8px 4px;text-align:center;line-height:1.25}
/* Teacher form: "Speak to type" and the language take half the row each. */
.notes-tools .dictate-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.notes-tools .dictate-row .dictate-btn{width:100%;justify-content:center;white-space:nowrap;min-height:42px}
.notes-tools .dictate-row .modern-dropdown,.notes-tools .dictate-row .dictate-lang{width:100%!important;max-width:none!important;min-width:0!important;flex:none!important}
.notes-tools .dictate-row .modern-dropdown-trigger{min-height:42px;width:100%}
/* "Take photo" and "Gallery": identical size side by side, text sized to fit one line. */
.photo-picker .photo-sources .btn{display:flex;align-items:center;justify-content:center;gap:6px;height:100%;min-height:52px;padding:12px 8px;font-size:15px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:380px){.photo-picker .photo-sources .btn{font-size:14px;padding:12px 6px}}
/* Teacher Home tabs */
.tutor-tabs{margin:18px 0 6px}
.tab-count{display:inline-block;min-width:22px;margin-left:4px;padding:1px 7px;border-radius:99px;background:#eef1f7;color:#46536a;font-size:12.5px;font-weight:700;text-align:center}
.subtab.active .tab-count{background:#ffffff33;color:#fff}
.tutor-pane[hidden]{display:none}
.tutor-pane>.section-head:first-child,.tutor-pane .tutor-post-library>.section-head:first-child{margin-top:4px}
.tutor-pane .section-head h2{display:none}
.tutor-tabs .subtab{white-space:nowrap}
@media(max-width:420px){.tutor-tabs .subtab{font-size:14px;padding:9px 4px}.tutor-tabs .tab-count{margin-left:2px;padding:1px 6px}}
.tutor-pane .tutor-post-library{margin-top:10px}
/* Form boxes in one row line up: date pickers are no taller than text boxes and dropdowns. */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field .modern-dropdown-trigger{min-height:44px}
.field input[type=date],.field input[type=time]{height:44px;padding-top:0;padding-bottom:0}

/* ===== Version 84: school row buttons, message popup, teacher list, quick start, Due today ===== */
.sr-actions{flex-direction:column;align-items:flex-end;flex-wrap:nowrap}
.sr-actions-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
@container (max-width:860px){.sr-actions{align-items:stretch}.sr-actions-row{justify-content:flex-start}}
@media(max-width:900px){.sr-actions{align-items:stretch}.sr-actions-row{justify-content:flex-start}}
.send-via{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 2px}.send-via>span{font-size:13.5px;font-weight:700;color:#56627a;margin-right:2px}
.notice-form .field{margin-bottom:10px}
.teacher-search{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14.5px;margin:0 0 10px;background:#fff}
.teacher-list{display:grid;gap:8px}
.teacher-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.teacher-row[hidden]{display:none}
.tr-avatar{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--brand-faint,#eef2ff);color:var(--blue);font:800 13px Manrope}
.tr-main{flex:1;min-width:0;display:grid;gap:2px}
.tr-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tr-title b{font:700 15px Manrope}
.tr-count{font-size:12px;font-weight:700;color:var(--green);background:#eef8f4;border-radius:99px;padding:2px 8px}
.tr-line{font-size:13px;color:#46536a;overflow-wrap:anywhere}.tr-small{color:var(--muted);font-size:12.5px}.tr-warn{color:#b07a12;font-weight:600}
.tr-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:420px}
.tr-actions .btn.small{padding:7px 10px;font-size:13px}
.teacher-row.former{background:#fafbfd}.teacher-row.former .tr-avatar{background:#eef0f4;color:#8a94a6}
.former-teachers{padding:14px 16px;margin:14px 0}.former-teachers>summary{cursor:pointer;font-size:14px;color:#46536a}.former-teachers .teacher-row{margin-top:8px}
.teacher-list,.former-teachers{container-type:inline-size}
@container (max-width:700px){.teacher-row{flex-wrap:wrap}.tr-actions{max-width:none;width:100%;justify-content:flex-start;padding-left:50px}}
.quick-start .qs-level{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 10px}
.quick-start legend{font:700 14px Manrope;padding:0 6px}
.qs-classes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.qs-subjects{display:grid;gap:4px}.qs-subjects small{color:var(--muted);font-weight:700}
.qs-subjects textarea{resize:vertical;min-height:0;font:inherit;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13.5px;width:100%}
.due-list{display:grid;gap:8px;margin:10px 0}
.due-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-left:4px solid #e7a21a;border-radius:10px;padding:10px 12px}
.due-row.done{border-left-color:#3bb27f}
.due-mark{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff4dc;color:#8a5a00;font-weight:800;flex:none}.due-row.done .due-mark{background:#eaf8f1;color:#188565}
.due-text{flex:1;min-width:0;display:grid}.due-text b{font:700 14.5px Manrope}.due-text small{color:var(--muted);font-size:12.5px}
.tab-count.due{background:#fff0e0;color:#b25d00}
.my-reminders{margin:6px 0 4px}
.weeks-field{margin:8px 0 4px;max-width:360px}
@container (max-width:700px){.tr-actions{display:grid;grid-auto-flow:column;grid-auto-columns:auto;justify-content:start;padding-left:0;gap:5px}.tr-actions .btn.small{padding:7px 8px;font-size:12.5px;white-space:nowrap}}
@container (max-width:420px){.tr-actions .lbl{display:none}}
.tutor-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
@media(max-width:420px){.tutor-tabs .subtab{font-size:12.5px;padding:9px 2px}.tutor-tabs .tab-count{display:block;margin:2px auto 0;width:max-content}}
.quick-start legend label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
/* Data location after the move: one status line */
.data-location-ok{padding:12px 16px}
.data-location-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.data-location-line code{font-size:12.5px;overflow-wrap:anywhere}

/* ===== Version 86: WhatsApp logo, Today's diary, school page ===== */
.wa-ico{width:16px;height:16px;fill:currentColor;flex:none;vertical-align:-3px}
.btn.secondary .wa-ico,.btn.ghost .wa-ico{fill:#1fa855}
.tr-actions .sr-wa{padding:7px 9px}.tr-actions .sr-wa .wa-ico{width:17px;height:17px}
/* Student class page: notebook-style diary */
.class-diary{position:relative;margin:18px 0 22px;background:#fffef8;border:1px solid #ece6cf;border-radius:10px;padding:14px 16px 12px 46px;box-shadow:0 6px 18px rgba(60,50,10,.06);overflow:hidden}
.class-diary:before{content:'';position:absolute;top:0;bottom:0;left:32px;width:2px;background:#f3b6b6}
.diary-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:6px;border-bottom:2px solid #c9d8f3}
.diary-head b{font:800 17px Manrope;color:#22305a}.diary-head span{font-size:13px;color:#7a7458}
.diary-lines{list-style:none;margin:0;padding:0;background:repeating-linear-gradient(#fffef8 0 39px,#d9e3f5 39px 40px)}
.diary-line{display:grid;grid-template-columns:minmax(80px,auto) 1fr auto;align-items:center;gap:10px;width:100%;min-height:40px;padding:4px 0;border:0;background:none;text-align:left;font:inherit;color:#26314d;cursor:pointer}
.diary-line:hover .diary-title{color:var(--blue);text-decoration:underline}
.diary-subject{font-weight:700;font-size:14px;color:#22305a}
.diary-title{font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diary-type{font-size:11.5px;font-weight:700;color:#5d6880;background:#eef1f7;border-radius:99px;padding:2px 8px;white-space:nowrap}.diary-type.hw{background:#fff1dc;color:#9a5b00}
.diary-foot,.diary-empty{margin:8px 0 0;font-size:12.5px;color:#8a8466}
@media(max-width:520px){.class-diary{padding-left:38px}.class-diary:before{left:26px}.diary-line{grid-template-columns:1fr auto;gap:2px 8px}.diary-subject{grid-column:1/-1;font-size:12.5px;color:#6b7591}.diary-lines{background:none}.diary-lines li{border-bottom:1px solid #d9e3f5}.diary-title{white-space:normal}}
/* School page (/school/ADDRESS/) */
.sp-page{max-width:760px}
.sp-head{position:relative;overflow:hidden;padding:26px 18px 30px;border-radius:0 0 18px 18px}
.sp-head:after{content:'';position:absolute;right:-60px;top:-70px;width:200px;height:200px;border-radius:50%;border:1px solid #ffffff40;box-shadow:0 0 0 26px #ffffff0d,0 0 0 52px #ffffff0a}
.sp-head h1{font-size:22px}
.sp-head .sp-logo,.sp-head .sp-mark{position:relative;z-index:1}
.sp-today{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:-34px 0 16px;position:relative;z-index:2;box-shadow:0 10px 26px rgba(31,47,82,.08)}
.sp-today b{display:block;font:700 15px Manrope}.sp-today small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.sp-dot{width:12px;height:12px;border-radius:50%;background:#22b07d;box-shadow:0 0 0 5px #22b07d26;flex:none}
.sp-today.quiet .sp-dot{background:#c3cad6;box-shadow:0 0 0 5px #c3cad633}
.sp-today.holiday{background:#fff8e6;border-color:#f3d58b}.sp-today.holiday>span{font-size:22px}
.sp-list{display:grid;gap:8px}
@media(min-width:620px){.sp-list{grid-template-columns:1fr 1fr}}
.sp-class.is-new{border-left:4px solid #22b07d}
.sp-new{font-size:12px;font-weight:800;color:#0f7a55;background:#e3f7ee;border-radius:99px;padding:3px 9px;white-space:nowrap}
.sp-contact{margin:4px 16px 0;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px}
.sp-contact h2{font:700 15px Manrope;margin:0 0 8px}
.sp-contact-list{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px}
.sp-contact-list a,.sp-contact-list span{display:inline-flex;align-items:center;gap:6px;color:#33405a;text-decoration:none;overflow-wrap:anywhere}
.sp-contact-list a:hover{color:var(--brand-main,#315cf5)}
.sp-contact-list .wa-ico{fill:#1fa855}
/* Version 87: class card QR row holds one QR button (plus Add PIN for principals) */
.class-qr-actions{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.sp-diaries{display:grid;gap:12px;margin-bottom:18px}
@media(min-width:620px){.sp-diaries{grid-template-columns:1fr 1fr}}
.sp-diary{margin:0}
.sp-diary .diary-head a{font-size:13px;font-weight:700;color:var(--brand-main,#315cf5);text-decoration:none}
a.diary-line{text-decoration:none}

/* ===== Version 89: one SVG icon set for navigation ===== */
.ui-icon{width:20px;height:20px;display:block;flex:none}
.nav-icon{display:inline-grid;place-items:center;width:22px;height:22px}
.home-tile-icon .ui-icon{width:22px;height:22px}
/* School page: a single diary or class uses the full width */
.sp-diaries>:only-child,.sp-list>:only-child{grid-column:1/-1}
.diary-subject.same{visibility:hidden}
@media(max-width:520px){.diary-subject.same{display:none}}
a.btn{text-decoration:none}
.remember-check{display:flex;align-items:center;gap:8px;margin:-4px 0 16px;font-size:14.5px;color:var(--muted,#5b6782);cursor:pointer}
.remember-check input{width:18px;height:18px;margin:0;accent-color:var(--blue)}
/* Android app start (/app): welcome, find your school, my classes */
.aps{min-height:100vh;background:var(--bg);display:flex;flex-direction:column;max-width:560px;margin:0 auto}
.aps-hero{background:linear-gradient(160deg,#315cf5 0%,#2449d6 60%,#1d3bb3 100%);color:#fff;padding:28px 24px 72px}
.aps-hero-small{padding:26px 22px 62px}
.aps-mark{width:50px;height:50px;border-radius:15px;background:#fff;color:#315cf5;display:grid;place-items:center;font:800 26px Manrope,sans-serif;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.aps-hero h1{font:800 28px/1.15 Manrope,sans-serif;margin:20px 0 8px;color:#fff}
.aps-hero-small h1{margin:0 0 4px}
.aps-hero p{margin:0;opacity:.9;font-size:15px;line-height:1.45}
.aps-sheet{flex:1;background:var(--bg);border-radius:24px 24px 0 0;margin-top:-44px;padding:22px 16px 28px;position:relative}
.aps-flat{margin-top:0;border-radius:0;padding-top:16px}
.aps-label{font:700 12px Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 4px 10px}
.aps-sheet>.aps-label:first-child{margin-top:2px}
.aps-role,.aps-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;font:inherit;color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:0 2px 8px rgba(31,47,82,.04)}
.aps-role{margin-bottom:10px}
.aps-role:hover,.aps-row:hover,.aps-role:focus-visible,.aps-row:focus-visible{border-color:var(--blue);outline:none}
.aps-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none}
.aps-ic svg,.aps-search svg,.aps-alt-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aps-student .aps-ic{background:#fff4dc;color:#b7791f}
.aps-teacher .aps-ic{background:#e3f7ee;color:#137a55}
.aps-principal .aps-ic{background:#edf1ff;color:#315cf5}
.aps-row-text{min-width:0;flex:1}
.aps-row-text b{display:block;font:700 16px Manrope,sans-serif;overflow:hidden;text-overflow:ellipsis}
.aps-row-text small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.aps-chev{color:#b4bccb;font-size:24px;line-height:1}
.aps-top{display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid var(--line);padding:14px 14px 12px;position:sticky;top:0;z-index:2}
.aps-top h1{font:800 19px Manrope,sans-serif;margin:0}
.aps-top small{color:var(--muted);font-size:13px}
.aps-back{border:0;background:var(--bg);width:40px;height:40px;border-radius:12px;font-size:24px;line-height:1;color:var(--ink);cursor:pointer;flex:none}
.aps-search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:4px 14px;color:var(--muted)}
.aps-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.aps-search input{border:0;outline:0;background:transparent;font:500 16px 'DM Sans',sans-serif;flex:1;min-width:0;padding:10px 0;color:var(--ink)}
.aps-note{display:block;color:var(--muted);font-size:13px;margin:8px 4px 0}
.aps-list{display:grid;gap:8px;margin-top:10px}
.aps-list .aps-row{box-shadow:none}
.aps-logo{width:44px;height:44px;border-radius:12px;background:#315cf5;color:#fff;display:grid;place-items:center;font:800 15px Manrope,sans-serif;flex:none;overflow:hidden}
.aps-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.aps-class-badge{background:var(--blue-soft);color:var(--blue)}
.aps-alt{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.aps-alt-btn{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 6px;font:600 13.5px 'DM Sans',sans-serif;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.aps-alt-btn svg{color:var(--blue)}
.aps-alt-btn.on{border-color:var(--blue);background:var(--blue-soft)}
.aps-way{margin-top:12px}
.aps-way .code-form{margin:0}
.aps-scan video{width:100%;max-height:320px;border-radius:14px;background:#000;object-fit:cover;display:block;margin-bottom:8px}
.aps-field-label{display:block;font-weight:600;font-size:14px;margin:0 0 6px}
.aps-linkrow{display:flex;gap:8px}
.aps-linkrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px;font:500 15px 'DM Sans',sans-serif;background:#fff}
.aps-hint{display:block;color:var(--muted);font-size:12.5px;margin-top:6px}
.aps .error:not(:empty){display:block}
.aps-class{position:relative}
.aps-class .aps-row{padding-right:52px}
.aps-remove{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:#a3acbd;font-size:22px;cursor:pointer}
.aps-remove:hover{background:var(--bg);color:#b84f4f}
.aps-class .aps-chev{display:none}
.aps-add{width:100%;margin-top:12px;border:1.5px dashed #c5cde0;background:transparent;border-radius:16px;padding:14px;font:600 14.5px 'DM Sans',sans-serif;color:var(--blue);cursor:pointer}
.aps-staff{display:block;margin:18px auto 0}
.aps-foot{text-align:center;color:var(--muted);font-size:12.5px;margin:22px 0 0}
.aps-foot a{color:var(--muted)}
.aps [hidden]{display:none!important}
.app-switch{display:block;text-align:center;margin:18px auto 28px;font-size:14px;color:var(--muted)}

/* ===== Version 90: Your class (remembered on this phone) ===== */
.my-classes{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 16px}
.my-classes h2{font:700 15px Manrope;margin:0 0 8px}
.my-class{display:flex;align-items:center;gap:8px}
.my-class+.my-class{margin-top:6px}
.my-class a{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;background:var(--brand-main,#315cf5);color:#fff;text-decoration:none}
.my-class a b{font:700 15px Manrope}.my-class a span{font-size:13.5px;font-weight:700;opacity:.9}
.my-class .icon-btn{width:34px;height:34px;flex:none}
.class-diary[hidden]{display:none}

/* ===== Version 92: Super Admin setup warnings ===== */
.owner-health{padding:6px 16px;margin:0 0 14px;border-color:#f3c98b;background:#fff9ef}
.health-row{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:10px 0}
.health-row+.health-row{border-top:1px solid #f1e3c8}
.health-row b{font:700 14.5px Manrope;color:#7a4b00}
.health-row span{flex:1 1 260px;font-size:13.5px;color:#6b5a3a}

/* ===== Version 93: class switcher for brothers and sisters ===== */
.my-classes-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.my-classes-head h2{margin:0}
.my-classes-hint{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.class-switch{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;margin:0 0 4px;scrollbar-width:none}
.class-switch a{flex:none;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:#fff;color:#33405a;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.class-switch a.on{background:var(--brand-main,#315cf5);border-color:var(--brand-main,#315cf5);color:#fff}
.class-switch a.add{border-style:dashed;color:var(--brand-main,#315cf5)}
/* Add to home screen bar (student pages on phones) */
.install-bar{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 10px 10px 12px;box-shadow:0 14px 40px rgba(20,30,60,.18);transform:translateY(130%);transition:transform .3s ease;max-width:520px;margin:0 auto}
.install-bar.in{transform:none}
.install-bar img{border-radius:9px;flex:none}
.install-bar div{flex:1;min-width:0}.install-bar b{display:block;font:700 14.5px Manrope}.install-bar small{display:block;font-size:12.5px;color:var(--muted)}
.install-bar .icon-btn{width:32px;height:32px;flex:none;border:0;background:transparent}
.sp-page,.public-page{padding-bottom:84px}
@media (prefers-reduced-motion:reduce){.install-bar{transition:none}}

/* ===== Version 94: Find your school (/school/) ===== */
.finder-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin:-34px 0 14px;position:relative;z-index:2;box-shadow:0 10px 26px rgba(31,47,82,.08)}
.finder-box label{display:block;font:700 14px Manrope;margin-bottom:8px}
.finder-box input{width:100%;border:1px solid #d5dbe6;border-radius:10px;padding:12px 14px;font-size:16px}
.finder-box input:focus{outline:none;border-color:var(--brand-main,#315cf5);box-shadow:0 0 0 3px #315cf51a}
.finder-box small{display:block;margin-top:6px;color:var(--muted);font-size:12.5px}
#finder-results{margin-bottom:16px}
.finder-badge{overflow:hidden}.finder-badge img{width:100%;height:100%;object-fit:contain;background:#fff}
.finder-help{margin-top:16px;padding:12px 14px;border:1px dashed #d5dbe6;border-radius:12px;color:#46536a;font-size:13.5px}.finder-help p{margin:4px 0 0;color:var(--muted)}

/* ===== Version 95: zoomable photos ===== */
.reader-slide img{cursor:zoom-in}
.reader-zoom{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border:0;border-radius:99px;background:rgba(15,23,42,.62);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}
.reader-zoom .ui-icon{width:20px;height:20px}
.reader-stage{position:relative}

/* ===== Version 96: neat handwriting for diary titles (Urdu falls back to the normal font) ===== */
.diary-title{font-family:'Patrick Hand','DM Sans',system-ui,sans-serif;font-size:17px;letter-spacing:.2px;color:#1f3a7a}
@media(max-width:520px){.diary-title{font-size:17.5px}}

/* ===== Version 97: open teacher notes, custom class codes ===== */
.reader-notes p.notes-clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.reader-notes .notes-more{margin-top:4px}

/* ===== Version 98: four access choices ===== */
.access-modes{display:grid;gap:8px}
@media(min-width:720px){.access-modes{grid-template-columns:1fr 1fr}}
.access-mode{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.access-mode input{margin-top:3px;accent-color:var(--blue);width:18px;height:18px;flex:none}
.access-mode b{display:block;font:700 15px Manrope}.access-mode small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.access-mode:has(input:checked){border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 1px var(--blue) inset}
.access-note{min-height:1em;margin:8px 0 10px}
.access-more{margin:6px 0 10px}.access-more>summary{cursor:pointer;font-size:14px;color:#46536a;margin-bottom:6px}
#student-access .panel-head{flex-wrap:wrap;gap:10px}

/* ===== Version 99: school logos without a white box ===== */
.sp-logo,.auth-aside .login-school-brand .school-brand-logo,.finder-badge img{background:none;padding:0}
.finder-badge:has(img){background:none}
.livecam-native small{display:block;text-decoration:none;font-weight:500;font-size:12px;opacity:.85}
.signin-msg{width:100%;margin:10px 0;border:1px solid var(--line);border-radius:10px;padding:10px;font:13.5px/1.5 inherit;background:#fafbfd;resize:vertical}
.activity-idle{padding:12px 16px;margin:12px 0}.activity-idle>summary{cursor:pointer;color:#46536a;font-size:14px}.activity-idle p{margin:8px 0 0;color:var(--muted);font-size:13.5px}
/* Student pages polish (Version 105) */
.code-form input::placeholder{text-transform:none;letter-spacing:0;font:500 16px 'DM Sans',system-ui,sans-serif;color:#a0a9b8}
.public-header .sp-back{margin:0;padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;font-size:14px;white-space:nowrap}
.public-header .sp-back:hover{border-color:var(--brand-light,#cbd6ff)}
.public-subject-icon[data-tint="1"]{background:#e6f6ee;color:#178a57}
.public-subject-icon[data-tint="2"]{background:#fff2df;color:#b26a00}
.public-subject-icon[data-tint="3"]{background:#f0ebff;color:#6a48d7}
.public-subject-icon[data-tint="4"]{background:#e2f5f7;color:#0f7f8c}
.public-subject-icon[data-tint="5"]{background:#fdebef;color:#c23a5b}
.public-subject-card.is-empty{background:transparent;border-style:dashed}
.public-subject-card.is-empty .public-subject-icon{background:#eef0f4;color:#9aa3b2}
.public-subject-card.is-empty .public-subject-info b{color:#5d687c;font-weight:600}
.public-subject-new{flex:none;padding:3px 9px;border-radius:99px;background:#e6f6ee;color:#178a57;font-size:12px;font-weight:700}
.sp-back-link{display:inline-flex;align-items:center;margin:0 0 10px;padding:4px 0;border:0;background:none;color:var(--brand-main,#315cf5);font:700 15px 'DM Sans',system-ui,sans-serif;cursor:pointer}
.student-subject-toolbar{flex-direction:row!important;align-items:center!important;justify-content:space-between;flex-wrap:wrap;gap:10px 16px}
.student-subject-toolbar .student-work-heading{margin:0;gap:11px}
.student-subject-toolbar .student-work-heading h2{font-size:19px}
.student-subject-toolbar .student-date-select{width:auto;min-width:0;justify-items:end}
@media(max-width:600px){.student-subject-toolbar .student-work-heading h2{font-size:17px}.student-subject-toolbar .student-date-select>label{display:none}}
@media(min-width:900px){.sp-page{max-width:880px}}
.sp-body{flex:none}.sp-foot{margin-top:auto}
.public-subject-card.is-empty{min-height:0;padding-top:10px;padding-bottom:10px}

/* Loading feedback and speed (Version 109) */
.load-bar{position:fixed;inset:0 0 auto;z-index:1000;height:3px;pointer-events:none;opacity:0;transition:opacity .2s}
.load-bar.on{opacity:1}
.load-bar span{position:absolute;inset:0 auto 0 0;width:40%;background:var(--blue);border-radius:0 3px 3px 0;animation:load-bar-run 1.1s ease-in-out infinite}
.load-bar em{position:fixed;top:10px;left:50%;transform:translateX(-50%);background:#1d2a43;color:#fff;font:600 13px 'DM Sans',system-ui,sans-serif;font-style:normal;padding:6px 12px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.18);opacity:0;transition:opacity .3s;white-space:nowrap}
.load-bar.slow em{opacity:1}
@keyframes load-bar-run{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.loading-slow{font-size:13.5px;color:var(--muted);opacity:0;animation:loading-slow-in .4s ease 8s forwards}
@keyframes loading-slow-in{to{opacity:1}}
.fresh-bar{position:fixed;z-index:999;left:50%;bottom:18px;transform:translateX(-50%);border:0;background:var(--blue);color:#fff;font:700 14.5px 'DM Sans',system-ui,sans-serif;padding:11px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.2);cursor:pointer;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.load-bar span{animation:none;width:100%;opacity:.7}}

/* Also post to other sections, WhatsApp share (Version 110) */
.also-post-list{display:flex;flex-wrap:wrap;gap:8px}
.also-post-option{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:14.5px;cursor:pointer}
.also-post-option:has(input:checked){border-color:var(--blue);background:var(--blue-soft);color:var(--blue-dark)}
.also-post-option input{width:18px;height:18px;margin:0;accent-color:var(--blue)}
.posted-banner{flex-wrap:wrap}
.posted-banner div.posted-banner-actions{flex:0 1 auto;display:flex;flex-wrap:wrap;gap:8px}
.posted-banner .wa-share{background:#1fa855;border-color:#1fa855;color:#fff}
.posted-banner .wa-share:hover{background:#178f47}