:root { --blue:#315fe8; --ink:#102f55; --muted:#60758d; --line:#d8e5f1; --soft:#f3f8ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:linear-gradient(135deg,#f8fbff,#eff8ff 60%,#f1fff9); font:16px/1.7 Inter,"Noto Sans SC","Noto Sans JP",sans-serif; }
a { color:inherit; text-decoration:none; }
.school-top { height:82px; padding:0 7%; display:flex; align-items:center; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.school-brand { font-size:20px; font-weight:900; letter-spacing:-.5px; }
.school-brand i { color:var(--blue); font-style:normal; }
.school-top nav { margin-left:auto; display:flex; gap:28px; font-weight:700; font-size:14px; }
main { max-width:1500px; margin:auto; }
.school-hero { min-height:620px; padding:90px 8%; display:grid; grid-template-columns:1.2fr .8fr; gap:8%; align-items:center; }
.school-hero small,.plan-section>small,.trial-section small,.login-section small { color:var(--blue); font-size:12px; font-weight:900; letter-spacing:2px; }
.school-hero h1 { font-size:54px; line-height:1.2; margin:18px 0; }
.school-hero p { max-width:650px; color:var(--muted); font-size:18px; }
.primary,button { display:inline-block; border:0; border-radius:11px; background:linear-gradient(100deg,#315fe8,#318dec); color:#fff; padding:13px 22px; font-weight:800; cursor:pointer; }
.school-hero-card { padding:38px; border:1px solid #cddff0; border-radius:24px; background:#ffffffd9; box-shadow:0 30px 70px #315fe81c; display:grid; gap:16px; }
.school-hero-card b { font-size:28px; }.school-hero-card span { padding:14px; border-radius:10px; background:var(--soft); }
.plan-section,.trial-section,.login-section,#schoolConsole { margin:25px 6%; padding:55px; border:1px solid var(--line); border-radius:24px; background:#fff; }
.plan-section h2,.trial-section h2,.login-section h2 { font-size:34px; }
.plan-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.plan-grid article { padding:24px; border-radius:16px; background:var(--soft); }.plan-grid article>b { color:var(--blue); }.plan-grid p,.trial-section>div p,.login-section>div p { color:var(--muted); }
.trial-section,.login-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:8%; }.trial-section form,.login-section form { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.trial-section label,.login-section label { font-weight:700; font-size:14px; }.trial-section input,.trial-section textarea,.login-section input,#inviteForm input { width:100%; margin-top:7px; padding:13px; border:1px solid var(--line); border-radius:9px; background:#fbfdff; font:inherit; }.trial-section textarea,.trial-section button,.trial-section form p,.login-section button { grid-column:1/-1; }.trial-section form p { color:#08765c; font-weight:700; }
#schoolConsole header,.stats,#inviteForm,.student-row { display:flex; align-items:center; gap:16px; }#schoolConsole header { justify-content:space-between; }.stats { display:grid; grid-template-columns:repeat(3,1fr); margin:25px 0; }.stats article { display:grid; padding:22px; background:var(--soft); border-radius:14px; }.student-row { justify-content:space-between; padding:13px; border-bottom:1px solid var(--line); }
.login-section .demo-login { margin-top:18px; background:#e9f1ff; color:#285bc7; border:1px solid #bed3f8; }
.login-section .demo-note { display:block; margin-top:9px; color:#7a8da5; font-size:11px; letter-spacing:0; }
@media(max-width:850px){.school-top nav{display:none}.school-hero,.trial-section,.login-section{grid-template-columns:1fr}.plan-grid{grid-template-columns:1fr 1fr}.school-hero h1{font-size:40px}.stats{grid-template-columns:1fr}}

#schoolConsole { max-width:1380px; margin:30px auto; padding:36px; }
#schoolConsole .console-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  min-height:112px;
  padding:4px 2px 25px;
  border-bottom:1px solid #e3ebf4;
}
#schoolConsole .console-header h1 { margin:5px 0 4px; font-size:31px; line-height:1.2; letter-spacing:-.5px; }
#schoolConsole .console-header>div:first-child>small { color:#315fe8; font-size:10px; font-weight:900; letter-spacing:1.7px; }
#schoolConsole .console-header p { margin:8px 0 0; color:var(--muted); font-size:14px; }
#schoolConsole .header-actions { display:flex; align-items:center; gap:10px; }
#schoolConsole .header-actions button { width:auto; min-width:72px; min-height:44px; padding:10px 18px; }
#schoolConsole .header-actions .soft-button { color:#315fc8 !important; background:#f2f6ff !important; border:1px solid #cdddf7 !important; box-shadow:none !important; }
#schoolConsole .header-actions .soft-button:hover { background:#e6efff !important; }
#schoolConsole .header-actions .demo-data-button { color:#08765c !important; background:#e7f8f2 !important; border:1px solid #bde8d9 !important; box-shadow:none !important; }
#schoolConsole .header-actions .demo-data-button:hover { background:#d8f3e9 !important; }
#schoolConsole .console-tabs { display:flex; gap:8px; margin:20px 0 22px; padding:6px; overflow:auto; background:#f3f6fb; border:1px solid #e7edf5; border-radius:13px; }
#schoolConsole .console-tabs button { width:auto !important; min-width:108px; margin:0 !important; padding:9px 17px !important; color:#637995 !important; white-space:nowrap; background:transparent !important; border:1px solid transparent !important; border-radius:9px !important; box-shadow:none !important; }
#schoolConsole .console-tabs button:hover { color:#315fc8 !important; background:#e9f0fd !important; }
#schoolConsole .console-tabs button.active { color:#fff !important; background:#315fe8 !important; border-color:#315fe8 !important; box-shadow:0 6px 14px #315fe82b !important; }
.school-kpis { grid-template-columns:repeat(5,1fr); gap:12px; margin:0 0 18px; }
.school-kpis article { min-width:0; padding:20px; border:1px solid #e1eaf4; background:#f8fbff; }
.school-kpis article span { color:#637995; font-size:13px; }.school-kpis article b { margin:5px 0 1px; font-size:25px; }.school-kpis article small { color:#8a9bb0; font-size:11px; }
.school-kpis .attention-card { background:#fff8ed; border-color:#f6dfbc; }.attention-card b { color:#d98218; }
.dashboard-grid { display:grid; grid-template-columns:1.45fr .75fr; gap:18px; margin-bottom:18px; }
.dashboard-panel { padding:24px; border:1px solid #dce7f2; border-radius:18px; background:#fff; box-shadow:0 12px 35px #1c56950b; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:20px; }.panel-head h2 { margin:3px 0; font-size:21px; }.panel-head small { color:#315fe8; font-size:10px; font-weight:900; letter-spacing:1.5px; }.panel-head>span { color:#168c84; font-size:13px; font-weight:700; }
.weekly-bars { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; height:190px; }.weekly-bars>div { display:grid; grid-template-rows:1fr auto; gap:7px; text-align:center; }.weekly-bars>div>span { position:relative; display:flex; align-items:flex-end; overflow:hidden; background:#edf3fb; border-radius:8px; }.weekly-bars i { width:100%; min-height:8px; background:linear-gradient(#4b80ef,#32bfc0); border-radius:8px; }.weekly-bars small { color:#8293a8; }
.contract-panel dl { margin:0; }.contract-panel dl div { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid #e8eef5; }.contract-panel dt { color:#71839a; }.contract-panel dd { margin:0; font-weight:700; }
.table-tools { display:flex; gap:8px; }.table-tools input,.table-tools select { padding:9px 12px; border:1px solid #d7e3f0; border-radius:8px; }
.student-table-head,.student-data-row { display:grid; grid-template-columns:1.6fr .65fr 1fr .55fr .7fr .75fr; gap:14px; align-items:center; }.student-table-head { padding:10px 14px; color:#8293a8; font-size:12px; background:#f5f8fc; border-radius:9px; }.student-data-row { padding:15px 14px; border-bottom:1px solid #e8eef5; font-size:13px; }.student-identity { display:flex; align-items:center; gap:10px; }.student-identity>span { display:grid; width:38px; height:38px; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,#315fe8,#25a7bd); border-radius:12px; }.student-identity div { display:grid; }.student-identity small { color:#8293a8; }
.student-name-link { width:auto !important; margin:0 !important; padding:0 !important; color:#173f77 !important; font-size:14px !important; text-align:left; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }.student-name-link:hover { color:#315fe8 !important; text-decoration:underline; }
.progress-cell { display:flex; align-items:center; gap:8px; }.progress-cell>span,.course-usage-row>div:last-child>span { width:75px; height:7px; overflow:hidden; background:#e8eef7; border-radius:9px; }.progress-cell i,.course-usage-row i { display:block; height:100%; background:linear-gradient(90deg,#315fe8,#30b8b6); border-radius:9px; }
.evaluation { padding:7px 10px; font-size:12px; box-shadow:none; }
#schoolConsole .evaluation.good { color:#08765c !important; background:#e7f7f1 !important; border:1px solid #bde7d7 !important; box-shadow:none !important; }
#schoolConsole .evaluation.normal { color:#315fc8 !important; background:#edf3ff !important; border:1px solid #cbdafa !important; box-shadow:none !important; }
#schoolConsole .evaluation.risk { color:#a65a0a !important; background:#fff3df !important; border:1px solid #f1d29e !important; box-shadow:none !important; }
.contract-renewal { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:16px; }
.contract-renewal p { margin:0; color:#71839a; font-size:12px; }
#schoolConsole #renewSchoolContract { width:auto !important; margin:0 !important; padding:9px 16px !important; color:#fff !important; background:#315fe8 !important; border:1px solid #315fe8 !important; box-shadow:0 7px 18px #315fe82c !important; }
.lower-grid { grid-template-columns:1fr 1fr; margin-top:18px; }.course-usage-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 0; border-bottom:1px solid #e8eef5; }.course-usage-row>div { display:grid; }.course-usage-row small { color:#8293a8; }.course-usage-row>div:last-child { display:flex; align-items:center; gap:9px; }
#inviteForm { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; }#inviteForm h2 { display:none; }#inviteForm input { margin:0; }.empty-state { padding:22px; color:#8293a8; text-align:center; background:#f8fbff; border-radius:10px; }
#schoolConsole [hidden] { display:none !important; }
#overviewPanels.contract-only { grid-template-columns:minmax(380px,650px); justify-content:center; }
#overviewPanels.contract-only .learning-trend { display:none; }
#studentReportDialog { width:min(920px,92vw); max-height:88vh; padding:34px; color:var(--ink); border:0; border-radius:22px; box-shadow:0 30px 90px #102f5540; }
#studentReportDialog::backdrop { background:#102f5580; backdrop-filter:blur(4px); }
.dialog-close { position:absolute; top:18px; right:18px; width:40px !important; min-width:40px !important; height:40px; padding:0 !important; font-size:25px; background:#edf3ff !important; color:#315fc8 !important; box-shadow:none !important; }
.report-title small { color:#315fe8; font-size:10px; font-weight:900; letter-spacing:1.6px; }.report-title h2 { margin:5px 0; font-size:29px; }.report-title p { color:#71839a; }
.report-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:22px 0; }.report-kpis article { display:grid; padding:17px; background:#f4f8fd; border-radius:12px; }.report-kpis span { color:#71839a; font-size:12px; }.report-kpis b { font-size:20px; }.report-kpis .good { color:#08765c; }.report-kpis .risk { color:#bb6711; }
.report-comment { padding:18px; margin:20px 0; background:#edf8f5; border-left:4px solid #20a47d; border-radius:10px; }.report-comment h3 { margin:0 0 5px; }.report-comment p { margin:5px 0; color:#496c66; }
.report-course-list article { display:grid; grid-template-columns:1fr auto 80px; align-items:center; gap:15px; padding:14px 0; border-bottom:1px solid #e5ecf4; }.report-course-list article>div:first-child { display:grid; }.report-course-list small { color:#8293a8; }.report-course-list em { font-style:normal; font-weight:700; text-align:right; }
@media(max-width:1050px){.school-kpis{grid-template-columns:repeat(3,1fr)}.dashboard-grid,.lower-grid{grid-template-columns:1fr}.student-table-head{display:none}.student-data-row{grid-template-columns:1fr 1fr 1fr}.student-identity{grid-column:1/-1}}
@media(max-width:650px){#schoolConsole{margin:0;padding:18px;border-radius:0}#schoolConsole .console-header{grid-template-columns:1fr;gap:18px}#schoolConsole .header-actions{width:100%;flex-direction:row}#schoolConsole .header-actions button{flex:1}.school-kpis{grid-template-columns:1fr 1fr}.table-tools{flex-direction:column}.student-data-row{grid-template-columns:1fr 1fr}#inviteForm{grid-template-columns:1fr}.weekly-bars{height:150px}}