/* Shared visual system. Screen-only rules preserve document and receipt layouts. */
@media screen {
  :root{--ink:#203247;--muted:#64748b;--green:#087f70;--line:#e3e9ef;--bg:#f3f6fa;--mint:#def5ec;--peach:#fff0e3;--lavender:#ede9ff;--yellow:#fff5d6;--text-body:14px;--text-small:12px;--text-heading:30px;--text-section:19px;--text-subheading:16px}
  body{font-size:14px;line-height:1.55;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
  body h1{font-size:30px;line-height:1.2;letter-spacing:-1.1px;color:#172b42}
  body h2{font-size:19px;line-height:1.4;color:#203247}
  body h3{font-size:16px}body small{font-size:12px}
  body :is(.page-heading,.student-heading) p{font-size:14px;color:#64748b}
  body .tiny-label{font-size:11px;letter-spacing:1.8px;color:#087f70}
  body .brand{font-size:23px;letter-spacing:-1px}
  body .brand-icon{background:#0c9c87;box-shadow:0 4px 12px #087f7026;border-radius:10px}
  body .primary{background:#087f70;border:1px solid #087f70;border-radius:9px;font-size:14px;font-weight:650;box-shadow:0 3px 7px #087f701c;padding:11px 17px;min-height:42px}
  body .primary:hover{background:#06695d;box-shadow:0 5px 14px #087f702e}
  body :is(a,button,input,select,textarea):focus-visible{outline:3px solid #27bda980;outline-offset:3px}
  body :is(input,select,textarea){accent-color:#087f70}
  body :is(.student-form,.student-filters,.promotion-controls,.registration-form) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea),body .login-form-wrap input{border:1px solid #d7e0e9;background:#fff;border-radius:9px;color:#203247;font-size:14px;min-height:44px;transition:border-color .18s,box-shadow .18s}
  body :is(input,select,textarea):focus{border-color:#21a490;box-shadow:0 0 0 3px #0c9c8712}
  body input::placeholder,body textarea::placeholder{color:#8795a7}
  body :is(.student-form,.student-filters,.registration-form) label{font-size:13px;font-weight:600;color:#475569}
  body .sidebar{width:256px;background:#112b35;color:#d7e5e9;border-right:1px solid #153844;padding:27px 18px 0;scrollbar-color:#3b5963 transparent}
  body #sidebar .brand{color:#fff;font-size:23px;letter-spacing:-1px}
  body .sidebar .school-switch{background:#ffffff07;border:1px solid #ffffff14;border-radius:12px;padding:13px 11px;margin:27px 0 24px}
  body .sidebar .school-avatar{background:#ffffff12;border-radius:8px;font-size:21px}
  body .sidebar .school-switch strong{font-size:13px;color:#e3edf0;overflow-wrap:anywhere}
  body .sidebar :is(.school-switch small,.sidebar-profile small){font-size:11px;color:#9ab1bb}
  body .sidebar .nav-label{font-size:10px;color:#819ea9;letter-spacing:2px;margin:0 12px 13px}
  body .sidebar nav{gap:5px}
  body .sidebar nav>a,body .sidebar .student-menu summary{padding:11px 12px;min-height:42px;font-size:13px;color:#afc4cd;border-radius:9px;gap:10px}
  body .sidebar nav>a>span{font-size:18px;color:#82a4af}
  body .sidebar .student-menu{margin:2px 0;border-radius:10px}
  body .sidebar .student-menu-title{font-size:13px;font-weight:500}
  body .sidebar .student-menu summary>.student-menu-icon{color:#82a4af;width:18px;height:18px;font-size:17px}
  body #sidebar .student-menu svg{width:16px;height:16px;max-width:16px;max-height:16px}
  body .sidebar .student-menu[open]{background:#ffffff05;border-color:#ffffff0c}
  body .sidebar .student-menu[open]>summary{color:#70e0c6;background:#ffffff05}
  body .sidebar :is(nav>a:hover,.student-menu summary:hover,.student-submenu a:hover){background:#ffffff0c;color:#fff}
  body .sidebar nav>a.active{background:#0b796e;color:#fff;box-shadow:inset 3px 0 #6ee7c5}
  body .sidebar nav>a.active>span{color:#c3fff0}
  body .sidebar .student-submenu{margin:4px 10px 10px 31px;border-color:#35515d;padding-left:12px;gap:3px}
  body .sidebar .student-submenu a{padding:8px 10px;font-size:12px;line-height:1.5;color:#a8bec7;min-height:35px}
  body .sidebar .student-submenu a::before{border-color:#35515d;left:-12px}
  body .sidebar .student-submenu a.active{background:#146456;color:#baffea;box-shadow:inset 2px 0 #5ee2bc}
  body .sidebar .support-card{background:linear-gradient(135deg,#1c414a,#19353f);border:1px solid #ffffff12;border-radius:12px;padding:16px;color:#e0eded}
  body .sidebar .support-card>span{color:#6bddbd;font-size:24px}
  body .sidebar .support-card strong{font-size:13px}
  body .sidebar .support-card p{color:#98b4be;font-size:12px}
  body .sidebar :is(.support-card button,.sidebar-guide){background:#ffffff0c;color:#d7eeec;border:1px solid #ffffff17;border-radius:7px;font-size:12px}
  body .sidebar .logout{color:#b6cbd2;font-size:16px;padding:18px 10px}
  body .sidebar .logout span{font-size:13px}
  body .sidebar .sidebar-profile{margin:0 -18px;padding:17px 18px;border-color:#ffffff12}
  body .sidebar .sidebar-profile strong{font-size:13px;color:#eff9fa}
  body .sidebar .avatar{background:#28534f;color:#a9f5d7;border:1px solid #3c6b60;width:36px;height:36px}
  body .main-shell{margin-left:256px;min-width:0}
  body :is(.topbar,.student-header){background:#ffffffed;min-height:76px;border-bottom:1px solid var(--line);padding:18px 32px;gap:16px}
  body .student-header>div{font-size:14px;color:#506379;gap:16px}
  body .student-header>a{font-size:13px;color:#087f70;font-weight:600}
  body .breadcrumb{font-size:13px;color:#738399}
  body :is(.dashboard-main,.student-main){padding:32px;max-width:1560px}
  body :is(.page-heading,.student-heading){margin-bottom:26px;gap:20px}
  body :is(.panel,.stat-card,.student-card){border:1px solid #e0e7ef;border-radius:14px;background:#fff;box-shadow:0 3px 14px #233b5510}
  body .stat-card{padding:22px;min-height:176px;position:relative;overflow:hidden}
  body .stat-card::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:#17a087}
  body .stat-card:nth-child(2)::before{background:#8b7ddd}body .stat-card:nth-child(3)::before{background:#4e9cdb}body .stat-card:nth-child(4)::before{background:#e4ac53}
  body .stat-top{font-size:13px;color:#64748b}
  body .stat-value{font-size:32px;color:#172b42;letter-spacing:-1.3px;line-height:1.3;margin:15px 0 10px}
  body .stat-icon{border-radius:10px;font-size:21px}
  body :is(.stat-footer,.sub-stat){font-size:12px;color:#64748b}
  body .panel-heading{padding:22px 24px 0}
  body .panel-heading p{color:#64748b;font-size:12px}
  body .demo-banner{background:#eaf6f2;border:1px solid #d0e9df;border-radius:10px;color:#537367}
  body .demo-banner strong{color:#176651}
  body .student-tabs{border:1px solid #e0e7ef;border-radius:11px;padding:5px;background:#fff;gap:4px;margin-bottom:24px}
  body .student-tabs a{padding:10px 16px;border:0;border-radius:7px;color:#64748b;font-size:13px}
  body .student-tabs a.active{background:#e4f4ee;color:#087364;font-weight:700}
  body .student-secondary{background:#fff;border:1px solid #d7e2e8;border-radius:9px;color:#3c5967;font-size:13px;padding:10px 15px;min-height:42px}
  body .student-secondary:hover{background:#edf7f3;border-color:#a5d0c2}
  body table{font-size:13px}
  body th{background:#f6f8fb;color:#65758a;font-size:11px;font-weight:700;letter-spacing:.5px;padding:14px 20px;border-bottom:1px solid #e3e9ef}
  body td{padding:16px 20px;border-bottom:1px solid #edf1f5;color:#56677d;font-size:13px}
  body .student-table th{font-size:11px;color:#65758a}
  body .student-table td{font-size:13px;color:#56677d}
  body .student-table td strong{font-size:14px;color:#223b4c}
  body .student-table td small{font-size:12px;color:#738399}
  body tbody tr:hover{background:#f7fbfa}
  body :is(.student-status,.status){border-radius:6px;font-size:11px;font-weight:600;background:#e6f6ee;color:#26795c}
  body :is(.student-pagination,.student-footer,.dashboard-footer){font-size:12px;color:#728195}
  body :is(.student-notice,.success){background:#e9f7ef;border:1px solid #cce9da;color:#287352;border-radius:10px;font-size:14px}
  body .student-error,body .error{background:#fff1ef;border:1px solid #f4d6d0;color:#a74238;border-radius:10px}
  body dialog{border:1px solid #dce5eb;border-radius:18px;padding:32px;box-shadow:0 24px 90px #102d3533;max-width:min(540px,calc(100vw - 32px))}
  body dialog::backdrop{background:#102d3566;backdrop-filter:blur(4px)}
  body .login-layout{padding:22px;gap:22px;background:#f7f9fb}
  body .login-story{background:radial-gradient(ellipse at 15% 80%,#23645e 0,transparent 60%),#112f38;border-radius:22px;padding:38px 42px;color:#fff}
  body .login-story .brand{color:#fff}
  body .story-copy{padding-top:35px}
  body .story-copy h1{font-size:clamp(42px,4.5vw,68px);line-height:1.1;color:#f0fcf8;letter-spacing:-2.8px}
  body .story-copy>p{font-size:17px;color:#aac8c8;line-height:1.85}
  body .login-story .eyebrow{font-size:10px;color:#72d9bd;letter-spacing:2px}
  body .story-footer{color:#91b1b6;font-size:12px}
  body .art-orbit{border-color:#6bbaab40}
  body .art-card{color:#29564d;box-shadow:0 12px 30px #061f2930}
  body .login-form-side{background:#fff;border:1px solid #e4eaf0;border-radius:22px;padding:28px 9%}
  body .login-form-wrap{max-width:390px}
  body .login-form-wrap h2{font-size:29px;letter-spacing:-1px}
  body .login-form-wrap>.muted{font-size:14px;color:#64748b}
  body .login-form-wrap form label{font-size:13px;color:#44566b}
  body .login-form-wrap input{padding:14px 15px;min-height:49px}
  body .password-field input{padding-right:65px}
  body .login-submit{min-height:49px;margin-top:10px}
  body :is(.access-label,.secure-line,.help-text,.login-footer){font-size:12px;color:#6b7f8e}
  body .registration-page{background:#f3f6fa}
  body .register-story{background:linear-gradient(145deg,#112f38,#215a53);border:0;color:#eefbf5;border-radius:18px}
  body .register-story h1{color:#effbf7}body .register-story h1 em{color:#74dfbd}
  body .register-story>p{color:#b4ceca}
  body .register-eyebrow{color:#8de6cc}
  body .language-switcher select{border-color:#d7e0e9;border-radius:8px;padding:7px 10px;color:#506379;font-size:12px}
  body .menu-toggle{background:#eef4f7;color:#365a65;border-radius:8px;min-width:38px;min-height:38px}
}
@media screen and (max-width:1100px) and (min-width:701px){body .sidebar{width:230px;padding-left:14px;padding-right:14px}body .main-shell{margin-left:230px}body #sidebar .brand{font-size:21px}body :is(.student-main,.dashboard-main){padding:26px 22px}body .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:700px){
  body .sidebar{width:256px;box-shadow:12px 0 50px #112b3533}body .main-shell{margin-left:0}
  body :is(.topbar,.student-header){padding:14px 16px;min-height:66px;height:auto}
  body :is(.student-main,.dashboard-main){padding:24px 16px}
  body :is(.page-heading,.student-heading){gap:12px;flex-wrap:wrap}
  body :is(.page-heading,.student-heading) h1{font-size:26px;letter-spacing:-.7px}
  body :is(.page-heading,.student-heading) p{font-size:13px;max-width:none}
  body .stat-card{padding:16px;min-height:160px}body .stat-value{font-size:27px}body .stat-top{font-size:12px}
  body .student-tabs a{padding:9px 12px}body .student-card{padding:20px}body .student-directory{padding:0}
  body .student-filters{padding:18px}body .student-form :is(input,select,textarea){font-size:16px}
  body .login-layout{padding:12px;display:block}body .login-story{padding:26px;min-height:280px;border-radius:16px}
  body .story-copy{padding-top:28px}body .story-copy h1{font-size:40px;letter-spacing:-1.5px}body .story-copy>p{font-size:14px}
  body .login-form-side{margin-top:12px;padding:24px;border-radius:16px}body .login-form-wrap{padding:30px 0}
  body .login-form-wrap h2{font-size:26px}body .login-form-wrap input{font-size:16px}
}
@media screen and (max-width:380px){body .stats-grid{grid-template-columns:1fr}body .stat-card{min-height:145px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media screen {
  body .stat-icon svg{display:block;width:22px;height:22px}
  body .stat-card>a{font-size:12px!important;font-weight:600}
  body .stat-footer{flex-wrap:wrap;gap:4px 12px;line-height:1.65}
  body .chart-legend{color:#65758a}body .table-footer{color:#728195}
}
@media screen and (max-width:700px){body .sidebar{box-shadow:none}body .sidebar.open{box-shadow:12px 0 50px #112b3533}body .heading-actions .primary{margin-top:0}body .page-heading{row-gap:18px}}
@media screen {
  body .register-panel{border-color:#e0e7ef;box-shadow:0 3px 14px #233b5510}
  body .register-field label{font-size:13px;color:#475569;font-weight:600}
  body .register-field :is(input,select,textarea){font-size:14px;color:#203247;border:1px solid #d7e0e9;border-radius:9px;background:#fff;min-height:44px}
  body .register-intro,body .register-submit-row>p{font-size:14px;color:#64748b}
  body .register-story .story-points{border-color:#ffffff24}
  body .register-story .story-points p{color:#b4ceca}
  body .register-story .story-points strong{color:#effbf7}
  body .register-story .story-points>div>span{color:#8de6cc;border-color:#ffffff30}
  body .register-story-footer{color:#9abeb8;border-color:#ffffff24}
  body .student-card-title p,body .class-card>p,body .student-photo-field p,body #guardian-password-help{font-size:13px;color:#6b7e8e;line-height:1.7}
}
@media screen and (max-width:700px){body .register-field :is(input,select,textarea){font-size:16px}}
@media screen {
  body.student-page,body.registration-page{background:var(--bg)}
  body .student-form label,body .register-field label{margin:0 0 8px}
  body .register-panel .register-eyebrow{color:#087f70}
  body .student-form :is(input,select,textarea)::placeholder{color:#8795a7}
  body .student-tabs{scrollbar-width:thin;scrollbar-color:#b7cdc5 transparent}
}