
/* ClassFlow Premium V3 — visual layer only */
:root{--p3-navy:#0b1220;--p3-blue:#2563eb;--p3-blue2:#1d4ed8;--p3-cyan:#0891b2;--p3-bg:#f6f8fc;--p3-surface:#fff;--p3-text:#111827;--p3-muted:#64748b;--p3-border:#e2e8f0;--p3-success:#059669;--p3-warning:#d97706;--p3-danger:#dc2626;--p3-radius:16px;--p3-shadow:0 12px 30px rgba(15,23,42,.07);--p3-shadow-lg:0 28px 70px rgba(2,6,23,.16)}
html{scroll-behavior:smooth;background:var(--p3-bg)}body{background:var(--p3-bg);color:var(--p3-text);letter-spacing:-.005em}button,input,select,textarea{font-family:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(37,99,235,.2);outline-offset:2px}
.auth-screen{background:radial-gradient(circle at 15% 15%,rgba(37,99,235,.18),transparent 31%),radial-gradient(circle at 85% 85%,rgba(8,145,178,.14),transparent 30%),#08111f;padding:24px}
.auth-card{width:min(480px,100%);padding:38px;border:1px solid rgba(255,255,255,.55);border-radius:24px;box-shadow:var(--p3-shadow-lg);background:rgba(255,255,255,.97);animation:p3-rise .35s ease-out both}.auth-brand{padding-bottom:22px;border-bottom:1px solid var(--p3-border)}.auth-brand strong{font-size:18px;color:#0f172a}.auth-copy{padding:30px 0 20px}.auth-copy h1{font-size:36px;color:#0f172a}.auth-copy p{font-size:14px;line-height:1.65}.brand-mark{background:linear-gradient(145deg,var(--p3-blue),var(--p3-cyan));border-radius:13px;box-shadow:0 12px 26px rgba(37,99,235,.24)}
.app-shell{grid-template-columns:260px minmax(0,1fr);background:var(--p3-bg)}.sidebar{background:linear-gradient(180deg,#0b1220 0%,#101a2e 100%);border-right:0;padding:22px 14px;color:#fff;box-shadow:10px 0 35px rgba(15,23,42,.08)}.sidebar .brand{padding:4px 10px 24px}.sidebar .brand strong{color:#fff}.sidebar .brand span{color:#8fa1bb;text-transform:uppercase;letter-spacing:.12em;font-size:9px}.small-mark{background:linear-gradient(145deg,#2563eb,#06b6d4);box-shadow:0 8px 20px rgba(37,99,235,.28)}.nav{gap:5px}.nav button{color:#aebbd0;border-radius:11px;padding:11px 12px;position:relative;transition:background .18s ease,color .18s ease,transform .18s ease}.nav button:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}.nav button.active{background:linear-gradient(90deg,rgba(37,99,235,.3),rgba(37,99,235,.13));color:#fff;box-shadow:inset 3px 0 0 #60a5fa}.nav-icon,.nav .material-symbols-outlined{color:#8baeff}.sidebar-cta{margin:18px 4px 8px!important;border:1px solid rgba(96,165,250,.28)!important;background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;color:#fff!important;border-radius:12px!important;box-shadow:0 12px 24px rgba(37,99,235,.2);transition:.18s!important}.sidebar-cta:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(37,99,235,.28)}.sidebar-utility{border-color:rgba(255,255,255,.08)}.utility-btn,.sidebar-signout{color:#aebbd0!important}.utility-btn:hover,.sidebar-signout:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}.profile-mini{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);border-radius:12px}.profile-mini .avatar{background:#1d4ed8;color:#fff}.profile-mini strong{color:#fff}.profile-mini span{color:#8fa1bb}
.topbar{height:82px;background:rgba(246,248,252,.86);border-bottom:1px solid rgba(226,232,240,.85);backdrop-filter:blur(18px);padding:0 34px}.topbar h2{font-size:23px;color:#0f172a}.topbar p{color:var(--p3-muted)}.month-pill{border-color:var(--p3-border);box-shadow:0 2px 7px rgba(15,23,42,.03);border-radius:10px}.page{max-width:1500px;padding:30px 34px 64px}
.hero-heading h3{font-size:27px;color:#0f172a}.metric-grid{gap:16px}.metric-card{border:1px solid var(--p3-border);border-radius:16px;padding:20px;min-height:132px;box-shadow:0 4px 18px rgba(15,23,42,.035);position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.metric-card:after{content:"";position:absolute;inset:auto -25px -45px auto;width:100px;height:100px;border-radius:50%;background:rgba(37,99,235,.045)}.metric-card:hover{transform:translateY(-2px);box-shadow:var(--p3-shadow);border-color:#cbd5e1}.metric-card .metric-label{color:var(--p3-muted);text-transform:uppercase;letter-spacing:.06em;font-size:10px}.metric-card .metric-value{color:#0f172a;font-size:32px}.section{border:1px solid var(--p3-border);border-radius:16px;box-shadow:0 4px 18px rgba(15,23,42,.03);padding:21px}.section-head h3{color:#0f172a}.quick-action,.class-card,.finance-action{border-color:var(--p3-border);border-radius:14px;box-shadow:0 2px 9px rgba(15,23,42,.025)}.quick-action:hover,.class-card:hover,.finance-action:hover{border-color:#bfdbfe;box-shadow:0 12px 28px rgba(15,23,42,.07)}.quick-icon{background:#eff6ff;color:#2563eb;border-radius:10px}.mini-stat{background:#f8fafc}.student-avatar{background:#eff6ff;color:#2563eb}
.btn{border-radius:10px;min-height:40px;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.btn.primary{background:linear-gradient(135deg,var(--p3-blue),var(--p3-blue2));box-shadow:0 7px 16px rgba(37,99,235,.18)}.btn.primary:hover{background:linear-gradient(135deg,#1d4ed8,#1e40af);box-shadow:0 10px 22px rgba(37,99,235,.24)}.btn.subtle,.btn.ghost{background:#f8fafc;border-color:var(--p3-border)}.btn.danger{background:#fef2f2;color:var(--p3-danger)}input,select,textarea{border-color:#cbd5e1;border-radius:10px;min-height:42px;background:#fff;transition:border-color .16s ease,box-shadow .16s ease}input:focus,select:focus,textarea:focus{border-color:#60a5fa;box-shadow:0 0 0 4px rgba(37,99,235,.1)}
.table-wrap{border:1px solid var(--p3-border)!important;border-radius:14px!important;overflow:auto;background:#fff}.data-table,.table{border-collapse:separate!important;border-spacing:0!important}.data-table th,.table th{background:#f8fafc!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.055em;font-size:10px!important}.data-table tr:hover td,.table tr:hover td{background:#f8fbff}.chip,.health{font-weight:750}.month-panel{background:linear-gradient(145deg,#0f172a,#16233a);border:1px solid #26344c;border-radius:18px;box-shadow:0 20px 40px rgba(15,23,42,.14)}
.workflow-page{background:rgba(2,6,23,.5)!important;backdrop-filter:blur(7px)}.workflow-page>form,#modalForm{border-radius:18px!important;box-shadow:var(--p3-shadow-lg)!important;animation:p3-rise .22s ease-out both}.toast{border-radius:12px!important;box-shadow:0 16px 36px rgba(15,23,42,.16)!important}
.empty-state{border:1px dashed #cbd5e1!important;background:linear-gradient(180deg,#fff,#f8fafc)!important;border-radius:16px!important}.skeleton{background:linear-gradient(90deg,#eef2f7 25%,#f8fafc 50%,#eef2f7 75%);background-size:200% 100%;animation:p3-shimmer 1.3s infinite}
@keyframes p3-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes p3-shimmer{to{background-position:-200% 0}}.page>*{animation:p3-rise .28s ease-out both}
@media(max-width:1100px){.app-shell{grid-template-columns:220px minmax(0,1fr)}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.page{padding:24px}}
@media(max-width:760px){body{padding-bottom:74px}.app-shell{display:block}.sidebar{display:none!important}.topbar{height:68px;padding:0 16px;position:sticky}.topbar h2{font-size:19px}.topbar-copy p{display:none}.month-pill{font-size:10px;padding:7px 8px}.page{padding:18px 14px 34px}.hero-heading{align-items:flex-start;flex-direction:column}.hero-heading h3{font-size:23px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric-card{min-height:112px;padding:15px}.metric-card .metric-value{font-size:25px}.section{padding:15px;border-radius:14px}.class-grid,.finance-columns,.month-steps{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.finance-actions{grid-template-columns:1fr 1fr}.student-row{align-items:flex-start;flex-wrap:wrap}.student-actions{width:100%;justify-content:flex-end}.mobile-nav{display:flex!important;position:fixed;z-index:100;bottom:0;left:0;right:0;height:68px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--p3-border);box-shadow:0 -10px 30px rgba(15,23,42,.08);backdrop-filter:blur(16px)}.mobile-nav button{min-width:0!important;flex:1!important;border-radius:10px!important}.workflow-page{padding:10px!important;align-items:flex-end!important}.workflow-page>form,#modalForm{width:100%!important;max-height:92vh!important;border-radius:18px 18px 12px 12px!important}.auth-card{padding:26px 22px;border-radius:20px}.auth-copy h1{font-size:30px}}
@media(max-width:430px){.metric-grid{grid-template-columns:1fr 1fr}.quick-grid,.finance-actions{grid-template-columns:1fr}.metric-card .metric-sub{font-size:10px}.topbar-actions{gap:6px}.page{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
