:root {
  --ink: #17201d;
  --green-950: #102b25;
  --green-900: #17382f;
  --green-800: #214a3e;
  --green-100: #e7eee8;
  --gold: #a87c2d;
  --gold-soft: #d8bd7a;
  --star-deep: #091620;
  --star-mid: #112c39;
  --star-blue: #789aa2;
  --paper: #f4f0e6;
  --paper-deep: #e9e0cf;
  --white: #fffdf8;
  --muted: #6e746f;
  --line: rgba(23, 56, 47, .14);
  --shadow: 0 24px 70px rgba(28, 39, 34, .10);
  --serif: "Songti TC", "Noto Serif TC", "STSong", "SimSun", serif;
  --sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--sans); background: var(--paper); min-height: 100vh; }
button, select, textarea { font: inherit; }
button { color: inherit; }
.paper-noise { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .45; background-image: radial-gradient(rgba(70,52,27,.08) .55px, transparent .55px), radial-gradient(rgba(255,255,255,.8) .5px, transparent .5px); background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 3px; mix-blend-mode: multiply; }
.theme-ziwei:before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.23; background-image: radial-gradient(circle at 76% 13%, rgba(120,154,162,.16) 0 1px, transparent 1.4px), radial-gradient(circle at 82% 19%, rgba(168,124,45,.22) 0 1px, transparent 1.5px), radial-gradient(circle at 71% 25%, rgba(120,154,162,.18) 0 1px, transparent 1.5px); background-size: 180px 180px, 230px 230px, 310px 310px; }
.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; position: relative; z-index: 1; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 236px; padding: 34px 22px 24px; display: flex; flex-direction: column; color: rgba(255,255,255,.76); background: linear-gradient(180deg,var(--star-deep),#102a29 68%,var(--green-950)); overflow: hidden; z-index: 10; }
.sidebar:before { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(216,189,122,.14); border-radius: 50%; left: -255px; bottom: -40px; box-shadow: 0 0 0 50px rgba(216,189,122,.025), 0 0 0 100px rgba(216,189,122,.018); }
.sidebar-stars { position:absolute; inset:0; opacity:.45; background-image:radial-gradient(circle at 22% 14%,#d8bd7a 0 1px,transparent 1.4px),radial-gradient(circle at 73% 27%,#789aa2 0 1px,transparent 1.4px),radial-gradient(circle at 38% 51%,#d8bd7a 0 .8px,transparent 1.3px),radial-gradient(circle at 79% 69%,#789aa2 0 1px,transparent 1.4px); background-size:170px 190px,210px 230px,260px 240px,300px 310px; }
.brand { display: flex; align-items: center; gap: 11px; color: white; text-decoration: none; position: relative; }
.brand-mark { width: 42px; height: 42px; color: var(--gold-soft); display: grid; place-items: center; flex: 0 0 auto; }
.brand-mark svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.15; }
.brand b { display: block; font: 600 21px/1.2 var(--serif); letter-spacing: .16em; }
.brand small { display: block; font-size: 7px; letter-spacing: .16em; margin-top: 5px; color: rgba(255,255,255,.5); }
.side-nav { margin-top: 68px; display: grid; gap: 7px; }
.nav-item { width: 100%; border: 0; background: transparent; color: inherit; display: flex; align-items: center; gap: 15px; padding: 12px 14px; border-radius: 8px; cursor: pointer; text-align: left; transition: .25s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.05); }
.nav-item.active { color: white; background: rgba(216,189,122,.12); box-shadow: inset 2px 0 0 var(--gold-soft); }
.nav-icon { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: grid; place-items: center; font: 15px var(--serif); }
.nav-item.active .nav-icon { border-color: var(--gold-soft); color: var(--gold-soft); }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 14px; position: relative; }
.seal { width: 38px; height: 38px; background: #90462f; color: #f3ded0; display: grid; place-items: center; line-height: 13px; font: 12px var(--serif); border: 1px solid rgba(255,255,255,.28); }
.sidebar-foot p { margin: 0; font: 12px/1.7 var(--serif); letter-spacing: .1em; color: rgba(255,255,255,.48); }
.main-content { grid-column: 2; min-width: 0; padding-bottom: 70px; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 4.3vw; border-bottom: 1px solid var(--line); background: rgba(244,240,230,.82); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 8; }
.context-line { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.eyebrow, .overline { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--gold); }
.context-divider { width: 28px; height: 1px; background: var(--gold-soft); }
.context-divider.faint { width:12px; opacity:.45; }
.subject-context { color:var(--green-900); font:600 12px var(--serif); letter-spacing:.08em; }
.subject-context i { color:var(--gold); font-style:normal; margin-right:4px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.demo-switch { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.45); }
.demo-switch label { font-size: 10px; color: var(--muted); }
.demo-switch select { border: 0; outline: 0; color: var(--green-900); background: var(--green-100); border-radius: 999px; padding: 7px 28px 7px 12px; font-size: 11px; font-weight: 700; }
.icon-button, .avatar { border: 1px solid var(--line); background: rgba(255,255,255,.45); cursor: pointer; width: 38px; height: 38px; border-radius: 50%; position: relative; }
.notification-dot { position: absolute; right: 6px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: #b4573a; }
.avatar { background: var(--green-900); color: white; border-color: var(--green-900); font-family: var(--serif); }
.mobile-brand { display: none; font: 600 18px var(--serif); letter-spacing: .12em; }
.page { display: none; padding: 48px clamp(28px, 4.3vw, 72px); max-width: 1480px; margin: 0 auto; animation: reveal .35s ease both; }
.page.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.home-hero { min-height: 390px; padding: clamp(38px, 5vw, 74px); background: radial-gradient(circle at 84% 28%,rgba(120,154,162,.16),transparent 26%),linear-gradient(135deg,var(--star-deep),var(--star-mid) 56%,#17382f); color: white; position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; box-shadow: var(--shadow); }
.home-hero:before { content:""; position:absolute; inset:0; opacity:.56; background-image:radial-gradient(circle at 12% 18%,#d8bd7a 0 1px,transparent 1.6px),radial-gradient(circle at 28% 73%,#789aa2 0 1px,transparent 1.5px),radial-gradient(circle at 53% 12%,rgba(255,255,255,.8) 0 .8px,transparent 1.4px),radial-gradient(circle at 67% 61%,#d8bd7a 0 1px,transparent 1.4px); background-size:210px 190px,270px 260px,170px 220px,320px 280px; }
.home-hero:after { content: "紫微"; position: absolute; right: 4%; top: 8%; font: 116px var(--serif); letter-spacing: -.1em; color: rgba(255,255,255,.023); writing-mode: vertical-rl; }
.ink-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(216,189,122,.2); }
.orbit-one { width: 390px; height: 390px; right: -120px; top: -170px; box-shadow: 0 0 0 44px rgba(216,189,122,.035), 0 0 0 90px rgba(216,189,122,.018); }
.orbit-two { width: 110px; height: 110px; right: 31%; bottom: -66px; }
.celestial-disc { position:absolute; right:clamp(26px,6vw,95px); top:50%; width:clamp(230px,25vw,350px); aspect-ratio:1; transform:translateY(-50%); z-index:0; display:grid; place-items:center; border:1px solid rgba(216,189,122,.29); border-radius:50%; }
.celestial-disc:before,.celestial-disc:after { content:""; position:absolute; inset:-10%; border:1px solid rgba(120,154,162,.13); border-radius:50%; }.celestial-disc:after{inset:8%;border-color:rgba(216,189,122,.13)}
.disc-ring { position:absolute; border:1px solid rgba(216,189,122,.18); border-radius:50%; }.ring-a{inset:20%}.ring-b{width:1px;height:100%;border:0;border-left:1px solid rgba(216,189,122,.16);border-radius:0}.ring-c{width:100%;height:1px;border:0;border-top:1px solid rgba(216,189,122,.16);border-radius:0}
.celestial-disc i { position:absolute; left:var(--x);top:var(--y);width:var(--s);height:var(--s);background:var(--gold-soft);border-radius:50%;box-shadow:0 0 10px rgba(216,189,122,.8); }
.celestial-disc b { position:relative; z-index:2; font:500 28px var(--serif); letter-spacing:.18em; color:rgba(255,255,255,.78); margin-left:.18em; }
.celestial-disc small { position:absolute; bottom:24%; font-size:8px; letter-spacing:.16em; color:rgba(216,189,122,.6); }
.celestial-disc + .hero-copy { max-width:58%; }
.hero-copy { max-width: 680px; position: relative; z-index: 1; }
.hero-kicker { margin: 0 0 18px; font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .2em; }
.home-hero .hero-kicker { color: var(--gold-soft); }
h1, h2, h3, p { text-wrap: pretty; }
.hero-copy h1, .page-intro h1 { margin: 0; font: 500 clamp(34px, 4vw, 58px)/1.22 var(--serif); letter-spacing: .035em; }
.hero-copy h1 em, .page-intro h1 em { color: var(--gold-soft); font-style: normal; }
.hero-copy > p:not(.hero-kicker) { max-width: 590px; margin: 23px 0 0; color: rgba(255,255,255,.67); font-size: 15px; line-height: 1.85; }
.hero-actions { display: flex; gap: 10px; margin-top: 28px; }
.button { border: 0; min-height: 44px; padding: 0 22px; cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: .03em; transition: .25s ease; }
.button.primary { background: var(--gold-soft); color: var(--green-950); }
.button.primary:hover { background: #e3c989; transform: translateY(-1px); }
.button.ghost { color: white; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.25); }
.button.ghost:hover { background: rgba(255,255,255,.1); }
.button.secondary { background: var(--green-900); color: white; }
.button.full { width: 100%; }
.button.dark { color: var(--ink); border-color: rgba(23,32,29,.2); }
.hero-progress-wrap { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; min-width: 200px; padding: 18px 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(8px); }
.ring { --p: 30%; width: 64px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold-soft) var(--p), rgba(255,255,255,.12) 0); position: relative; font-size: 12px; font-weight: 700; }
.ring:after { content: ""; position: absolute; inset: 5px; background: var(--star-mid); border-radius: 50%; }
.ring span { z-index: 1; }
.hero-progress-wrap small, .hero-progress-wrap strong, .hero-progress-wrap p { display: block; }
.hero-progress-wrap small { color: rgba(255,255,255,.48); font-size: 10px; }
.hero-progress-wrap strong { font: 20px var(--serif); margin: 4px 0; }
.hero-progress-wrap p { margin: 0; font-size: 10px; color: var(--gold-soft); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin: 54px 0 20px; }
.section-heading > div { display: grid; grid-template-columns: 40px auto; align-items: end; column-gap: 8px; }
.section-index { grid-row: 1 / span 2; font: 28px var(--serif); color: rgba(168,124,45,.48); padding-bottom: 3px; }
.section-heading h2 { margin: 0; font: 500 27px var(--serif); letter-spacing: .05em; }
.section-heading p { grid-column: 2; margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.section-heading.compact { margin-top: 44px; }
.date-chip { padding: 8px 13px; color: var(--green-900); border: 1px solid var(--line); font-size: 10px; letter-spacing: .08em; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .72fr); gap: 20px; }
.feature-card { background: rgba(255,253,248,.7); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(28,39,34,.05); }
.lesson-card { display: grid; grid-template-columns: 43% 57%; min-height: 270px; }
.card-media { background: radial-gradient(circle at 64% 35%,rgba(120,154,162,.2),transparent 24%),linear-gradient(145deg,var(--star-deep),var(--star-mid)); position: relative; overflow: hidden; }
.card-media:before { content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(circle at 20% 25%,#d8bd7a 0 1px,transparent 1.4px),radial-gradient(circle at 72% 18%,#789aa2 0 1px,transparent 1.4px),radial-gradient(circle at 82% 74%,rgba(255,255,255,.8) 0 .8px,transparent 1.3px);background-size:130px 140px,180px 170px,220px 200px}
.card-media:after { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(216,189,122,.24); border-radius: 50%; box-shadow: 0 0 0 35px rgba(216,189,122,.035), 0 0 0 70px rgba(216,189,122,.025); }
.media-label { position: absolute; left: 18px; top: 18px; color: var(--gold-soft); font-size: 9px; letter-spacing: .15em; z-index: 2; }
.play-button { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); color: white; width: 58px; height: 58px; border-radius: 50%; cursor: pointer; z-index: 3; padding-left: 5px; }
.constellation i { position: absolute; width: 5px; height: 5px; background: var(--gold-soft); border-radius: 50%; z-index: 2; box-shadow: 0 0 8px rgba(216,189,122,.8); }
.constellation i:nth-child(1){left:30%;top:32%}.constellation i:nth-child(2){left:57%;top:22%}.constellation i:nth-child(3){left:72%;top:51%}.constellation i:nth-child(4){left:48%;top:68%}.constellation i:nth-child(5){left:24%;top:60%}
.card-content { padding: 30px; display: flex; flex-direction: column; }
.meta { display: flex; gap: 12px; color: var(--gold); font-size: 10px; letter-spacing: .08em; }
.meta span + span:before { content: "·"; margin-right: 12px; color: var(--muted); }
.card-content h3 { margin: 16px 0 10px; font: 500 23px/1.4 var(--serif); }
.card-content p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.75; }
.progress-line { margin-top: auto; height: 2px; background: var(--paper-deep); }
.progress-line i { display: block; height: 100%; background: var(--gold); }
.text-link { border: 0; background: none; padding: 13px 0 0; text-align: left; font-size: 11px; color: var(--green-900); font-weight: 700; cursor: pointer; }
.task-card { padding: 28px; }
.card-title-row { display: flex; justify-content: space-between; align-items: flex-start; }
.card-title-row h3 { margin: 7px 0 0; font: 500 24px var(--serif); }
.round-count { width: 42px; height: 42px; border: 1px solid var(--gold-soft); border-radius: 50%; display: grid; place-items: center; color: var(--gold); font-size: 11px; }
.task-list { margin-top: 20px; }
.task { display: flex; align-items: flex-start; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); cursor: pointer; }
.task input { display: none; }
.check { width: 17px; height: 17px; border: 1px solid rgba(23,56,47,.35); margin-top: 2px; flex: none; display: grid; place-items: center; }
.task input:checked + .check { background: var(--green-900); border-color: var(--green-900); }
.task input:checked + .check:after { content: "✓"; color: white; font-size: 10px; }
.task b, .task small { display: block; }
.task b { font-size: 12px; margin-bottom: 5px; }
.task small { color: var(--muted); font-size: 10px; }
.task.done b { text-decoration: line-through; color: var(--muted); }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.insight-card { min-height: 230px; text-align: left; padding: 28px; border: 1px solid var(--line); background: rgba(255,253,248,.58); cursor: pointer; position: relative; overflow: hidden; transition: .28s ease; }
.insight-card:hover { transform: translateY(-3px); border-color: rgba(168,124,45,.5); box-shadow: var(--shadow); }
.ink-number { position: absolute; right: 18px; top: 7px; font: 62px var(--serif); color: rgba(168,124,45,.1); }
.insight-card small { font-size: 9px; color: var(--gold); letter-spacing: .15em; }
.insight-card h3 { max-width: 260px; margin: 24px 0 12px; font: 500 19px/1.45 var(--serif); }
.insight-card p { min-height: 53px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.insight-card b { display: block; margin-top: 21px; color: var(--green-900); font-size: 10px; }
.page-intro { padding: 30px 0 44px; border-bottom: 1px solid var(--line); }
.page-intro h1 { color: var(--green-950); }
.page-intro h1 em { color: var(--gold); }
.page-intro > p:last-child, .inline-intro > div > p:last-child { max-width: 700px; color: var(--muted); line-height: 1.8; }
.academy-programs { display:grid; grid-template-columns:160px repeat(3,1fr); gap:1px; margin-top:30px; border:1px solid var(--line); background:var(--line); }
.program-label,.program { background:rgba(255,253,248,.68); min-height:94px; padding:17px; }
.program-label { display:flex;flex-direction:column;justify-content:center; }.program-label span{font-size:9px;color:var(--gold);letter-spacing:.16em}.program-label b{font:500 18px var(--serif);margin-top:5px}
.program { border:0;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;text-align:left;position:relative; }
.program.active { background:linear-gradient(135deg,var(--star-deep),var(--star-mid));color:white; }
.program-symbol { width:34px;height:34px;border:1px solid rgba(216,189,122,.48);border-radius:50%;display:grid;place-items:center;color:var(--gold-soft);font:14px var(--serif); }
.compass-symbol { border-radius:2px;color:#9b6d34 }.face-symbol{color:#8c4435}
.program b,.program small { display:block; }.program b{font:500 15px var(--serif)}.program small{font-size:8px;color:var(--muted);margin-top:5px}.program.active small{color:rgba(255,255,255,.5)}.program em{font-size:8px;font-style:normal;color:var(--gold)}.program.future{opacity:.68}
.inline-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.inline-intro h1 { font-size: clamp(38px,4vw,54px); }
.course-tabs { display: flex; gap: 28px; margin-top: 30px; border-bottom: 1px solid var(--line); }
.course-tabs button { border: 0; background: none; padding: 0 0 13px; color: var(--muted); cursor: pointer; font-size: 13px; position: relative; }
.course-tabs button.active { color: var(--green-900); font-weight: 700; }
.course-tabs button.active:after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--gold); }
.learning-route { margin-top: 28px; background: rgba(255,253,248,.62); border: 1px solid var(--line); padding: 32px; }
.route-head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.route-head h2 { font: 500 26px var(--serif); margin: 8px 0 0; }
.route-progress { text-align: right; }
.route-progress b { display: block; font: 24px var(--serif); color: var(--gold); }
.route-progress span { color: var(--muted); font-size: 10px; }
.day-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 24px; background: var(--line); border: 1px solid var(--line); }
.day-item { background: var(--white); border: 0; padding: 18px; text-align: left; min-height: 138px; cursor: pointer; position: relative; transition: .2s ease; }
.day-item:hover { background: #f7f3e9; }
.day-item.locked { color: #a4a6a2; cursor: default; }
.day-item.current { background: var(--green-900); color: white; }
.day-item .day-no { font-size: 9px; letter-spacing: .15em; color: var(--gold); }
.day-item.current .day-no { color: var(--gold-soft); }
.day-item b { display: block; margin-top: 20px; font: 500 17px var(--serif); }
.day-item small { display: block; margin-top: 7px; font-size: 9px; color: var(--muted); }
.day-item.current small { color: rgba(255,255,255,.55); }
.day-status { position: absolute; right: 12px; top: 12px; font-size: 10px; }
.stage-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.stage { background: rgba(255,253,248,.5); border: 1px solid var(--line); padding: 24px; min-height: 180px; }
.stage.active { border-color: rgba(168,124,45,.5); box-shadow: inset 0 3px 0 var(--gold); }
.stage span { color: var(--gold); font-size: 9px; letter-spacing: .12em; }
.stage b { display: block; font: 500 20px var(--serif); margin: 22px 0 10px; }
.stage p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.stage small { display: block; margin-top: 18px; font-size: 10px; color: var(--green-800); }
.conversion-panel { margin-top: 18px; padding: 28px 30px; background: var(--green-900); color: white; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.conversion-panel[hidden] { display: none; }
.conversion-panel h3 { margin: 7px 0; font: 500 22px var(--serif); }
.conversion-panel p { margin: 0; color: rgba(255,255,255,.58); font-size: 11px; }
.chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 26px 0 18px; }
.mode-switch { background: rgba(23,56,47,.07); padding: 4px; display: flex; }
.mode-switch button { border: 0; background: none; padding: 9px 16px; font-size: 10px; cursor: pointer; color: var(--muted); }
.mode-switch button.active { background: var(--green-900); color: white; }
.chart-person { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.chart-person span { color: var(--muted); }
.chart-person button { border: 0; background: none; }
.layer-chips { display: flex; gap: 6px; }
.layer-chips span { padding: 7px 10px; border: 1px solid var(--line); color: #aaa; font-size: 9px; }
.layer-chips span.active { border-color: rgba(168,124,45,.45); color: var(--gold); background: rgba(216,189,122,.08); }
.chart-layout { display: grid; grid-template-columns: minmax(620px,1.55fr) minmax(280px,.6fr); gap: 20px; }
.ziwei-board { aspect-ratio: 1.16; background: var(--paper-deep); border: 1px solid rgba(23,56,47,.28); display: grid; grid-template: repeat(4,1fr)/repeat(4,1fr); gap: 1px; overflow: hidden; box-shadow: var(--shadow); }
.palace { background: rgba(255,253,248,.9); border: 0; padding: 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; transition: .2s; min-width: 0; }
.palace:hover, .palace.active { background: #fff8e9; box-shadow: inset 0 0 0 2px var(--gold); }
.palace .branch { align-self: flex-end; color: var(--gold); font: 12px var(--serif); }
.palace b { font: 500 14px var(--serif); margin-top: auto; }
.palace strong { color: var(--green-900); font: 600 17px var(--serif); margin-top: 5px; }
.palace small { margin-top: 5px; color: var(--muted); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-center { grid-area: 2/2/4/4; background:radial-gradient(circle at center,rgba(120,154,162,.16),transparent 36%),linear-gradient(145deg,var(--star-deep),var(--star-mid)); color: white; position: relative; display: grid; place-items: center; text-align: center; overflow: hidden; }
.chart-center:before,.chart-center:after { content:""; position:absolute; border:1px solid rgba(216,189,122,.18); border-radius:50%; width:75%; aspect-ratio:1; }
.chart-center:after { width:48%; }
.chart-center div { position:relative; z-index:1; }
.chart-center span { font-size: 9px; color: var(--gold-soft); letter-spacing: .18em; }
.chart-center b { display:block; font: 500 28px var(--serif); margin:10px 0 6px; }
.chart-center small { color: rgba(255,255,255,.5); }
.observation-panel { background: rgba(255,253,248,.72); border: 1px solid var(--line); padding: 28px; }
.obs-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.obs-head h2 { font: 500 28px var(--serif); margin: 8px 0 5px; }
.obs-head p { margin: 0; color: var(--muted); font-size: 10px; }
.obs-section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.obs-section > small, .note-field > span { display:block; color: var(--gold); font-size: 9px; font-weight:700; letter-spacing:.12em; margin-bottom:12px; }
.obs-section ul { list-style:none; padding:0; margin:0; }
.obs-section li { display:flex; justify-content:space-between; font-size:11px; padding:5px 0; }
.obs-section li span { color:var(--muted); }
.obs-section ol { padding-left: 18px; margin: 0; }
.obs-section ol li { display:list-item; padding:5px 0; line-height:1.55; color:var(--muted); }
.note-field { display:block; padding-top:20px; }
textarea { width:100%; resize:vertical; border:1px solid var(--line); background:rgba(255,255,255,.62); min-height:92px; padding:12px; color:var(--ink); outline:none; line-height:1.65; }
textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(168,124,45,.08); }
.practice-stat { display:flex; align-items:center; gap:10px; }
.practice-stat b { font: 34px var(--serif); color:var(--gold); }
.practice-stat span { color:var(--muted); font-size:10px; }
.level-strip { display:grid; grid-template-columns:repeat(7,1fr); margin:26px 0 18px; border:1px solid var(--line); background:var(--line); gap:1px; }
.level { border:0; background:rgba(255,253,248,.75); padding:14px 10px; cursor:pointer; }
.level b,.level span { display:block; }
.level b { font: 500 14px var(--serif); }
.level span { font-size:8px; color:var(--muted); margin-top:5px; }
.level.active { background:var(--green-900); color:white; }
.level.active span { color:var(--gold-soft); }
.level.locked { opacity:.42; cursor:default; }
.practice-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:20px; }
.case-card { background:rgba(255,253,248,.75); border:1px solid var(--line); padding:clamp(28px,4vw,48px); }
.case-top { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; }
.tag { color:var(--gold); border:1px solid rgba(168,124,45,.3); padding:6px 9px; }
.case-card h2 { font:500 29px/1.4 var(--serif); margin:27px 0 14px; }
.case-lead { color:var(--muted); font-size:13px; line-height:1.85; }
.case-facts { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:25px 0; }
.case-facts div { background:var(--paper); padding:18px; }
.case-facts small,.case-facts b { display:block; }
.case-facts small { color:var(--muted); font-size:9px; }
.case-facts b { margin-top:8px; font:500 16px var(--serif); }
.answer-field { display:block; }
.answer-field > span { display:block; font-weight:700; font-size:11px; margin-bottom:9px; }
.answer-field textarea { min-height:150px; }
.answer-field small { display:block; color:var(--muted); font-size:9px; margin:7px 0 20px; }
.practice-side { display:grid; gap:16px; align-content:start; }
.side-module { border:1px solid var(--line); background:rgba(255,253,248,.62); padding:26px; }
.side-module h3 { font:500 20px var(--serif); margin:8px 0 20px; }
.side-module ol { padding-left:18px; margin:0; }
.side-module li { color:var(--muted); font-size:11px; line-height:1.65; margin:9px 0; }
.ability { display:grid; grid-template-columns:66px 1fr 42px; align-items:center; gap:8px; margin-top:14px; font-size:9px; }
.ability i { height:3px; background:var(--paper-deep); }
.ability i b { display:block; height:100%; background:var(--gold); }
.ability em { color:var(--muted); font-style:normal; text-align:right; }
.profile-hero { background:var(--green-900); color:white; padding:44px; display:flex; align-items:center; gap:22px; position:relative; overflow:hidden; }
.profile-hero:after { content:"學"; position:absolute; right:8%; font:150px var(--serif); color:rgba(255,255,255,.035); }
.profile-seal { width:74px; height:74px; border-radius:50%; border:1px solid var(--gold-soft); display:grid; place-items:center; font:28px var(--serif); color:var(--gold-soft); }
.profile-hero h1 { margin:5px 0; font:500 34px var(--serif); }
.profile-hero p { margin:0; color:rgba(255,255,255,.55); font-size:11px; }
.profile-hero .button { margin-left:auto; position:relative; z-index:1; }
.profile-stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--line); gap:1px; margin-top:18px; }
.profile-stats div { background:rgba(255,253,248,.72); padding:24px; text-align:center; }
.profile-stats b,.profile-stats span { display:block; }
.profile-stats b { font:500 28px var(--serif); color:var(--green-900); }
.profile-stats span { color:var(--muted); font-size:9px; margin-top:5px; }
.profile-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:20px; margin-top:22px; }
.section-heading.mini { margin:0 0 16px; }
.archive-list { border:1px solid var(--line); }
.archive-list button { width:100%; display:grid; grid-template-columns:38px 1fr 20px; gap:13px; align-items:center; border:0; border-bottom:1px solid var(--line); background:rgba(255,253,248,.62); padding:18px; text-align:left; cursor:pointer; }
.archive-list button:last-child { border-bottom:0; }
.archive-list button > span { width:34px; height:34px; border:1px solid rgba(168,124,45,.35); display:grid; place-items:center; color:var(--gold); font:13px var(--serif); }
.archive-list b,.archive-list small { display:block; }
.archive-list b { font-size:11px; }.archive-list small { color:var(--muted); font-size:9px; margin-top:4px; }.archive-list em { font-style:normal;color:var(--gold); }
.service-card { background:var(--green-900); color:white; padding:32px; }
.service-card h2 { font:500 24px var(--serif); margin:10px 0; }
.service-card p { color:rgba(255,255,255,.58); font-size:11px; line-height:1.75; margin-bottom:24px; }
.service-card button { width:100%; border:0; border-top:1px solid rgba(255,255,255,.13); background:none; color:white; display:flex; justify-content:space-between; padding:14px 0; cursor:pointer; text-align:left; font-size:11px; }
.service-card small { color:rgba(255,255,255,.38); font-size:9px; }
.bottom-nav { display:none; }
.lesson-modal { position:fixed; inset:0; z-index:50; display:none; }
.lesson-modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(11,24,20,.72); backdrop-filter:blur(6px); }
.lesson-sheet { position:absolute; right:0; top:0; bottom:0; width:min(720px,92vw); background:var(--paper); overflow:auto; animation:slideIn .35s ease; box-shadow:-30px 0 80px rgba(0,0,0,.22); }
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.modal-close { position:absolute; right:18px; top:16px; z-index:2; width:38px; height:38px; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.12); color:white; border-radius:50%; font-size:22px; cursor:pointer; }
.video-stage { height:360px; background:radial-gradient(circle at 68% 30%,rgba(216,189,122,.14),transparent 28%),linear-gradient(145deg,#102b25,#1c4237); position:relative; color:white; display:grid; place-items:center; }
.video-brand { position:absolute; left:24px; top:22px; display:flex; align-items:center; gap:8px; font:13px var(--serif); letter-spacing:.1em; }.brand-mark.small{width:26px;height:26px}
.video-play { width:68px;height:68px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:white;cursor:pointer;padding-left:5px; }
.video-time { position:absolute; right:22px;bottom:18px;font-size:9px;color:rgba(255,255,255,.6); }
.lesson-body { padding:38px 44px 50px; }
.lesson-body h2 { font:500 31px/1.35 var(--serif); margin:0 0 24px; }
.lesson-objective { padding:20px 0;border-block:1px solid var(--line); }
.lesson-objective small{color:var(--gold);font-size:9px;font-weight:700}.lesson-objective p{margin:8px 0 0;line-height:1.8;color:var(--muted);font-size:12px}
.timeline { display:grid; margin-top:18px; }
.timeline button { display:grid;grid-template-columns:55px 1fr;border:0;border-bottom:1px solid var(--line);background:none;padding:15px 0;text-align:left;cursor:pointer;color:var(--muted);font-size:11px; }
.timeline button b { color:var(--gold);font-size:9px; }.timeline button.active span{color:var(--ink);font-weight:700}
.lesson-footer{display:flex;gap:10px;margin-top:28px}.lesson-footer .button{flex:1}
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:var(--green-950); color:white; padding:12px 18px; font-size:11px; z-index:100; opacity:0; pointer-events:none; transition:.25s; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 92px minmax(0,1fr); }
  .sidebar { width:92px; padding-inline:16px; align-items:center; }
  .brand > span:last-child,.nav-item span:last-child,.sidebar-foot p { display:none; }
  .brand-mark { width:48px;height:48px; }.side-nav{width:100%}.nav-item{justify-content:center;padding-inline:0}.sidebar-foot{justify-content:center}
  .main-content{grid-column:2}.dashboard-grid,.practice-layout{grid-template-columns:1fr}.insight-grid{grid-template-columns:repeat(2,1fr)}.insight-card:last-child{grid-column:1/-1}
  .chart-layout{grid-template-columns:1fr}.ziwei-board{min-width:0}.observation-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}.obs-head,.note-field,.observation-panel>.button{grid-column:1/-1}
  .layer-chips{display:none}.day-list{grid-template-columns:repeat(5,1fr)}
}

