:root { --ink:#10231f; --muted:#687873; --line:#d5dfdb; --line-strong:#bccac5; --paper:#f4f7f5; --surface:#fff; --teal:#087d70; --teal-dark:#09645b; --teal-pale:#e3f2ef; --yellow:#f0c84b; --yellow-pale:#fff7d8; --red:#b84238; --red-pale:#fff0ee; --shadow:0 18px 50px rgba(16,35,31,.12); --sans:"Noto Sans TC",sans-serif; --thai:"Noto Sans Thai Looped",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14px; letter-spacing:0; }
button,input,select,textarea { font:inherit; letter-spacing:0; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
.eyebrow { margin:0 0 5px; color:var(--teal-dark); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.auth-screen { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(90deg,#10231f 0 37%,var(--paper) 37%); }
.auth-panel { width:min(450px,100%); padding:38px; background:var(--surface); box-shadow:var(--shadow); }
.brand { display:inline-flex; align-items:center; gap:10px; margin-bottom:34px; }
.brand span,.sidebar-brand>span { display:grid; width:42px; height:42px; place-items:center; background:var(--teal); color:#fff; font-family:var(--thai); font-size:22px; }
.auth-panel h1 { margin:0 0 8px; font-size:32px; }
.auth-panel>p:not(.eyebrow) { margin:0 0 25px; color:var(--muted); line-height:1.7; }
label { display:grid; gap:6px; margin-bottom:14px; color:var(--muted); font-size:11px; font-weight:600; }
input,select,textarea { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:3px; background:#fff; color:var(--ink); outline:none; }
textarea { resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(8,125,112,.12); }
.primary-button,.secondary-button,.icon-button { display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:3px; font-weight:700; }
.primary-button { padding:9px 15px; background:var(--teal); color:#fff; }
.secondary-button { padding:9px 14px; border-color:var(--line); background:var(--surface); color:var(--ink); }
.icon-button { width:42px; padding:0; border-color:var(--line); background:var(--surface); color:var(--ink); }
.primary-button svg,.secondary-button svg,.icon-button svg { width:17px; }
.auth-panel .primary-button { width:100%; }
.text-link { display:inline-block; margin-top:20px; color:var(--teal-dark); font-weight:700; }
.form-status { min-height:20px; margin:4px 0 10px; color:var(--red); }
.dashboard-app { min-height:100vh; display:grid; grid-template-columns:240px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:24px 17px; background:var(--ink); color:#fff; }
.sidebar-brand { display:flex; align-items:center; gap:11px; padding:0 6px 25px; border-bottom:1px solid rgba(255,255,255,.16); }
.sidebar-brand strong,.sidebar-brand small { display:block; }
.sidebar-brand small { margin-top:2px; color:#9db0aa; font-size:10px; }
.sidebar nav { display:grid; gap:5px; margin-top:25px; }
.nav-button { min-height:44px; display:flex; align-items:center; gap:11px; padding:0 12px; border:0; border-left:3px solid transparent; background:transparent; color:#b9c8c3; text-align:left; }
.nav-button svg { width:18px; }
.nav-button:hover,.nav-button.is-active { border-left-color:var(--yellow); background:rgba(255,255,255,.08); color:#fff; }
.sidebar-user { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-top:auto; padding:18px 5px 0; border-top:1px solid rgba(255,255,255,.16); }
.avatar { display:grid; width:35px; height:35px; place-items:center; background:var(--yellow); color:var(--ink); font-weight:700; }
.sidebar-user strong,.sidebar-user small { display:block; max-width:105px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-user small { color:#9db0aa; font-size:9px; }
.sidebar-user button { width:32px; height:32px; display:grid; place-items:center; border:0; background:transparent; color:#b9c8c3; }
.sidebar-user svg { width:17px; }
.dashboard-main { min-width:0; padding:30px clamp(22px,4vw,56px) 60px; }
.dashboard-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.dashboard-header h1 { margin:0; font-size:28px; }
.dashboard-header p:last-child { margin:5px 0 0; color:var(--muted); }
.header-actions { display:flex; gap:8px; }
.mobile-sign-out { display:none; }
.notice { margin:16px 0 0; padding:11px 14px; border-left:3px solid var(--teal); background:var(--teal-pale); }
.notice.is-error { border-color:var(--red); background:var(--red-pale); }
.loading-state { min-height:58vh; display:grid; place-items:center; align-content:center; color:var(--muted); }
.loading-state span { width:30px; height:30px; border:3px solid var(--line); border-top-color:var(--teal); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.dashboard-view { display:none; padding-top:28px; }
.dashboard-view.is-active { display:block; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.metric-grid article { padding:23px 20px; border-right:1px solid var(--line); }
.metric-grid article:last-child { border-right:0; }
.metric-grid span,.metric-grid small { display:block; color:var(--muted); }
.metric-grid span { font-size:11px; font-weight:600; }
.metric-grid strong { display:block; margin:8px 0 4px; font-size:34px; line-height:1; }
.metric-grid small { font-size:9px; }
.overview-layout { display:grid; grid-template-columns:1fr 1fr; gap:42px; margin-top:40px; }
.work-section { min-width:0; }
.section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; padding-bottom:11px; border-bottom:1px solid var(--line); }
.section-title h2,.section-title h3 { margin:0; font-size:17px; }
.section-title span,.section-stat { color:var(--muted); font-size:11px; }
.recommendation-list { display:grid; gap:8px; }
.recommendation-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; min-height:62px; padding:10px 12px; border:1px solid var(--line); background:var(--surface); }
.recommendation-item>span { display:grid; width:34px; height:34px; place-items:center; background:var(--teal-pale); color:var(--teal-dark); }
.recommendation-item svg { width:17px; }
.recommendation-item small { display:block; color:var(--muted); }
.recommendation-item>a { color:var(--teal-dark); font-weight:700; }
.activity-chart { height:174px; display:grid; grid-template-columns:repeat(7,1fr); align-items:end; gap:8px; padding-top:12px; }
.chart-day { height:100%; display:grid; grid-template-rows:1fr auto; gap:7px; align-items:end; text-align:center; }
.chart-bar { width:100%; min-height:3px; background:var(--teal); }
.chart-day span { color:var(--muted); font-size:9px; }
.recent-section { margin-top:42px; }
.activity-list { display:grid; grid-template-columns:1fr 1fr; column-gap:30px; }
.activity-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid var(--line); }
.result-dot { width:9px; height:9px; border-radius:50%; background:var(--red); }
.result-dot.good { background:var(--teal); }
.activity-item strong,.activity-item small { display:block; }
.activity-item small,.activity-item time { color:var(--muted); font-size:9px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; padding-bottom:20px; border-bottom:3px solid var(--ink); }
.section-heading h2 { margin:0; font-size:25px; }
.section-heading p:last-child { margin:5px 0 0; color:var(--muted); }
.focus-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:45px; }
.weak-list { display:grid; }
.weak-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.weak-item .thai { font-family:var(--thai); font-size:20px; }
.weak-item strong,.weak-item small { display:block; }
.weak-item small { color:var(--muted); }
.weak-score { align-self:center; min-width:54px; padding:5px 7px; background:var(--red-pale); color:var(--red); font-size:10px; text-align:center; }
.topic-list { display:grid; gap:15px; }
.topic-row { display:grid; grid-template-columns:minmax(100px,1fr) 2fr auto; align-items:center; gap:10px; }
.topic-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.topic-track { height:8px; background:var(--line); }
.topic-track i { display:block; height:100%; background:var(--yellow); }
.topic-row strong { min-width:23px; text-align:right; }
.note-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.note-item { min-height:160px; padding:18px; border:1px solid var(--line); border-top:3px solid var(--teal); background:var(--surface); }
.note-item .thai { margin:0 0 5px; font-family:var(--thai); font-size:24px; }
.note-item h3 { margin:0; font-size:15px; }
.note-item p { margin:5px 0 18px; color:var(--muted); }
.note-item footer { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; }
.attention-list,.group-summary-list { display:grid; }
.attention-item,.group-summary-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.attention-item>span { display:grid; width:34px; height:34px; place-items:center; background:var(--yellow-pale); color:#725c0c; font-weight:700; }
.attention-item strong,.attention-item small,.group-summary-item strong,.group-summary-item small { display:block; }
.attention-item small,.group-summary-item small { color:var(--muted); font-size:10px; }
.attention-item button { border:0; background:transparent; color:var(--teal-dark); font-weight:700; }
.group-summary-item>span { min-width:58px; text-align:right; color:var(--teal-dark); font-weight:700; }
.search-field { width:min(300px,100%); min-height:42px; display:flex; align-items:center; gap:8px; margin:0; padding:0 11px; border:1px solid var(--line); background:var(--surface); }
.search-field svg { width:17px; color:var(--muted); }
.search-field input { min-height:40px; padding:0; border:0; box-shadow:none; }
.table-shell { overflow-x:auto; border-top:2px solid var(--ink); }
table { width:100%; border-collapse:collapse; background:rgba(255,255,255,.55); }
th,td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { color:var(--muted); font-size:10px; font-weight:600; }
td { font-size:12px; }
.student-cell strong,.student-cell small { display:block; }
.student-cell small { color:var(--muted); }
.status-value.bad { color:var(--red); font-weight:700; }
.row-action { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.row-action svg { width:16px; }
.empty-state { padding:34px; color:var(--muted); text-align:center; }
.groups-layout { min-height:500px; display:grid; grid-template-columns:minmax(250px,.7fr) minmax(360px,1.3fr); border-top:2px solid var(--ink); border-bottom:1px solid var(--line); }
.group-list { border-right:1px solid var(--line); }
.group-button { width:100%; display:grid; grid-template-columns:1fr auto; gap:8px; padding:17px 14px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }
.group-button:hover,.group-button.is-active { background:var(--surface); box-shadow:inset 4px 0 var(--teal); }
.group-button strong,.group-button small { display:block; }
.group-button small { margin-top:3px; color:var(--muted); }
.group-detail { padding:23px; background:rgba(255,255,255,.45); }
.group-detail header { display:flex; justify-content:space-between; gap:15px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.group-detail h3 { margin:0 0 4px; }
.group-detail p { margin:0; color:var(--muted); }
.invite-code { align-self:flex-start; padding:5px 8px; background:var(--yellow-pale); font-family:monospace; font-weight:700; }
.member-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); }
.member-row strong,.member-row small { display:block; }
.member-row small { color:var(--muted); }
.member-row button { border:0; background:transparent; color:var(--red); }
.role-message { min-height:60vh; display:grid; place-items:center; align-content:center; text-align:center; }
.role-message>svg { width:40px; height:40px; color:var(--teal); }
.role-message h2 { margin:18px 0 5px; }
.role-message p { margin:0 0 20px; color:var(--muted); }
.role-message>div { display:flex; gap:8px; }
dialog { width:min(540px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:4px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(16,35,31,.58); }
dialog form,.detail-panel { padding:24px; overflow-y:auto; }
dialog header { display:flex; justify-content:space-between; gap:20px; margin-bottom:22px; padding-bottom:16px; border-bottom:3px solid var(--ink); }
dialog h2 { margin:0; font-size:20px; }
.dialog-close { width:36px; height:36px; display:grid; place-items:center; flex:none; border:1px solid var(--line); background:var(--surface); }
.dialog-close svg { width:17px; }
dialog footer { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.detail-panel>section { margin-top:24px; }
.detail-panel h3 { padding-bottom:9px; border-bottom:1px solid var(--line); }
.detail-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.detail-metrics div { padding:14px; background:var(--paper); }
.detail-metrics strong,.detail-metrics small { display:block; }
.detail-metrics strong { font-size:22px; }
.detail-metrics small { color:var(--muted); font-size:9px; }
@media (max-width:900px) {
  .dashboard-app { grid-template-columns:72px minmax(0,1fr); }
  .sidebar { padding:18px 10px; }
  .sidebar-brand { justify-content:center; padding:0 0 20px; }
  .sidebar-brand div,.nav-button span,.sidebar-user div { display:none; }
  .nav-button { justify-content:center; padding:0; }
  .sidebar-user { grid-template-columns:1fr; justify-items:center; padding:14px 0 0; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .metric-grid article:nth-child(2) { border-right:0; }
  .metric-grid article:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .focus-layout,.overview-layout { grid-template-columns:1fr; }
  .note-list { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) {
  .auth-screen { padding:0; background:var(--paper); }
  .auth-panel { width:100%; min-height:100vh; padding:34px 22px; box-shadow:none; }
  .dashboard-app { display:block; padding-bottom:68px; }
  .sidebar { position:fixed; z-index:20; top:auto; right:0; bottom:0; left:0; width:100%; height:68px; display:block; padding:0; border-top:1px solid var(--line); background:var(--surface); color:var(--ink); }
  .sidebar-brand,.sidebar-user { display:none; }
  .sidebar nav { height:100%; grid-template-columns:repeat(3,1fr); gap:0; margin:0; }
  .nav-button { min-height:68px; display:grid; place-items:center; align-content:center; gap:3px; border-left:0; border-top:3px solid transparent; color:var(--muted); }
  .nav-button span { display:block; font-size:9px; }
  .nav-button:hover,.nav-button.is-active { border-left:0; border-top-color:var(--teal); background:var(--teal-pale); color:var(--teal-dark); }
  .dashboard-main { padding:18px 14px 34px; }
  .dashboard-header { align-items:flex-end; }
  .dashboard-header h1 { font-size:22px; }
  .dashboard-header p:last-child,.header-actions .secondary-button span { display:none; }
  .header-actions .secondary-button { width:42px; padding:0; }
  .mobile-sign-out { display:inline-flex; }
  .dashboard-view { padding-top:20px; }
  .metric-grid article { padding:17px 12px; }
  .metric-grid strong { font-size:28px; }
  .overview-layout { gap:32px; margin-top:30px; }
  .activity-list { grid-template-columns:1fr; }
  .section-heading { align-items:stretch; flex-direction:column; gap:15px; margin-bottom:20px; }
  .section-heading .primary-button,.section-heading .search-field { width:100%; }
  .focus-layout { gap:32px; }
  .note-list { grid-template-columns:1fr; }
  .note-item { min-height:140px; }
  .groups-layout { display:block; min-height:0; }
  .group-list { border-right:0; border-bottom:1px solid var(--line); }
  .group-detail { padding:18px 12px; }
  dialog form,.detail-panel { padding:18px; }
  .detail-metrics { grid-template-columns:1fr 1fr; }
  dialog footer { flex-wrap:wrap; }
  dialog footer button { flex:1; }
  .role-message>div { flex-direction:column; }
}