:root {
  --paper: #f3ede3;
  --paper-2: #fffdf9;
  --ink: #17233e;
  --muted: #756d65;
  --line: #e5d8ca;
  --coral: #d44a43;
  --coral-soft: #fff0eb;
  --teal: #2f8b78;
  --teal-dark: #245c4a;
  --teal-soft: #e5f0eb;
  --gold: #d9a15d;
  --shadow: 0 18px 45px rgba(54, 45, 35, .08);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--sans); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 8% 3%, rgba(245,187,144,.19), transparent 30%), radial-gradient(circle at 94% 38%, rgba(36,92,74,.11), transparent 34%), linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,.12)); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.shell { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
.site-header, .course-topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand, .back-link { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, var(--coral), #b93435); box-shadow: 0 7px 16px rgba(190,57,54,.18); font-family: var(--serif); font-size: 23px; font-weight: 900; }
.brand-product-icon { display:block; width:42px; height:42px; flex:0 0 42px; border:1px solid #e5dccf; border-radius:14px; object-fit:cover; background:#fff; box-shadow:0 7px 16px rgba(36,92,74,.12); }
.brand > span:last-child, .back-link > span:last-child { display: grid; gap: 2px; }
.brand strong, .back-link strong { font-size: 16px; }
.brand small, .back-link small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.top-nav { display: flex; align-items: center; gap: 8px; }
.top-nav a, .top-nav button, .course-topbar > button, .quiet-link { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 17px; border: 1px solid rgba(218,203,189,.86); border-radius: 999px; background: rgba(255,253,249,.82); cursor: pointer; font-size: 12px; font-weight: 800; line-height: 1; }
.top-nav a:hover, .top-nav button:hover, .course-topbar > button:hover { color: var(--teal-dark); border-color: rgba(47,139,120,.32); background: #fff; }
.top-nav a.active { color:#fff; border-color:var(--teal-dark); background:var(--teal-dark); }

.hero { min-height: 510px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr); gap: 48px; align-items: center; padding: 64px 58px; overflow: hidden; border: 1px solid rgba(36,92,74,.18); border-radius: 36px; background: linear-gradient(125deg, #fdf7ed 0%, #f5f2e9 46%, #e2eee8 100%); box-shadow: var(--shadow); position: relative; }
.hero::before, .hero::after { content: ""; position: absolute; border: 1px solid rgba(47,139,120,.11); border-radius: 50%; pointer-events: none; }
.hero::before { width: 420px; height: 420px; right: -160px; top: -230px; }
.hero::after { width: 280px; height: 280px; right: -65px; top: -145px; }
.hero-copy, .hero-dashboard { position: relative; z-index: 1; }
.eyebrow { display: flex; gap: 8px; margin-bottom: 25px; }
.eyebrow span { padding: 7px 11px; border-radius: 999px; color: var(--teal-dark); background: rgba(255,255,255,.77); border: 1px solid rgba(47,139,120,.2); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.hero-kicker, .section-heading > span, .catalog-intro > div:first-child > span, .cards-heading > div > span { margin: 0 0 13px; color: var(--teal-dark); font-size: 12px; font-weight: 950; letter-spacing: .14em; }
.hero h1 { margin: 0; font-size: clamp(48px, 6vw, 83px); line-height: 1.02; letter-spacing: -.055em; }
.hero h1 em { color: var(--coral); font-family: var(--serif); font-style: normal; }
.hero-subtitle { margin: 24px 0 27px; color: #4f5d61; font-size: 18px; font-weight: 700; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-actions small { color: var(--muted); font-size: 11px; }
.primary-button, .secondary-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 900; }
.primary-button { color: #fff; background: var(--coral); box-shadow: 0 10px 23px rgba(196,65,61,.18); }
.primary-button span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.19); }
.secondary-button { color: var(--teal-dark); background: #fff; border: 1px solid rgba(47,139,120,.25); }
.hero-dashboard { padding: 29px; border: 1px solid rgba(56,124,111,.19); border-radius: 27px; background: rgba(255,255,255,.68); box-shadow: 0 17px 45px rgba(67,96,86,.09); backdrop-filter: blur(9px); }
.dashboard-heading span { color: var(--coral); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.dashboard-heading h2 { margin: 0 0 24px; font-size: 20px; line-height: 1.35; text-wrap: balance; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats-grid > div { min-height: 110px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 12px; border-radius: 19px; background: rgba(235,246,241,.78); border: 1px solid rgba(47,139,120,.11); text-align: center; }
.stats-grid strong { font-family: var(--serif); font-size: 37px; }
.stats-grid span { color: #65726e; font-size: 12px; font-weight: 800; }
.dashboard-progress { margin-top: 13px; padding: 18px; border-radius: 18px; background: rgba(30,84,78,.92); color: #fff; }
.dashboard-progress > div:first-child { display: flex; justify-content: space-between; font-size: 11px; }
.dashboard-progress small { display: block; margin-top: 9px; color: rgba(255,255,255,.72); font-size: 11px; }
.progress-track { width: 100%; height: 7px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: rgba(116,108,98,.15); }
.progress-track i { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #ffc28f, #eb6b62); transition: width .25s ease; }

.feature-section { padding-block: 86px 70px; }
.section-heading { max-width: 670px; }
.section-heading h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.03em; }
.section-heading p { margin: 14px 0 0; color: var(--muted); line-height: 1.75; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 33px; }
.feature-grid article { min-height: 220px; padding: 25px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,253,249,.76); }
.feature-grid article b { color: var(--coral); font-family: var(--serif); font-size: 28px; }
.feature-grid article > span { display: block; margin-top: 20px; color: var(--teal); font-size: 14px; font-weight: 900; letter-spacing: .04em; }
.feature-grid h3 { margin: 8px 0 10px; font-size: 18px; }
.feature-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.start-section { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 70px; padding: 35px 40px; border: 1px solid rgba(47,139,120,.15); border-radius: 27px; background: linear-gradient(110deg, rgba(232,246,241,.9), rgba(255,249,239,.95)); }
.start-section span { color: var(--coral); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.start-section h2 { margin: 7px 0; font-size: 28px; }
.start-section p { margin: 0; color: var(--muted); font-size: 14px; }
.site-footer { min-height: 85px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(217,201,185,.75); color: var(--muted); font-size: 11px; }
.site-footer button { padding: 8px 0; border: 0; color: var(--teal-dark); background: none; cursor: pointer; }

.catalog-main { padding-top: 24px; padding-bottom: 60px; }
.catalog-intro { min-height: 210px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 40px 44px; border: 1px solid rgba(65,132,117,.18); border-radius: 30px; background: linear-gradient(120deg, #fff9ef, #eaf6f2); box-shadow: var(--shadow); }
.catalog-intro h1 { margin: 7px 0; font-size: clamp(38px, 5vw, 64px); letter-spacing: -.05em; }
.catalog-intro p { margin: 0; color: var(--muted); }
.catalog-summary { width: 220px; padding: 24px; border-radius: 22px; background: rgba(255,255,255,.72); text-align: center; }
.catalog-summary strong { display: block; font-family: var(--serif); font-size: 34px; }
.catalog-summary span { color: var(--muted); font-size: 10px; }
.catalog-tools { display: flex; gap: 10px; margin: 28px 0 20px; }
.catalog-tools label { min-height: 48px; flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 17px; border: 1px solid var(--line); border-radius: 16px; background: #fffdf9; }
.catalog-tools input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
.catalog-tools button { min-width: 150px; border: 0; border-radius: 16px; color: #fff; background: var(--teal-dark); cursor: pointer; font-weight: 850; }
.course-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.course-card { position: relative; min-width: 0; display: grid; grid-template-columns: 132px 1fr; gap: 21px; align-items: center; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: rgba(255,253,249,.92); box-shadow: 0 8px 25px rgba(55,47,39,.05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.course-card:hover { transform: translateY(-2px); border-color: rgba(47,139,120,.35); box-shadow: 0 16px 36px rgba(55,47,39,.08); }
.course-card.locked{background:rgba(249,247,243,.88)}.course-card.locked .course-cover img{filter:saturate(.72);opacity:.82}.course-card.locked:hover{border-color:rgba(224,82,77,.28)}
.course-state.free{color:#fff;background:var(--teal)}
.access-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(21,33,59,.52);backdrop-filter:blur(5px)}.access-modal>section{position:relative;width:min(100%,520px);padding:34px;border-radius:26px;background:#fffdf9;box-shadow:0 24px 70px rgba(16,27,45,.24)}.access-modal>section>span{color:var(--teal);font-size:12px;font-weight:950;letter-spacing:.14em}.access-modal h2{margin:9px 0 12px;color:var(--ink);font-size:30px}.access-modal p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}.access-close{position:absolute;top:15px;right:16px;width:36px;height:36px;border:0;border-radius:50%;color:var(--ink);background:#f2eee7;font-size:25px;cursor:pointer}.access-course{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0;padding:16px 18px;border-radius:16px;background:#edf6f1}.access-course strong{color:var(--ink);font-size:15px}.access-course small{color:var(--teal-dark);font-weight:850}.access-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.access-actions a,.access-actions button{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;border-radius:14px;font-size:14px;font-weight:900;text-decoration:none;cursor:pointer}.access-actions a{color:#fff;background:var(--teal-dark)}.access-actions button{border:1px solid #ddd4c8;color:var(--ink);background:#fff}
.course-cover { min-height: 145px; display: grid; place-items: center; border-radius: 19px; background: var(--teal-soft); }
.course-card:nth-child(3n+2) .course-cover { background: var(--coral-soft); }
.course-card:nth-child(3n) .course-cover { background: #f4efe4; }
.course-cover img { width: 86px; height: 86px; object-fit: contain; }
.course-copy { min-width: 0; }
.course-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.course-number { color: var(--coral); font-family: var(--serif); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.course-state { padding: 6px 10px; border-radius: 99px; color: var(--teal-dark); background: var(--teal-soft); font-size: 11px; font-weight: 900; }
.course-copy h2 { margin: 10px 0 8px; overflow-wrap: anywhere; font-size: 21px; line-height: 1.35; }
.course-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; font-weight: 650; }
.course-meta-row { display: flex; gap: 7px; margin: 15px 0 13px; }
.course-meta-row span { padding: 5px 8px; border-radius: 99px; color: #695f56; background: #f3ede5; font-size: 8px; font-weight: 850; }
.course-progress-row { display: flex; justify-content: space-between; margin-top: 17px; color: var(--muted); font-size: 12px; font-weight: 700; }
.course-enter { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--teal-dark); font-size: 11px; font-weight: 900; }
.loading-card, .empty-state { grid-column: 1/-1; padding: 40px; border: 1px dashed var(--line); border-radius: 22px; color: var(--muted); background: rgba(255,255,255,.55); text-align: center; }

.course-topbar { min-height: 68px; }
.back-link > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: #fffdf9; font-size: 19px; }
.course-main { padding-bottom: 125px; }
.course-hero { min-height: 178px; display: grid; grid-template-columns: 1fr 150px; gap: 28px; align-items: center; padding: 27px 44px; overflow: hidden; border-radius: 28px; color: #fff; background: linear-gradient(120deg, #2f6e74 0%, #467f7b 100%); box-shadow: var(--shadow); position: relative; }
.course-hero::after { content:""; position:absolute; width: 360px; height:360px; right:-130px; top:-200px; border:1px solid rgba(255,255,255,.13); border-radius:50%; }
.course-hero-copy { position: relative; z-index: 1; }
.course-hero-series { color: rgba(255,255,255,.82); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.course-hero-labels { display: flex; gap: 8px; }
.course-hero-labels span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; color: rgba(255,255,255,.8); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.course-hero h1 { margin: 12px 0 6px; font-size: clamp(38px, 4.5vw, 56px); line-height: 1.12; letter-spacing: -.045em; }
.course-hero p { margin: 0; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.7; }
.course-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.course-hero-meta span { padding: 7px 10px; border-radius: 99px; background: rgba(255,255,255,.11); font-size: 9px; font-weight: 800; }
.course-hero-visual { min-height: 124px; display: grid; place-items: center; position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.19); border-radius: 22px; background: rgba(255,255,255,.1); }
.course-hero-visual img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(17,46,44,.16)); }
.course-hero-visual span { position: absolute; right: 13px; bottom: 13px; padding: 7px 10px; border-radius: 99px; color: var(--ink); background: #fff7e8; font-family: var(--serif); font-size: 10px; font-weight: 900; }
.training-center{margin:18px 0 38px;padding:18px;border:1px solid rgba(218,203,189,.72);border-radius:24px;background:rgba(255,253,249,.58)}
.training-center>header{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 3px 14px}.training-center>header div{display:grid;gap:3px}.training-center>header span{color:var(--teal-dark);font-size:11px;font-weight:900;letter-spacing:.08em}.training-center>header strong{font-size:18px}.training-center>header>small{color:var(--muted);font-size:11px}
.course-controls { display: grid; grid-template-columns: 1.12fr repeat(4, 1fr); gap: 10px; margin: 0; }
.control-card { min-height: 90px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-content: center; padding: 16px; border: 1px solid var(--line); border-radius: 19px; background: #fffdf9; text-align: left; cursor: pointer; }
.control-card > span { grid-row: 1/3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--teal-dark); background: var(--teal-soft); }
.control-card strong { font-size: 13px; }
.control-card small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.control-card:disabled,.control-card.audio-pending { color:#7d756d; border-color:#dfd8cf; background:#f2eee8; cursor:not-allowed; box-shadow:none; transform:none; }
.control-card:disabled > span,.control-card.audio-pending > span { color:#8a8178; background:#e7e1da; }
.primary-control { color: #fff; border-color: var(--teal-dark); background: var(--teal-dark); }
.primary-control > span { color: var(--teal-dark); background: #fff; }
.primary-control small { color: rgba(255,255,255,.72); }
.primary-control:disabled,.primary-control.audio-pending { color:#7d756d; border-color:#dfd8cf; background:#f2eee8; }
.primary-control:disabled small,.primary-control.audio-pending small { color:#8a8178; }
.primary-control:disabled > span,.primary-control.audio-pending > span { color:#8a8178; background:#e7e1da; }
.primary-control.playing { background: var(--coral); border-color: var(--coral); }
.control-card{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}.control-card:hover{transform:translateY(-2px);border-color:rgba(47,139,120,.3);box-shadow:0 10px 22px rgba(46,61,54,.08)}.control-card:active{transform:scale(.98)}.read-control>span{background:#e5f4ef}.match-control>span{color:var(--coral);background:#fff0eb}.quiet-control[aria-pressed="true"]{color:#fff;border-color:var(--coral);background:var(--coral)}.quiet-control[aria-pressed="true"]>span{color:var(--coral);background:#fff}
.cards-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 20px; }
.cards-heading h2 { margin: 6px 0; font-size: 31px; }
.cards-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.cards-progress { width: 180px; text-align: right; }
.cards-progress strong { font-family: var(--serif); }
.word-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.word-card { min-width: 0; min-height: 315px; display: flex; flex-direction: column; align-items: center; position: relative; padding: 20px 16px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,253,249,.93); box-shadow: 0 7px 20px rgba(52,45,37,.045); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.word-card::after { content:""; position:absolute; left:16px; right:16px; bottom:0; height:3px; border-radius:9px 9px 0 0; background: transparent; }
.word-card:hover { transform: translateY(-2px); box-shadow: 0 13px 27px rgba(52,45,37,.075); }
.word-card.playing { border-color: var(--coral); background: #fff7f1; box-shadow: 0 13px 31px rgba(201,71,64,.11); }
.word-card.playing::after { background: var(--coral); }
.word-card.learned:not(.playing) { border-color: rgba(47,139,120,.34); background: #f5fcf9; }
.word-index { position: absolute; left: 14px; top: 12px; color: #8c7e71; font-family: var(--serif); font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.word-state-mark { position: absolute; right: 11px; top: 10px; min-width: 31px; padding: 5px 7px; border-radius: 99px; color: var(--teal-dark); background: var(--teal-soft); font-size: 7px; font-weight: 900; text-align:center; }
.word-card > img { width: 88px; height: 88px; margin: 5px 0 8px; object-fit: contain; }
.word-main { width:100%; display:grid; justify-items:center; gap:7px; border:0; background:none; cursor:pointer; }
.word-main strong { max-width: 100%; overflow-wrap: anywhere; font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.13; text-align: center; }
.word-main em { color: #74695f; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-style: normal; text-align:center; }
.word-meaning { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; color: #5d554e; font-size: 13px; line-height: 1.5; text-align: center; }
.pos-chip { flex: 0 0 auto; padding: 5px 7px; border-radius: 99px; color: var(--coral); background: #f9e9e5; font-size: 10px; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.source-info { margin-top: 5px; color: #9a8f84; font-size: 8px; text-align:center; }
.word-detail-buttons { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:10px; }
.word-detail-buttons button { min-height: 38px; padding: 0 14px; border: 1px solid rgba(47,139,120,.22); border-radius: 99px; color: var(--teal-dark); background: #f1faf7; cursor:pointer; font-size: 11px; font-weight: 850; }
.word-detail-buttons button.related { color:#7b4a72; border-color:#dfc9dc; background:#f8eef6; }
.word-detail-buttons button.example { color:#a43d38; border-color:#efcbc4; background:#fff1ed; }
.word-detail-buttons button[aria-expanded="true"] { color:#fff; background:var(--teal-dark); }
.word-detail-buttons button.related[aria-expanded="true"] { background:#8b5b7e; }
.word-detail-buttons button.example[aria-expanded="true"] { color:#fff; background:var(--coral); }
.word-actions { width:100%; display:grid; grid-template-columns:42px 1fr 1fr; gap:5px; margin-top:auto; padding-top:12px; }
.word-actions button { min-height: 42px; padding: 0 9px; border: 1px solid var(--line); border-radius: 99px; background:#fff; cursor:pointer; color:#625b54; font-size:12px; font-weight:850; }
.word-actions button:first-child { color:var(--coral); font-size:18px; }
.word-actions button.active { color:#fff; border-color:var(--teal); background:var(--teal); }
.word-actions button.favorite-active { color:#fff; border-color:var(--coral); background:var(--coral); }
.word-details { width:100%; margin-top:12px; padding:13px; border-radius:15px; background:rgba(242,237,229,.72); text-align:left; }
.word-details > strong { display:block; margin-bottom:10px; color:var(--teal-dark); font-size:13px; letter-spacing:.04em; }
.related-list, .extension-list { display:grid; gap:7px; }
.related-item, .extension-item { padding:9px 10px; border:1px solid rgba(128,100,121,.12); border-radius:11px; background:rgba(255,255,255,.72); }
.related-item div { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.related-item b, .extension-item b { font-family:var(--serif); font-size:18px; }
.related-item em { color:#756873; font-size:11px; font-style:normal; }
.related-speak { width:27px; height:27px; display:inline-grid; place-items:center; padding:0; border:1px solid rgba(47,139,120,.18); border-radius:50%; color:var(--teal-dark); background:#f3faf7; cursor:pointer; line-height:1; transition:background .16s ease, transform .16s ease; }
.related-speak:hover { background:#e5f5ef; transform:translateY(-1px); }
.speaker-glyph { position:relative; width:14px; height:14px; display:block; }
.speaker-glyph::before { content:""; position:absolute; left:0; top:2px; width:9px; height:10px; background:currentColor; clip-path:polygon(0 35%,34% 35%,100% 0,100% 100%,34% 65%,0 65%); }
.speaker-glyph::after { content:""; position:absolute; right:0; top:3px; width:4px; height:8px; border-right:1.4px solid currentColor; border-radius:0 50% 50% 0; }
.related-item p, .extension-item p { margin:5px 0 0; color:#5e5650; font-size:12px; line-height:1.5; }
.relation-label { padding:4px 7px; border-radius:99px; color:#7b4a72; background:#f8eaf4; font-size:10px; font-weight:900; }
.news-example { padding:12px 13px; border:1px solid rgba(212,74,67,.14); border-radius:12px; background:rgba(255,255,255,.78); }
.news-example p { margin:0; }
.news-example-en { color:#252d42; font-family:var(--serif); font-size:15px; font-weight:760; line-height:1.55; }
.news-example-en mark {
  padding:2px 5px;
  border-radius:5px;
  color:#b5252b;
  background:#ffd2cc;
  box-shadow:inset 0 -2px 0 #e14c4c;
  font-weight:950;
}
.news-example-zh { margin-top:8px !important; color:#6d645d; font-size:12px; line-height:1.55; }
.news-example small { display:block; margin-top:9px; color:#91867b; font-size:9px; line-height:1.4; }
.course-pager { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-top:30px; }
.course-pager a { min-height:48px; display:flex; align-items:center; justify-content:center; padding:0 17px; border:1px solid var(--line); border-radius:15px; background:#fffdf9; font-size:11px; font-weight:850; }
.course-pager a:last-child { justify-self:stretch; color:var(--ink); border-color:var(--line); background:#fffdf9; }
.course-pager a.disabled { pointer-events:none; opacity:.4; }
.page-feedback { margin: 24px auto 0; color: var(--muted); font-size: 10px; text-align: center; }
.page-feedback button { margin-left: 7px; padding: 7px 10px; border: 0; border-radius: 99px; color: var(--teal-dark); background: var(--teal-soft); cursor: pointer; font-size: 10px; font-weight: 850; }
.mobile-player { display:none; }

.train-main { min-height: calc(100vh - 68px); display:grid; place-items:center; padding-block:25px 55px; }
.train-card { width:min(700px, 100%); padding:34px; border:1px solid var(--line); border-radius:28px; background:#fffdf9; box-shadow:var(--shadow); }
.train-topline { display:flex; justify-content:space-between; gap:12px; font-size:11px; font-weight:850; }
.train-prompt { display:grid; justify-items:center; padding:55px 10px 38px; text-align:center; }
.train-prompt button { width:68px; height:68px; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:var(--teal); cursor:pointer; font-size:24px; }
.train-prompt p { margin:22px 0 8px; font-size:25px; font-weight:900; }
.train-prompt small { color:var(--muted); }
.train-input { display:grid; gap:7px; }
.train-input span { color:var(--muted); font-size:9px; font-weight:850; }
.train-input input { min-height:58px; padding:0 17px; border:1px solid var(--line); border-radius:15px; outline:0; font-family:var(--serif); font-size:22px; }
.train-input input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(47,139,120,.12); }
.train-result { min-height:50px; padding:13px 2px; color:var(--teal-dark); font-size:12px; text-align:center; }
.train-result.wrong { color:var(--coral); }
.train-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.train-actions button { min-height:48px; border:1px solid var(--line); border-radius:14px; background:#fff; cursor:pointer; font-weight:850; }
.train-actions .primary-button { border-color:var(--coral); background:var(--coral); }

.feedback-dialog { width:min(410px, calc(100% - 34px)); padding:30px; border:0; border-radius:24px; color:var(--ink); background:#fffdf9; box-shadow:0 25px 80px rgba(28,37,45,.24); }
.feedback-dialog::backdrop { background:rgba(20,32,39,.38); backdrop-filter:blur(3px); }
.feedback-dialog > span { color:var(--coral); font-size:9px; font-weight:900; letter-spacing:.16em; }
.feedback-dialog h2 { margin:8px 0; }
.feedback-dialog p { color:var(--muted); font-size:13px; line-height:1.8; }
.dialog-close { position:absolute; right:13px; top:11px; width:34px; height:34px; border:0; border-radius:50%; background:#f3ece5; cursor:pointer; font-size:21px; }
.dialog-confirm { width:100%; margin-top:8px; }

@media (max-width: 980px) {
  .hero { grid-template-columns:1fr; gap:35px; }
  .hero-dashboard { max-width:650px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .course-grid { grid-template-columns:1fr; }
  .word-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .shell { width:min(100% - 24px, 1240px); }
  .site-header { min-height:62px; }
  .brand-mark { width:38px; height:38px; border-radius:12px; }
  .brand-product-icon { width:38px; height:38px; flex-basis:38px; border-radius:12px; }
  .brand strong { font-size:14px; }
  .top-nav a { display:none; }
  .top-nav button, .course-topbar > button { min-height:38px; padding:0 13px; }
  .hero { min-height:auto; padding:31px 23px 25px; border-radius:26px; }
  .eyebrow { margin-bottom:19px; }
  .hero-kicker { font-size:8px; }
  .hero h1 { font-size:clamp(42px,14vw,60px); }
  .hero-subtitle { margin:18px 0 22px; font-size:15px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:10px; }
  .primary-button { width:100%; min-height:55px; }
  .hero-dashboard { padding:20px; border-radius:21px; }
  .dashboard-heading h2 { margin-bottom:17px; font-size:18px; }
  .stats-grid { gap:7px; }
  .stats-grid > div { min-height:88px; padding:8px 3px; border-radius:15px; }
  .stats-grid strong { font-size:28px; }
  .stats-grid span { max-width:70px; font-size:8px; }
  .dashboard-progress { padding:14px; }
  .feature-section { padding-block:58px 46px; }
  .section-heading h2 { font-size:33px; }
  .feature-grid { grid-template-columns:1fr; gap:10px; margin-top:24px; }
  .feature-grid article { min-height:auto; padding:22px; }
  .start-section { align-items:stretch; flex-direction:column; margin-bottom:45px; padding:25px; }
  .secondary-button { width:100%; }
  .site-footer { align-items:flex-start; flex-direction:column; justify-content:center; gap:4px; padding-block:20px; }
  .catalog-main { padding-top:8px; }
  .catalog-intro { min-height:auto; display:block; padding:27px 23px; border-radius:24px; }
  .catalog-intro h1 { font-size:42px; }
  .catalog-intro p { font-size:12px; line-height:1.65; }
  .catalog-summary { width:100%; margin-top:22px; padding:17px; }
  .catalog-tools { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:1fr 104px; padding-block:9px; background:rgba(247,242,233,.93); backdrop-filter:blur(8px); }
  .catalog-tools button { min-width:0; font-size:10px; }
  .course-card { grid-template-columns:96px 1fr; gap:14px; padding:15px; border-radius:21px; }
  .course-cover { min-height:122px; }
  .course-cover img { width:72px; height:72px; }
  .course-copy h2 { margin-top:7px; font-size:17px; }
  .course-meta-row { margin-block:10px; }
  .course-state { padding:5px 8px; font-size:9px; }
  .course-copy p { font-size:12px; }
  .course-progress-row { margin-top:12px; font-size:10px; }
  .course-enter { margin-top:9px; }
  .course-topbar { min-height:62px; }
  .course-topbar > button { font-size:10px; }
  .back-link > span:first-child { width:38px; height:38px; }
  .back-link strong { font-size:13px; }
  .course-main { width:100%; padding-bottom:92px; }
  .course-hero { min-height:auto; grid-template-columns:1fr 92px; gap:12px; padding:25px 20px; border-radius:0 0 25px 25px; }
  .course-hero-labels span { padding:5px 7px; font-size:7px; }
  .course-hero h1 { margin:15px 0 8px; font-size:clamp(30px,9vw,44px); }
  .course-hero p { font-size:10px; }
  .course-hero-meta { margin-top:14px; }
  .course-hero-meta span { padding:5px 7px; font-size:7px; }
  .course-hero-visual { min-height:104px; border-radius:18px; }
  .course-hero-visual img { width:76px; height:76px; }
  .course-hero-visual span { right:5px; bottom:5px; padding:4px 6px; font-size:7px; }
  .course-controls { grid-template-columns:1fr 1fr 1fr; gap:6px; margin:12px 12px 32px; }
  .control-card { min-height:84px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:9px 5px; border-radius:15px; text-align:center; }
  .control-card > span { width:32px; height:32px; font-size:12px; }
  .control-card strong { font-size:10px; }
  .control-card small { display:none; }
  .cards-section { padding-inline:12px; }
  .cards-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .cards-heading h2 { font-size:26px; }
  .cards-progress { width:100%; text-align:left; }
  .word-grid { grid-template-columns:1fr; }
  .word-card { min-height:0; padding:18px 15px 13px; border-radius:19px; }
  .word-card > img { width:96px; height:96px; margin-top:1px; }
  .word-main strong { font-size:27px; }
  .word-main em { font-size:11px; }
  .word-actions { grid-template-columns:46px 1fr 1fr; }
  .word-actions button { min-height:40px; }
  .word-details { padding:12px; }
  .course-pager { margin-inline:12px; grid-template-columns:1fr 1fr; }
  .course-pager a:nth-child(2) { display:none; }
  .mobile-player { position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:20; min-height:57px; display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:4px; padding:6px; border:1px solid rgba(69,121,110,.2); border-radius:18px; background:rgba(255,253,249,.93); box-shadow:0 15px 42px rgba(41,51,47,.18); backdrop-filter:blur(10px); }
  .mobile-player[hidden] { display:none; }
  .mobile-player button { border:0; border-radius:12px; background:#f2ede5; font-size:9px; font-weight:850; }
  .mobile-player button:nth-child(2) { color:#fff; background:var(--teal); }
  .train-main { padding:8px 12px 35px; }
  .train-card { padding:23px 17px; border-radius:23px; }
  .train-prompt { padding:42px 8px 30px; }
  .train-prompt p { font-size:22px; }
  .train-actions { grid-template-columns:1fr 1fr; }
  .train-actions .primary-button { grid-column:1/-1; }
}

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

/* 完整默写训练：沿用原50组的三模式、错词本与本轮统计 */
.hidden { display:none !important; }
body[data-page="train"] .training-shell { padding-bottom:62px; }
body[data-page="train"] .train-page-title { max-width:58%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
body[data-page="train"] .train-intro { min-height:178px; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:18px; padding:31px 38px; overflow:hidden; border:1px solid rgba(47,139,120,.18); border-radius:28px; background:linear-gradient(120deg,#fff8ed,#e7f4ef); box-shadow:var(--shadow); position:relative; }
body[data-page="train"] .train-intro::after { content:""; position:absolute; width:280px; height:280px; right:-100px; top:-190px; border:1px solid rgba(47,139,120,.14); border-radius:50%; }
body[data-page="train"] .train-intro > div, body[data-page="train"] .train-intro-mark { position:relative; z-index:1; }
body[data-page="train"] .train-intro > div > span { color:var(--teal-dark); font-size:13px; font-weight:950; letter-spacing:.1em; }
body[data-page="train"] .train-intro h1 { margin:8px 0 7px; font-family:var(--sans); font-size:clamp(31px,4vw,46px); font-weight:850; line-height:1.12; letter-spacing:-.045em; }
body[data-page="train"] .train-intro p { margin:0; color:var(--muted); font-size:15px; line-height:1.7; }
body[data-page="train"] .train-intro-mark { flex:0 0 auto; width:96px; height:96px; display:grid; place-items:center; border:1px solid rgba(47,139,120,.18); border-radius:26px; color:rgba(47,139,120,.38); background:rgba(255,255,255,.58); font-family:var(--serif); font-size:26px; font-weight:900; }
body[data-page="train"] .train-layout { display:grid; grid-template-columns:310px minmax(0,1fr); gap:18px; }
body[data-page="train"] .train-side, body[data-page="train"] .training-stage { border:1px solid var(--line); border-radius:25px; background:rgba(255,253,249,.91); box-shadow:var(--shadow); }
body[data-page="train"] .train-side { align-self:start; padding:19px; }
body[data-page="train"] .train-side-head { display:grid; gap:3px; margin-bottom:13px; }
body[data-page="train"] .train-side-head span { color:var(--coral); font-size:11px; font-weight:950; letter-spacing:.12em; }
body[data-page="train"] .train-side-head h2 { margin:0; font-size:24px; }
body[data-page="train"] .train-side > button { width:100%; display:grid; gap:3px; margin:7px 0; padding:12px 13px; border:1px solid var(--line); border-radius:15px; background:#fff; cursor:pointer; text-align:left; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
body[data-page="train"] .train-side > button:hover { transform:translateY(-1px); border-color:rgba(47,139,120,.28); }
body[data-page="train"] .train-side > button strong { font-size:16px; }
body[data-page="train"] .train-side > button small { color:var(--muted); font-size:12px; line-height:1.45; }
body[data-page="train"] .train-side > button.active { color:#fff; border-color:var(--teal-dark); background:linear-gradient(145deg,#2f7662,var(--teal-dark)); box-shadow:0 11px 23px rgba(36,92,74,.18); }
body[data-page="train"] .train-side > button.active small { color:rgba(255,255,255,.72); }
body[data-page="train"] .train-side > button { position:relative; padding-right:42px; }
body[data-page="train"] .train-side > button.completed::after { content:"✓"; position:absolute; right:13px; top:50%; width:24px; height:24px; display:grid; place-items:center; transform:translateY(-50%); border-radius:50%; color:#fff; background:var(--teal); font-size:13px; font-weight:950; }
body[data-page="train"] .train-side > button.active.completed::after { color:var(--teal-dark); background:#fff; }
body[data-page="train"] .train-tools { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:14px; padding-top:14px; border-top:1px dashed #ddd1c3; }
body[data-page="train"] .train-tools button { min-height:46px; padding:9px 7px; border:1px solid var(--line); border-radius:13px; color:#665f58; background:#f7f1e9; cursor:pointer; font-size:12px; font-weight:850; }
body[data-page="train"] .train-tools button span { min-width:18px; height:18px; display:inline-grid; place-items:center; margin-left:3px; padding-inline:4px; border-radius:99px; color:#fff; background:var(--coral); }
body[data-page="train"] .side-progress { margin-top:17px; }
body[data-page="train"] .side-progress small { display:block; margin-top:8px; color:var(--muted); font-size:11px; text-align:right; }
body[data-page="train"] .training-stage { min-height:610px; display:grid; place-items:center; padding:30px; text-align:center; }
body[data-page="train"] .train-card { width:min(650px,100%); padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
body[data-page="train"] .train-count { color:var(--muted); font-size:12px; font-weight:850; letter-spacing:.05em; }
body[data-page="train"] .train-count-row { display:flex; justify-content:center; align-items:center; gap:12px; }
body[data-page="train"] .word-step-status { padding:5px 10px; border-radius:999px; color:var(--teal-dark); background:#e8f5f1; font-size:11px; font-weight:900; }
body[data-page="train"] .train-visual { width:126px; height:126px; display:grid; place-items:center; margin:18px auto 12px; border:1px solid #e6dbcf; border-radius:30px; background:linear-gradient(145deg,#fff,#f4eee6); box-shadow:0 12px 28px rgba(50,41,33,.07); }
body[data-page="train"] .train-icon { width:101px; height:101px; object-fit:contain; filter:drop-shadow(0 7px 10px rgba(31,27,24,.07)); }
body[data-page="train"] .train-word { margin:10px 0 5px; overflow-wrap:anywhere; font-family:var(--serif); font-size:clamp(38px,7vw,69px); font-weight:900; line-height:1.04; }
body[data-page="train"] .train-phonetic { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14px; }
body[data-page="train"] .train-meaning { margin:20px 0 18px; font-size:clamp(22px,3vw,30px); font-weight:900; line-height:1.38; }
body[data-page="train"] .answer-wrap { display:grid; gap:7px; text-align:left; }
body[data-page="train"] .answer-wrap > label { margin-left:5px; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.08em; }
body[data-page="train"] .answer-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
body[data-page="train"] #submitAnswer { min-width:98px; padding:0 14px; border:0; border-radius:16px; color:#fff; background:var(--teal); cursor:pointer; font-size:13px; font-weight:900; }
body[data-page="train"] .answer { width:100%; min-height:61px; padding:13px 18px; border:2px solid var(--line); border-radius:18px; outline:0; color:var(--ink); background:#fff; text-align:center; font-family:var(--serif); font-size:20px; font-weight:800; transition:border-color .18s ease,box-shadow .18s ease; }
body[data-page="train"] .answer::placeholder { color:#91877e; font-size:18px; }
body[data-page="train"] .answer:focus { border-color:var(--teal); box-shadow:0 0 0 5px rgba(47,139,120,.1); }
body[data-page="train"] .feedback { min-height:31px; margin:12px; font-size:14px; font-weight:900; }
body[data-page="train"] .feedback.ok { color:var(--teal); }
body[data-page="train"] .feedback.bad { color:var(--coral); }
body[data-page="train"] .train-source { margin:0 0 15px; padding:13px 15px; border:1px solid rgba(47,139,120,.14); border-radius:13px; color:#746c63; background:#f2faf7; text-align:left; }
body[data-page="train"] .train-source strong { display:block; margin-bottom:6px; color:var(--teal-dark); font-size:11px; }
body[data-page="train"] .train-source p { margin:0; color:#252d42; font-family:var(--serif); font-size:14px; font-weight:760; line-height:1.5; }
body[data-page="train"] .train-source mark {
  padding:2px 5px;
  border-radius:5px;
  color:#b5252b;
  background:#ffd2cc;
  box-shadow:inset 0 -2px 0 #e14c4c;
  font-weight:950;
}
body[data-page="train"] .train-source span { display:block; margin-top:6px; color:#6d645d; font-size:11px; line-height:1.5; }
body[data-page="train"] .train-source small { display:block; margin-top:7px; color:#91867b; font-size:9px; line-height:1.4; }
body[data-page="train"] .train-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
body[data-page="train"] .train-actions button { min-height:56px; padding:12px 10px; border:1px solid var(--line); border-radius:15px; background:#f7f1e9; cursor:pointer; font-size:14px; font-weight:900; }
body[data-page="train"] .train-actions .primary { color:#fff; border-color:var(--coral); background:var(--coral); }
body[data-page="train"] .train-actions .primary:disabled { color:#9b938b; border-color:#e2d9cf; background:#eee9e3; cursor:not-allowed; box-shadow:none; }
body[data-page="train"] .train-side button:disabled,body[data-page="train"] #speakWord:disabled { color:#9b938b; border-color:#e2d9cf; background:#eee9e3; cursor:not-allowed; box-shadow:none; }
body[data-page="train"] .train-actions .primary.ready-next-word { border-color:var(--teal-dark); background:var(--teal-dark); }

@media (max-width:820px) {
  body[data-page="train"] .train-layout { grid-template-columns:1fr; }
  body[data-page="train"] .train-side { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  body[data-page="train"] .train-side-head, body[data-page="train"] .train-tools, body[data-page="train"] .side-progress { grid-column:1/-1; }
  body[data-page="train"] .train-side > button { margin:0; padding:11px 8px; text-align:center; }
  body[data-page="train"] .train-side > button small { display:none; }
  body[data-page="train"] .training-stage { min-height:540px; padding:22px; }
}

@media (max-width:680px) {
  body[data-page="train"] .training-shell { width:min(100% - 16px,1240px); padding-bottom:34px; }
  body[data-page="train"] .train-page-title { max-width:43%; font-size:10px; }
  body[data-page="train"] .train-intro { min-height:0; padding:22px 18px; border-radius:22px; }
  body[data-page="train"] .train-intro h1 { font-size:30px; }
  body[data-page="train"] .train-intro p { font-size:13px; }
  body[data-page="train"] .train-intro-mark { display:none; }
  body[data-page="train"] .train-side { grid-template-columns:1fr; padding:14px; border-radius:20px; }
  body[data-page="train"] .train-side-head, body[data-page="train"] .train-tools, body[data-page="train"] .side-progress { grid-column:1; }
  body[data-page="train"] .train-side > button { min-height:55px; padding:10px 13px; text-align:left; }
  body[data-page="train"] .train-side > button small { display:block; }
  body[data-page="train"] .training-stage { min-height:500px; padding:18px 14px; border-radius:20px; }
  body[data-page="train"] .train-visual { width:108px; height:108px; margin-top:15px; }
  body[data-page="train"] .train-icon { width:87px; height:87px; }
  body[data-page="train"] .train-word { font-size:clamp(35px,12vw,52px); }
  body[data-page="train"] .train-meaning { font-size:23px; }
  body[data-page="train"] .answer { min-height:56px; font-size:18px; }
  body[data-page="train"] .answer::placeholder { font-size:16px; }
  body[data-page="train"] .train-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* 手机端顶部减法：文案区、数据区分开，尽快露出主要操作与内容。 */
@media (max-width:768px) {
  .shell { width:min(100% - 24px, 1240px); }
  .site-header, .course-topbar { min-height:58px; gap:10px; }
  .brand, .back-link { gap:8px; }
  .brand-mark { width:35px; height:35px; border-radius:11px; font-size:20px; }
  .brand-product-icon { width:35px; height:35px; flex-basis:35px; border-radius:11px; }
  .brand strong { font-size:14px; }
  .brand small, .back-link small { display:none; }
  .top-nav a { display:none; }
  .top-nav button, .course-topbar > button { min-height:36px; padding:0 12px; font-size:10px; }

  body[data-page="home"] .hero { display:block; min-height:0; padding:0; overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; }
  body[data-page="home"] .hero::before,
  body[data-page="home"] .hero::after { display:none; }
  body[data-page="home"] .hero-copy { padding:22px 20px 21px; border:1px solid rgba(65,132,117,.18); border-radius:24px; background:linear-gradient(135deg,#fdf7ed 0%,#eef7f2 100%); box-shadow:0 12px 30px rgba(54,45,35,.07); }
  body[data-page="home"] .eyebrow { gap:6px; margin-bottom:14px; }
  body[data-page="home"] .eyebrow span { padding:5px 8px; font-size:8px; letter-spacing:.04em; }
  body[data-page="home"] .hero-kicker { display:none; }
  body[data-page="home"] .hero h1 { font-size:clamp(38px,11.5vw,50px); line-height:1.05; letter-spacing:-.045em; }
  body[data-page="home"] .hero-subtitle { margin:14px 0 17px; font-size:14px; line-height:1.65; }
  body[data-page="home"] .hero-actions { align-items:stretch; flex-direction:column; gap:8px; }
  body[data-page="home"] .hero-actions .primary-button { width:100%; min-height:50px; }
  body[data-page="home"] .hero-actions small { text-align:center; }
  body[data-page="home"] .hero-dashboard { max-width:none; margin-top:14px; padding:16px; border-radius:20px; background:rgba(255,253,249,.88); box-shadow:0 10px 26px rgba(54,45,35,.055); }
  body[data-page="home"] .dashboard-heading span { display:none; }
  body[data-page="home"] .dashboard-heading h2 { margin:0 0 12px; font-size:17px; }
  body[data-page="home"] .stats-grid { gap:6px; }
  body[data-page="home"] .stats-grid > div { min-height:70px; gap:3px; padding:7px 3px; border-radius:13px; }
  body[data-page="home"] .stats-grid strong { font-size:26px; }
  body[data-page="home"] .stats-grid span { max-width:92px; font-size:10px; line-height:1.25; }
  body[data-page="home"] .dashboard-progress { margin-top:9px; padding:12px; border-radius:14px; }
  body[data-page="home"] .dashboard-progress small { margin-top:7px; font-size:10px; }
  body[data-page="home"] .feature-section { display:none; }
  body[data-page="home"] .start-section { margin-top:18px; }
  body[data-page="home"] .feature-section { padding-block:48px 40px; }
  body[data-page="home"] .section-heading > span { margin-bottom:8px; font-size:11px; }
  body[data-page="home"] .section-heading h2 { font-size:31px; }
  body[data-page="home"] .section-heading p { margin-top:10px; font-size:12px; }

  body[data-page="courses"] .catalog-main { padding-top:4px; }
  body[data-page="courses"] .catalog-intro { min-height:0; display:block; padding:18px; border-radius:22px; }
  body[data-page="courses"] .catalog-intro > div:first-child > span { margin-bottom:7px; font-size:8px; }
  body[data-page="courses"] .catalog-intro h1 { margin:3px 0 6px; font-size:34px; }
  body[data-page="courses"] .catalog-intro p { font-size:11px; line-height:1.55; }
  body[data-page="courses"] .catalog-summary { width:100%; display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:10px; margin-top:14px; padding:11px 13px; border-radius:16px; text-align:left; }
  body[data-page="courses"] .catalog-summary strong { grid-row:1/3; font-size:23px; }
  body[data-page="courses"] .catalog-summary span { font-size:9px; }
  body[data-page="courses"] .catalog-summary .progress-track { grid-column:1/-1; margin-top:7px; }
  body[data-page="courses"] .catalog-summary .series-switcher { grid-column:1/-1; margin-top:10px; }
  body[data-page="courses"] .catalog-tools { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:minmax(0,1fr) 102px; gap:7px; margin:11px 0 12px; padding-block:6px; background:rgba(247,242,233,.94); backdrop-filter:blur(8px); }
  body[data-page="courses"] .catalog-tools label { min-height:43px; padding-inline:13px; border-radius:14px; }
  body[data-page="courses"] .catalog-tools input { min-width:0; font-size:11px; }
  body[data-page="courses"] .catalog-tools button { min-width:0; min-height:43px; border-radius:14px; font-size:9px; }

  body[data-page="course"] .course-topbar { width:min(100% - 24px,1240px); }
  body[data-page="course"] .back-link > span:first-child { width:36px; height:36px; border-radius:12px; }
  body[data-page="course"] .back-link strong { font-size:12px; }
  body[data-page="course"] .course-main { width:100%; padding-bottom:34px; }
  body[data-page="course"] .course-hero { display:none; }
  body[data-page="course"] .course-hero { min-height:0; grid-template-columns:minmax(0,1fr) 58px; gap:8px; padding:13px 16px; border-radius:0 0 20px 20px; }
  body[data-page="course"] .course-hero::after { width:210px; height:210px; right:-105px; top:-145px; opacity:.55; }
  body[data-page="course"] .course-hero-series { font-size:9px; letter-spacing:.04em; }
  body[data-page="course"] .course-hero h1 { margin:5px 0 1px; font-size:clamp(24px,7vw,31px); line-height:1.12; }
  body[data-page="course"] .course-hero p { font-size:9px; line-height:1.45; }
  body[data-page="course"] .course-hero-meta { gap:5px; margin-top:9px; }
  body[data-page="course"] .course-hero-meta span { padding:4px 6px; font-size:7px; }
  body[data-page="course"] .course-hero-visual { min-height:60px; border-radius:14px; }
  body[data-page="course"] .course-hero-visual img { width:46px; height:46px; }
  body[data-page="course"] .course-hero-visual span { display:none; }
  body[data-page="course"] .training-center{margin:9px 12px 15px;padding:10px 8px;border-radius:17px}
  body[data-page="course"] .training-center>header{align-items:center;margin:0 3px 8px}
  body[data-page="course"] .training-center>header strong{font-size:13px}
  body[data-page="course"] .training-center>header span,body[data-page="course"] .training-center>header>small{display:none}
  body[data-page="course"] .course-controls { grid-template-columns:repeat(5,minmax(112px,1fr)); gap:6px; margin:0; overflow-x:auto; padding:1px 1px 6px; scroll-snap-type:x proximity; scrollbar-width:none; }
  body[data-page="course"] .course-controls::-webkit-scrollbar{display:none}
  body[data-page="course"] .control-card { min-width:0; min-height:46px; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:5px; padding:7px 5px; border-radius:13px; text-align:center; }
  body[data-page="course"] .control-card{scroll-snap-align:start}
  body[data-page="course"] .control-card > span { width:25px; height:25px; flex:0 0 25px; font-size:10px; }
  body[data-page="course"] .control-card strong { font-size:10px; white-space:nowrap; }
  body[data-page="course"] .control-card small { display:none; }
  body[data-page="course"] .primary-control { grid-column:auto; min-height:46px; }
  body[data-page="course"] .quiet-control { border-style:dashed; background:rgba(255,253,249,.55); }
  body[data-page="course"] .cards-section { padding-inline:12px; }
  body[data-page="course"] .cards-heading { display:grid; grid-template-columns:minmax(0,1fr) 88px; align-items:end; gap:10px; margin-bottom:10px; }
  body[data-page="course"] .cards-heading > div > span { margin-bottom:3px; font-size:9px; }
  body[data-page="course"] .cards-heading h2 { margin:2px 0 0; font-size:26px; line-height:1.18; }
  body[data-page="course"] .cards-heading p { display:none; }
  body[data-page="course"] .cards-progress { width:100%; text-align:left; }
  body[data-page="course"] .cards-progress .progress-track { margin-top:6px; }
  body[data-page="course"] .word-grid { display:block; }
  body[data-page="course"] .word-card { display:none; width:100%; min-height:430px; padding:22px 17px 16px; }
  body[data-page="course"] .word-card.mobile-current:not([hidden]) { display:flex; }
  body[data-page="course"] .word-card > img { width:122px; height:122px; margin:13px 0 12px; }
  body[data-page="course"] .word-main strong { font-size:clamp(34px,10vw,48px); }
  body[data-page="course"] .word-card.long-word .word-main strong { font-size:clamp(25px,7vw,32px); overflow-wrap:normal; word-break:normal; }
  body[data-page="course"] .word-main em { font-size:14px; }
  body[data-page="course"] .word-meaning { font-size:16px; }
  body[data-page="course"] .mobile-player { position:static; width:calc(100% - 24px); min-height:52px; margin:12px auto 18px; padding:5px; box-shadow:0 8px 24px rgba(41,51,47,.11); }
  body[data-page="course"] .mobile-player.details-open { position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); width:auto; margin:0; z-index:30; box-shadow:0 15px 42px rgba(41,51,47,.2); }
  body[data-page="course"] .mobile-player button { min-height:42px; font-size:11px; }
  body[data-page="course"] .mobile-player button:nth-child(2).playing { color:#fff; background:var(--coral); box-shadow:0 0 0 3px rgba(214,72,68,.12); }
  body[data-page="course"] .word-details { width:100%; }
  body[data-page="course"] .related-speak { width:30px; height:30px; font-size:13px; }
  body[data-page="course"] .page-feedback { margin-inline:12px; }

  body[data-page="train"] .train-intro { padding:17px 18px; }
  body[data-page="train"] .train-intro p { display:none; }
  body[data-page="train"] .train-side { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:11px; }
  body[data-page="train"] .train-side-head { grid-column:1/-1; margin:0 0 3px; }
  body[data-page="train"] .train-side-head span { display:none; }
  body[data-page="train"] .train-side-head h2 { font-size:18px; }
  body[data-page="train"] .train-side > button { min-height:43px; margin:0; padding:7px 4px; text-align:center; }
  body[data-page="train"] .train-side > button strong { font-size:12px; }
  body[data-page="train"] .train-side > button small { display:none; }
  body[data-page="train"] .train-tools { grid-column:1/-1; margin-top:3px; padding-top:9px; }
  body[data-page="train"] .side-progress { grid-column:1/-1; margin-top:8px; }
  body[data-page="train"] .training-stage { min-height:460px; padding:16px 12px; }
  body[data-page="train"] .answer-entry { grid-template-columns:minmax(0,1fr) 88px; gap:6px; }
  body[data-page="train"] #submitAnswer { min-width:0; padding:0 8px; border-radius:14px; font-size:12px; }
  body[data-page="train"] .train-actions { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  body[data-page="train"] .train-actions button { min-height:42px; padding:7px 3px; border-radius:11px; font-size:11px; }
}

@media (max-width:680px) {
  body[data-page="train"] .train-side { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body[data-page="train"] .train-side-head, body[data-page="train"] .train-tools, body[data-page="train"] .side-progress { grid-column:1/-1; }
  body[data-page="train"] .train-side > button { min-height:43px; padding:7px 3px; text-align:center; }
  body[data-page="train"] .train-side > button small { display:none; }
  body[data-page="train"] .train-actions { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* unified learning hub */
.brand small{display:block;margin-top:2px;font-size:10px;font-weight:500;color:#857b70}
.hub-main{padding-bottom:56px}.hub-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:28px;align-items:center;margin-top:12px;padding:54px 56px;border:1px solid #d7ddd5;border-radius:32px;background:linear-gradient(120deg,#fff9f0 0%,#eef8f4 100%);box-shadow:0 18px 42px rgba(42,56,50,.08)}
.hub-hero-copy .eyebrow,.section-heading>span,.series-kicker{color:#277e70;font-size:13px;font-weight:800;letter-spacing:.12em}.hub-hero h1{margin:12px 0 16px;font-size:64px;line-height:1.05;color:#15213b}.hub-hero p{max-width:620px;margin:0;color:#6d675f;font-size:18px;line-height:1.8}
.hub-progress-card{padding:28px;border-radius:24px;background:rgba(255,255,255,.78);border:1px solid rgba(54,126,112,.15)}.hub-progress-card>span{font-size:14px;color:#7a7168}.hub-progress-card strong{display:block;margin:10px 0;font-size:25px;color:#17223d}.hub-progress-card strong b{font-family:var(--serif);font-size:48px;color:#d84b45}.hub-progress-card p{font-size:14px;line-height:1.5}
.direction-section,.series-section{margin-top:38px}.section-heading h2{margin:8px 0 6px;font-size:34px;color:#17223d}.section-heading p{margin:0;color:#746c63;font-size:16px}.direction-tabs{display:flex;gap:10px;margin-top:18px}.direction-tabs button{min-width:124px;padding:12px 20px;border:1px solid #cbdad4;border-radius:999px;background:#fff;color:#2c6259;font-size:16px;font-weight:800}.direction-tabs button.active{background:#2b8173;color:#fff}
.series-section{padding:30px;border:1px solid #e1d8cc;border-radius:28px;background:rgba(255,255,255,.55)}.series-list{display:grid;gap:16px;margin-top:22px}.series-row{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:24px;align-items:center;padding:20px;border:1px solid #ded6ca;border-radius:22px;background:#fffdf9;color:inherit;text-decoration:none;transition:.2s ease}.series-row:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(43,57,50,.09)}
.series-visual{position:relative;display:grid;place-items:center;height:112px;border-radius:18px;background:#eaf6f2}.series-coral .series-visual{background:#fff0eb}.series-visual img{width:72px;height:72px;object-fit:contain}.series-visual span{position:absolute;right:8px;bottom:8px;padding:4px 8px;border-radius:999px;background:#fff;font-size:11px;font-weight:800}.series-copy h3{margin:5px 0 7px;font-size:26px;color:#17223d}.series-copy>p{margin:0 0 12px;color:#716960}.series-meta{display:flex;justify-content:space-between;gap:14px;margin-bottom:8px;font-size:12px;color:#726b64}.series-meta strong{color:#2c6259}.series-arrow{font-size:14px;font-weight:800;color:#277e70}.back-series-link{display:inline-flex;margin:8px 0 16px;color:#2c6259;font-weight:800;text-decoration:none}.series-switcher{display:flex;justify-content:space-between;gap:8px;width:100%;margin-top:16px}.series-switcher a{display:inline-flex;flex:1 1 0;min-width:0;align-items:center;justify-content:center;min-height:38px;padding:0 8px;border:1px solid rgba(44,98,89,.2);border-radius:999px;background:#fff;color:#2c6259;font-size:11px;font-weight:850;text-decoration:none;white-space:nowrap}.series-switcher a:hover{border-color:#2c6259;background:#f3fbf8}
@media(max-width:768px){.site-header .top-nav a:first-child{display:none}.brand small{font-size:8px}.hub-hero{display:block;margin-top:4px;padding:28px 24px;border-radius:24px}.hub-hero h1{font-size:42px}.hub-hero p{font-size:15px;line-height:1.65}.hub-progress-card{margin-top:22px;padding:20px}.hub-progress-card strong b{font-size:38px}.direction-section,.series-section{margin-top:24px}.section-heading h2{font-size:28px}.series-section{padding:20px 14px;border-radius:22px}.series-row{grid-template-columns:78px minmax(0,1fr);gap:14px;padding:14px}.series-visual{height:82px}.series-visual img{width:52px;height:52px}.series-copy h3{font-size:21px}.series-copy>p{font-size:13px;line-height:1.5}.series-meta{display:block}.series-meta span{display:block;margin-top:4px}.series-arrow{grid-column:2;margin-top:-4px}.catalog-main{padding-top:6px}}

/* reading and matching practice */
.extra-training{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 0}
.extra-training>a{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:17px 20px;border:1px solid var(--line);border-radius:18px;background:#fffdf9;color:inherit;text-decoration:none}
.extra-training>a>span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#e6f5f0;color:#267664;font-size:20px;font-weight:900}
.extra-training>a:nth-child(2)>span{background:#fff0e9;color:#d84b45}.extra-training strong{display:block;font-size:17px}.extra-training small{display:block;margin-top:3px;color:var(--muted)}.extra-training b{color:#2c7867;font-size:13px}
body[data-page="practice"]{background:linear-gradient(120deg,#fff9f0,#eef8f4)}.practice-main{max-width:980px;padding-bottom:60px}
.practice-tabs{position:sticky;top:68px;z-index:20;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0 20px;padding:6px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 8px 20px rgba(45,36,29,.07);backdrop-filter:blur(14px)}
.practice-tabs a{padding:12px;border-radius:11px;color:#625b54;text-align:center;text-decoration:none;font-weight:850}.practice-tabs a.active{background:var(--teal);color:#fff}
body[data-page="practice"] .course-topbar,body[data-page="train"] .course-topbar{position:sticky;top:0;z-index:30;background:rgba(250,246,239,.94);backdrop-filter:blur(14px)}
body[data-page="train"] .training-mode-tabs{margin-top:4px}
.practice-panel>header{padding:25px 28px;border:1px solid #d9ddd6;border-radius:24px;background:rgba(255,255,255,.72)}.practice-panel>header>span{color:var(--teal);font-size:12px;font-weight:900;letter-spacing:.12em}
.practice-panel h1{margin:7px 0;font-size:38px;color:var(--ink)}.practice-panel>header p{margin:0;color:var(--muted);line-height:1.65}
.read-progress{display:flex;align-items:center;gap:16px;margin:18px 4px}.read-progress .progress-track{flex:1}
.read-card{display:grid;justify-items:center;padding:32px;border:1px solid var(--line);border-radius:26px;background:#fffdf9;box-shadow:0 16px 36px rgba(50,65,58,.08)}
.read-card>img{width:118px;height:118px;object-fit:contain}.read-card h2{margin:16px 0 5px;font-family:var(--serif);font-size:45px;text-align:center}.read-card>p{margin:0;color:#766d65;font-size:18px}.read-card>div:nth-of-type(1){margin-top:13px;font-size:19px}
.read-card>img[hidden]{display:none}.text-only-practice .read-card.no-icon{padding-block:52px}.text-only-practice .read-card.no-icon h2{margin-top:0;font-size:clamp(48px,7vw,72px)}
.read-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(520px,100%);margin-top:24px}
.read-actions .recording-playback{grid-column:1/-1;color:#246b59;border-color:#9bcfc2;background:#e8f6f2}
.read-actions .recording-playback[hidden]{display:none}
.read-actions button,.practice-nav button,.spell-bridge button,.fallback-rating button{min-height:48px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font-weight:850}.read-actions button.primary{border-color:var(--coral);background:var(--coral);color:#fff}
.read-actions button,.practice-nav button,.spell-bridge button,.fallback-rating button,.match-tile{transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,opacity .16s ease}
.read-actions button:active,.practice-nav button:active,.spell-bridge button:active,.fallback-rating button:active{transform:scale(.97)}
.read-actions button:focus-visible,.practice-nav button:focus-visible,.spell-bridge button:focus-visible,.fallback-rating button:focus-visible,.match-tile:focus-visible{outline:3px solid rgba(47,139,120,.22);outline-offset:2px}
.read-actions button.is-playing{color:#fff;border-color:var(--teal);background:var(--teal);box-shadow:0 0 0 4px rgba(47,139,120,.13)}
.read-actions button.is-listening,.read-actions button.is-recording{color:#fff;border-color:var(--coral);background:var(--coral);box-shadow:0 0 0 4px rgba(216,75,69,.14);animation:buttonPulse 1.15s infinite}
.read-actions button.is-success,.practice-nav button.is-success,.spell-bridge button.is-success{color:#fff;border-color:#2c8a68;background:#2c8a68}
.read-actions button.is-error,.spell-bridge button.is-error{color:#fff;border-color:#c75a4f;background:#c75a4f}
.practice-nav button.is-busy{color:#fff;border-color:var(--teal);background:var(--teal);opacity:.82}
.practice-nav button:disabled{color:#aaa39a;border-color:#ddd8d1;background:#e9e6e1;box-shadow:none;cursor:not-allowed;opacity:.78;transform:none}
.read-actions button:disabled{cursor:wait;opacity:.9}
@keyframes buttonPulse{50%{box-shadow:0 0 0 8px rgba(216,75,69,.06)}}
.speech-result{width:min(620px,100%);margin-top:18px;padding:14px 16px;border-radius:14px;background:#f4f1eb;color:#675f57;text-align:center;line-height:1.6}.speech-result.listening{background:#e4f4ef;color:#246b59}.speech-result.success{background:#e1f4e9;color:#20734e}.speech-result.retry{background:#fff0eb;color:#a7433d}
.fallback-rating{display:flex;align-items:center;gap:8px;margin-top:12px}.spell-bridge{width:min(560px,100%);margin-top:18px;padding:16px;border-top:1px dashed var(--line)}.spell-bridge label{display:block;margin-bottom:8px;font-weight:850}.spell-bridge>div{display:grid;grid-template-columns:1fr 90px;gap:8px}.spell-bridge input{min-width:0;padding:13px;border:1px solid var(--line);border-radius:13px;font-size:18px}.spell-bridge p{margin:9px 0 0;text-align:center}.spell-bridge p.success{color:#20734e}.spell-bridge p.retry{color:#a7433d}
.fallback-rating[hidden],.spell-bridge[hidden]{display:none}
.practice-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.match-status{display:flex;justify-content:space-between;padding:17px 4px 11px}
.practice-complete-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(20,32,42,.42);backdrop-filter:blur(5px)}
.practice-complete-modal[hidden]{display:none}
.practice-complete-modal>section{position:relative;width:min(480px,100%);padding:36px 34px 28px;border:1px solid #dfd5c9;border-radius:26px;background:#fffdf9;box-shadow:0 24px 70px rgba(30,44,39,.24);text-align:center}
.complete-close{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;border-radius:50%;background:#f2eee8;color:#766d64;font-size:24px;cursor:pointer}
.complete-mark{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 14px;border-radius:50%;background:#dff3e9;color:#23805e;font-size:30px;font-weight:900}
.practice-complete-modal p{margin:0;color:#2c806d;font-size:14px;font-weight:900;letter-spacing:.08em}
.practice-complete-modal h2{margin:9px 0 22px;color:var(--ink);font-size:28px}
.complete-actions{display:grid;gap:10px}
.complete-actions a,.complete-actions button,.complete-stay{display:flex;align-items:center;justify-content:center;min-height:50px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);text-decoration:none;font-weight:850;cursor:pointer}
.complete-actions .primary{border-color:var(--teal);background:var(--teal);color:#fff}
.complete-stay{min-height:36px;margin:12px auto 0;padding:0 14px;border:0;background:transparent;color:#837a71;font-size:13px}
body.modal-open{overflow:hidden}
.match-board{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:18px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.72)}
.match-tile{min-height:92px;padding:13px;border:2px solid transparent;border-radius:16px;background:#fff;box-shadow:0 6px 15px rgba(55,62,58,.07);cursor:pointer;color:var(--ink);font-size:17px;font-weight:800;line-height:1.4}.match-tile.word{font-family:var(--serif);font-size:21px}.match-tile.selected{border-color:var(--teal);background:#eaf7f3}.match-tile.matched{color:#27755f;background:#dff2ea;opacity:.55;pointer-events:none}.match-tile.wrong{border-color:var(--coral);animation:matchShake .28s}
.match-message{min-height:48px;padding:14px;text-align:center;color:#26755f;font-weight:900}@keyframes matchShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.match-celebration{position:fixed;inset:0;z-index:9999;overflow:hidden;pointer-events:none}.match-celebration i{position:absolute;left:var(--x);top:46%;width:8px;height:13px;border-radius:2px;background:var(--color);opacity:0;animation:matchConfetti .9s cubic-bezier(.15,.72,.25,1) var(--delay) forwards}.match-celebration i.round{width:9px;height:9px;border-radius:50%}.match-celebration.large i{top:16%;animation-duration:1.55s}
@keyframes matchConfetti{0%{opacity:0;transform:translate3d(0,-12px,0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate3d(var(--dx),58vh,0) rotate(var(--spin))}}
@media(prefers-reduced-motion:reduce){.match-celebration{display:none}}
@media(max-width:768px){.extra-training{grid-template-columns:1fr;gap:8px}.extra-training>a{padding:12px 14px}.practice-main{padding-top:4px}.practice-tabs{top:58px}.practice-panel>header{padding:20px}.practice-panel h1{font-size:30px}.read-card{padding:24px 16px}.read-card>img{width:92px;height:92px}.read-card h2{font-size:38px}.read-actions{grid-template-columns:1fr}.fallback-rating{flex-wrap:wrap;justify-content:center}.match-board{grid-template-columns:1fr 1fr;gap:8px;padding:10px}.match-tile{min-height:82px;padding:9px;font-size:14px}.match-tile.word{font-size:17px}.practice-complete-modal>section{padding:32px 20px 24px;border-radius:22px}.practice-complete-modal h2{font-size:24px}}
.account-entry {
  display: inline-flex;
  min-width: 74px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(36,92,74,.22);
  border-radius: 999px;
  color: var(--teal-dark);
  background: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}
.account-entry.signed-in { color: var(--teal-dark); background: rgba(255,253,249,.82); border-color: rgba(218,203,189,.86); }
.profile-page .account-entry.signed-in { color:#fff; background:var(--teal-dark); border-color:var(--teal-dark); }
.catalog-intro{position:relative;min-height:240px;padding-bottom:64px}.catalog-series-switcher{position:absolute;right:44px;bottom:16px;width:220px;justify-content:flex-end;margin:0}.catalog-series-switcher a{flex:1 1 0;min-width:0;padding:0 8px}
@media(max-width:768px){body[data-page="courses"] .catalog-intro{padding-bottom:18px}.catalog-series-switcher{position:static;width:100%;margin:10px 0 0}.catalog-series-switcher a{flex:1 1 0;min-width:0;padding:0 8px}}
.course-topbar .account-entry { margin-left: auto; }

.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 8%, rgba(245,187,144,.18), transparent 31%),
    radial-gradient(circle at 90% 70%, rgba(36,92,74,.14), transparent 35%),
    #f3ede3;
}
.login-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 56px; }
.login-back { display: inline-flex; margin-bottom: 24px; color: var(--teal-dark); font-weight: 900; text-decoration: none; }
.login-layout { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.72fr); min-height: 650px; overflow: hidden; border: 1px solid rgba(36,92,74,.18); border-radius: 36px; background: rgba(255,253,249,.92); box-shadow: var(--shadow); }
.login-brand-panel { position: relative; padding: 64px; color: #fff; background: linear-gradient(145deg,#245c4a 0%,#2e7460 70%,#397f6c 100%); overflow: hidden; }
.login-brand-panel::after { content:""; position:absolute; width:420px; height:420px; right:-220px; bottom:-210px; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.035),0 0 0 110px rgba(255,255,255,.025); }
.login-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.login-logo span { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:var(--teal-dark); background:#fff8ed; font-size:24px; font-weight:950; }
.login-logo strong { font-size: 20px; }
.login-kicker { position:relative; z-index:1; margin:78px 0 16px; color:#d9eee5; font-size:14px; font-weight:900; letter-spacing:.08em; }
.login-brand-panel h1 { position:relative; z-index:1; margin:0; font-size:clamp(40px,5vw,64px); line-height:1.12; letter-spacing:-.045em; }
.login-brand-panel > p:not(.login-kicker) { position:relative; z-index:1; max-width:550px; margin:24px 0 28px; color:#e3eee9; font-size:17px; line-height:1.8; }
.login-brand-panel ul { position:relative; z-index:1; display:grid; gap:13px; margin:0; padding:0; list-style:none; color:#fff; font-weight:750; }
.login-brand-panel li::before { content:"✓"; display:inline-grid; place-items:center; width:22px; height:22px; margin-right:10px; border-radius:50%; color:var(--teal-dark); background:#f9d7b6; font-size:12px; font-weight:950; }
.login-card { display:flex; align-items:center; padding:52px; background:#fffdf9; }
.login-card > div { width:100%; }
.login-card-label { color:var(--teal-dark); font-size:12px; font-weight:950; letter-spacing:.16em; }
.login-card h2 { margin:10px 0 8px; color:var(--ink); font-size:34px; }
.login-subtitle { margin:0 0 22px; color:var(--muted); font-size:14px; line-height:1.65; }
.login-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:20px; padding:4px; border-radius:15px; background:#e8f1ec; }
.login-tabs button { height:42px; border:0; border-radius:12px; color:#718079; background:transparent; font-weight:900; cursor:pointer; }
.login-tabs button.active { color:#fff; background:var(--teal-dark); box-shadow:0 7px 18px rgba(36,92,74,.2); }
.login-field { display:block; margin-top:14px; }
.login-field[hidden], .login-account-panel[hidden], [hidden] { display:none !important; }
.login-field span { display:block; margin:0 0 7px 3px; color:#53615c; font-size:12px; font-weight:850; }
.login-field input { width:100%; height:50px; padding:0 15px; border:1px solid #ded9cf; border-radius:15px; color:var(--ink); background:#fff; font-size:15px; outline:none; }
.login-field input:focus { border-color:#5a9b86; box-shadow:0 0 0 4px rgba(47,139,120,.11); }
.login-primary,.login-secondary { width:100%; height:49px; margin-top:17px; border-radius:15px; font-size:14px; font-weight:950; cursor:pointer; }
.login-primary { border:0; color:#fff; background:var(--teal-dark); }
.login-primary:disabled { opacity:.6; cursor:wait; }
.login-secondary { border:1px solid #ded9cf; color:var(--teal-dark); background:#fff; }
.login-text-button,.login-step-back { display:block; margin:13px auto 0; border:0; color:var(--teal-dark); background:none; font-size:12px; font-weight:850; cursor:pointer; }
.login-step { display:none; }
.login-step.show { display:block; }
.login-step h3 { margin:12px 0; font-size:25px; }
.login-message { display:none; margin-top:14px; padding:11px 13px; border-radius:13px; font-size:13px; line-height:1.55; }
.login-message.show { display:block; }
.login-message.error { color:#a93835; background:#fff0ec; }
.login-message.ok { color:#246c55; background:#e8f6ee; }
.login-legal { margin:18px 0 0; color:#959088; font-size:11px; line-height:1.7; text-align:center; }
.login-account-panel { display:none; }
.login-account-panel.show { display:block; }
.login-account-box { margin:18px 0 8px; padding:18px; border-radius:16px; color:var(--teal-dark); background:#e8f1ec; font-weight:850; word-break:break-all; }
.account-entry.signed-in { gap:7px; padding-left:7px; }
.account-entry img { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#e9f4ef; }
.login-default-avatar { display:block; width:70px; height:70px; margin:0 0 14px; border:5px solid #edf6f1; border-radius:50%; object-fit:cover; box-shadow:0 8px 22px rgba(36,92,74,.14); }
.login-default-avatar.account-avatar { width:84px; height:84px; margin-bottom:18px; }
.login-profile-link { display:flex; align-items:center; justify-content:center; text-decoration:none; }

.profile-page { min-height:100vh; background:radial-gradient(circle at 88% 8%,rgba(191,224,211,.34),transparent 26%),var(--paper); }
.profile-header { min-height:76px; }
.profile-main { padding-bottom:54px; }
.profile-hero { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; padding:20px 28px; border:1px solid rgba(36,92,74,.15); border-radius:24px; background:linear-gradient(120deg,#fffaf2 0%,#f1f8f4 100%); box-shadow:0 14px 34px rgba(55,45,35,.06); }
.profile-avatar { width:88px; height:88px; border:6px solid rgba(255,255,255,.8); border-radius:50%; background:#eaf4ef; object-fit:cover; box-shadow:0 10px 24px rgba(36,92,74,.13); }
.profile-identity > span,.profile-card-heading span { color:var(--teal); font-size:13px; font-weight:900; letter-spacing:.08em; }
.profile-identity h1 { margin:5px 0 3px; color:var(--ink); font-size:30px; }
.profile-identity p { margin:0; color:var(--muted); font-size:14px; }
.profile-actions { display:flex; gap:10px; }
.profile-primary,.profile-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:14px; font-size:14px; font-weight:900; text-decoration:none; cursor:pointer; }
.profile-primary { border:0; color:#fff; background:var(--teal-dark); }
.profile-secondary { border:1px solid #dcd5ca; color:var(--ink); background:#fff; }
.profile-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:14px 0 20px; }
.profile-stats article { display:flex; flex-direction:column; gap:4px; padding:22px 24px; border:1px solid rgba(36,92,74,.12); border-radius:20px; background:rgba(255,253,249,.92); }
.profile-stats strong { color:var(--teal-dark); font-family:Georgia,serif; font-size:32px; }
.profile-stats span { color:var(--muted); font-size:13px; font-weight:800; }
.profile-grid { display:grid; grid-template-columns:1.35fr .85fr; gap:18px; }
.profile-card { padding:28px; border:1px solid rgba(36,92,74,.12); border-radius:24px; background:rgba(255,253,249,.94); box-shadow:0 14px 34px rgba(55,45,35,.055); }
.profile-progress-card { min-height:300px; }
.profile-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.profile-card-heading h2 { margin:7px 0 0; color:var(--ink); font-size:24px; }
.profile-card-heading > a { color:var(--teal); font-size:13px; font-weight:900; text-decoration:none; }
.profile-progress-line { display:flex; justify-content:space-between; margin:42px 0 11px; color:var(--muted); font-size:13px; font-weight:800; }
.profile-progress-card .progress-track { height:10px; }
.profile-continue { display:flex; align-items:center; justify-content:center; min-height:52px; margin-top:34px; border-radius:16px; color:#fff; background:linear-gradient(135deg,var(--teal),var(--teal-dark)); font-weight:900; text-decoration:none; }
.profile-links { display:grid; gap:10px; margin-top:24px; }
.profile-links a { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; min-height:68px; padding:9px 14px; border:1px solid #e8e0d5; border-radius:16px; color:var(--ink); text-decoration:none; }
.profile-links a > b { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:var(--teal-dark); background:#e7f3ee; font-size:19px; }
.profile-links span { display:flex; flex-direction:column; gap:4px; }
.profile-links strong { font-size:14px; }
.profile-links small { color:var(--muted); font-size:11px; }
.profile-links em { color:var(--coral); font-style:normal; font-weight:900; }
.profile-links i { color:var(--teal); font-style:normal; }
.profile-products { grid-column:1 / -1; }
.profile-products-top { margin-top:14px; padding:20px 24px; }
.profile-products-top .profile-product-list { margin-top:14px; }
.profile-product-list { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:22px; }
.profile-product-list div { display:flex; flex-direction:column; gap:7px; min-height:88px; padding:17px; border:1px solid #e5ded4; border-radius:17px; background:#faf7f1; }
.profile-product-list div.active { border-color:#8fc3b2; background:#eaf5f0; }
.profile-product-list span { color:var(--ink); font-size:15px; font-weight:900; }
.profile-product-list strong { color:var(--muted); font-size:11px; }

.profile-product-list div.active strong { color:var(--teal); }

/* 2026-08-22 首页精简：稳定 Banner 与双列系列 */
.hub-hero:has(.hub-hero-brand-card){grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr)}
.hub-hero-brand-card{display:flex;align-items:center;gap:20px;padding:26px;border:1px solid rgba(54,126,112,.16);border-radius:24px;background:rgba(255,255,255,.72)}
.hub-hero-brand-card img{width:94px;height:94px;flex:0 0 94px;border-radius:24px;object-fit:cover;box-shadow:0 12px 28px rgba(40,91,74,.12)}
.hub-hero-brand-card div{display:grid;gap:7px}.hub-hero-brand-card span{color:var(--teal-dark);font-size:11px;font-weight:900;letter-spacing:.12em}.hub-hero-brand-card strong{color:var(--ink);font-size:22px;line-height:1.35;white-space:nowrap}.hub-hero-brand-card small{color:var(--muted);font-size:11px;letter-spacing:.12em}
body[data-page="home"] .series-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body[data-page="home"] .series-row{grid-template-columns:96px minmax(0,1fr);gap:17px;padding:18px}
body[data-page="home"] .series-visual{height:96px}body[data-page="home"] .series-visual img{width:62px;height:62px}
body[data-page="home"] .series-copy h3{font-size:23px}
body[data-page="home"] .series-meta{display:block;margin-bottom:8px}body[data-page="home"] .series-meta span{display:block;margin-top:5px}
body[data-page="home"] .series-arrow{grid-column:2;margin-top:-4px}
.foundation-series-section{background:linear-gradient(135deg,rgba(235,246,241,.82),rgba(255,250,243,.78))}
body[data-page="home"] .foundation-series-list{grid-template-columns:1fr}
body[data-page="home"] .foundation-series-list .series-row{grid-template-columns:132px minmax(0,1fr) auto;padding:24px 26px}
body[data-page="home"] .foundation-series-list .series-visual{height:112px}
body[data-page="home"] .foundation-series-list .series-visual img{width:76px;height:76px}
body[data-page="home"] .foundation-series-list .series-copy h3{font-size:28px}
body[data-page="home"] .foundation-series-list .series-meta{display:flex}
body[data-page="home"] .foundation-series-list .series-meta span{display:inline;margin-top:0}
body[data-page="home"] .foundation-series-list .series-arrow{grid-column:auto;margin-top:0}

@media(max-width:768px){
  .access-modal{padding:12px}.access-modal>section{padding:28px 20px 22px;border-radius:22px}.access-modal h2{font-size:25px}.access-course{align-items:flex-start;flex-direction:column}.access-actions{grid-template-columns:1fr}
  body[data-page="home"] .section-heading h2{font-size:24px;line-height:1.22;letter-spacing:-.02em}
  body[data-page="home"] .top-nav a.active,body[data-page="home"] .top-nav .account-entry{display:inline-flex}
  .hub-hero:has(.hub-hero-brand-card){display:block}.hub-hero-brand-card{margin-top:20px;padding:17px;gap:14px}.hub-hero-brand-card img{width:68px;height:68px;flex-basis:68px;border-radius:18px}.hub-hero-brand-card strong{font-size:17px}.hub-hero-brand-card small{font-size:8px}
  body[data-page="home"] .series-list{grid-template-columns:1fr}
  body[data-page="home"] .series-row{grid-template-columns:78px minmax(0,1fr);gap:14px;padding:14px}
  body[data-page="home"] .series-visual{height:82px}body[data-page="home"] .series-visual img{width:52px;height:52px}
  body[data-page="home"] .series-copy h3{font-size:21px}
  body[data-page="home"] .foundation-series-list .series-row{grid-template-columns:78px minmax(0,1fr);padding:15px}
  body[data-page="home"] .foundation-series-list .series-visual{height:82px}
  body[data-page="home"] .foundation-series-list .series-visual img{width:52px;height:52px}
  body[data-page="home"] .foundation-series-list .series-copy h3{font-size:21px}
  body[data-page="home"] .foundation-series-list .series-meta{display:block}
  body[data-page="home"] .foundation-series-list .series-meta span{display:block;margin-top:4px}
  body[data-page="home"] .foundation-series-list .series-arrow{grid-column:2;margin-top:-4px}
}

@media (max-width: 768px) {
  .account-entry { min-width:62px; height:38px; padding:0 13px; }
  .login-shell { width:min(100% - 20px,540px); padding:16px 0 30px; }
  .login-back { margin:0 4px 14px; }
  .login-layout { display:block; min-height:0; border-radius:27px; }
  .login-brand-panel { padding:28px 24px 30px; }
  .login-logo span { width:42px; height:42px; border-radius:13px; font-size:21px; }
  .login-kicker { margin:35px 0 10px; font-size:12px; }
  .login-brand-panel h1 { font-size:36px; }
  .login-brand-panel > p:not(.login-kicker) { margin:15px 0 0; font-size:14px; line-height:1.7; }
  .login-brand-panel ul { display:none; }
  .login-card { padding:28px 23px 32px; }
  .login-card h2 { font-size:29px; }
  .account-entry span { display:none; }
  .account-entry.signed-in { min-width:42px; padding:0 6px; }
  .profile-header { min-height:62px; }
  .profile-header .brand small,.profile-header .top-nav a:first-child { display:none; }
  .profile-main { padding-top:4px; }
  .profile-hero { grid-template-columns:auto 1fr; gap:13px; padding:18px 16px; border-radius:20px; }
  .profile-avatar { width:68px; height:68px; border-width:5px; }
  .profile-identity h1 { margin-top:5px; font-size:24px; }
  .profile-identity p { font-size:12px; line-height:1.55; }
  .profile-actions { grid-column:1 / -1; }
  .profile-actions > * { width:100%; }
  .profile-stats { grid-template-columns:repeat(2,1fr); gap:9px; margin:12px 0; }
  .profile-stats article { padding:16px; border-radius:17px; }
  .profile-stats strong { font-size:27px; }
  .profile-grid { grid-template-columns:1fr; gap:12px; }
  .profile-card { padding:21px 18px; border-radius:21px; }
  .profile-progress-card { min-height:0; }
  .profile-card-heading h2 { font-size:21px; }
  .profile-progress-line { margin-top:28px; }
  .profile-continue { margin-top:25px; }
  .profile-products { grid-column:auto; }
  .profile-products-top { margin-top:10px; padding:18px 16px; }
  .profile-product-list { grid-template-columns:1fr 1fr; gap:8px; }
  .profile-product-list div { min-height:72px; padding:14px; }
  .login-default-avatar { width:58px; height:58px; margin-bottom:9px; }
}
/* 免费主题词表：不依赖封面图，使用清晰的文字信息卡。 */
.free-topic-section { background: linear-gradient(135deg, rgba(238,248,244,.92), rgba(255,249,241,.92)); }
.free-topic-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.free-topic-card { padding: 26px; border: 1px solid #d8ddd5; border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: 0 12px 30px rgba(35,62,53,.06); }
.free-topic-top,.free-topic-meta,.free-topic-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.free-topic-top { justify-content: space-between; color: #1f6454; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.free-topic-top strong { padding: 7px 11px; border-radius: 999px; background: #dff2e9; letter-spacing: 0; }
.free-topic-card h3 { margin: 22px 0 8px; color: #17213d; font-size: clamp(24px,2.3vw,34px); }
.free-topic-card p { min-height: 44px; margin: 0; color: #756f68; line-height: 1.7; }
.free-topic-meta { margin-top: 20px; color: #486b61; font-size: 13px; }
.free-topic-meta span { padding: 7px 10px; border-radius: 10px; background: #f1f6f3; }
.free-topic-actions { margin-top: 22px; }
.free-topic-actions a,.course-article-link { display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border-radius: 999px; background: #1f6454; color: #fff; font-weight: 800; text-decoration: none; }
.free-topic-actions .article-entry,.course-article-link { background: #fff; color: #1f6454; border: 1px solid #b9d4ca; }
.text-only-course-card { grid-template-columns: 1fr; }
.topic-text-course .course-hero-visual img,.topic-text-course .word-card > img { display: none; }
.topic-text-course .word-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.topic-text-course .word-card { min-height: 238px; padding: 50px 14px 12px; background: linear-gradient(160deg,#fffdfa 0%,#fff8f2 100%); }
.topic-text-course .word-card::before { content:"点击发音"; position:absolute; right:12px; top:11px; padding:5px 8px; border-radius:99px; color:#2f7868; background:#e7f4ef; font-size:8px; font-weight:900; letter-spacing:.05em; }
.topic-text-course .word-main { gap: 8px; }
.topic-text-course .word-main strong { font-size: clamp(21px, 1.75vw, 28px); }
.topic-text-course .word-meaning { min-height: 34px; margin-top: 7px; }
.topic-text-course .word-actions { padding-top: 9px; }
.topic-text-course .word-actions button { min-height: 36px; }
.course-article-link { width: fit-content; margin-top: 18px; }
@media (max-width: 720px) {
  .free-topic-list { grid-template-columns: 1fr; }
  .free-topic-card { padding: 21px; }
  .free-topic-card p { min-height: 0; }
  .topic-text-course .word-grid { display:block; }
  .topic-text-course .word-card { min-height: 350px; padding: 68px 17px 15px; }
  .topic-text-course .word-main strong { font-size: clamp(32px,9vw,44px); }
  .topic-text-course .word-main em { font-size:14px; }
  .topic-text-course .word-meaning { margin-top:14px; font-size:16px; }
  .topic-text-course .word-actions button { min-height:42px; }
}

/* 场景高频实用词独立首页 */
.practical-hub-page { background: radial-gradient(circle at 86% 10%,rgba(202,232,219,.45),transparent 28%),linear-gradient(180deg,#fbf7f0 0%,#f7f3ec 100%); }
.practical-hub-main { padding-bottom:64px; }
.practical-hero { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:34px;align-items:center;margin-top:12px;padding:58px 62px;border:1px solid #d4ddd5;border-radius:34px;background:linear-gradient(125deg,rgba(255,250,242,.98),rgba(228,245,238,.96));box-shadow:0 20px 48px rgba(38,70,59,.09);overflow:hidden;position:relative; }
.practical-hero::after { content:"";position:absolute;right:-80px;bottom:-130px;width:330px;height:330px;border:1px solid rgba(43,129,115,.12);border-radius:50%;box-shadow:0 0 0 44px rgba(43,129,115,.035),0 0 0 88px rgba(43,129,115,.025);pointer-events:none; }
.practical-hero-copy { position:relative;z-index:1; }
.practical-hero .eyebrow { color:#277e70;font-size:13px;font-weight:900;letter-spacing:.14em; }
.practical-hero h1 { margin:14px 0 18px;color:#15213b;font-size:clamp(48px,5vw,72px);line-height:1.08;letter-spacing:-.04em; }
.practical-hero p { max-width:700px;margin:0;color:#68645f;font-size:18px;line-height:1.8; }
.practical-hero-tags { display:flex;flex-wrap:wrap;gap:10px;margin-top:25px; }
.practical-hero-tags span { padding:9px 14px;border:1px solid rgba(39,126,112,.18);border-radius:999px;background:rgba(255,255,255,.7);color:#28695d;font-size:13px;font-weight:800; }
.practical-scene-card { position:relative;z-index:1;display:flex;min-height:300px;flex-direction:column;align-items:center;justify-content:center;padding:28px;border:1px solid rgba(39,126,112,.16);border-radius:28px;background:rgba(255,255,255,.76);text-align:center;box-shadow:0 16px 34px rgba(42,78,65,.08); }
.practical-scene-art { display:grid;width:126px;height:126px;place-items:center;margin-bottom:18px;border-radius:32px;background:#eef7f2; }
.practical-scene-art img { width:102px;height:102px;object-fit:contain; }
.practical-scene-card>span { color:#d34d46;font-size:11px;font-weight:900;letter-spacing:.16em; }
.practical-scene-card>strong { margin-top:6px;color:#17213d;font-family:var(--serif);font-size:34px; }
.practical-scene-card>small { margin-top:8px;color:#746c63;font-size:14px; }
.practical-map-card { position:relative;z-index:1;display:flex;min-height:300px;flex-direction:column;align-items:center;justify-content:center;padding:30px 24px;border:1px solid rgba(39,126,112,.16);border-radius:28px;background:rgba(255,255,255,.76);text-align:center;box-shadow:0 16px 34px rgba(42,78,65,.08); }
.practical-map-kicker { color:#d34d46;font-size:10px;font-weight:900;letter-spacing:.15em; }
.practical-map-card>strong { margin-top:9px;color:#17213d;font-family:var(--serif);font-size:31px; }
.practical-map-nodes { display:flex;max-width:260px;flex-wrap:wrap;justify-content:center;gap:9px;margin:22px 0 18px; }
.practical-map-nodes span { display:grid;min-width:70px;height:42px;place-items:center;border:1px solid rgba(39,126,112,.18);border-radius:14px;background:linear-gradient(145deg,#f8fcfa,#e7f4ee);color:#28695d;font-size:14px;font-weight:900;box-shadow:0 6px 14px rgba(40,105,93,.06); }
.practical-map-nodes span:first-child { border-color:rgba(211,77,70,.2);background:linear-gradient(145deg,#fff8f4,#fce9df);color:#c64c45; }
.practical-map-card>small { color:#746c63;font-size:13px; }
.practical-value-strip { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px; }
.practical-value-strip>div { display:flex;align-items:center;gap:15px;padding:20px 22px;border:1px solid #e1d8cc;border-radius:20px;background:rgba(255,255,255,.78); }
.practical-value-strip b { color:#da5a50;font-family:var(--serif);font-size:24px; }
.practical-value-strip span { display:grid;gap:4px; }.practical-value-strip strong { color:#17213d;font-size:16px; }.practical-value-strip small { color:#817870;font-size:12px; }
.practical-course-section { margin-top:38px;padding:32px;border:1px solid #e1d8cc;border-radius:28px;background:rgba(255,255,255,.6); }
.practical-course-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px; }
.practical-course-card { display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center;padding:20px;border:1px solid #ded6ca;border-radius:24px;background:#fffdf9;color:inherit;text-decoration:none;transition:.2s ease; }
.practical-course-card:hover { transform:translateY(-2px);box-shadow:0 14px 30px rgba(43,57,50,.09); }
.practical-course-cover { position:relative;display:grid;height:112px;place-items:center;border-radius:22px;background:#eaf6f1; }
.practical-course-cover img { width:86px;height:86px;object-fit:contain; }.practical-course-cover>span { position:absolute;right:8px;bottom:8px;padding:5px 8px;border-radius:999px;background:#fff;color:#236b5e;font-size:11px;font-weight:900; }
.practical-course-copy { min-width:0; }.practical-course-top { display:flex;align-items:center;justify-content:space-between;gap:12px; }.practical-course-top>span { color:#287c6e;font-size:12px;font-weight:900;letter-spacing:.1em; }.practical-course-top>strong { padding:7px 11px;border-radius:999px;background:#e2f3eb;color:#236b5e;font-size:12px; }
.practical-course-copy h3 { margin:9px 0 6px;color:#17213d;font-size:24px; }.practical-course-copy>p { min-height:46px;margin:0;color:#756e67;font-size:14px;line-height:1.65; }.practical-course-meta { display:flex;gap:8px;margin:12px 0 10px;flex-wrap:wrap; }.practical-course-meta span { padding:6px 9px;border-radius:9px;background:#f3f5f1;color:#526a61;font-size:11px; }.practical-course-copy>small { display:block;margin-top:7px;color:#817970; }
.practical-course-enter { grid-column:2;color:#226c5f;font-size:14px;font-weight:900;white-space:nowrap; }
.speaking-bridge { display:flex;align-items:center;justify-content:space-between;gap:34px;margin:34px 0 18px;padding:30px 34px;border:1px solid rgba(222,111,76,.24);border-radius:26px;background:linear-gradient(120deg,#fffaf5 0%,#fff1ea 56%,#eef7f2 100%);box-shadow:0 14px 34px rgba(62,72,65,.07); }
.speaking-bridge[hidden] { display:none; }
.speaking-bridge-copy { min-width:0; }
.speaking-bridge-copy>span { color:#2c7b69;font-size:12px;font-weight:900;letter-spacing:.12em; }
.speaking-bridge-copy h2 { margin:9px 0 8px;color:#17213d;font-size:28px;line-height:1.25; }
.speaking-bridge-copy p { max-width:760px;margin:0;color:#68645f;font-size:15px;line-height:1.7; }
.speaking-bridge-copy small { display:block;margin-top:8px;color:#8b8178;font-size:12px; }
.speaking-bridge>a { flex:0 0 auto;padding:15px 20px;border-radius:16px;background:#e46f4c;color:#fff;text-decoration:none;font-size:15px;font-weight:900;box-shadow:0 9px 20px rgba(228,111,76,.18); }
.speaking-bridge>a b { margin-left:7px; }
@media(max-width:768px){
  .practical-hero{display:block;margin-top:4px;padding:31px 22px;border-radius:25px}.practical-hero h1{font-size:39px}.practical-hero p{font-size:15px;line-height:1.7}.practical-hero-tags{margin-top:19px;gap:7px}.practical-hero-tags span{padding:7px 10px;font-size:11px}.practical-scene-card{min-height:0;margin-top:24px;padding:19px;display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto auto;text-align:left;column-gap:15px}.practical-scene-art{grid-row:1/4;width:76px;height:76px;margin:0;border-radius:20px}.practical-scene-art img{width:62px;height:62px}.practical-scene-card>strong{font-size:26px}.practical-scene-card>small{margin-top:2px}.practical-map-card{min-height:0;margin-top:24px;padding:20px 16px}.practical-map-card>strong{font-size:25px}.practical-map-nodes{max-width:none;margin:16px 0 14px;gap:7px}.practical-map-nodes span{min-width:55px;height:36px;font-size:12px}.practical-value-strip{grid-template-columns:1fr;gap:8px}.practical-value-strip>div{padding:15px 17px}.practical-course-section{margin-top:24px;padding:21px 14px;border-radius:22px}.practical-course-list{grid-template-columns:1fr}.practical-course-card{grid-template-columns:90px minmax(0,1fr);gap:14px;padding:15px}.practical-course-cover{height:94px;border-radius:19px}.practical-course-cover img{width:72px;height:72px}.practical-course-copy h3{font-size:22px}.practical-course-copy>p{min-height:0;font-size:13px}.practical-course-meta span:nth-child(2){display:none}.practical-course-enter{grid-column:2;font-size:13px}.practical-course-top>span{font-size:10px}.practical-course-top>strong{font-size:10px;padding:5px 8px}.speaking-bridge{display:block;margin:24px 0 14px;padding:22px 19px;border-radius:21px}.speaking-bridge-copy h2{font-size:23px}.speaking-bridge-copy p{font-size:14px}.speaking-bridge>a{display:block;margin-top:17px;text-align:center}
}