@media (max-width: 720px) {
  .app-shell { display:block; }.sidebar{display:none}.main-content{padding-bottom:82px}.topbar{height:62px;padding:0 16px}.mobile-brand{display:block}.context-line{display:none}.demo-switch label{display:none}.demo-switch{padding-left:4px}.top-actions{gap:7px}.avatar,.icon-button{width:34px;height:34px}
  .page{padding:24px 16px}.home-hero{min-height:500px;padding:32px 24px;display:block}.celestial-disc{width:200px;right:-48px;top:75%;opacity:.7}.celestial-disc + .hero-copy{max-width:100%}.hero-copy h1{font-size:35px}.hero-copy>p:not(.hero-kicker){font-size:13px}.hero-progress-wrap{margin-top:30px;width:max-content;padding:12px 14px}.ring{width:52px}.hero-actions{flex-wrap:wrap}.button{padding-inline:17px}
  .section-heading{align-items:flex-start;margin-top:38px}.section-heading>div{grid-template-columns:32px auto}.section-heading h2{font-size:23px}.section-heading p{line-height:1.55}.date-chip{margin-left:8px;white-space:nowrap}.section-index{font-size:22px}
  .dashboard-grid,.insight-grid{grid-template-columns:1fr}.lesson-card{grid-template-columns:1fr}.card-media{min-height:190px}.card-content{min-height:245px}.insight-card:last-child{grid-column:auto}.insight-card{min-height:205px}
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;background:rgba(255,253,248,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line);z-index:20;padding:7px 4px max(7px,env(safe-area-inset-bottom))}.bottom-nav button{border:0;background:none;color:var(--muted);display:grid;gap:3px;place-items:center;font:14px var(--serif)}.bottom-nav small{font:9px var(--sans)}.bottom-nav button.active{color:var(--green-900)}.bottom-nav button.active span{color:var(--gold)}
  .page-intro{padding:12px 0 30px}.page-intro h1{font-size:35px}.inline-intro{display:block}.inline-intro .button,.practice-stat{margin-top:18px}
  .academy-programs{grid-template-columns:1fr}.program-label{min-height:64px}.program{min-height:82px}.learning-route{padding:18px}.route-head h2{font-size:20px}.day-list{grid-template-columns:1fr 1fr}.day-item{min-height:125px}.stage-grid{grid-template-columns:1fr 1fr}.stage{min-height:160px;padding:18px}.conversion-panel{display:block}.conversion-panel .button{margin-top:18px}
  .chart-toolbar{display:grid;grid-template-columns:1fr 1fr}.chart-person{justify-content:flex-end}.ziwei-board{aspect-ratio:1;}.palace{padding:5px}.palace b{font-size:10px}.palace strong{font-size:11px}.palace small{display:none}.palace .branch{font-size:9px}.chart-center b{font-size:19px}.chart-center small{font-size:8px}.observation-panel{display:block}.practice-layout{grid-template-columns:1fr}.level-strip{grid-template-columns:repeat(4,1fr);overflow:hidden}.case-card{padding:25px 20px}.case-card h2{font-size:24px}.case-facts{grid-template-columns:1fr}.profile-hero{padding:32px 22px;align-items:flex-start;flex-wrap:wrap}.profile-seal{width:58px;height:58px}.profile-hero h1{font-size:26px}.profile-hero .button{margin-left:0}.profile-stats{grid-template-columns:1fr 1fr}.profile-grid{grid-template-columns:1fr}
  .lesson-sheet{width:100vw}.video-stage{height:240px}.lesson-body{padding:28px 22px 40px}.lesson-body h2{font-size:25px}.lesson-footer{display:grid}
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }