:root{
  --ink:#292624;--muted:#817a73;--line:#e6e1da;--paper:#f5f3ef;--surface:#fff;
  --deep:#43534a;--deep-2:#34423b;--sage:#dce8df;--amber:#f2e1bd;--clay:#ead5cc;
  --taupe:#8d786a;--shadow:0 18px 50px rgba(58,48,41,.07);--soft-shadow:0 8px 24px rgba(58,48,41,.055)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.7}
a{color:inherit;text-decoration:none}
button,a,input,textarea{font:inherit}
button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 16px;color:var(--ink)}
button:hover{transform:translateY(-1px);box-shadow:var(--soft-shadow)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #73877b;outline-offset:3px}
[hidden]{display:none!important}

aside{width:238px;position:fixed;inset:0 auto 0 0;background:#fff;padding:30px 22px;overflow:auto;border-right:1px solid var(--line);z-index:5}
.brand{display:block;font-size:21px;line-height:1.3;font-weight:700;letter-spacing:-.3px;color:#35312e}
.brand span{display:block;font-size:10px;font-weight:500;letter-spacing:.4px;color:var(--muted);margin-top:8px}
.label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:27px}
nav button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 11px;margin:3px 0;color:#776f69;font-size:12px;border-radius:9px}
nav button:hover{transform:none;box-shadow:none;background:#f5f2ed}
nav button.active{background:#edf1ed;color:#35453d;font-weight:650}
nav small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:400;color:#99918a}
.aside-bottom{margin-top:24px;font-size:12px;padding-top:18px;border-top:1px solid var(--line)}
.aside-bottom progress{width:100%;height:7px;accent-color:var(--deep);margin-bottom:12px}
.aside-bottom button{width:100%;font-size:11px;background:#faf9f7}

main{margin-left:238px;padding:0 4vw 55px;max-width:1680px}
header{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted);letter-spacing:.4px}
.tag{border:1px solid var(--line);background:#fff;padding:5px 12px;border-radius:999px}
.sync-bar{position:sticky;top:0;z-index:12;margin-left:238px;background:rgba(245,243,239,.94);backdrop-filter:blur(12px);padding:7px 4vw;font-size:11px;color:#726a64;border-bottom:1px solid rgba(230,225,218,.8)}
#courseShell aside{top:0}

.dashboard{padding:28px 0 14px}
.dashboard-top{display:grid;grid-template-columns:minmax(310px,2.15fr) repeat(4,minmax(125px,1fr));gap:14px}
.welcome-card,.quick-card{min-height:164px;border:0;border-radius:20px;padding:23px;text-align:left;position:relative;overflow:hidden;box-shadow:var(--soft-shadow)}
.welcome-card{color:#fff;background:linear-gradient(135deg,var(--deep-2),#586b60)}
.welcome-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-60px;top:-80px;background:rgba(255,255,255,.08)}
.eyebrow{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#8c837c;font-weight:650}
.welcome-card .eyebrow{color:rgba(255,255,255,.67)}
.welcome-card h1{font-size:clamp(22px,2.2vw,33px);line-height:1.25;margin:12px 0 6px;letter-spacing:-1px}
.welcome-card p{font-size:13px;color:rgba(255,255,255,.72);margin:0 0 15px}
.dashboard-cta{position:relative;z-index:1;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;padding:8px 13px;font-size:11px}
.dashboard-cta:hover{background:rgba(255,255,255,.2);box-shadow:none}
.quick-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;transition:transform .18s ease,box-shadow .18s ease}
.quick-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(58,48,41,.09)}
.card-sage{background:var(--sage)}.card-amber{background:var(--amber)}.card-clay{background:var(--clay)}.card-mist{background:#dde5e7}
.quick-icon{position:absolute;top:22px;left:22px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.55);font-size:16px;color:#4f514c}
.quick-card strong{font-size:15px}.quick-card small{font-size:10px;color:#736d68;margin-top:4px}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:18px;margin:14px 0;padding:17px 20px;box-shadow:var(--soft-shadow)}
.stats-row>div{display:flex;align-items:center;gap:12px;padding:0 18px;border-right:1px solid var(--line)}
.stats-row>div:first-child{padding-left:0}.stats-row>div:last-child{border-right:0;padding-right:0}
.stat-icon{width:34px;height:34px;border-radius:11px;background:#f2f0ec;display:grid;place-items:center;font-size:11px;color:#6d655e;font-weight:700}
.stats-row p{margin:0;line-height:1.3}.stats-row strong{display:block;font-size:15px}.stats-row small{font-size:10px;color:var(--muted)}
.schedule-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px;box-shadow:var(--soft-shadow)}
.schedule-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:16px}
.schedule-head h2{font-size:19px;margin:3px 0 0}.schedule-head p{font-size:10px;color:var(--muted);margin:0;white-space:nowrap}
.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 5px 0 12px}.legend-dot.done{background:#8ba394}.legend-dot.current{background:#b88e68}
.schedule-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.schedule-days button{min-width:0;text-align:left;border:1px solid #ebe6df;background:#faf9f7;border-radius:11px;padding:10px 11px;box-shadow:none}
.schedule-days button:hover{transform:none;border-color:#cbc1b7;background:#fff}
.schedule-days button span{display:block;font-size:9px;color:#9a918a;letter-spacing:.6px}
.schedule-days button strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:550}
.schedule-days button.complete{background:#eef4ef;border-color:#d8e3da}.schedule-days button.complete span:after{content:"  ✓";color:#66806f}
.schedule-days button.active{background:#fff6eb;border-color:#d7bda3;box-shadow:inset 0 0 0 1px #d7bda3}

.hero{padding:30px 0 16px}.hero>.label{margin:0}.hero>h1{font-size:clamp(27px,3.2vw,43px);line-height:1.25;margin:8px 0 20px;letter-spacing:-1.2px}
.learning-flow{display:grid;grid-template-columns:1.7fr 24px 1fr;align-items:stretch;margin:0}
.flow-stage{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px 20px}
.stage-label{font-size:14px;margin:0 0 13px;color:#4a4541}
.connected-steps{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:5px 0}
.connected-steps li{position:relative;padding:2px 28px 2px 0}.connected-steps li+li{padding-left:6px}
.connected-steps li:not(:last-child):after{content:"→";position:absolute;right:8px;color:#aaa19a}
.connected-steps span{font-size:9px;color:#a09891;margin-right:4px}.connected-steps strong{font-size:11px;font-weight:600}
.stage-arrow{display:grid;place-items:center;color:#b0a8a1;transform:rotate(-90deg)}
.evening{background:#faf8f4}
.method{background:#fff;border:1px solid var(--line);border-radius:16px;margin:8px 0 26px;padding:20px 24px;box-shadow:var(--soft-shadow)}
.method>summary{font-size:16px;font-weight:650}.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:12px}
.method-grid article{padding:10px 0}.method-grid article:nth-child(n+3){border-top:1px solid var(--line)}
.method h3{font-size:13px;margin:0 0 6px}.method p{font-size:12px;color:#77706a;margin:5px 0 11px}
.flow{padding:10px 12px;background:#f7f5f1;border-left:3px solid #a99a8d;font-size:11px;line-height:1.8;border-radius:0 7px 7px 0}
.method-summary{border-top:1px solid var(--line);padding-top:15px;margin-top:8px;font-size:13px;color:#514940}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);position:sticky;top:31px;background:rgba(245,243,239,.94);backdrop-filter:blur(12px);z-index:4;padding-top:4px}
.tabs button{border:0;background:transparent;border-radius:0;padding:12px 0;color:var(--muted);box-shadow:none}
.tabs button:hover{transform:none}.tabs button.active{color:#35453d;border-bottom:2px solid var(--deep);font-weight:650}
.panel{background:#fff;padding:27px;margin-top:20px;border:1px solid var(--line);border-radius:17px;box-shadow:var(--soft-shadow)}
.section-head{display:flex;justify-content:space-between;gap:20px}.panel h2,.review h2{font-size:19px;margin:0 0 7px}.panel p,footer,.review p{color:var(--muted);font-size:12px}
.links{display:flex;flex-direction:column;font-size:11px;min-width:145px;gap:7px}.links a{text-decoration:underline;text-underline-offset:4px}
.guide{background:#f7f5f1;padding:13px 16px;margin:18px 0;font-size:12px;border-radius:10px}
#images{margin-top:24px}#images img{display:block;width:100%;max-width:850px;height:auto;margin:0 auto 18px;border:1px solid #f0ede9;border-radius:8px}
textarea{width:100%;padding:13px;border:1px solid var(--line);border-radius:10px;font:inherit;resize:vertical;margin:7px 0 17px;background:#fdfcfb}
input[type=file]{display:block;max-width:100%;margin:14px 0}
.primary{background:var(--deep);color:#fff;border:0;margin-top:14px}.primary:hover{background:var(--deep-2);color:#fff}
.reflection-grid{display:grid;grid-template-columns:1fr 1fr;gap:27px}.reflection-grid h3{font-size:14px}
.confidence{background:#f7f5f1;padding:18px;border-radius:12px;margin:22px 0}.confidence output{font-size:23px;margin-left:14px}.confidence input{width:100%;margin-top:16px;accent-color:var(--deep)}
.example-intro{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.example-intro h2{margin-top:4px}.example-intro p{max-width:720px}.example-day{white-space:nowrap;border:1px solid var(--line);background:#f7f5f1;border-radius:999px;padding:6px 12px;font-size:10px;color:var(--muted)}
.example-note{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:#f4f6f3;border:1px solid #e1e7e2;border-radius:12px;padding:13px 15px;margin:18px 0}.example-note strong{font-size:12px;margin-right:3px}.example-note span{font-size:10px;background:#fff;border:1px solid #e1e5e1;border-radius:999px;padding:4px 9px;color:#6d746f}
.example-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.example-card{border:1px solid var(--line);background:#faf9f7;border-radius:14px;padding:10px}.example-card>span{display:block;font-size:10px;color:var(--muted);padding:1px 3px 7px}.example-card img{width:100%;display:block;border-radius:8px;background:#fff}.example-card a{display:block}
.upload-hint{margin:8px 0 14px;padding:10px 12px;border-left:3px solid var(--accent);background:#f7f5f1;color:var(--muted);font-size:12px;line-height:1.7}
#attachments{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px}#attachments img{max-height:160px;max-width:100%;display:block;border-radius:8px}
.completion{border-top:1px solid var(--line);margin-top:25px;padding-top:18px}
.review{padding:27px 0}.review button{margin:4px;white-space:normal;text-align:left;max-width:100%;overflow-wrap:anywhere;background:#fff}
.audio-section{border-top:1px solid var(--line);padding-top:25px;margin-top:28px}.audio-card{border:1px solid var(--line);border-radius:12px;padding:15px;margin:12px 0;background:#faf9f7}.audio-card h3{font-size:13px;margin:0 0 10px}.audio-card audio{width:100%;accent-color:var(--deep)}
.storage-note{color:#887f77}.question{border-bottom:1px solid var(--line);padding:17px 0}.question textarea{min-height:90px}.question details{font-size:12px;background:#f7f5f1;padding:12px}.question h3{font-size:14px}.error{color:#a13e30!important}
footer{border-top:1px solid var(--line);padding-top:18px}

.account-panel{max-width:680px;margin:5vh auto;padding:34px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.account-panel h1{font-size:26px;letter-spacing:-.6px}.account-panel h2{font-size:20px}
.account-panel input{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;margin:7px 0 16px;background:#fdfcfb}
.account-panel button{margin:5px 4px 5px 0}.account-panel label{font-size:12px}.account-panel:has(+ #courseShell:not([hidden])){margin-left:calc(238px + 4vw);max-width:none;margin-right:4vw;padding:14px 18px;border-radius:13px;box-shadow:none}.account-panel:has(+ #courseShell:not([hidden])) .brand{font-size:14px}
#issuedCodes{min-height:150px}.account-state{padding:13px 15px;border-left:3px solid #8a9b90;background:#f1f4f1;line-height:1.8;font-size:12px;margin:17px 0}.account-journey{display:flex;list-style:none;padding:0;gap:15px;flex-wrap:wrap;color:#aaa;font-size:11px;counter-reset:account}.account-journey li:before{counter-increment:account;content:counter(account) '. '}.account-journey .done{color:#526158}.account-journey li:not(:last-child):after{content:' →';padding-left:10px;color:#bbb}#authHelp,#authMessage{font-size:12px;color:var(--muted)}

@media(max-width:1180px){
  .dashboard-top{grid-template-columns:repeat(4,1fr)}.welcome-card{grid-column:1/-1}
  .welcome-card,.quick-card{min-height:150px;padding:19px}
  .learning-flow{grid-template-columns:1fr}.stage-arrow{transform:none;height:24px}.method-grid{grid-template-columns:1fr}.method-grid article+article{border-top:1px solid var(--line)}
}
@media(max-width:820px){
  aside{position:static;width:auto;padding:19px 18px;border-right:0;border-bottom:1px solid var(--line)}
  nav{display:flex;overflow:auto;gap:5px;padding-bottom:4px}nav button{min-width:105px;max-width:125px}.aside-bottom{display:flex;gap:12px;align-items:center;padding-top:12px}.aside-bottom progress{width:70px;margin:0}.aside-bottom button{width:auto;margin-left:auto}
  main{margin:0;padding:0 16px 35px}.sync-bar{margin-left:0}.account-panel:has(+ #courseShell:not([hidden])){margin:14px 16px;padding:13px 16px}
  .dashboard-top{grid-template-columns:repeat(2,1fr)}.welcome-card{grid-column:1/-1;min-height:158px}.quick-card{min-height:130px}
  .stats-row{grid-template-columns:1fr 1fr;gap:15px;padding:17px}.stats-row>div,.stats-row>div:first-child,.stats-row>div:last-child{padding:0;border:0}
  .schedule-days{grid-template-columns:repeat(3,minmax(0,1fr))}.reflection-grid{grid-template-columns:1fr}.section-head,.example-intro{display:block}.example-day{display:inline-block;margin-top:6px}.links{flex-direction:row;flex-wrap:wrap;margin:11px 0}.tabs{top:30px}
}
@media(max-width:520px){
  header{padding:16px 0}.dashboard{padding-top:18px}.dashboard-top{grid-template-columns:1fr}.welcome-card,.quick-card{grid-column:auto}.quick-card{min-height:94px;padding:18px 18px 18px 72px;justify-content:center}.quick-icon{left:18px;top:50%;transform:translateY(-50%)}.quick-card strong{font-size:14px}
  .stats-row{margin:11px 0}.stat-icon{width:30px;height:30px}.schedule-card{padding:18px}.schedule-head{align-items:flex-start}.schedule-head p{display:none}.schedule-days{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding-top:25px}.hero>h1{font-size:30px}.flow-stage{padding:15px}.connected-steps{display:block}.connected-steps li,.connected-steps li+li{padding:3px 0}.connected-steps li:not(:last-child):after{content:''}.connected-steps span{display:inline-block;width:50px}
  .method,.panel{padding:18px}.tabs{gap:20px;overflow:auto}.tabs button{white-space:nowrap}.example-gallery{grid-template-columns:1fr}.account-panel{margin:14px;padding:24px 20px;border-radius:17px}.account-journey{gap:7px}.account-journey li:not(:last-child):after{padding-left:5px}
}