/* R21-P12 — Premium visual system for ALL authenticated role panels */
:root{
  --p10-navy:#071c2f;--p10-navy2:#0e3352;--p10-ink:#13283b;--p10-muted:#65788b;
  --p10-cream:#fffaf0;--p10-gold:#d7a53c;--p10-blue:#3aa7df;--p10-mint:#37b98a;
  --p10-violet:#8462c7;--p10-orange:#e7a22e;--p10-rose:#db6f85;
  --p10-line:rgba(14,51,82,.12);--p10-shadow:0 18px 48px rgba(7,28,47,.12);
  --p10-shadow-sm:0 10px 26px rgba(7,28,47,.10);--p10-radius:24px;
}
html{scroll-behavior:smooth}
body{color:var(--p10-ink);background:#f4f8fb}
button,a,input,select,textarea{font:inherit}

/* ---------- shared premium surfaces ---------- */
.panel,.hero-panel,.student-grid2>section,.student-welcome,.quick-access-panel,.absence-today-panel,.page-toolbar,
.auth-card,.login-story,.meeting-call,.trial-banner,.child-switcher{
  border:1px solid var(--p10-line)!important;border-radius:var(--p10-radius)!important;
  box-shadow:var(--p10-shadow-sm);background:#fff;position:relative;overflow:hidden
}
.panel::before,.student-grid2>section::before,.quick-access-panel::before,.absence-today-panel::before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--p10-blue),#8bd4f5);opacity:.9
}
.panel h2,.panel h3,.student-grid2 h2,.page-toolbar h3,.hero-panel h1,.student-welcome h1{color:var(--p10-ink)!important}
.panel p,.hint,.hero-panel p,.student-welcome p{color:var(--p10-muted)!important}
.eyebrow,.status-label{color:#9a6b09!important;font-weight:800;letter-spacing:0}
.soft-pill,.lock-badge{background:#eef5fb!important;color:var(--p10-navy2)!important;border:1px solid #d7e6f1!important}
.btn,.top-action-card,.quick-open,.sync-status,.icon-btn{border-radius:14px!important;transition:.22s ease!important}
.btn:hover,.top-action-card:hover,.quick-open:hover,.sync-status:hover,.icon-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(7,28,47,.13)}
.btn.primary{background:linear-gradient(135deg,#0d3c60,#17618f)!important;color:#fff!important;border:0!important}
.btn.ghost{background:#fff!important;color:var(--p10-navy2)!important;border:1px solid #cfdde8!important}
input,select,textarea{border:1px solid #d7e2ea!important;border-radius:13px!important;background:#fbfdff!important;color:var(--p10-ink)!important;outline:none}
input:focus,select:focus,textarea:focus{border-color:#62b7df!important;box-shadow:0 0 0 4px rgba(58,167,223,.12)!important;background:#fff!important}

/* ---------- parent panel ---------- */
.parent-shell{min-height:100vh;background:
 radial-gradient(circle at 88% 5%,rgba(55,185,138,.12),transparent 28%),
 radial-gradient(circle at 10% 20%,rgba(58,167,223,.12),transparent 26%),
 linear-gradient(180deg,#071c2f 0 195px,#f5f9fc 195px 100%)}
.parent-top{min-height:96px;padding:18px clamp(18px,4vw,58px)!important;background:rgba(5,24,42,.94)!important;border-bottom:1px solid rgba(255,255,255,.10);backdrop-filter:blur(16px);position:sticky;top:0;z-index:50}
.parent-top .school-brand b{color:#fff!important;font-size:19px}.parent-top .school-brand span{color:#afc4d5!important}
.parent-top .brandmark{background:linear-gradient(145deg,#f4d27d,#c79222)!important;color:#102b43!important;box-shadow:0 10px 25px rgba(0,0,0,.25)}
.parent-top .btn.ghost{background:rgba(255,255,255,.10)!important;color:#fff!important;border-color:rgba(255,255,255,.24)!important}
.parent-main{width:min(1180px,calc(100% - 34px));margin:0 auto;padding:28px 0 64px!important}
.parent-main>.hero-panel{min-height:220px;padding:34px 38px!important;background:
 linear-gradient(115deg,rgba(255,255,255,.98),rgba(250,247,237,.96)),linear-gradient(135deg,#fff,#f0f7fb)!important;
 border-color:#e2cf9e!important;box-shadow:0 24px 58px rgba(7,28,47,.18)!important}
.parent-main>.hero-panel::after{content:"";position:absolute;inset:auto -65px -90px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#f0c96c 0 6%,rgba(240,201,108,.22) 7% 38%,transparent 39%)}
.parent-main>.hero-panel h1{font-size:clamp(30px,4vw,52px)!important;line-height:1.35;margin:.25em 0!important}
.hero-lock{background:linear-gradient(145deg,#e9f8f3,#fff)!important;border:1px solid #b9e2d2!important;color:#186b53!important;border-radius:20px!important;box-shadow:0 10px 24px rgba(55,185,138,.12)}
.kpi-grid.compact>*{border-radius:20px!important;border:1px solid var(--p10-line)!important;box-shadow:var(--p10-shadow-sm)!important;background:#fff!important;min-height:110px;position:relative;overflow:hidden}
.kpi-grid.compact>*:nth-child(4n+1){border-top:4px solid var(--p10-blue)!important;background:linear-gradient(180deg,#f9fdff,#eef8fd)!important}
.kpi-grid.compact>*:nth-child(4n+2){border-top:4px solid var(--p10-mint)!important;background:linear-gradient(180deg,#fbfffd,#eef9f5)!important}
.kpi-grid.compact>*:nth-child(4n+3){border-top:4px solid var(--p10-violet)!important;background:linear-gradient(180deg,#fdfbff,#f4effb)!important}
.kpi-grid.compact>*:nth-child(4n){border-top:4px solid var(--p10-orange)!important;background:linear-gradient(180deg,#fffdf8,#fff6e6)!important}
.parent-main>.panel:nth-of-type(4n+1)::before{background:linear-gradient(180deg,var(--p10-blue),#7fd5f5)}
.parent-main>.panel:nth-of-type(4n+2)::before{background:linear-gradient(180deg,var(--p10-mint),#8ee0c4)}
.parent-main>.panel:nth-of-type(4n+3)::before{background:linear-gradient(180deg,var(--p10-violet),#baa5e5)}
.parent-main>.panel:nth-of-type(4n)::before{background:linear-gradient(180deg,var(--p10-orange),#f5cf73)}
.layout-2>.panel:nth-child(2)::before{background:linear-gradient(180deg,var(--p10-rose),#efb0be)}
.parent-main .panel{padding:26px!important;margin-top:20px!important}
.parent-main .layout-2{gap:20px!important;margin-top:20px!important}.parent-main .layout-2 .panel{margin-top:0!important}
.parent-homework-panel{background:linear-gradient(145deg,#fff,#f5fbff)!important}.pastoral-family-panel{background:linear-gradient(145deg,#fff,#f5fbf7)!important}.extracurricular-panel{background:linear-gradient(145deg,#fff,#fbf8ff)!important}.payment-info-panel{background:linear-gradient(145deg,#fff,#fffaf0)!important}

/* ---------- student panel ---------- */
body.student-plan{min-height:100vh;background:
 radial-gradient(circle at 15% 10%,rgba(132,98,199,.12),transparent 26%),
 radial-gradient(circle at 85% 18%,rgba(58,167,223,.10),transparent 24%),#f4f8fb!important;color:var(--p10-ink)!important}
body.student-plan>header{background:linear-gradient(110deg,#071c2f,#0f3d60)!important;border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(7,28,47,.18);padding:17px clamp(18px,4vw,55px)!important;position:sticky;top:0;z-index:50}
body.student-plan>header b,body.student-plan>header small{color:#fff!important}body.student-plan>header small{opacity:.72}
body.student-plan>header button{background:#fff!important;color:#0d3554!important;border:0!important;border-radius:13px!important;padding:10px 18px!important;font-weight:800}
body.student-plan main{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:28px 0 62px!important}
.student-welcome{padding:34px!important;background:linear-gradient(130deg,#fff 0 60%,#eef7fd 100%)!important;border-color:#cbdfea!important}
.student-welcome::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;left:-60px;bottom:-80px;background:radial-gradient(circle,rgba(58,167,223,.22),rgba(58,167,223,0) 70%)}
.student-welcome>small{color:#a27517!important;font-weight:900}.student-welcome h1{font-size:clamp(28px,3.5vw,45px)!important}
.student-kpis{gap:14px!important}.student-kpis article{border:1px solid var(--p10-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 10px 22px rgba(7,28,47,.08);padding:18px!important}
.student-kpis article:nth-child(1){border-top:4px solid var(--p10-blue)!important}.student-kpis article:nth-child(2){border-top:4px solid var(--p10-mint)!important}.student-kpis article:nth-child(3){border-top:4px solid var(--p10-orange)!important}.student-kpis article:nth-child(4){border-top:4px solid var(--p10-violet)!important}
.student-grid2{gap:20px!important;margin-top:20px!important}.student-grid2>section{min-height:215px;padding:24px!important;background:#fff!important}
.student-grid2>section:nth-child(6n+1)::before{background:var(--p10-blue)}.student-grid2>section:nth-child(6n+2)::before{background:var(--p10-mint)}.student-grid2>section:nth-child(6n+3)::before{background:var(--p10-violet)}.student-grid2>section:nth-child(6n+4)::before{background:var(--p10-orange)}.student-grid2>section:nth-child(6n+5)::before{background:var(--p10-rose)}.student-grid2>section:nth-child(6n)::before{background:#51a6a2}
body.student-plan main>.panel{margin-top:20px!important;padding:26px!important;background:linear-gradient(145deg,#fff,#f5f8ff)!important}

/* ---------- manager / teacher / finance shared dashboard ---------- */
.app-shell{background:#f3f7fa!important}.sidebar{background:linear-gradient(180deg,#061a2d,#0c304d)!important;border-left:1px solid rgba(255,255,255,.08)!important;box-shadow:-12px 0 34px rgba(7,28,47,.16)}
.sidebar .school-brand b,.sidebar .school-brand span,.nav-section-label{color:#fff!important}.sidebar .school-brand span,.nav-section-label{opacity:.68}
.side-nav button{border-radius:14px!important;margin:4px 7px!important;color:#d7e5ef!important;border:1px solid transparent!important}
.side-nav button:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.10)!important}.side-nav button.active{background:linear-gradient(115deg,rgba(215,165,60,.24),rgba(255,255,255,.08))!important;border-color:rgba(215,165,60,.45)!important;color:#fff!important;box-shadow:0 10px 22px rgba(0,0,0,.12)}
.topbar{background:rgba(255,255,255,.96)!important;border-bottom:1px solid #dce7ee!important;box-shadow:0 9px 28px rgba(7,28,47,.07);backdrop-filter:blur(16px)}
.top-context h2{color:var(--p10-ink)!important}.top-context .eyebrow{color:#9a6b09!important}
.top-action-card{background:#fff!important;color:var(--p10-ink)!important;border:1px solid #dbe6ed!important}.logout-action{border-color:#f0c5cc!important;background:#fff8f9!important}.refresh-action{border-color:#bdddeb!important;background:#f7fcff!important}.back-action{border-color:#d6dcea!important;background:#fafbff!important}
.main-area{background:
 radial-gradient(circle at 88% 0,rgba(58,167,223,.08),transparent 22%),
 radial-gradient(circle at 20% 25%,rgba(215,165,60,.06),transparent 18%),#f3f7fa!important}
.page{padding:24px!important}.page-toolbar{padding:24px!important;background:linear-gradient(145deg,#fff,#f6fafc)!important;margin-bottom:18px!important}
.manager-hero{padding:32px!important;background:linear-gradient(125deg,#fff 0 64%,#eef6fb 100%)!important;border-color:#d8c893!important;box-shadow:var(--p10-shadow)!important}
.manager-hero::after{content:"";position:absolute;left:-40px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(215,165,60,.24),rgba(215,165,60,0) 70%)}
.manager-hero h1,.manager-hero h2{color:var(--p10-ink)!important}.manager-hero-copy p{color:var(--p10-muted)!important}
.kpi-grid>*{border-radius:20px!important;border:1px solid var(--p10-line)!important;box-shadow:var(--p10-shadow-sm)!important;background:#fff!important;overflow:hidden}
.kpi-grid>*:nth-child(5n+1){border-top:4px solid var(--p10-blue)!important}.kpi-grid>*:nth-child(5n+2){border-top:4px solid var(--p10-mint)!important}.kpi-grid>*:nth-child(5n+3){border-top:4px solid var(--p10-violet)!important}.kpi-grid>*:nth-child(5n+4){border-top:4px solid var(--p10-orange)!important}.kpi-grid>*:nth-child(5n){border-top:4px solid var(--p10-rose)!important}
.page .panel{padding:24px!important;background:#fff!important}.page .panel:nth-of-type(4n+2)::before{background:var(--p10-mint)}.page .panel:nth-of-type(4n+3)::before{background:var(--p10-violet)}.page .panel:nth-of-type(4n)::before{background:var(--p10-orange)}
.quick-access-panel{padding:24px!important;background:linear-gradient(145deg,#fff,#f8fbfd)!important}.manager-quick{border-radius:20px!important;border:1px solid var(--p10-line)!important;background:#fff!important;box-shadow:0 10px 24px rgba(7,28,47,.08)!important}.manager-quick:hover{transform:translateY(-3px)!important;box-shadow:0 18px 32px rgba(7,28,47,.13)!important}.account-quick-grid .manager-quick:nth-child(4n+1){border-top:4px solid var(--p10-blue)!important}.account-quick-grid .manager-quick:nth-child(4n+2){border-top:4px solid var(--p10-mint)!important}.account-quick-grid .manager-quick:nth-child(4n+3){border-top:4px solid var(--p10-violet)!important}.account-quick-grid .manager-quick:nth-child(4n){border-top:4px solid var(--p10-orange)!important}
.stack-form{background:linear-gradient(150deg,#fff,#f9fbfd)!important}.account-tabs button{border-radius:12px!important}.account-tabs button.active{background:var(--p10-navy2)!important;color:#fff!important}
.absence-today-panel{padding:24px!important;background:linear-gradient(145deg,#fff,#fff8f2)!important;border-color:#ead4b8!important}.absence-today-panel::before{background:linear-gradient(180deg,#e58d32,#f3c168)}

/* ---------- login pages, same role visual language ---------- */
.auth-shell,.role-login,.r8-login main{background:
 radial-gradient(circle at 14% 12%,rgba(58,167,223,.10),transparent 24%),
 radial-gradient(circle at 86% 8%,rgba(215,165,60,.10),transparent 22%),#f4f8fb!important}
.login-story,.auth-brand,.student-login-visual{background:linear-gradient(145deg,#071c2f,#0f3b5e)!important;color:#fff!important;border-radius:28px!important;box-shadow:var(--p10-shadow)!important}
.login-story h1,.login-story p,.login-story li,.auth-brand h1,.auth-brand p,.student-login-visual h1,.student-login-visual p,.student-login-visual li{color:#fff!important}
.auth-card,.r8-login-card{border-radius:28px!important;border:1px solid var(--p10-line)!important;box-shadow:var(--p10-shadow)!important;background:#fff!important}

/* ---------- mobile & tablet audit ---------- */
@media(max-width:900px){
 .parent-top{position:relative;gap:14px;align-items:flex-start!important}.parent-actions{display:flex;gap:8px;flex-wrap:wrap}.parent-main,.student-plan main{width:min(100% - 22px,760px)!important;padding-top:16px!important}
 .parent-main>.hero-panel{padding:24px!important;min-height:auto}.parent-main>.hero-panel h1{font-size:31px!important}.hero-lock{width:100%;margin-top:12px}
 .layout-2,.student-grid2{grid-template-columns:1fr!important}.parent-main .panel,.student-grid2>section{padding:20px!important}
 .student-welcome{padding:24px!important}.student-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .page{padding:14px!important}.topbar{position:relative!important;flex-wrap:wrap!important}.top-actions{width:100%;overflow-x:auto;padding-bottom:6px}.top-action-card b{display:inline!important}
 .manager-hero{padding:24px!important}.quick-access-grid,.account-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
 .parent-main,.student-plan main{width:calc(100% - 16px)!important}.parent-top{padding:14px!important}.parent-actions .btn{font-size:12px!important;padding:9px 11px!important}
 .parent-main>.hero-panel h1{font-size:26px!important}.kpi-grid.compact,.student-kpis{grid-template-columns:1fr 1fr!important;gap:10px!important}
 .student-grid2>section{min-height:0}.quick-access-grid,.account-quick-grid{grid-template-columns:1fr!important}.page{padding:10px!important}
 .top-action-card{min-width:max-content!important}.sidebar{max-width:88vw!important}.panel,.hero-panel,.student-grid2>section,.student-welcome{border-radius:18px!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* R21-P20 guidance & self-knowledge */
.guidance-form fieldset{border:1px solid #dbe4ec;border-radius:18px;margin:16px 0;padding:14px}.guidance-form legend{font-weight:800;padding:0 8px}.guidance-q{display:grid;grid-template-columns:1fr minmax(190px,260px);gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #edf1f5}.guidance-q:last-child{border-bottom:0}.guidance-q select{width:100%}.guidance-consent,.guidance-official,.guidance-summary{background:#f5f8fb;border:1px solid #dce7ef;border-radius:16px;padding:14px;margin:12px 0}.guidance-official{background:#eef8ff;border-color:#c7e8fb}.guidance-official a,.guidance-sources a{display:inline-flex;color:#0a668a;font-weight:800;text-decoration:none}.guidance-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.guidance-bars>div{display:grid;grid-template-columns:minmax(100px,1fr) 2fr 42px;gap:8px;align-items:center;margin:9px 0}.guidance-bars i{height:9px;background:#e5edf3;border-radius:999px;overflow:hidden}.guidance-bars em{display:block;height:100%;background:linear-gradient(90deg,#19a596,#0b78a0);border-radius:999px}.guidance-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.guidance-paths article,.guidance-manager-card{border:1px solid #dfe8ee;border-radius:16px;padding:14px;background:#fff}.guidance-paths article>span{display:inline-block;font-size:12px;background:#edf7f5;color:#147768;padding:4px 8px;border-radius:999px;margin:6px 0}.guidance-tags,.guidance-mini-paths{display:flex;gap:8px;flex-wrap:wrap}.guidance-tags span,.guidance-mini-paths span{background:#eef3f7;border-radius:999px;padding:7px 10px;font-size:12px}.guidance-sources{display:grid;gap:8px;margin-top:14px}.guidance-sources a{display:flex;flex-direction:column;align-items:flex-start;padding:10px 12px;border:1px solid #dfe7ed;border-radius:12px}.guidance-sources small{font-weight:400;color:#637686}.guidance-filterbar{display:flex;gap:10px;margin-bottom:14px}.guidance-manager-list{display:grid;gap:12px}.guidance-manager-card{display:grid;grid-template-columns:1fr auto;gap:8px}.guidance-manager-card p,.guidance-manager-card .guidance-mini-paths{grid-column:1/-1}.guidance-manager-card.priority{border-color:#e8a7a7;background:#fff8f8}.guidance-manager-card.support{border-color:#e9d59f;background:#fffdf6}.guidance-status{font-size:12px;font-weight:800;padding:5px 9px;border-radius:999px;background:#eef3f6;height:max-content}@media(max-width:760px){.guidance-q{grid-template-columns:1fr}.guidance-grid,.guidance-paths{grid-template-columns:1fr}.guidance-manager-card{grid-template-columns:1fr}.guidance-status{justify-self:start}}

.guidance-completion{display:flex;gap:12px;align-items:baseline;background:#f2f8fb;border:1px solid #d9e7ef;padding:12px 14px;border-radius:14px;margin-bottom:12px}.guidance-completion b{font-size:22px}.guidance-pending-wrap{margin-top:22px;padding-top:16px;border-top:1px solid #e5edf2}.guidance-pending{display:flex;gap:7px;flex-wrap:wrap}.guidance-pending>span{font-size:12px;background:#f3f5f7;border-radius:999px;padding:7px 10px}