:root { --ink:#26362e; --muted:#687a6f; --paper:#fbfcf9; --soft:#eef4ee; --line:#dce6de; --green:#355f4e; --mint:#a9d8b8; --danger:#9e4c36; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:#e9efea; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%,460px); min-height:100vh; margin:auto; background:var(--paper); box-shadow:0 0 45px #26362e18; }
.top { padding:20px 21px 18px; background:linear-gradient(145deg,#dceddf,#f8f3e9); }
.brand { display:flex; justify-content:space-between; color:#52725f; font-size:12px; letter-spacing:.07em; }
h1 { margin:25px 0 5px; font-size:25px; line-height:1.12; letter-spacing:-.035em; }
h2 { margin:0; font-size:17px; }
p { margin:0; }
.muted { color:var(--muted); font-size:13px; line-height:1.45; }
.content { padding:19px; }
.course-card,.notice { padding:16px; border-radius:19px; background:var(--soft); }
.eyebrow { color:#527562; font-size:11px; letter-spacing:.07em; }
.course-name { margin:7px 0 4px; font-size:19px; font-weight:650; }
.progress { height:6px; overflow:hidden; margin-top:14px; border-radius:99px; background:#d4e3d7; }
.progress > span { display:block; width:30%; height:100%; border-radius:99px; background:#527a62; }
.section-title { display:flex; justify-content:space-between; align-items:center; margin:20px 0 8px; }
.session { display:flex; align-items:center; gap:12px; width:100%; padding:12px 1px; border:0; border-bottom:1px solid var(--line); background:transparent; color:inherit; text-align:left; }
.session:last-child { border-bottom:0; }
.session-num { display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:#e9f0e9; color:#65766b; font-size:12px; }
.session-main { flex:1; font-size:14px; }
.session-main small { display:block; margin-top:3px; color:#718077; font-size:12px; }
.status { color:#507461; font-size:12px; white-space:nowrap; }
.current { background:#f0f7f0; margin:0 -10px; padding-left:11px; padding-right:11px; border-radius:13px; }
.current .session-num { background:var(--green); color:#fff; }
.locked { color:#87938b; }
.scheduled { color:#687a6f; background:#f7faf7; }
.scheduled .session-num { background:#e7eee8; }
.locked .session-num { color:#a2aea5; background:#f0f2f0; }
.locked .status { color:#89958c; }
.action { width:100%; margin-top:15px; padding:14px; border:0; border-radius:14px; background:var(--green); color:#fff; font-weight:650; }
.secondary { width:100%; margin-top:8px; padding:13px; border:1px solid var(--line); border-radius:14px; background:transparent; color:var(--ink); }
.login { padding:72px 27px; min-height:100vh; }
.login .brand { justify-content:flex-start; }
.login h1 { font-size:29px; margin-top:25px; }
label { display:block; margin:18px 0 6px; font-size:13px; }
input,textarea,select { width:100%; padding:13px; border:1px solid #d7e1d8; border-radius:13px; background:#f8faf7; color:var(--ink); }
textarea { min-height:90px; resize:vertical; }
.lang { display:flex; gap:8px; margin:26px 0 0; }
.lang button,.demo-toggle button { border:0; border-radius:99px; padding:8px 12px; background:#e8eee9; color:inherit; font-size:13px; }
.lang button.active,.demo-toggle button.active { background:var(--green); color:#fff; }
.nav { display:flex; justify-content:space-between; align-items:center; padding:20px 21px; color:#586a5e; font-size:13px; }
.player { padding:0 22px 24px; text-align:center; }
.disc { display:grid; place-items:center; width:176px; height:176px; margin:44px auto 37px; border-radius:50%; background:radial-gradient(circle at 37% 32%,#f0eadb 0 5%,transparent 6%),radial-gradient(circle at 67% 60%,#cfe1d3 0 12%,transparent 13%),#d7e7da; color:#507561; font-size:48px; }
.time { display:flex; justify-content:space-between; margin:7px 0 23px; color:#718077; font-size:12px; }
input[type=range] { padding:0; accent-color:#527a62; }
.controls { display:flex; justify-content:center; align-items:center; gap:30px; }
.icon { border:0; background:transparent; color:inherit; font-size:20px; }
.pause { display:grid; place-items:center; width:62px; height:62px; border:0; border-radius:50%; background:var(--green); color:#fff; font-size:22px; }
.overlay { position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:18px; background:#13211977; z-index:5; }
.sheet { width:min(100%,430px); padding:25px 21px 20px; border-radius:23px; background:var(--paper); text-align:center; }
.sheet-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 16px; border-radius:50%; background:#e1eee3; color:#527a62; font-size:26px; }
.sheet h2 { font-size:20px; }
.sheet .muted { margin:9px 0 20px; }
.output-status { min-height:19px; margin:0 0 8px; color:var(--danger); font-size:12px; line-height:1.4; }
.output-warning { margin:12px 0; padding:10px; border-radius:12px; background:#f5e6dd; color:var(--danger); font-size:12px; line-height:1.4; }
.prep-list { margin:17px 0; padding:0; list-style:none; text-align:left; }
.prep-list li { padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.prep-list li::before { content:'✓'; margin-right:9px; color:#527a62; }
.check-options { display:grid; gap:9px; }
.check-option { padding:14px; border:1px solid var(--line); border-radius:15px; background:var(--paper); text-align:left; }
.check-option.selected { border-color:#527a62; background:#eef6ee; }
.check-option strong { display:block; font-size:14px; }
.check-option small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.assignment-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.assignment-choice { margin:0; padding:11px; border:1px solid var(--line); border-radius:12px; background:#f8faf7; font-size:13px; line-height:1.35; }
.assignment-choice input { width:auto; margin:0 6px 0 0; vertical-align:middle; }
.activity-list { display:grid; gap:10px; margin-top:18px; }
.activity-row strong,.activity-row span,.activity-row small { display:block; }
.activity-row span { margin-top:6px; font-size:13px; }
.activity-row small { margin-top:5px; color:var(--muted); font-size:12px; line-height:1.45; }
.admin { width:min(100%,980px); min-height:100vh; margin:auto; background:var(--paper); }
.admin-main { display:grid; grid-template-columns:1fr 320px; }
.admin-list { padding:25px; }
.admin-detail { padding:25px 21px; border-left:1px solid var(--line); background:#f5f8f4; }
.patient { display:flex; align-items:center; gap:12px; width:100%; padding:14px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:inherit; text-align:left; }
.avatar { display:grid; place-items:center; width:39px; height:39px; border-radius:50%; background:#e2eee4; color:#507461; font-size:12px; }
.patient-data { flex:1; }
.patient-data strong { display:block; font-size:14px; }
.patient-data small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.badge { padding:5px 8px; border-radius:99px; background:#e8f1e9; color:#466a56; font-size:11px; }
.badge.help { background:#f5e6dd; color:var(--danger); }
.detail-label { margin-top:18px; color:#718077; font-size:11px; letter-spacing:.06em; }
.detail-value { margin-top:5px; font-size:13px; line-height:1.45; }
.tabs { display:flex; gap:8px; margin:0 0 15px; }
.tabs button { border:0; border-radius:99px; padding:8px 12px; background:#e8eee9; color:inherit; font-size:13px; }
.tabs button.active { background:var(--green); color:#fff; }
@media (min-width:700px) { .app-shell { width:100%; max-width:none; } }
@media (max-width:640px) { .admin-main { grid-template-columns:1fr; } .admin-detail { border-left:0; border-top:1px solid var(--line); } }