:root {
  --ink:#233b32;
  --muted:#8b948f;
  --green:#315d4c;
  --green-light:#edf3ed;
  --bg:#f5f7f5;
  --line:#e8ece7;
  --orange:#cf8d47;
  --shadow:0 4px 18px #233b3204;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  font-size:14px;
  font-synthesis:none
}
.learning-panel { margin-bottom:24px; }
.weekly-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:22px; }
.weekly-stat { min-width:0; }
.weekly-stat strong { display:block; margin:18px 0 10px; font-size:32px; font-weight:500; }
.weekly-stat strong small { font-size:12px; font-weight:400; margin-left:6px; }
.weekly-stat p { margin:0; line-height:1.8; }
.weekly-section { margin-bottom:22px; }
.weekly-section > .caption { line-height:1.9; }
.weekly-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; padding:18px 0; }
.weekly-day { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; font-size:13px; }
.weekly-day b { font-weight:500; }
.weekly-day small { color:var(--muted); font-size:11px; text-align:center; }
.weekly-bar-track { height:110px; width:100%; max-width:38px; display:flex; align-items:flex-end; background:var(--green-light); border-radius:6px; overflow:hidden; }
.weekly-bar-track i { display:block; width:100%; background:#789980; border-radius:6px; }
.weekly-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:18px 0; }
.weekly-detail-grid > div { display:flex; flex-direction:column; gap:12px; line-height:1.8; }
.weekly-detail-grid b { font-size:25px; font-weight:500; }
.weekly-detail-grid small { color:var(--muted); }
.weekly-mode-tabs { margin:18px 0; }
.weekly-step { display:flex; align-items:center; gap:16px; padding:20px 0; border-top:1px solid var(--line); }
.weekly-step .task-text { flex:1; min-width:0; }
.weekly-step .task-text small { line-height:1.9; }
.weekly-method summary { cursor:pointer; }
.weekly-method p { color:var(--muted); line-height:1.9; }
@media(max-width:1050px) {
 .weekly-summary, .weekly-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .weekly-step { flex-wrap:wrap; }
 .weekly-step .task-text { flex-basis:calc(100% - 65px); }
 .weekly-step > button { margin-left:55px; }
 .weekly-chart { gap:6px; }
 .weekly-detail-grid { gap:16px; }
 .weekly-stat strong { font-size:26px; }
}
.learning-panel .section-head { align-items:flex-start; flex-wrap:wrap; gap:16px; }
.learning-panel .caption, .learning-method .caption { line-height:1.8; }
.learning-budget { flex-shrink:0; }
.learning-task { display:flex; align-items:center; gap:14px; padding:18px 0; border-top:1px solid var(--line); }
.learning-task-state { display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0; border-radius:12px; color:var(--green); background:var(--green-light); }
.learning-task .task-text { flex:1; min-width:0; }
.learning-task .task-text b { font-weight:500; }
.learning-task.is-complete .task-text { color:var(--muted); }
.learning-panel-foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:16px; border-top:1px solid var(--line); }
.learning-method { margin-bottom:20px; }
.diagnosis-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.diagnosis-card { display:flex; flex-direction:column; min-width:0; }
.diagnosis-card h3 { font-size:18px; font-weight:500; line-height:1.6; margin:16px 0 8px; overflow-wrap:anywhere; }
.diagnosis-card p { line-height:1.8; margin:6px 0; }
.diagnosis-card .row-actions { margin-top:auto; padding-top:20px; flex-wrap:wrap; }
.knowledge-link { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 0; border-top:1px solid var(--line); }
@media(max-width:700px) {
 .diagnosis-grid { grid-template-columns:1fr; }
 .learning-task { flex-wrap:wrap; gap:10px; }
 .learning-task .task-text { flex-basis:calc(100% - 50px); }
 .learning-task > button { margin-left:48px; }
 .learning-budget { max-width:100%; }
}
.account-overview { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:24px 0; }
.account-overview.compact { margin:0 0 30px; }
.account-card { display:flex; align-items:center; gap:20px; padding:25px 28px; border:1px solid #dfe8e4; border-radius:16px; background:#eef3f0; min-width:0; }
.account-card:hover { border-color:#9aafa2; }
.account-card > div { flex:1; min-width:0; }
.account-card h3 { margin:8px 0; font-size:24px; font-weight:600; }
.account-card h3 small { font-size:13px; font-weight:400; }
.account-card p { margin:0; color:#76867e; font-size:12px; line-height:1.8; }
.account-card .eyebrow { font-size:10px; letter-spacing:2px; }
.account-symbol { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:#fff9; color:var(--green); flex-shrink:0; }
.account-symbol svg { width:28px; height:28px; }
.points-card { background:#f6f1e8; border-color:#ebe3d6; }
.points-card .account-symbol { color:#ad844c; }
.top-points { display:flex; align-items:center; gap:7px; font-size:12px; white-space:nowrap; color:var(--green); }
.account-toolbar { justify-content:space-between; }
.account-section { margin-bottom:22px; }
.account-tabs { margin-bottom:22px; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.product-card { display:flex; flex-direction:column; align-items:flex-start; padding:24px; border:1px solid var(--line); border-radius:12px; background:#fafcf9; }
.product-card h3 { font-size:18px; font-weight:500; margin:18px 0; }
.product-price { font-size:34px; font-weight:600; letter-spacing:-1px; }
.product-price small { font-size:18px; margin-right:4px; }
.product-card p { font-size:13px; line-height:1.8; }
.product-card > small { color:#7f8b83; font-size:12px; line-height:1.8; margin-bottom:24px; }
.product-card > button { width:100%; margin-top:auto; justify-content:center; line-height:1.8; }
.purchase-note { margin:18px 0 0; line-height:1.9; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.benefit-item { display:flex; flex-direction:column; gap:14px; padding:20px; border-radius:10px; background:#f5f7f4; }
.benefit-item b { font-weight:500; }
.benefit-item strong { font-size:22px; font-weight:500; }
.benefit-item strong small { font-size:12px; font-weight:400; }
.benefit-item > span { color:#859088; font-size:11px; line-height:1.9; }
.earn-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.earn-card { display:flex; flex-direction:column; align-items:flex-start; }
.earn-card h3 { font-size:15px; font-weight:500; margin:12px 0; }
.earn-card p { color:#859088; font-size:12px; line-height:1.9; margin:0 0 18px; }
.earn-card button { margin-top:auto; }
.redeem-form { display:flex; align-items:center; gap:16px; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.redeem-form input { min-width:0; flex:1; max-width:400px; border:1px solid #dbe3da; border-radius:8px; padding:12px 14px; background:#fff; color:var(--ink); }
.ledger-wrap { overflow-x:auto; }
.ledger-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; white-space:nowrap; }
.ledger-table th { color:#859088; font-size:12px; font-weight:400; }
.ledger-table th,.ledger-table td { padding:16px 14px; border-bottom:1px solid var(--line); }
.ledger-table td.points-income { color:#448060; }
.ledger-more { margin-top:20px; }
.mini-purchase { text-align:center; padding:8px 0 20px; }
.mini-purchase img { display:block; margin:0 auto 16px; max-width:100%; height:auto; border-radius:12px; }
.mini-purchase p { line-height:2; }
.mini-purchase button { margin:20px auto 0; }
.native-result { text-align:center; padding:4px 0 8px; }
.native-result h3 { font-size:19px; font-weight:500; margin:10px 0; }
.native-result p { line-height:1.8; margin:8px 0; }
.native-result > svg { width:42px; height:42px; color:var(--green); margin-top:18px; }
.native-result .toolbar { justify-content:center; margin:16px 0; }
.native-amount { font-size:32px; font-weight:600; margin:10px 0; }
.native-qr { display:block; width:210px; max-width:100%; height:auto; margin:10px auto; background:white; border:1px solid var(--line); border-radius:10px; }
@media(max-width:1100px) { .account-card { padding:20px; gap:12px; } .account-symbol { width:40px; height:40px; } .product-card { padding:18px; } }
@media(max-width:700px) { .account-overview { grid-template-columns:1fr; gap:12px; } .account-card h3 { font-size:21px; } .product-grid,.benefit-grid,.earn-grid { grid-template-columns:1fr; } .product-card { padding:22px; } .redeem-form { flex-wrap:wrap; gap:10px; } .redeem-form label { width:100%; } .redeem-form input { width:50%; } .top-points { display:none; } .earn-grid { gap:12px; } .account-toolbar { align-items:flex-start; } }
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg)
}
button,input,textarea,select {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button {
  border:0;
  background:none;
  color:inherit
}
button:disabled {
  cursor:not-allowed;
  opacity:.45
}
a {
  color:inherit;
  text-decoration:none
}
button,a,input,select,textarea,summary {
  outline-offset:4px
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid #6e9e77
}
svg {
  width:20px;
  height:20px;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round
}
.sidebar {
  width:224px;
  position:fixed;
  inset:0 auto 0 0;
  background:#fff;
  border-right:1px solid var(--line);
  padding:31px 18px 18px;
  display:flex;
  flex-direction:column;
  z-index:20;
  overflow:auto
}
.brand {
  display:flex;
  gap:11px;
  align-items:center;
  padding:0 14px 31px
}
.brand img {
  width:36px;
  height:36px
}
.brand strong {
  font-size:19px;
  letter-spacing:1px
}
.brand small {
  display:block;
  color:#9aa29c;
  font-size:10px;
  letter-spacing:2.4px;
  margin-top:4px
}
.nav-caption {
  font-size:10px;
  color:#acb3ae;
  padding:15px 17px 10px;
  letter-spacing:1.5px
}
.nav-item {
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 17px;
  margin:4px 0;
  border-radius:7px;
  color:#7d8981;
  position:relative;
  font-size:13px
}
.nav-item.active {
  background:#edf3ed;
  color:#315d4c;
  font-weight:600
}
.nav-item.active:after {
  content:'';
  position:absolute;
  left:0;
  height:16px;
  width:3px;
  background:#54795c;
  border-radius:4px
}
.nav-item:hover {
  background:#f5f7f3
}
.nav-item svg {
  width:18px
}
.nav-count {
  margin-left:auto;
  font-size:10px;
  color:#839589
}
.sidebar-bottom {
  margin-top:auto
}
.sidebar-note {
  padding:17px 15px;
  background:#f8f8f1;
  border:1px solid #eceee2;
  border-radius:9px;
  margin:20px 3px 12px
}
.sidebar-note b {
  display:block;
  font-size:12px;
  margin-bottom:8px
}
.sidebar-note p {
  font-size:11px;
  line-height:1.8;
  margin:0;
  color:#8b937e
}
.sidebar-foot {
  display:flex;
  align-items:center;
  gap:8px;
  color:#9ca69e;
  font-size:11px;
  padding:12px
}
.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  display:inline-block;
  background:#a9b49f
}
.status-dot.online {
  background:#5b9368
}
.layout {
  margin-left:224px
}
.topbar {
  height:78px;
  padding:0 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border-bottom:1px solid var(--line)
}
.breadcrumbs {
  font-size:12px;
  display:flex;
  gap:12px;
  align-items:center;
  color:#a1a8a2
}
.breadcrumbs b {
  color:#495b4e;
  font-weight:500
}
.top-actions {
  display:flex;
  gap:16px;
  align-items:center
}
.focus-button {
  display:flex;
  gap:9px;
  align-items:center;
  color:#687c6c;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px
}
.focus-button svg {
  width:15px
}
.divider {
  height:18px;
  width:1px;
  background:var(--line)
}
.account {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px
}
.avatar {
  width:29px;
  height:29px;
  border:1px solid #dfe7dc;
  border-radius:50%;
  background:#eef3eb;
  display:grid;
  place-items:center;
  color:#65795c;
  font-size:11px
}
.main {
  padding:30px 38px 40px;
  max-width:1640px;
  margin:auto
}
.page-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin:0 0 24px
}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  color:#9aa390;
  margin-bottom:9px
}
.page-heading h1 {
  font-size:25px;
  letter-spacing:1px;
  font-weight:600;
  margin:0 0 8px
}
.page-heading p {
  font-size:12px;
  color:#9ba399;
  margin:0
}
.date-label {
  font-size:11px;
  color:#929d92;
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:5px
}
.hero {
  background:#e9efdf;
  border:1px solid #e0e8d5;
  border-radius:12px;
  position:relative;
  overflow:hidden;
  min-height:214px;
  padding:30px 34px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.hero:before {
  content:'';
  position:absolute;
  width:370px;
  height:370px;
  border:1px solid #d7e1c9;
  border-radius:50%;
  right:6%;
  top:-140px
}
.hero:after {
  content:'';
  position:absolute;
  width:240px;
  height:240px;
  border:1px solid #d7e1c9;
  border-radius:50%;
  right:13%;
  bottom:-150px
}
.hero-copy {
  position:relative;
  z-index:1
}
.hero-tag {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:#778463;
  letter-spacing:1px
}
.hero-tag i {
  width:5px;
  height:5px;
  background:#7f9360;
  border-radius:50%
}
.hero h2 {
  font-size:27px;
  font-weight:600;
  margin:13px 0 10px;
  letter-spacing:1px
}
.hero-sub {
  color:#899278;
  font-size:12px;
  margin:0
}
.hero-buttons {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:22px
}
.primary,.secondary,.ghost,.danger {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:6px;
  padding:10px 17px;
  font-size:12px;
  font-weight:500
}
.primary {
  background:#315c48;
  color:#fff;
  border:1px solid #315c48
}
.primary:hover {
  background:#254b3a
}
.secondary {
  background:white;
  border:1px solid #dbe3d5;
  color:#5a6e4c
}
.ghost {
  border:1px solid var(--line);
  background:white;
  color:#68766b
}
.danger {
  background:#fff0ee;
  color:#b55348
}
.primary svg,.secondary svg,.ghost svg {
  width:15px;
  height:15px
}
.hero-right {
  display:flex;
  gap:36px;
  align-items:center;
  z-index:1
}
.countdown {
  border-left:1px solid #d3ddc5;
  padding:0 28px;
  text-align:center;
  min-width:180px
}
.countdown strong {
  display:block;
  font-size:43px;
  letter-spacing:2px;
  font-weight:500;
  line-height:1.4;
  color:#50623f
}
.countdown small {
  font-size:10px;
  color:#95a183
}
.countdown span {
  font-size:10px;
  display:block;
  color:#96a186;
  margin-top:8px
}
.book-art {
  width:115px;
  height:125px;
  margin-right:30px;
  position:relative;
  transform:rotate(-9deg)
}
.book-art:before {
  content:'';
  position:absolute;
  inset:8px 0 0;
  background:#708562;
  border-radius:5px 12px 12px 5px;
  box-shadow:4px 5px 0 #becba9,8px 10px 0 #dbe4cd;
  border-left:9px solid #556b48
}
.book-art:after {
  content:'STEP BY STEP';
  position:absolute;
  top:43px;
  left:24px;
  font-size:10px;
  letter-spacing:2px;
  width:55px;
  line-height:2;
  color:#eaf0df;
  border-top:1px solid #9aaa87;
  padding-top:8px
}
.book-star {
  position:absolute;
  right:-20px;
  top:-8px;
  font-size:30px;
  color:#a1b17d;
  transform:rotate(15deg)
}
.section-label {
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px
}
.section-label svg {
  width:17px;
  height:17px;
  color:#829279
}
.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px
}
.text-link {
  font-size:11px;
  color:#8b9785;
  display:inline-flex;
  align-items:center;
  gap:5px
}
.text-link svg {
  width:13px
}
.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:white;
  border:1px solid var(--line);
  border-radius:10px;
  margin:20px 0 25px;
  padding:23px 10px
}
.stat {
  padding:0 25px;
  border-right:1px solid #edf0e9;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center
}
.stat:last-child {
  border:0
}
.stat label {
  font-size:11px;
  color:#8e9a8e;
  display:block;
  margin-bottom:10px
}
.stat strong {
  font-size:27px;
  font-weight:500;
  color:#405c47;
  letter-spacing:.5px
}
.stat small {
  font-size:10px;
  color:#9da698;
  margin-left:7px
}
.stat-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:#f2f6ee;
  color:#94a487
}
.stat:nth-child(2) .stat-icon {
  background:#fbf5e9;
  color:#c4a46d
}
.stat:nth-child(3) .stat-icon {
  background:#eef2f8;
  color:#99a8bd
}
.stat:nth-child(4) .stat-icon {
  background:#f5f0f7;
  color:#b0a0b9
}
.quick-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  margin-bottom:26px
}
.quick-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  padding:19px 12px 17px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transition:transform .18s,box-shadow .18s
}
.quick-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 20px #304e4010
}
.quick-icon {
  width:37px;
  height:37px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#edf4eb;
  color:#829b73
}
.quick-card:nth-child(2) .quick-icon {
  background:#f8f1e6;
  color:#c6a576
}
.quick-card:nth-child(3) .quick-icon {
  background:#eff3f9;
  color:#9eaec7
}
.quick-card:nth-child(4) .quick-icon {
  background:#f6eff6;
  color:#b79fbd
}
.quick-card:nth-child(5) .quick-icon {
  background:#eff5f1;
  color:#8baa98
}
.quick-card:nth-child(6) .quick-icon {
  background:#faf1e9;
  color:#c8a388
}
.quick-card b {
  font-size:12px;
  font-weight:500
}
.quick-card small {
  font-size:10px;
  color:#a5ada2;
  margin-top:-5px
}
.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);
  gap:20px
}
.panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px 24px;
  min-width:0;
  box-shadow:var(--shadow)
}
.task-row {
  display:flex;
  gap:12px;
  align-items:center;
  padding:13px 0;
  border-top:1px solid #f1f3ee
}
.task-check {
  height:18px;
  width:18px;
  border:1px solid #dce4d6;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0;
  padding:0;
  color:white;
  font-size:11px
}
.task-check.done {
  background:#7b9671;
  border-color:#7b9671
}
.task-text {
  flex:1;
  min-width:0;
  font-size:12px;
  line-height:1.7
}
.task-text.done {
  text-decoration:line-through;
  color:#a7b0a3
}
.task-text small {
  display:block;
  color:#a5aea0;
  font-size:10px
}
.pill {
  border:1px solid #e4e9dc;
  border-radius:4px;
  padding:3px 7px;
  color:#8b9b7a;
  font-size:9px;
  white-space:nowrap
}
.pill.orange {
  background:#fcf6ec;
  border-color:#f2e4ce;
  color:#be9b67
}
.mini-progress {
  height:4px;
  border-radius:8px;
  background:#f0f3ec;
  overflow:hidden;
  margin:13px 0 8px
}
.mini-progress i {
  display:block;
  background:#9aaf82;
  height:100%;
  border-radius:8px
}
.caption {
  font-size:10px;
  color:#a1aa9a
}
.calendar-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px
}
.calendar-month {
  font-size:11px;
  color:#7e8d76
}
.calendar-head button {
  padding:1px 6px;
  color:#9aa58f
}
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  text-align:center;
  gap:8px 4px;
  font-size:11px
}
.calendar-grid .week {
  color:#acb4a7;
  font-size:10px;
  padding-bottom:5px
}
.calendar-day {
  min-height:27px;
  display:grid;
  place-items:center;
  position:relative;
  border-radius:6px;
  color:#7d8c74
}
.calendar-day.today {
  background:#41654f;
  color:#fff
}
.calendar-day.selected:not(.today) {
  outline:1px solid #9eb38c
}
.calendar-day.dim {
  color:#d3d8ce
}
.calendar-day.learned:after {
  content:'';
  width:3px;
  height:3px;
  position:absolute;
  bottom:2px;
  background:#b6c796;
  border-radius:50%
}
.calendar-foot {
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:#a2ac99;
  font-size:10px
}
.dashboard-bottom {
  margin-top:20px;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:20px
}
.chapter-mini {
  display:flex;
  gap:12px;
  align-items:center;
  padding:11px 0;
  border-top:1px solid #f0f2ed
}
.chapter-no {
  font-size:10px;
  color:#9bac8a;
  background:#f4f6ef;
  border-radius:5px;
  padding:7px
}
.chapter-mini b {
  font-size:11px;
  font-weight:500;
  flex:1
}
.chapter-mini small {
  color:#a5af9b;
  font-size:10px
}
.chapter-mini .mini-progress {
  width:70px;
  margin:0
}
.quote-panel {
  background:#f1f3e9;
  border:1px solid #e7ebdc;
  padding:26px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative
}
.quote-panel:after {
  content:'“';
  position:absolute;
  right:23px;
  top:14px;
  font-family:Georgia,serif;
  font-size:90px;
  color:#e2e7d7
}
.quote-panel p {
  font-size:16px;
  line-height:2;
  font-weight:500;
  z-index:1;
  letter-spacing:1px
}
.quote-panel small {
  color:#a3ad94;
  font-size:10px
}
.footer {
  display:flex;
  justify-content:space-between;
  margin-top:28px;
  font-size:10px;
  color:#b1b9ab
}
.toolbar {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:20px
}
.input,select,textarea {
  background:#fff;
  border:1px solid #e1e7dc;
  border-radius:6px;
  padding:10px 12px;
  color:#4a604e;
  min-width:0
}
.input {
  flex:1
}
.toolbar .input {
  min-width:180px
}
.tabs {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  background:#eaf0e6;
  padding:4px;
  border-radius:7px
}
.tabs button {
  padding:7px 14px;
  font-size:12px;
  border-radius:5px;
  color:#8b9881
}
.tabs button.active {
  background:#fff;
  box-shadow:0 1px 3px #00000008;
  color:#416344
}
.list-row {
  display:flex;
  align-items:center;
  gap:17px;
  padding:19px 0;
  border-top:1px solid var(--line)
}
.list-row:first-child {
  border-top:0
}
.row-title {
  font-weight:500;
  font-size:14px;
  flex:1;
  min-width:0;
  line-height:1.7
}
.row-title small {
  display:block;
  color:#9da895;
  font-size:11px;
  font-weight:400;
  margin-top:4px
}
.row-actions {
  display:flex;
  gap:8px;
  flex-shrink:0
}
.empty {
  padding:45px 20px;
  text-align:center;
  color:#99a48f;
  font-size:12px;
  line-height:2
}
.empty svg {
  width:36px;
  height:36px;
  color:#bac6b0;
  margin-bottom:12px
}
.empty h3 {
  font-size:15px;
  color:#627656;
  font-weight:500
}
.empty .primary {
  margin-top:12px
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.paper-card {
  background:white;
  border:1px solid var(--line);
  border-radius:10px;
  padding:23px
}
.paper-card h3 {
  font-size:15px;
  line-height:1.8;
  margin:14px 0 9px;
  font-weight:500
}
.paper-card p {
  font-size:11px;
  color:#a2ab99;
  line-height:1.8
}
.paper-card .primary {
  margin-top:9px
}
.tag {
  font-size:10px;
  padding:4px 8px;
  border-radius:4px;
  background:#edf3e9;
  color:#81936d;
  display:inline-block
}
.tag.recalled {
  background:#faf3e8;
  color:#b89661
}
.notice {
  padding:12px 16px;
  font-size:11px;
  line-height:1.9;
  color:#9b8866;
  background:#faf6ed;
  border:1px solid #efe5d1;
  border-radius:7px;
  margin:0 0 20px
}
.notice.online {
  background:#eff5ec;
  color:#81936e;
  border-color:#dfe9d7
}
.reader {
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:20px
}
.chapter-nav {
  position:sticky;
  top:20px;
  align-self:start;
  background:#fff;
  padding:13px;
  border:1px solid var(--line);
  border-radius:8px;
  max-height:calc(100vh - 70px);
  overflow:auto
}
.chapter-nav button {
  display:block;
  width:100%;
  text-align:left;
  padding:11px 12px;
  border-radius:5px;
  font-size:11px;
  color:#899780;
  line-height:1.7
}
.chapter-nav button.active {
  background:#edf3e8;
  color:#45683f
}
.theory-card {
  margin-bottom:14px
}
.theory-card summary {
  cursor:pointer;
  font-size:14px;
  line-height:1.9;
  list-style:none;
  display:flex;
  gap:10px;
  align-items:center
}
.theory-card summary .tag {
  font-size:9px;
  flex-shrink:0
}
.theory-card summary:after {
  content:'＋';
  margin-left:auto;
  color:#a2b094
}
.theory-card[open] summary:after {
  content:'−'
}
.answer {
  border-top:1px solid var(--line);
  margin-top:18px;
  padding-top:15px;
  font-size:13px;
  line-height:2;
  color:#6e7e64;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.answer ol {
  padding-left:20px;
  margin:0
}
.answer li {
  padding:4px 0
}
.cue {
  padding:12px 16px;
  background:#f6f7ee;
  border-radius:6px;
  margin:14px 0;
  font-size:12px;
  color:#919b79
}
.theory-mark {
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:14px
}
.theory-mark button {
  font-size:10px;
  border:1px solid var(--line);
  padding:5px 9px;
  border-radius:4px;
  color:#95a185
}
.theory-mark button.active {
  background:#e9f0e2;
  border-color:#b8cbaa;
  color:#61804a
}
.matrix {
  border-collapse:collapse;
  width:100%;
  font-size:11px;
  min-width:740px
}
.matrix th,.matrix td {
  border:1px solid #e6ebdf;
  padding:13px 11px;
  vertical-align:top;
  line-height:1.8
}
.matrix th {
  background:#f4f7ef;
  font-weight:500;
  color:#7d926b
}
.matrix td:first-child {
  background:#fafbf7;
  width:110px;
  font-weight:500
}
.matrix button {
  display:block;
  text-align:left;
  padding:5px;
  border-radius:4px;
  width:100%;
  font-size:11px;
  color:#6d825e
}
.matrix button:hover {
  background:#ecf2e3
}
.overflow {
  overflow:auto
}
.tree-node {
  padding:7px 0 7px 20px;
  border-left:1px solid #dfe8d7;
  margin-left:12px;
  font-size:12px;
  line-height:1.9;
  color:#6e805f
}
.tree-node summary {
  cursor:pointer
}
.tree-node[open]>summary {
  font-weight:600;
  color:#425e35
}
.framework h3 {
  font-size:16px;
  font-weight:500;
  margin:0 0 10px
}
.framework p {
  font-size:12px;
  line-height:1.9;
  color:#8b9a7e
}
.framework ul {
  font-size:12px;
  line-height:2;
  color:#7b8f6a;
  padding-left:18px
}
.quiz-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:20px
}
.question h2 {
  font-size:18px;
  font-weight:500;
  line-height:1.9;
  margin:20px 0 28px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.question-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#91a080;
  font-size:11px
}
.option {
  display:flex;
  gap:15px;
  width:100%;
  text-align:left;
  border:1px solid #e6ecdf;
  border-radius:7px;
  padding:15px 17px;
  margin-bottom:12px;
  font-size:13px;
  line-height:1.8;
  color:#7c8c6e
}
.option .letter {
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border:1px solid #dfe7d6;
  border-radius:5px;
  font-size:11px;
  color:#98a68b
}
.option.selected {
  border-color:#8caa76;
  background:#f1f6eb
}
.option.correct {
  border-color:#94b781;
  background:#edf5e7;
  color:#64814f
}
.option.wrong {
  border-color:#dbb2a1;
  background:#fcf1eb;
  color:#b2846a
}
.quiz-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:22px;
  margin-top:25px;
  border-top:1px solid var(--line)
}
.question-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px
}
.question-grid button {
  font-size:10px;
  border:1px solid #e7eddf;
  border-radius:4px;
  padding:8px 0;
  color:#9aa88c
}
.question-grid button.answered {
  background:#eaf2e2;
  color:#67864f
}
.question-grid button.current {
  border-color:#66864e;
  color:#486c30
}
.timer {
  font-size:31px;
  font-variant-numeric:tabular-nums;
  letter-spacing:3px;
  text-align:center;
  margin:16px 0 21px;
  color:#6b8355
}
.timer-note {
  text-align:center;
  font-size:10px;
  color:#a8b29d
}
.quiz-side .panel {
  margin-bottom:16px;
  padding:20px 17px
}
.result-score {
  text-align:center;
  padding:22px
}
.result-score strong {
  font-size:65px;
  font-weight:500;
  display:block;
  color:#718e58
}
.result-score p {
  color:#a1ae93;
  font-size:12px
}
.error-box {
  max-width:620px;
  margin:30px auto
}
.error-box p {
  font-size:12px;
  color:#a49378;
  line-height:2
}
.plan-layout {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) 1fr;
  gap:20px
}
.plan-layout .calendar-grid {
  gap:16px 9px
}
.plan-layout .calendar-day {
  min-height:45px
}
.plan-form {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px
}
.plan-form input[type=text] {
  flex:1
}
.plan-form input[type=date] {
  width:150px
}
.delete {
  color:#bbc2b3;
  font-size:16px
}
.delete:hover {
  color:#b87861
}
.writing-area {
  width:100%;
  min-height:400px;
  line-height:2;
  resize:vertical;
  background:#fffefb;
  font-size:14px
}
.drill-answer {
  width:100%;
  min-height:180px;
  margin-top:20px;
  resize:vertical;
  line-height:2
}
.article {
  white-space:pre-wrap;
  font-size:13px;
  line-height:2;
  color:#718363
}
.article p {
  margin:10px 0
}
dialog {
  border:1px solid #e3e9dc;
  border-radius:14px;
  padding:30px;
  width:min(480px,calc(100% - 40px));
  box-shadow:0 20px 80px #142d2620;
  color:var(--ink);
  max-height:85vh;
  overflow:auto
}
dialog::backdrop {
  background:#243d3444;
  backdrop-filter:blur(4px)
}
.modal-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}
.modal-title h2 {
  font-size:19px;
  margin:0;
  font-weight:500
}
.modal-close {
  color:#98a68a;
  font-size:22px
}
.modal-copy {
  font-size:12px;
  line-height:2.1;
  color:#8b9a7e
}
.login-code {
  font-size:36px;
  letter-spacing:8px;
  text-align:center;
  padding:24px;
  background:#f2f5ec;
  border:1px dashed #c7d5bb;
  border-radius:8px;
  margin:20px 0;
  color:#5e7f45;
  font-variant-numeric:tabular-nums
}
.modal-fields {
  display:flex;
  flex-direction:column;
  gap:14px
}
.modal-fields label {
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#8c9a7e
}
.modal-fields .primary {
  margin-top:10px
}
.account-warning {
  font-size:10px;
  color:#b1a084;
  line-height:1.9;
  margin-top:20px
}
.boot {
  padding:100px;
  text-align:center;
  color:#8f9c84
}
#toast {
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  background:#2f503f;
  color:white;
  padding:12px 23px;
  border-radius:8px;
  font-size:12px;
  box-shadow:0 4px 30px #1c3a3020;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  max-width:80vw;
  line-height:1.7
}
#toast.show {
  opacity:1
}
.mobile-menu {
  display:none
}
.record-table {
  width:100%;
  border-collapse:collapse;
  font-size:12px
}
.record-table th {
  text-align:left;
  color:#a5af9b;
  font-size:10px;
  font-weight:400;
  padding:12px 10px;
  border-bottom:1px solid var(--line)
}
.record-table td {
  padding:15px 10px;
  border-bottom:1px solid #eff3e8;
  color:#7e916c
}
.study-bars {
  display:flex;
  gap:20px;
  align-items:flex-end;
  height:105px;
  padding:0 10px;
  margin-top:25px
}
.study-bar {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:100%;
  gap:8px
}
.study-bar i {
  display:block;
  width:100%;
  max-width:25px;
  background:#dbe6d1;
  border-radius:4px 4px 0 0;
  min-height:3px
}
.study-bar small {
  font-size:9px;
  color:#abb69e
}
.study-bar span {
  font-size:9px;
  color:#91a080
}
.record-stem {
  max-width:620px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.badge-row {
  display:flex;
  gap:10px;
  align-items:center
}
.result-review {
  margin-top:15px
}
.pending {
  font-size:11px;
  color:#a9b59a
}
.online-label {
  font-size:10px;
  color:#9caa8d
}
.search-empty {
  padding:24px;
  color:#a4b196;
  font-size:12px
}
.breakdown {
  display:flex;
  gap:25px;
  font-size:12px;
  color:#8f9f81;
  justify-content:center
}
.subtitle {
  font-size:11px;
  color:#9aaa8b
}
.menu-wrap {
  display:flex;
  align-items:center;
  gap:12px
}
@media(min-width:1600px) {
  .main {
    padding:36px 48px
  }
  .hero {
    min-height:245px
  }
  .quick-card {
    padding:24px 12px
  }
  .hero h2 {
    font-size:31px
  }
  .dashboard-grid,.dashboard-bottom {
    grid-template-columns:1.5fr 1fr
  }
  .panel {
    padding:25px 28px
  }
}
@media(max-width:1100px) {
  .sidebar {
    width:190px;
    padding-left:12px;
    padding-right:12px
  }
  .layout {
    margin-left:190px
  }
  .main {
    padding:24px
  }
  .topbar {
    padding:0 24px
  }
  .hero {
    padding:26px
  }
  .book-art {
    display:none
  }
  .countdown {
    min-width:140px;
    padding:0 20px
  }
  .hero h2 {
    font-size:23px
  }
  .stat {
    padding:0 14px
  }
  .stat-icon {
    display:none
  }
  .quick-grid {
    gap:8px
  }
  .dashboard-grid {
    grid-template-columns:1fr 1fr
  }
  .cards {
    grid-template-columns:repeat(2,1fr)
  }
  .row-actions .ghost {
    padding:8px
  }
  .reader {
    grid-template-columns:190px minmax(0,1fr)
  }
}
@media(max-width:800px) {
  .sidebar {
    width:190px;
    transform:translateX(-100%);
    transition:transform .2s;
    box-shadow:5px 0 40px #16322a15
  }
  .sidebar.open {
    transform:translateX(0)
  }
  .layout {
    margin-left:0
  }
  .mobile-menu {
    display:block
  }
  .topbar {
    height:65px
  }
  .main {
    padding:22px 18px
  }
  .hero-right {
    display:none
  }
  .hero {
    min-height:205px
  }
  .quick-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .dashboard-grid,.dashboard-bottom,.plan-layout {
    grid-template-columns:1fr
  }
  .stats {
    padding:17px 4px
  }
  .stat {
    padding:0 12px
  }
  .stat strong {
    font-size:23px
  }
  .stat small {
    display:none
  }
  .date-label {
    display:none
  }
  .page-heading h1 {
    font-size:23px
  }
  .reader {
    grid-template-columns:1fr
  }
  .chapter-nav {
    position:static;
    max-height:160px;
    display:flex;
    flex-wrap:wrap;
    gap:3px
  }
  .chapter-nav button {
    width:auto
  }
  .quiz-layout {
    grid-template-columns:1fr
  }
  .quiz-side {
    display:flex;
    gap:15px;
    flex-wrap:wrap
  }
  .quiz-side .panel {
    flex:1;
    min-width:200px
  }
  .cards {
    grid-template-columns:1fr 1fr
  }
  .list-row {
    flex-wrap:wrap
  }
  .row-title {
    min-width:150px
  }
  .row-actions {
    margin-left:auto
  }
  .hero h2 {
    font-size:24px
  }
  .footer {
    line-height:1.8;
    gap:20px
  }
  .top-actions {
    gap:10px
  }
  .focus-button {
    font-size:10px
  }
  .topbar {
    padding:0 18px
  }
  .panel {
    padding:20px
  }
  .breadcrumbs>span:first-child {
    display:none
  }
  .record-table {
    font-size:10px
  }
  .record-table td {
    padding:12px 6px
  }
  .account {
    font-size:11px
  }
}
@media(max-width:480px) {
  .cards {
    grid-template-columns:1fr
  }
  .stat label {
    font-size:9px
  }
  .stat strong {
    font-size:20px
  }
  .hero {
    padding:23px
  }
  .hero-buttons {
    gap:7px
  }
  .hero-buttons button {
    padding:9px 12px
  }
  .stat {
    padding:0 10px
  }
  .quick-card {
    padding:16px 7px
  }
  .topbar .divider {
    display:none
  }
  .quiz-actions {
    flex-wrap:wrap
  }
  .record-stem {
    max-width:170px
  }
  .sidebar-note {
    display:none
  }
  .sidebar {
    overflow:auto
  }
  .toolbar .tabs button {
    padding:7px 10px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    transition:none!important;
    scroll-behavior:auto!important
  }
}

.pairing-status { padding: 12px 15px; border-radius: 7px; background: #edf3e8; color: #657e54; font-size: 12px; line-height: 1.8; font-variant-numeric: tabular-nums; }