:root {
  --bg: #f8faf9;
  --paper: #ffffff;
  --ink: #333333;
  --muted: #6b7471;
  --line: #e7ece9;
  --sage: #98c2a8;
  --sage-deep: #5c9a7a;
  --sky: #87cefa;
  --blue-deep: #5792c8;
  --peach: #fadadd;
  --coral: #ffa07a;
  --cream: #fffaf0;
  --shadow: 0 16px 48px rgba(66, 93, 82, .08);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Segoe UI", "Microsoft YaHei", sans-serif; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { background: rgba(253, 253, 253, .9); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); }
.header-inner { max-width: 1220px; min-height: 74px; margin: auto; padding: 0 28px; display: flex; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 11px; line-height: 1.15; white-space: nowrap; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: .02em; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 4px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #244236; background: var(--sage); font-size: 12px; font-weight: 800; letter-spacing: .06em; box-shadow: inset 0 -4px rgba(51, 51, 51, .08); }
.main-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; color: var(--muted); font-size: 13px; }
.main-nav a { padding: 8px 0; }
.main-nav a:hover, .main-nav .active { color: var(--ink); }
.main-nav .active { border-bottom: 2px solid var(--sage-deep); }
.nav-cta { border: 1px solid #b7d3c0; border-radius: 10px; color: #3f7759 !important; padding: 9px 15px !important; background: #f1f8f3; }
.header-tools { margin-left: auto; display: flex; align-items: center; gap: 15px; }
.header-search { width: 190px; height: 36px; border: 1px solid var(--line); background: #fff; border-radius: 11px; display: flex; align-items: center; padding: 0 10px; color: #a2aaa7; }
.header-search input { border: 0; outline: 0; width: 100%; background: transparent; font-size: 12px; }
.notification { color: var(--muted); font-size: 20px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; background: var(--peach); border-radius: 50%; color: #9b5c63; font-weight: 700; }
.logout-button { border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.menu-toggle { display: none; margin-left: auto; border: 0; background: transparent; font-size: 20px; color: var(--ink); }

.flash-stack { position: fixed; top: 88px; right: 24px; z-index: 20; display: grid; gap: 8px; }
.flash { border: 1px solid var(--line); border-radius: 12px; padding: 11px 16px; background: var(--paper); box-shadow: var(--shadow); font-size: 13px; }
.flash-success { border-color: #badbc6; color: #45785b; }
.flash-error { border-color: #f0c3b7; color: #9a5948; }
.flash-info { border-color: #c1def2; color: #4d7c9b; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 44px; border: 1px solid transparent; border-radius: 11px; padding: 0 18px; font-size: 13px; font-weight: 700; transition: transform .2s, box-shadow .2s, opacity .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(69, 89, 80, .11); }
.button-primary { background: var(--sage); color: #244236; }
.button-dark { background: #333; color: #fff; }
.button-outline { border-color: #bbd8c5; background: #f7fcf8; color: #44745a; }
.button-muted { background: #edf2ef; color: #65716b; }
.text-link { color: #578f73; font-size: 13px; font-weight: 700; }
.text-link span, .button span { font-size: 17px; }
.eyebrow { margin: 0 0 12px; color: #66967b; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.site-footer { margin-top: 80px; border-top: 1px solid var(--line); background: #f4f8f5; }
.footer-inner { max-width: 1220px; padding: 24px 28px; margin: auto; display: flex; justify-content: space-between; gap: 30px; font-size: 12px; }
.footer-inner strong, .footer-inner span { display: block; }
.footer-inner span { color: var(--muted); margin-top: 4px; }
.footer-meta { display: flex; gap: 18px; align-items: center; }

.welcome-hero { max-width: 1220px; margin: auto; min-height: 575px; padding: 86px 28px 70px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
.welcome-copy { max-width: 540px; }
.welcome-copy h1 { font-size: clamp(40px, 5.3vw, 70px); line-height: 1.08; letter-spacing: -.045em; margin: 0 0 22px; font-weight: 800; }
h1 em { font-style: normal; color: #639c7c; }
.welcome-copy > p:not(.eyebrow) { max-width: 465px; color: var(--muted); font-size: 16px; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; margin-top: 31px; }
.welcome-trust { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 48px; color: #729181; font-size: 11px; }
.welcome-visual { position: relative; width: 440px; aspect-ratio: 1; justify-self: end; }
.visual-orbit { position: absolute; inset: 13%; border: 1px solid #cde7d5; border-radius: 50%; transform: rotate(24deg) scaleX(.78); }
.orbit-two { inset: 7%; transform: rotate(-49deg) scaleX(.75); border-color: #cbe2f3; }
.visual-core { position: absolute; inset: 29%; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 50%; background: #e4f3ea; border: 12px solid #fff; box-shadow: 0 22px 48px rgba(81, 135, 103, .13); color: #477d5d; }
.visual-core span { font-size: 50px; font-weight: 800; letter-spacing: -.08em; }
.visual-core small { font-size: 7px; font-weight: 800; letter-spacing: .15em; line-height: 1.45; }
.visual-tag { position: absolute; padding: 8px 13px; border: 1px solid #e2e9e5; border-radius: 12px; background: #fff; box-shadow: 0 9px 22px rgba(72, 104, 87, .1); color: #5c7166; font-size: 12px; font-weight: 700; }
.tag-one { top: 15%; right: 4%; background: #e9f7ef; }
.tag-two { left: 0; top: 54%; background: #eff8fe; color: #5580a0; }
.tag-three { bottom: 14%; right: 13%; background: #fff2ed; color: #9f6d5c; }
.landing-section, .path-preview { max-width: 1164px; margin: 0 auto; padding: 85px 28px; }
.section-heading h2, .path-preview h2 { font-size: 34px; line-height: 1.2; margin: 0; letter-spacing: -.03em; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 45px; }
.feature-grid article { min-height: 210px; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.feature-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; font-size: 12px; font-weight: 800; }
.icon-sage { background: #e4f2e8; color: #5e9776; }.icon-blue { background: #e8f4fc; color: #5b8cb5; }.icon-peach { background: #fff0ef; color: #b8776b; }
.feature-grid h3 { margin: 24px 0 8px; font-size: 18px; }.feature-grid p, .path-preview p { color: var(--muted); font-size: 13px; margin: 0; }
.path-preview { margin-top: 20px; border-radius: var(--radius); background: #eaf5fb; display: flex; justify-content: space-between; gap: 42px; align-items: center; }
.path-line { min-width: 430px; display: flex; align-items: center; }.path-node { width: 39px; height: 39px; border: 2px solid #b8d8ec; color: #6392b4; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: #f5fbff; }.path-node.done { background: var(--sky); border-color: var(--sky); color: #3e718d; }.path-line i { flex: 1; height: 2px; background: #c5deec; }

.auth-page { min-height: calc(100vh - 154px); max-width: 1000px; margin: auto; padding: 60px 28px; display: grid; grid-template-columns: 1fr .7fr; align-items: stretch; }
.auth-panel { padding: 23px 45px 35px; background: #fff; border: 1px solid var(--line); border-radius: 22px 0 0 22px; box-shadow: var(--shadow); }.auth-back { color: var(--muted); font-size: 12px; }.auth-brand { margin: 45px 0 30px; display: flex; align-items: center; gap: 10px; }.auth-brand strong, .auth-brand small { display: block; }.auth-brand strong { font-size: 14px; }.auth-brand small { color: var(--muted); font-size: 11px; margin-top: 3px; }.auth-panel h1 { font-size: 29px; margin: 0 0 8px; }.auth-intro { color: var(--muted); font-size: 13px; margin: 0 0 26px; }.auth-form { display: grid; gap: 16px; }.auth-form label { display: grid; gap: 6px; font-size: 12px; color: #58645e; font-weight: 700; }.auth-form input { height: 44px; border: 1px solid #dfe8e2; border-radius: 10px; padding: 0 13px; outline-color: var(--sage); color: var(--ink); }.auth-submit { width: 100%; margin-top: 7px; }.auth-switch { color: var(--muted); text-align: center; font-size: 12px; margin: 21px 0 0; }.auth-switch a { color: #578f73; font-weight: 700; }.auth-aside { border-radius: 0 22px 22px 0; padding: 45px; background: #dff0e6; display: flex; flex-direction: column; justify-content: space-between; }.aside-quote { color: #3c7455; font-size: 31px; line-height: 1.35; font-weight: 700; letter-spacing: -.04em; }.aside-stats { display: flex; gap: 30px; color: #67917a; font-size: 11px; }.aside-stats b { display: block; color: #477b5e; font-size: 26px; }

.dashboard-page { max-width: 1220px; margin: auto; padding: 52px 28px 10px; }.dashboard-greeting { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 33px; }.dashboard-greeting h1 { margin: 0 0 5px; font-size: 30px; letter-spacing: -.035em; }.dashboard-greeting h1 span { color: var(--coral); font-size: 21px; }.dashboard-greeting p:not(.eyebrow) { color: var(--muted); font-size: 13px; margin: 0; }.dashboard-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 17px; }.continue-card, .stat-card { min-height: 230px; border: 1px solid var(--line); border-radius: var(--radius); padding: 27px; }.continue-card { display: flex; justify-content: space-between; gap: 18px; background: #dff1fb; border-color: #d5eaf5; }.continue-copy { max-width: 370px; }.card-label { display: block; color: #688276; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.continue-card h2 { margin: 22px 0 8px; font-size: 25px; letter-spacing: -.035em; }.continue-card p { margin: 0 0 18px; color: #648090; font-size: 12px; }.ring-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 118px; color: #6590a8; font-size: 11px; }.progress-ring { width: 94px; height: 94px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--blue-deep) var(--progress), #cde3ef 0); position: relative; margin-bottom: 10px; }.progress-ring::after { content: ""; position: absolute; inset: 8px; background: #dff1fb; border-radius: 50%; }.progress-ring span { position: relative; z-index: 1; color: #4a7792; font-size: 21px; font-weight: 800; }.progress-ring small { font-size: 11px; }.stat-card { background: #fff; }.stat-sage { background: #eff8f1; border-color: #dceee1; }.stat-card > strong { display: block; margin-top: 16px; font-size: 38px; letter-spacing: -.06em; }.stat-card > strong small { color: var(--muted); font-size: 13px; letter-spacing: 0; }.stat-card p { color: var(--muted); font-size: 11px; margin: 11px 0 0; }.mini-bars { height: 48px; margin-top: 22px; display: flex; align-items: end; gap: 7px; }.mini-bars i { width: 11px; border-radius: 4px 4px 2px 2px; background: #d8e9df; }.mini-bars i.active { background: var(--sage-deep); }.week-dots { display: flex; gap: 9px; margin-top: 29px; }.week-dots i { width: 13px; height: 13px; border-radius: 50%; background: #d8e7dc; }.week-dots i.filled { background: var(--sage-deep); }.dashboard-section { margin-top: 57px; }.section-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 19px; }.section-title h2 { margin: 0; font-size: 23px; letter-spacing: -.035em; }.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }.course-card { padding: 21px; min-height: 191px; border: 1px solid transparent; border-radius: 18px; transition: transform .2s, box-shadow .2s; }.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.tone-mint { background: #e4f2e8; border-color: #d9ecdf; }.tone-apricot { background: #fff0e6; border-color: #f8e4d6; }.tone-sky { background: #e8f4fc; border-color: #daeaf4; }.tone-lavender { background: #efedfa; border-color: #e3e0f2; }.tone-lemon { background: #fff9df; border-color: #f6efcf; }.tone-rose { background: #fff0f0; border-color: #f2dfe0; }.course-card-top { display: flex; justify-content: space-between; color: #6d8c7a; font-size: 12px; }.course-card-top b { font-size: 17px; font-weight: 400; }.course-card h3 { margin: 23px 0 7px; font-size: 17px; }.course-card p { min-height: 40px; color: #6b7570; font-size: 11px; margin: 0; }.course-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; color: #718078; font-size: 10px; }.course-status { padding: 3px 8px; border-radius: 20px; background: rgba(255, 255, 255, .62); }.recent-list { border-top: 1px solid var(--line); }.recent-list a { display: flex; align-items: center; gap: 18px; padding: 16px 9px; border-bottom: 1px solid var(--line); }.recent-list a:hover { background: #fff; }.recent-code { width: 38px; color: #67937a; font-size: 12px; font-weight: 800; }.recent-list strong, .recent-list small { display: block; }.recent-list strong { font-size: 13px; }.recent-list small { color: var(--muted); font-size: 11px; }.recent-list b { margin-left: auto; color: #8ea299; font-size: 18px; font-weight: 400; }

.page-heading { max-width: 1220px; margin: auto; padding: 70px 28px 44px; }.page-heading h1 { margin: 0 0 13px; font-size: 43px; letter-spacing: -.045em; }.page-heading > p:last-child { max-width: 620px; color: var(--muted); font-size: 14px; }.catalog-layout { max-width: 1220px; margin: auto; padding: 0 28px; display: grid; grid-template-columns: 220px 1fr; gap: 45px; }.aside-sticky { position: sticky; top: 100px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }.aside-label { display: block; color: #66967b; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.aside-sticky p { color: var(--muted); font-size: 12px; margin: 13px 0 20px; }.catalog-unit { border-top: 3px solid var(--sage); margin-bottom: 42px; }.tone-line-apricot { border-color: var(--coral); }.tone-line-sky { border-color: var(--sky); }.tone-line-lavender { border-color: #b6afe0; }.tone-line-lemon { border-color: #e1c95c; }.tone-line-rose { border-color: #e3a0a3; }.catalog-unit-head { display: flex; align-items: center; gap: 18px; padding: 21px 0; }.catalog-unit-head .unit-number { color: #75a488; font-size: 13px; font-weight: 800; }.catalog-unit-head h2 { margin: 0; font-size: 22px; }.catalog-unit-head p { color: var(--muted); margin: 3px 0 0; font-size: 12px; }.catalog-total { margin-left: auto; color: var(--muted); font-size: 11px; }.catalog-lesson { display: grid; grid-template-columns: 50px 1fr 60px 20px; gap: 15px; align-items: center; padding: 16px 15px; border-top: 1px solid var(--line); }.catalog-lesson:hover { background: #fff; }.catalog-lesson > span { color: #69967b; font-size: 12px; font-weight: 800; }.catalog-lesson strong { font-size: 13px; }.catalog-lesson small { color: var(--muted); font-size: 11px; }.catalog-lesson b { color: #94a29b; font-weight: 400; }

.lesson-shell { max-width: 1220px; margin: auto; padding: 46px 28px 10px; display: grid; grid-template-columns: 210px 1fr; gap: 65px; }.lesson-sidebar { min-width: 0; }.back-link { color: #64947a; font-size: 12px; }.sidebar-progress { padding: 24px 0; border-bottom: 1px solid var(--line); margin-bottom: 23px; }.sidebar-progress > span { display: block; color: var(--muted); font-size: 11px; }.sidebar-progress strong { display: block; margin-top: 5px; font-size: 22px; }.sidebar-progress strong i { color: #a3afaa; font-size: 13px; font-style: normal; }.progress-track { height: 5px; margin-top: 11px; background: #e1ece5; border-radius: 5px; }.progress-track span { height: 100%; display: block; background: var(--sage-deep); border-radius: inherit; }.lesson-nav { display: grid; gap: 3px; }.lesson-nav .aside-label { margin-bottom: 6px; }.lesson-nav a { display: grid; grid-template-columns: 33px 1fr; gap: 7px; padding: 8px 7px; border-radius: 8px; color: var(--muted); font-size: 11px; }.lesson-nav a:hover, .lesson-nav a.current { background: #eaf5ed; color: #427758; }.lesson-nav small { font-size: 10px; color: #7eab8e; }.lesson-content { max-width: 770px; }.lesson-kicker { display: flex; gap: 13px; color: #719886; font-size: 11px; }.lesson-kicker span + span::before { content: "·"; color: #bcc9c1; margin-right: 13px; }.lesson-header h1 { margin: 18px 0 15px; font-size: 43px; letter-spacing: -.05em; line-height: 1.18; }.lesson-objective { display: flex; gap: 14px; color: var(--muted); font-size: 14px; margin: 0; }.lesson-objective b { color: #4f7e61; white-space: nowrap; }.lesson-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }.lesson-keywords span { padding: 4px 9px; border-radius: 6px; background: #eef6f0; color: #609276; font-size: 10px; }.lesson-section { padding: 32px 0 5px; border-top: 1px solid var(--line); margin-top: 34px; }.lesson-section h2 { font-size: 20px; margin: 0 0 12px; }.lesson-section p { color: #596560; font-size: 14px; margin: 0 0 12px; }.lesson-section ul { margin: 13px 0 0; padding: 0 0 0 19px; color: #596560; font-size: 13px; }.practice-box { display: grid; grid-template-columns: 48px 1fr; gap: 17px; padding: 26px; border-radius: 18px; background: #e6f3fb; margin-top: 39px; }.practice-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #5586a4; background: #cce7f5; }.practice-box h2, .check-box h2 { margin: 0 0 5px; font-size: 20px; }.practice-box p:last-child { color: #597888; font-size: 13px; margin: 0; }.check-box { margin-top: 21px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }.check-box > div { display: inline-block; vertical-align: top; }.check-box ul { max-width: 520px; padding: 0; margin: 17px 0 20px; display: grid; gap: 11px; list-style: none; }.check-box li { display: flex; align-items: center; gap: 11px; color: #596560; font-size: 13px; }.check-square { width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid #c9ddd0; border-radius: 5px; background: #f7fcf8; }.check-square.checked { background: var(--sage); border-color: var(--sage); }.complete-button { min-height: 37px; font-size: 11px; }.lesson-next { display: flex; justify-content: space-between; gap: 25px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }.lesson-next span, .lesson-next a { display: block; }.lesson-next span { color: var(--muted); font-size: 10px; }.lesson-next a { margin-top: 4px; color: #578f73; font-size: 13px; font-weight: 700; }.next-align { text-align: right; }

.site-footer + * { margin-bottom: 0; }
@media (max-width: 860px) {
  .header-inner { padding: 0 18px; }.menu-toggle { display: block; }.main-nav, .header-tools { display: none; }.main-nav.is-open { position: absolute; display: grid; left: 15px; right: 15px; top: 66px; gap: 0; padding: 12px 18px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }.main-nav.is-open a { padding: 11px 0; }.header-tools { position: absolute; top: 66px; right: 15px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }.welcome-hero { grid-template-columns: 1fr; padding-top: 60px; }.welcome-visual { width: min(440px, 90vw); justify-self: center; order: -1; }.feature-grid { grid-template-columns: 1fr; }.path-preview { display: block; }.path-line { min-width: 0; margin-top: 30px; }.auth-page { grid-template-columns: 1fr; max-width: 560px; }.auth-panel { border-radius: 22px; }.auth-aside { display: none; }.dashboard-grid { grid-template-columns: 1fr 1fr; }.continue-card { grid-column: 1 / -1; }.course-grid { grid-template-columns: 1fr 1fr; }.catalog-layout { grid-template-columns: 1fr; }.catalog-aside { display: none; }.lesson-shell { grid-template-columns: 1fr; gap: 20px; }.lesson-sidebar { display: none; }
}
@media (max-width: 560px) {
  .footer-inner { display: block; }.footer-meta { margin-top: 16px; flex-wrap: wrap; }.welcome-hero, .landing-section, .path-preview, .dashboard-page, .page-heading, .catalog-layout, .lesson-shell { padding-left: 18px; padding-right: 18px; }.welcome-copy h1 { font-size: 42px; }.welcome-trust { display: grid; gap: 7px; margin-top: 30px; }.welcome-visual { width: 330px; }.dashboard-greeting { display: block; }.dashboard-greeting .button { margin-top: 17px; }.dashboard-grid { grid-template-columns: 1fr; }.continue-card { display: block; }.ring-wrap { align-items: flex-start; margin-top: 20px; }.course-grid { grid-template-columns: 1fr; }.page-heading h1 { font-size: 34px; }.catalog-lesson { grid-template-columns: 38px 1fr 18px; }.catalog-lesson small { display: none; }.lesson-header h1 { font-size: 34px; }.lesson-objective { display: block; }.lesson-objective b { display: block; margin-bottom: 4px; }.lesson-next { display: grid; }.next-align { text-align: left; }.auth-panel { padding: 22px; }.auth-brand { margin-top: 35px; }
}