*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:#0f0f13; --surface:#18181f; --surface2:#22222c; --border:#2e2e3a; --border2:#3a3a48;
      --text:#e8e8f0; --muted:#7a7a90; --green:#3dbd8b; --green-dim:rgba(61,189,139,0.1);
      --green-border:rgba(61,189,139,0.25); --red:#e05a5a; --red-dim:rgba(224,90,90,0.08);
      --red-border:rgba(224,90,90,0.3); --amber:#e0943a; --main:#5b9cf6;
      --main-dim:rgba(91,156,246,0.08); --speak:#f0a05a; --speak-dim:rgba(240,160,90,0.08);
      --accent:#7c6af7;
    }
    body { background:var(--bg); min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:2rem 1rem 4rem; font-family:'Outfit',sans-serif; color:var(--text); }
    #app { background:var(--surface); border-radius:16px; width:100%; max-width:540px; padding:2rem 1.75rem 2.5rem; box-shadow:0 8px 40px rgba(0,0,0,0.4); border:1px solid var(--border); }
    .header { text-align:center; margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border); }
    .header-eyebrow { font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
    .header-title { font-family:'Spectral',serif; font-size:26px; font-weight:600; color:#fff; line-height:1.2; margin-bottom:6px; }
    .header-subtitle { font-size:14px; color:var(--muted); }
    .step-indicator { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:1.75rem; }
    .step-dot { width:8px; height:8px; border-radius:50%; background:var(--border2); transition:background 0.2s,transform 0.2s; }
    .step-dot.active { background:#fff; transform:scale(1.3); }
    .step-dot.done { background:var(--green); }
    .section-label { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
    .time-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:1.5rem; }
    .time-card { border:1px solid var(--border); border-radius:12px; padding:14px 16px; cursor:pointer; transition:border-color 0.15s,background 0.15s; background:var(--surface2); }
    .time-card:hover:not(.full):not(.selected):not(.mine) { border-color:var(--border2); background:#26262f; }
    .time-card.selected { border:2px solid #fff; }
    .time-card.full { opacity:0.4; cursor:not-allowed; }
    .time-card.mine { border:2px solid var(--green); background:rgba(61,189,139,0.06); cursor:default; }
    .time-label { font-family:'Spectral',serif; font-size:22px; font-weight:500; color:#fff; margin-bottom:8px; }
    .seats-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
    .seats-text { font-size:12px; font-weight:500; color:var(--muted); white-space:nowrap; }
    .seats-text.urgent { color:var(--amber); }
    .seats-text.full-text { color:var(--red); }
    .seats-text.mine-text { color:var(--green); }
    .seat-bar-bg { flex:1; height:4px; border-radius:2px; background:var(--border2); overflow:hidden; }
    .seat-bar-fill { height:100%; border-radius:2px; }
    .seat-dots { display:flex; gap:3px; flex-wrap:wrap; margin-top:2px; }
    .seat-dot { width:7px; height:7px; border-radius:50%; }
    .seat-dot.taken { background:var(--border2); }
    .seat-dot.avail { background:var(--green); }
    /* exam type step */
    .exam-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:1.5rem; }
    .exam-card { border:1px solid var(--border); border-radius:12px; padding:20px 16px; cursor:pointer; transition:all 0.2s; background:var(--surface2); text-align:center; }
    .exam-card:hover:not(.ec-full) { border-color:var(--border2); transform:translateY(-2px); }
    .exam-card.ec-main { border:2px solid var(--main); background:var(--main-dim); }
    .exam-card.ec-speaking { border:2px solid var(--speak); background:var(--speak-dim); }
    .exam-card.ec-full { opacity:0.35; cursor:not-allowed; }
    .ec-icon { font-size:28px; margin-bottom:10px; }
    .ec-name { font-family:'Spectral',serif; font-size:17px; font-weight:600; color:#fff; margin-bottom:4px; }
    .ec-desc { font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:10px; }
    .ec-seats { font-size:13px; font-weight:600; }
    .ec-seats.ms { color:var(--main); }
    .ec-seats.ss { color:var(--speak); }
    .ec-seats.fs { color:var(--red); }
    /* schedule box */
    .sched-box { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:1.25rem; }
    .sched-title { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
    .sched-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:13px; border-bottom:1px solid var(--border); }
    .sched-row:last-of-type { border-bottom:none; }
    .sched-label { color:var(--muted); }
    .sched-val { font-weight:600; font-family:'Spectral',serif; font-size:15px; }
    .sched-val.mv { color:var(--main); }
    .sched-val.sv { color:var(--speak); }
    .sched-note { font-size:11px; color:var(--muted); margin-top:8px; font-style:italic; line-height:1.5; }
    /* form */
    .field-group { margin-bottom:1rem; }
    .field-label { font-size:13px; font-weight:500; color:var(--muted); display:block; margin-bottom:6px; }
    .phone-wrap { display:flex; gap:8px; }
    .phone-prefix { height:42px; padding:0 12px; border:1px solid var(--border); border-radius:8px; font-size:15px; color:var(--text); background:var(--border); display:flex; align-items:center; white-space:nowrap; flex-shrink:0; }
    .field-input { width:100%; height:42px; padding:0 12px; border:1px solid var(--border); border-radius:8px; font-size:15px; font-family:'Outfit',sans-serif; color:var(--text); background:var(--surface2); outline:none; transition:border-color 0.15s; }
    .field-input:focus { border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.05); }
    .field-input.error { border-color:var(--red); }
    .radio-group { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .radio-card { border:1px solid var(--border); border-radius:8px; padding:12px 14px; cursor:pointer; transition:border-color 0.15s,background 0.15s; display:flex; align-items:center; gap:10px; background:var(--surface2); }
    .radio-card:hover { background:#26262f; }
    .radio-card.selected { border:2px solid #fff; }
    .radio-circle { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border2); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
    .radio-circle.on { border-color:#fff; background:#fff; }
    .radio-circle.on::after { content:''; width:6px; height:6px; border-radius:50%; background:var(--surface); }
    .radio-text { font-size:13px; font-weight:500; color:var(--text); line-height:1.3; }
    .selected-slot-recap { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
    .recap-time { font-family:'Spectral',serif; font-size:18px; font-weight:500; color:#fff; }
    .recap-pill { display:inline-block; padding:2px 10px; border-radius:99px; font-size:11px; font-weight:600; margin-left:8px; vertical-align:middle; }
    .recap-pill.pm { background:var(--main-dim); color:var(--main); border:1px solid rgba(91,156,246,0.3); }
    .recap-pill.ps { background:var(--speak-dim); color:var(--speak); border:1px solid rgba(240,160,90,0.3); }
    .recap-change { font-size:12px; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
    .recap-change:hover { color:var(--text); }
    .error-msg { font-size:12px; color:var(--red); margin-top:5px; }
    .btn-primary { width:100%; height:46px; border-radius:8px; border:none; background:#fff; color:#111; font-family:'Outfit',sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:opacity 0.15s,transform 0.1s; margin-top:1.25rem; }
    .btn-primary:hover { opacity:0.88; }
    .btn-primary:active { transform:scale(0.99); }
    .btn-primary:disabled { opacity:0.25; cursor:not-allowed; }
    .btn-secondary { width:100%; height:42px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); font-family:'Outfit',sans-serif; font-size:14px; font-weight:500; cursor:pointer; transition:background 0.15s; margin-top:8px; }
    .btn-secondary:hover { background:var(--surface2); color:var(--text); }
    .btn-secondary:disabled { opacity:0.3; cursor:not-allowed; }
    .btn-green { width:100%; height:46px; border-radius:8px; border:none; background:var(--green); color:#fff; font-family:'Outfit',sans-serif; font-size:15px; font-weight:500; cursor:pointer; transition:opacity 0.15s; margin-top:1.25rem; }
    .btn-green:hover { opacity:0.85; }
    .btn-green:disabled { opacity:0.35; cursor:not-allowed; }
    .btn-danger { width:100%; height:42px; border-radius:8px; border:1px solid var(--red-border); background:transparent; color:var(--red); font-family:'Outfit',sans-serif; font-size:14px; font-weight:500; cursor:pointer; transition:background 0.15s; margin-top:8px; }
    .btn-danger:hover { background:var(--red-dim); }
    .btn-danger:disabled { opacity:0.3; cursor:not-allowed; }

    .booking-card { background:var(--green-dim); border:1px solid var(--green-border); border-radius:12px; padding:16px; text-align:left; margin-bottom:1rem; }
    .booking-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid rgba(61,189,139,0.1); font-size:14px; }
    .booking-row:last-child { border-bottom:none; }
    .booking-row-label { color:rgba(61,189,139,0.7); }
    .booking-row-val { font-weight:500; color:#b3f0d8; }
    .success-screen { text-align:center; padding:1rem 0; }
    .success-icon { width:56px; height:56px; border-radius:50%; background:var(--green-dim); display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; border:1px solid var(--green-border); }
    .manage-title { font-family:'Spectral',serif; font-size:22px; font-weight:600; color:#fff; margin-bottom:6px; }
    .manage-sub { font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:1.5rem; }
    .change-slot-title { font-family:'Spectral',serif; font-size:20px; font-weight:600; color:#fff; margin-bottom:6px; text-align:center; }
    .change-slot-sub { font-size:14px; color:var(--muted); text-align:center; margin-bottom:1.5rem; }
    .loading-screen { text-align:center; padding:3rem 0; }
    .loading-dots { display:flex; justify-content:center; gap:6px; margin-bottom:1rem; }
    .loading-dot { width:8px; height:8px; border-radius:50%; background:var(--border2); animation:pulse 1.2s ease-in-out infinite; }
    .loading-dot:nth-child(2){animation-delay:0.2s;}
    .loading-dot:nth-child(3){animation-delay:0.4s;}
    @keyframes pulse{0%,80%,100%{transform:scale(0.8);opacity:0.5}40%{transform:scale(1.1);opacity:1}}
    .loading-text { font-size:14px; color:var(--muted); }
    .deadline-banner { background:var(--red-dim); border:1px solid var(--red-border); border-radius:8px; padding:14px 16px; font-size:14px; color:#ff9090; text-align:center; margin-bottom:1.25rem; }
    .countdown-banner { background:var(--main-dim); border:1px solid rgba(91,156,246,0.25); border-radius:8px; padding:10px 14px; font-size:13px; color:var(--main); text-align:center; margin-bottom:1.25rem; }
    .err-banner { background:var(--red-dim); border:1px solid var(--red-border); border-radius:8px; padding:12px 16px; font-size:13px; color:#ff9090; text-align:center; margin-bottom:1rem; }
    /* admin */
    .admin-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:center; z-index:1000; }
    .admin-panel { background:var(--surface); border:1px solid var(--border); border-radius:16px; width:100%; max-width:480px; padding:2rem 1.75rem; margin:1rem; max-height:calc(100vh - 2rem); overflow-y:auto; }
    .admin-title { font-family:'Spectral',serif; font-size:20px; font-weight:600; color:#fff; margin-bottom:6px; }
    .admin-sub { font-size:13px; color:var(--muted); margin-bottom:1.5rem; }
    .admin-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:1.25rem; }
    .admin-tab { flex:1; padding:10px 0; font-size:13px; font-weight:500; color:var(--muted); text-align:center; cursor:pointer; border-bottom:2px solid transparent; transition:color 0.15s,border-color 0.15s; background:none; border-top:none; border-left:none; border-right:none; font-family:'Outfit',sans-serif; }
    .admin-tab.active { color:#fff; border-bottom-color:#fff; }
    .admin-tab:hover:not(.active) { color:var(--text); }
    .mode-card { border:1px solid var(--border); border-radius:12px; padding:16px; cursor:pointer; margin-bottom:10px; transition:all 0.15s; background:var(--surface2); }
    .mode-card:hover { border-color:var(--border2); }
    .mode-card.mode-on { border-color:var(--accent); background:rgba(124,106,247,0.08); }
    .mode-card-title { font-family:'Spectral',serif; font-size:16px; font-weight:600; color:#fff; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
    .mode-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:700; letter-spacing:0.06em; font-family:'Outfit',sans-serif; background:var(--accent); color:#fff; }
    .mode-card-desc { font-size:12px; color:var(--muted); line-height:1.5; }
    .session-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:10px 12px; background:var(--surface2); border-radius:8px; border:1px solid var(--border); }
    .session-row-num { font-size:12px; font-weight:600; color:var(--muted); min-width:20px; }
    .session-input { height:36px; padding:0 10px; border:1px solid var(--border); border-radius:6px; font-size:14px; font-family:'Outfit',sans-serif; color:var(--text); background:var(--bg); outline:none; flex:1; min-width:0; transition:border-color 0.15s; }
    .session-input:focus { border-color:var(--border2); }
    .session-input.seats-input { width:50px; flex:none; text-align:center; }
    .session-input.teach-input { width:44px; flex:none; text-align:center; }
    .tog { display:flex; align-items:center; gap:5px; cursor:pointer; flex-shrink:0; }
    .tog-track { width:34px; height:18px; border-radius:99px; background:var(--border); position:relative; transition:background 0.2s; flex-shrink:0; }
    .tog-track.on { background:var(--speak); }
    .tog-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform 0.2s; }
    .tog-track.on .tog-thumb { transform:translateX(16px); }
    .tog-label { font-size:10px; font-weight:600; color:var(--muted); white-space:nowrap; }
    .tog-track.on + .tog-label { color:var(--speak); }
    .session-del { width:28px; height:28px; border-radius:6px; border:1px solid var(--red-border); background:transparent; color:var(--red); font-size:14px; cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
    .session-del:hover { background:var(--red-dim); }
    .session-del:disabled { opacity:0.3; cursor:not-allowed; }
    .add-session-btn { width:100%; height:36px; border:1px dashed var(--border); border-radius:8px; background:transparent; color:var(--muted); font-size:13px; font-family:'Outfit',sans-serif; cursor:pointer; margin-bottom:10px; transition:border-color 0.15s; }
    .add-session-btn:hover { border-color:var(--border2); color:var(--text); }
    .enable-all-btn { width:100%; height:34px; border:1px solid rgba(240,160,90,0.3); border-radius:8px; background:rgba(240,160,90,0.06); color:var(--speak); font-size:12px; font-family:'Outfit',sans-serif; cursor:pointer; font-weight:500; margin-bottom:12px; }
    .enable-all-btn:hover { background:rgba(240,160,90,0.12); }
    .admin-input { width:100%; height:42px; padding:0 12px; border:1px solid var(--border); border-radius:8px; font-size:15px; font-family:'Outfit',sans-serif; color:var(--text); background:var(--surface2); outline:none; margin-bottom:10px; }
    input[type='datetime-local'].admin-input { height:auto; padding:10px 12px; }
    .admin-input:focus { border-color:var(--border2); }
    .admin-row { display:flex; gap:8px; margin-bottom:10px; }
    .admin-row .admin-input { margin-bottom:0; }
    .admin-status { font-size:13px; margin-top:8px; }
    .admin-status.ok { color:var(--green); }
    .admin-status.err { color:var(--red); }
    .deadline-display { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:10px 14px; font-size:13px; color:var(--muted); margin-bottom:1rem; }
    .deadline-display strong { color:var(--text); }