:root{--ink:#233f36;--muted:#7d827a;--line:#e6e7df;--paper:#f6f5ef;--green:#294e44}*{box-sizing:border-box}body{background:var(--paper);color:#303c35;margin:0;font-family:Arial,PingFang TC,Microsoft JhengHei,sans-serif;font-size:15px}button,input,select,textarea{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:9px;min-height:44px;padding:11px 16px}button:disabled{opacity:.45;cursor:default}button:hover:not(:disabled){filter:brightness(.97)}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #a4bda7}aside{border-right:1px solid var(--line);background:#fff;flex-direction:column;width:246px;padding:37px 22px;display:flex;position:fixed;inset:0 auto 0 0}.brand{letter-spacing:1px;align-items:center;gap:12px;font-size:19px;font-weight:700;display:flex}.brand small{letter-spacing:1.4px;color:var(--muted);margin-top:7px;font-size:8px;display:block}.logo{background:var(--green);color:#fff;border-radius:12px;place-items:center;width:45px;height:48px;font-size:30px;display:grid}.aside-title{color:#a1a69b;letter-spacing:2px;margin:59px 14px 16px;font-size:11px}.nav{text-align:left;background:0 0;border:0;margin-bottom:9px;font-size:14px}.nav.active{background:#edf1e9;font-weight:700}.aside-bottom{margin-top:auto;padding:18px 12px;font-size:13px}.aside-bottom small{color:var(--muted);margin:13px 0 25px;display:block}.aside-bottom a{color:var(--muted);font-size:12px}.dot{background:#729178;border-radius:50%;width:7px;height:7px;margin-right:5px;display:inline-block}main{max-width:1700px;margin-left:246px;padding:0 44px 30px}header{border-bottom:1px solid var(--line);letter-spacing:1.5px;height:79px;color:var(--muted);justify-content:space-between;align-items:center;font-size:10px;display:flex}.text{background:0 0;border:0;padding:8px;font-size:12px}.heading{justify-content:space-between;align-items:center;gap:20px;margin:42px 0 30px;display:flex}.eyebrow{letter-spacing:2.1px;color:#8d9985;margin:0 0 12px;font-size:10px}h1{letter-spacing:1px;margin:0 0 12px;font-size:30px;font-weight:600}h2{margin:0;font-size:19px;font-weight:600}h3{margin:28px 0 16px;font-size:14px}.muted{color:var(--muted);font-size:13px;line-height:1.8}.primary{background:var(--green);color:#fff;border-color:var(--green);padding:13px 20px}.metrics{border:1px solid var(--line);background:#fff;border-radius:13px;grid-template-columns:1fr 1fr 1.3fr;margin-bottom:31px;padding:25px 0;display:grid}.metrics>div{border-right:1px solid var(--line);padding:0 30px}.metrics>div:last-child{border:0}.metrics span{color:var(--muted);font-size:12px;display:block}.metrics strong{letter-spacing:-.5px;margin-top:12px;font-size:29px;font-weight:500;display:block}.metrics small{color:var(--muted);margin-left:8px;font-size:11px;font-weight:400}.metrics>div>small{margin:9px 0 0;display:block}.workspace{grid-template-columns:320px minmax(0,1fr);gap:25px;display:grid}.folders,.records{border:1px solid var(--line);background:#fff;border-radius:13px;padding:25px}.folders{padding:23px 18px}.row{justify-content:space-between;align-items:center;gap:12px;display:flex}.badge{color:#8c967f;background:#f3f4ee;border-radius:5px;padding:5px 8px;font-size:11px}input,select,textarea{border:1px solid var(--line);width:100%;color:var(--ink);background:#fcfcf9;border-radius:8px;min-height:44px;margin:8px 0 16px;padding:12px;display:block}label{font-size:13px;line-height:1.5;display:block}.folders>input{margin-top:24px}.check{color:var(--muted);align-items:center;gap:7px;font-size:11px;display:flex}.check input{width:16px;min-height:16px;margin:0}.student-list{margin-top:16px}.student{text-align:left;border:1px solid #0000;align-items:center;gap:11px;width:100%;margin:5px 0;padding:14px 9px;display:flex}.student.chosen{background:#f0f3ec;border-color:#dce4d5}.avatar{color:#8e906a;background:#e9e8dc;border-radius:10px;place-items:center;width:39px;height:42px;font-size:15px;display:grid}.student strong{font-size:13px;display:block}.student small,.lesson small{color:var(--muted);margin-top:7px;font-size:11px;display:block}.count{color:#909888;margin-left:auto;font-size:11px}.actions{gap:8px;margin-top:18px;display:flex}.actions button{padding:7px 12px;font-size:11px}.lesson{text-align:left;background:0 0;border:0;border-top:1px solid #eeeee7;border-radius:0;justify-content:space-between;align-items:center;width:100%;padding:18px 0;font-size:13px;display:flex}.lesson strong{font-weight:500}.empty{color:#92988b;text-align:center;padding:45px 10px;font-size:13px}.empty span{color:#9aa58e;margin-bottom:23px;font-size:40px;display:block}.big{min-height:300px;padding-top:70px}.big h2{color:#687660;font-size:17px}.filters{flex-wrap:wrap;align-items:end;gap:15px;display:flex}.filters label{flex:1;min-width:150px}.filters button{margin-bottom:16px}.stat-total{background:#f1f4ec;border-radius:10px;margin:15px 0 25px;padding:30px}.stat-total strong{margin:13px 0;font-size:32px;display:block}.stat-total small{color:var(--muted)}table{border-collapse:collapse;text-align:left;width:100%}td,th{border-bottom:1px solid var(--line);padding:17px 10px;font-size:13px}th{color:var(--muted);font-size:11px;font-weight:400}footer{text-align:center;color:#a2a797;letter-spacing:1px;margin-top:35px;font-size:10px}.alert{color:#925735;background:#fcf0e8;border-radius:8px;padding:13px;font-size:13px;line-height:1.7}.overlay{z-index:10;background:#152d2670;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.dialog{background:#fff;border-radius:16px;width:560px;max-width:100%;max-height:92dvh;padding:28px;overflow:auto;box-shadow:0 20px 100px #10221933}.dialog.wide{width:960px}.dialog>.row{margin-bottom:23px}.dialog small{color:var(--muted);font-size:11px;line-height:1.7}.sign-grid{grid-template-columns:1fr 1fr;gap:18px;margin:22px 0;display:grid}.signature{border:1px solid var(--line);border-radius:10px;padding:13px}.signature strong{font-size:13px}.signature canvas{touch-action:none;border-bottom:1px solid var(--line);background:linear-gradient(#0000 95%,#e5e7df 95%);width:100%;height:180px;margin-bottom:10px;display:block}.full{width:100%;margin:8px 0 13px}.saved-sign img{border:1px solid var(--line);border-radius:8px;width:100%;margin:8px 0 15px}details{margin-top:22px;font-size:12px}summary{cursor:pointer;color:var(--muted);padding:12px 0}@media (width<=1100px){aside{width:200px;padding:30px 14px}.brand{font-size:16px}main{margin-left:200px;padding:0 25px 25px}.workspace{grid-template-columns:260px minmax(0,1fr);gap:15px}.records{padding:20px}.heading h1{font-size:26px}.metrics>div{padding:0 20px}}@media (width<=760px){aside{border-bottom:1px solid var(--line);flex-direction:row;align-items:center;gap:10px;width:auto;padding:15px 20px;display:flex;position:static}.brand{margin-right:auto}.brand small,.aside-title,.aside-bottom{display:none}.brand .logo{width:33px;height:38px;font-size:25px}.nav{margin:0;padding:8px;font-size:11px}.brand>span:last-child{display:none}main{margin:0;padding:0 17px 25px}header{height:55px}.heading{align-items:flex-start;margin:27px 0 22px}.heading h1{font-size:23px}.heading .primary{white-space:nowrap;padding:11px;font-size:12px}.eyebrow{letter-spacing:1px;font-size:8px}.metrics{gap:0;padding:20px 0}.metrics>div{padding:0 12px}.metrics strong{font-size:23px}.metrics span{font-size:10px}.metrics small{margin-left:3px;font-size:9px}.workspace{grid-template-columns:1fr}.student-list{grid-template-columns:1fr 1fr;gap:5px;display:grid}.student{padding:10px 5px}.avatar{width:32px}.count{font-size:10px}.sign-grid{grid-template-columns:1fr}.signature canvas{height:150px}.overlay{padding:10px}.dialog{padding:21px}.metrics>div:last-child strong{font-size:20px}}.login{place-items:center;min-height:100dvh;padding:25px;display:grid}.login .dialog{max-height:none}.calendar{gap:10px;margin:20px 0;display:grid;overflow-x:auto}.calendar.week{grid-template-columns:repeat(7,minmax(125px,1fr))}.calendar>section{border:1px solid var(--line);border-radius:10px;min-height:180px;padding:10px}.calendar h3{margin:5px 0 15px}.schedule-card{text-align:left;background:#f0f4ed;border-left:4px solid #6d8e74;flex-direction:column;align-items:flex-start;gap:8px;width:100%;margin-bottom:10px;padding:12px;display:flex}.schedule-card.leave{background:#fcf2e8;border-left-color:#c79562}.schedule-card.signed{background:#e7f1ee;border-left-color:#2c6955}.schedule-card.cancelled{color:#777;background:#f2f2f2;border-left-color:#999}.schedule-card small{font-size:11px;line-height:1.5}.schedule .actions{flex-wrap:wrap}.pending-list{max-height:320px;overflow:auto}.schedule button[aria-pressed=true]{background:var(--green);color:#fff}@media (width<=760px){aside{flex-wrap:wrap}.calendar.week{scroll-snap-type:x mandatory}.calendar>section{scroll-snap-align:start}}.account-bar{border-bottom:1px solid var(--line);z-index:1;background:#fff;margin-left:246px;padding:12px 24px;position:relative}.account{max-width:560px;margin:0}.account-bar>button{margin-top:8px}@media (width<=1100px){.account-bar{margin-left:200px}}@media (width<=760px){.account-bar{margin-left:0}}.account-table{overflow-x:auto}.account-directory td{overflow-wrap:anywhere;min-width:90px}.account-directory td:first-child{min-width:180px}.account-directory .dialog button{margin:8px}.student-schedule{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:20px;padding-bottom:18px}.student-schedule .row{flex-wrap:wrap}.student-schedule small{color:var(--muted);font-size:11px}.student-schedule .dialog button{margin-right:8px}aside[hidden]{display:none}.sidebar-hide{margin-bottom:20px;font-size:12px}.sidebar-show{letter-spacing:0;white-space:nowrap;font-size:12px}.sidebar-collapsed main{max-width:none;margin-left:0;padding-left:24px;padding-right:24px}.schedule-tools{flex-wrap:wrap;gap:10px;display:flex}.student-notes{border-bottom:1px solid var(--line);padding-bottom:22px}.student-notes textarea{resize:vertical}.student-notes small{color:var(--muted)}@media (width>=761px){.calendar.week{grid-template-columns:repeat(7,minmax(0,1fr));overflow-x:visible}.calendar>section{min-width:0}.schedule-card{overflow-wrap:anywhere;padding:10px 7px}.schedule-card strong{white-space:nowrap;font-size:12px}.sidebar-collapsed .calendar>section{min-height:calc(100dvh - 360px)}.sidebar-collapsed .heading{margin:22px 0}.sidebar-collapsed header{height:60px}.sidebar-collapsed .schedule{padding:18px}.sidebar-collapsed .filters{gap:8px}.sidebar-collapsed .filters button{padding:9px 11px}.sidebar-collapsed .calendar{gap:7px}.sidebar-collapsed .calendar>section{padding:7px}.sidebar-collapsed .calendar h3{font-size:12px}}@media (width<=760px){.sidebar-collapsed main{padding-left:12px;padding-right:12px}.sidebar-hide{margin:0}.schedule-tools button{padding:10px;font-size:12px}.schedule>.row{flex-wrap:wrap}header{flex-wrap:wrap;gap:8px}header>span{display:none}}@media (width>=761px){body:has(.sidebar-collapsed) .account-bar{padding:6px 24px}.sidebar-collapsed header{height:48px}.sidebar-collapsed .heading{margin:16px 0}.sidebar-collapsed .heading .eyebrow{display:none}.sidebar-collapsed .heading h1{margin-bottom:6px;font-size:24px}.sidebar-collapsed .heading .muted{margin:6px 0}.sidebar-collapsed .schedule>.muted{margin:10px 0}.sidebar-collapsed .calendar.week{height:max(280px,100dvh - 460px)}.sidebar-collapsed .calendar.week>section{height:100%;min-height:0;overflow-y:auto}.sidebar-collapsed .schedule-card span{font-size:12px}}.sidebar-toggle{z-index:9;place-items:center;width:44px;height:44px;padding:0;font-size:24px;display:grid;position:fixed;top:8px;left:8px;box-shadow:0 2px 8px #10221914}.sidebar-rail{border-right:1px solid var(--line);z-index:8;background:#fff;width:60px;position:fixed;inset:0 auto 0 0}.sidebar-rail[hidden]{display:none}.app>aside{padding-top:72px;overflow-y:auto}.sidebar-collapsed main{margin-left:60px;padding-left:18px;padding-right:18px}body:has(.sidebar-collapsed) .account-bar{margin-left:60px}@media (width>=761px){.workspace{align-items:stretch;height:calc(100dvh - 24px);position:sticky;top:12px}.workspace>.folders,.workspace>.records{height:100%;min-height:0}.workspace>.folders{flex-direction:column;display:flex;overflow:hidden}.workspace .student-list{overscroll-behavior-y:auto;scrollbar-gutter:stable;flex:1;min-height:0;overflow-y:auto}.workspace>.records{overscroll-behavior-y:auto;scrollbar-gutter:stable;overflow-y:auto}.workspace .folders>.row,.workspace .folders>input,.workspace .folders>.check{flex-shrink:0}}@media (width<=760px){.app>aside{padding:64px 16px 16px}.sidebar-collapsed main{margin-left:60px;padding-left:12px;padding-right:12px}body:has(.sidebar-collapsed) .account-bar{padding:8px 12px}body:not(:has(.sidebar-collapsed)) .account-bar{padding-left:64px}}@media (width>=761px) and (width<=900px){.sidebar-collapsed .schedule-card{border-left-width:3px;padding:8px 4px}.sidebar-collapsed .schedule-card strong{letter-spacing:-.3px;font-size:10px}}.billing-materials{border:1px solid #d9e2dd;border-radius:16px;margin:24px 0;padding:20px}.billing form,.billing details,.billing-materials details{margin:18px 0}.billing .lesson{text-align:left;width:100%}.billing td small{color:#65776e;display:block}.invoice-print{border:1px solid #d9e2dd;border-radius:16px;margin-top:24px;padding:24px}.invoice-print table{width:100%}.invoice-print td:last-child,.invoice-print th:last-child{text-align:right}@media print{@page{size:A4;margin:16mm}body *{visibility:hidden!important}.invoice-print,.invoice-print *{visibility:visible!important}.invoice-print{color:#000;box-sizing:border-box;background:#fff;border:0;width:100%;margin:0;padding:0;position:absolute;top:0;left:0}.no-print,.no-print *{display:none!important}.invoice-print table,.invoice-print tr,.invoice-print .lesson{break-inside:avoid}}.report-tabs{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.report-table{overflow-x:auto}.report-table table{width:100%;min-width:520px}.report-definition{color:#566d62;background:#f1f5f2;border-radius:10px;padding:14px;line-height:1.7}.reports .filters{flex-wrap:wrap}.reports .metrics{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}@media print{:is(body:has(.report-print) .report-print,body:has(.report-print) .report-print *){visibility:visible!important}body:has(.report-print) .report-print{color:#000;background:#fff;width:100%;margin:0;padding:0;position:absolute;top:0;left:0}body:has(.report-print) .report-table{overflow:visible}body:has(.report-print) .report-table table{min-width:0;font-size:10pt}:is(body:has(.report-print) th,body:has(.report-print) td){overflow-wrap:anywhere;padding:8px 4px}body:has(.report-print) tr{break-inside:avoid}}