:root{--color-bg: #f5f7fa;--color-surface: #ffffff;--color-border: #e2e8f0;--color-text: #1a202c;--color-muted: #64748b;--color-primary: #1f6feb;--color-primary-dark: #175bcc;--color-ok: #16a34a;--color-warn: #d97706;--color-danger: #dc2626;--radius: 10px;--shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--touch: 44px}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--color-text);background:var(--color-bg);line-height:1.5;-webkit-font-smoothing:antialiased}a{color:var(--color-primary);text-decoration:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--touch);padding:0 18px;border:1px solid transparent;border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;background:var(--color-surface);color:var(--color-text);transition:background .15s ease,box-shadow .15s ease}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-block{width:100%;margin-top:12px}.btn-google{width:100%;background:#fff;color:#3c4043;border:1px solid var(--color-border);box-shadow:var(--shadow);font-size:16px}.btn-google:hover{background:#f8fafc}.g-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#4285f4,#34a853);color:#fff;font-weight:800;font-size:14px}.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-card{width:100%;max-width:380px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;box-shadow:var(--shadow);padding:32px 24px;text-align:center}.login-title{margin:0 0 4px;font-size:24px}.login-subtitle{margin:0 0 24px;color:var(--color-muted)}.login-hint{margin:16px 0 0;font-size:13px;color:var(--color-muted)}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{background:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:20}.topbar-inner{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.brand{font-weight:800;font-size:18px;margin-right:auto}.nav-toggle{min-width:var(--touch);min-height:var(--touch);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);font-size:20px;cursor:pointer}.nav-links{display:none;width:100%;flex-direction:column;gap:4px;padding-top:8px}.nav-links.open{display:flex}.nav-links a{padding:12px 8px;min-height:var(--touch);display:flex;align-items:center;border-radius:var(--radius);color:var(--color-text)}.nav-links a:hover{background:var(--color-bg)}.nav-logout{color:var(--color-danger)!important}.content{width:100%;max-width:1100px;margin:0 auto;padding:20px 16px 48px;flex:1}.page-title{margin:0 0 4px;font-size:22px}.page-desc{margin:0 0 20px;color:var(--color-muted)}.section-title{margin:28px 0 12px;font-size:18px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.stat-card.warn{border-color:#fcd9a8;background:#fffaf2}.stat-num{font-size:24px;font-weight:800}.stat-label{margin-top:4px;font-size:13px;color:var(--color-muted)}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface)}.data-table{width:100%;border-collapse:collapse;min-width:640px}.data-table th,.data-table td{padding:12px 14px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--color-border);font-size:14px}.data-table thead th{background:#f8fafc;font-weight:700;color:var(--color-muted);position:sticky;top:0}.data-table tbody tr:last-child td{border-bottom:none}.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:700}.pill-ok{background:#dcfce7;color:var(--color-ok)}.pill-warn{background:#fef3c7;color:var(--color-warn)}.pill-danger{background:#fee2e2;color:var(--color-danger)}.card-grid{display:grid;grid-template-columns:1fr;gap:14px}.lesson-card{background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.lesson-card.status-now{border-left-color:var(--color-primary)}.lesson-card.status-done{border-left-color:var(--color-ok);opacity:.85}.lesson-card.status-upcoming{border-left-color:var(--color-warn)}.lesson-time{font-size:13px;color:var(--color-muted)}.lesson-student{font-size:20px;font-weight:800;margin-top:2px}.lesson-course{color:var(--color-muted);margin-top:2px}.lesson-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}.badge-now{background:#dbeafe;color:var(--color-primary)}.badge-done{background:#dcfce7;color:var(--color-ok)}.badge-upcoming{background:#fef3c7;color:var(--color-warn)}@media (min-width: 640px){.stat-grid{grid-template-columns:repeat(4,1fr)}.card-grid{grid-template-columns:repeat(2,1fr)}.page-title{font-size:26px}}@media (min-width: 860px){.nav-toggle{display:none}.nav-links{display:flex;flex-direction:row;width:auto;align-items:center;gap:4px;padding-top:0}.nav-links a{padding:8px 14px;min-height:auto}.card-grid{grid-template-columns:repeat(3,1fr)}}