.local-panel { padding: 24px; margin-bottom: 24px; border: 1px solid #dce7f6; border-radius: 20px; background: #fff; }
.toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }.toolbar select { width:auto; max-width:280px; }.toolbar h2 { margin-right:auto; }.toolbar label { margin:0; }
.local-panel button,.file-button { padding:10px 16px; border:1px solid #ccdcf5; border-radius:10px; color:#285b9d; background:#eff5ff; cursor:pointer; font:inherit; font-size:14px; }
.local-panel input,.local-panel textarea { display:block; width:100%; padding:12px; margin:10px 0; border:1px solid #dce5f3; border-radius:10px; font:inherit; }.file-button input { width:200px; font-size:12px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; }
.hint,#class-url { font-size:13px; line-height:1.8; color:#778aa3; overflow-wrap:anywhere; } #app-message:not(:empty),#import-status:not(:empty) { padding:12px; color:#285b9d; background:#eff5ff; border-radius:10px; margin-top:12px; }
.table-wrap { overflow:auto; max-height:480px; margin:18px 0; } table { border-collapse:collapse; width:100%; text-align:left; font-size:14px; } th,td { padding:14px; border-bottom:1px solid #e6edf7; white-space:nowrap; } th { color:#647d9d; } button.roster-chip { cursor:pointer; font-family:inherit; }
summary { cursor:pointer; } #sync-status { color:#356a9d; font-size:14px; } .stage-top { flex-wrap:wrap; } @media(max-width:650px) { .form-grid { grid-template-columns:1fr; } .local-panel { padding:18px; } }
.naming-panel { max-width:640px; margin:60px auto; padding:44px; } .naming-panel h1 { font-size:32px; } .naming-panel input { font-size:22px; padding:16px; } #enter-class { color:white; background:#2563eb; padding:14px 24px; font-size:17px; } #name-error { color:#ab4945; }
.import-grid { display:grid; grid-template-columns:2fr 1fr; gap:32px; margin-top:24px; } .template-example { border-radius:14px; background:#f4f8ff; padding:22px; } .template-example table { margin:12px 0; background:white; } .management-panel .toolbar { margin-top:22px; } .review-panel { margin-top:24px; } #setup { margin-top:24px; } .class-roster { margin-bottom:24px; }
.class-metrics article { padding:12px 22px; } .class-metrics strong { font-size:28px; } .site-header { padding-top:18px; padding-bottom:18px; } .brand-logo { width:56px; height:56px; }
@media(max-width:650px){ .import-grid { grid-template-columns:1fr; gap:16px; }.naming-panel { margin:20px auto; padding:24px; }.naming-panel h1 { font-size:26px; } }

.class-chart { display:grid; gap:22px; padding:24px 0 12px; max-height:540px; overflow:auto; }
.chart-row { display:grid; grid-template-columns: minmax(100px,180px) minmax(60px,1fr) 85px; gap:20px; align-items:center; }
.chart-name { font-size:15px; font-weight:600; color:#304866; overflow-wrap:anywhere; }
.chart-track { height:30px; border-radius:8px; background:#edf3fc; overflow:hidden; }
.chart-bar { height:100%; min-width:3px; border-radius:8px; background:linear-gradient(90deg,#4e92f5,#2563eb); }
.chart-count { font-size:18px; color:#2563eb; white-space:nowrap; font-variant-numeric:tabular-nums; }
.chart-empty { padding:30px 16px; margin:0; text-align:center; color:#778aa3; background:#f6f9ff; border-radius:12px; }
@media(max-width:650px){ .chart-row { grid-template-columns:100px minmax(30px,1fr) 65px; gap:10px; }.chart-name { font-size:13px; }.chart-count { font-size:15px; } }