*{box-sizing:border-box}body{margin:0;background:#f5f8fc;color:#193b59;font-family:'Noto Sans Thai','DM Sans',system-ui,sans-serif;font-size:14px}h1,.day strong{font-family:'DM Sans','Noto Sans Thai',system-ui,sans-serif}button,select,input,textarea{font:inherit;color:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer;padding:10px 14px;border:1px solid #ccd9ea;border-radius:8px;background:#fff;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}.primary{background:#145bc9;color:#fff;border:1px solid #145bc9;border-radius:8px;padding:12px 18px;display:inline-block;text-decoration:none}a{color:inherit;text-decoration:none}header{background:#fff;padding:20px max(20px,calc((100% - 1120px)/2));border-bottom:1px solid #dce5ef;display:flex;justify-content:space-between;align-items:center;gap:12px}header>a{font-weight:700;letter-spacing:1px}header small{font-size:10px;color:#71859b;display:block}header>div{display:flex;align-items:center;gap:16px}main{max-width:1160px;margin:auto;padding:28px 24px 50px}.heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.heading small{font-size:11px;letter-spacing:2px;color:#6c839d}h1{font-size:28px;margin:7px 0}p{line-height:1.65;color:#657e96}nav,.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0}nav .active{background:#e8f1ff;color:#155ac2;border-color:#8bb0e9}.toolbar label{display:flex;gap:8px;align-items:center;margin-left:auto}select{padding:10px;background:white;border:1px solid #ccd9ea;border-radius:8px}.legend{display:flex;gap:18px;font-size:12px;color:#6f8198;margin:15px 0}.grid{display:grid;grid-template-columns:60px repeat(7,minmax(0,1fr));gap:6px}.day{border:0;background:transparent;text-align:center;padding:8px 2px}.day strong{display:block;font-size:22px}.day.active{background:#e7effc;color:#145bc9}.hour{display:flex;align-items:center;color:#6b8299;font-size:12px}.slot{font-size:12px;min-height:49px;padding:6px 2px;min-width:0;color:#7c8fa3}.slot small{display:block;font-size:10px}.slot.open{background:#e4f4ed;color:#216e4e;border-color:#b8dccb}.slot.booked{background:#ffedef;color:#a12438;border-color:#edb1bc;opacity:1}.slot.chosen{outline:2px solid #155bca;outline-offset:-2px}.bottom{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#6a8098;margin:20px 0}.lessons{margin-top:32px}.lesson{padding:16px;background:#fff;border:1px solid #dae5ef;border-radius:10px;margin:12px 0;display:flex;justify-content:space-between;align-items:center;gap:12px}.lesson p{font-size:12px;margin:6px 0}#notice{padding:14px;background:#e8f0ff;color:#1558ac;border-radius:8px}#notice.error{background:#fff0f0;color:#a12338}#profile-form{max-width:650px;background:white;padding:24px;border:1px solid #d7e3f0;border-radius:12px}#profile-form label,dialog label{display:block;margin:15px 0}input,textarea{width:100%;padding:12px;border:1px solid #cddaea;border-radius:8px;margin-top:6px}textarea{resize:vertical}#portrait{width:90px;height:100px;object-fit:cover;border-radius:10px}dialog{border:0;border-radius:14px;padding:24px;width:min(500px,calc(100% - 28px));color:inherit}dialog::backdrop{background:#18385488}.login-panel{max-width:460px;margin:12vh auto;background:white;border:1px solid #dae4ef;border-radius:16px;padding:30px}[hidden]{display:none!important}:focus-visible{outline:3px solid #307ada;outline-offset:3px}@media(max-width:650px){main{padding:18px 14px}header{padding:15px}header small{display:none}header>div{gap:8px;font-size:12px}.heading{align-items:flex-start}h1{font-size:23px}.heading p{font-size:12px}.toolbar label{margin-left:0;width:100%}.day{font-size:11px;min-height:48px}.day strong{font-size:17px}.slot{grid-column:2/9;font-size:14px;text-align:left;padding:8px 16px;display:flex;justify-content:space-between;align-items:center}.slot:not(.mobile-day){display:none}.hour{grid-column:1}.lesson{flex-direction:column;align-items:stretch}.legend{gap:8px;font-size:11px}.bottom{flex-direction:column}}