/* Course storefront: horizontal discovery and cover-first cards. */
:root { --content-max-width:1280px; --page-gutter:max(24px,calc((100% - var(--content-max-width))/2)); --paper:#f6f7fa; --surface:#fff; --surface-2:#f2f3f6; --ink:#202332; --muted:#858998; --line:#eceef2; --accent:#f04444; --accent-strong:#dc3038; --accent-soft:#fff0f0; --gift:#ed6535; --gift-soft:#fff1e8; --shadow:0 12px 40px #20233212; --sidebar:0px; }
[data-theme="dark"] { --paper:#151823; --surface:#202432; --surface-2:#292e3d; --ink:#f3f4f9; --muted:#a8adbd; --line:#343a4b; --accent:#ff6868; --accent-strong:#ff9292; --accent-soft:#3c2831; --gift:#ffab77; --gift-soft:#3e302a; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.sidebar { position:relative; inset:auto; width:100%; padding:0 var(--page-gutter); height:76px; flex-direction:row; align-items:center; gap:42px; border:0; border-bottom:1px solid var(--line); background:var(--surface); backdrop-filter:none; }
.brand { padding:0; gap:10px; flex-shrink:0; }
.brand__mark { background:var(--accent); border-radius:11px 11px 11px 2px; font:800 24px/1 inherit; width:42px;height:42px; }
.brand strong { font-size:20px; letter-spacing:-.6px; }
.brand span { display:none; }
.category-nav { display:flex; align-items:center; gap:24px; overflow:visible; flex:0 1 auto; }
.category-nav>.nav-item { width:auto; padding:25px 4px; border-radius:0; font-size:15px; white-space:nowrap; position:relative; }
.category-nav>.nav-item.is-active { background:transparent; color:var(--accent); }
.category-nav>.nav-item.is-active::after { content:''; position:absolute; bottom:0; left:20%; width:60%; height:3px; background:var(--accent); border-radius:3px; }
.nav-count,.category-nav>.nav-item>span:last-child:not(:first-child),.nav-heading,.sidebar__foot,#category-list { display:none; }
.workspace { margin:0; }
.topbar { position:absolute; top:16px; right:var(--page-gutter); height:44px; padding:0; border:0; background:transparent; backdrop-filter:none; z-index:31; }
.search-wrap { width:260px; background:var(--surface-2); border-color:transparent; border-radius:24px; height:40px; }
.search-wrap input { font-size:12px; }
.search-wrap kbd,.mobile-only { display:none; }
.topbar .icon-button { width:36px;height:36px;border:0;background:transparent; }
.visitor-contact { left: 16px; right: auto; }
#main-content { width:calc(100% - 2 * var(--page-gutter)); margin:0 var(--page-gutter); padding:28px 0 130px; }
.hero { position:relative; overflow:hidden; min-height:218px; padding:38px 42px; border:0; border-radius:18px; align-items:center; background:linear-gradient(110deg,#fff0ed 0%,#fff5f0 44%,#eef0ff 100%); }
.hero::after { content:'学'; position:absolute; right:310px; top:3px; width:190px; height:190px; display:grid;place-items:center; border-radius:42px; transform:rotate(-13deg); font-size:114px; font-weight:900; color:#fff; background:linear-gradient(140deg,#fb8d73,#ffbd9c); opacity:.32; box-shadow:22px 18px 0 #fff8; pointer-events:none; }
.hero.is-gifts { background:linear-gradient(110deg,#fff4ea 0%,#fff8f2 46%,#f3f0ff 100%); }
.hero.is-gifts::after { content:'VIP'; font-size:64px; background:linear-gradient(140deg,#f08a4b,#ffc08a); }
.hero.is-gifts .eyebrow { color:#e07a32; }
.hero>div { z-index:1; }
.hero .eyebrow { color:#e56858;font-size:11px;letter-spacing:1.5px; }
.hero h1 { font:800 36px/1.3 inherit; font-family:inherit; font-size:36px;font-weight:800;letter-spacing:-1px;color:#292b3e; }
.hero p:last-child { margin-top:12px;font-size:14px;color:#8b7d7d;max-width:570px; }
.catalog-stats { position:relative;z-index:1; gap:18px; }
.catalog-stats div { background:#ffffffa8; border:1px solid #fff; min-width:70px;padding:16px 13px;text-align:center;border-radius:12px; }
.catalog-stats dd { font-family:inherit;font-size:26px;font-weight:800;color:#424766; }
.catalog-stats dt { color:#878799; }
.filters { margin-top:24px;padding:22px 24px;background:var(--surface);border-radius:12px;gap:20px; }
.filters label { display:flex;align-items:center;gap:10px;font-size:13px; }
.filters select { min-width:118px;border:0;background:var(--surface-2);height:35px;border-radius:6px; }
.filters .text-button { border:0;color:var(--muted); }
.results-heading { margin:30px 0 20px;align-items:center; }
.results-heading h2 { font-family:inherit;font-size:22px;font-weight:750; }
.section-caption { font-size:12px;font-weight:400;color:var(--muted);margin-left:20px; }
.course-list { grid-template-columns:repeat(4,minmax(0,1fr));gap:22px; }
.course-card { border:0;border-radius:12px;box-shadow:0 4px 14px #18233f05; }
.course-card:hover { transform:translateY(-5px);box-shadow:0 12px 28px #18233f18; }
.course-card__hit { display:flex;flex-direction:column;align-items:stretch;padding:0;gap:0;height:100%; }
.course-cover { display:block;width:100%;aspect-ratio:16/9;border-radius:0;position:relative; }
.course-card__body { padding:16px;gap:9px;flex:1; }
.course-code { font-size:10px;color:var(--muted);font-weight:500; }
.course-card__top { justify-content:space-between; }
.course-name { white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px;line-height:1.5;font-size:16px;font-weight:700; }
.course-summary { font-size:12px; }
.course-meta { font-size:11px; }
.course-tags { display:none; }
.course-arrow { display:none; }
.course-purchase { display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:13px;border-top:1px solid var(--line); }
.course-purchase strong { color:var(--accent);font-size:17px; }
.course-purchase>span { font-size:11px;color:var(--muted); }
.badge { font-size:10px;border-radius:4px;padding:3px 6px; }
.badge--complete { color:#247348; background:#e7f6ec; }
.badge--syncing { color:#9a5b12; background:#fff4df; }
.detail-badges .badge--complete, .detail-badges .badge--syncing { border-radius:999px; padding:5px 10px; font-size:12px; font-weight:750; }
.cover-generated { background:linear-gradient(115deg,#364da4,#7c8fe5);color:#fff; }
.cover-generated[data-palette="1"] { background:linear-gradient(115deg,#087681,#31b5b4); }
.cover-generated[data-palette="2"] { background:linear-gradient(115deg,#7241bd,#ad83df); }
.cover-generated[data-palette="3"] { background:linear-gradient(115deg,#bc4f37,#ef9471); }
.cover-generated[data-palette="4"] { background:linear-gradient(115deg,#27384e,#6e88a3); }
.cover-generated[data-palette="5"] { background:linear-gradient(115deg,#b47728,#e7b568); }
.cover-generated::after { content:'';position:absolute;right:-20px;bottom:-42px;width:170px;height:170px;border:28px solid #ffffff16;border-radius:50%; }
.cover-caption { position:absolute;inset:19px 20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;z-index:1; }
.cover-caption small { font-size:9px;letter-spacing:1px;opacity:.75; }
.cover-caption b { font-size:22px;line-height:1.3;max-width:95%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.state-card { grid-column:1/-1; }
.detail-title,.detail-section h2,.copy-dialog h2,.access-card h1 { font-family:inherit;font-weight:750; }
.course-detail { width:min(880px,95vw); }
.gift-selection { left:var(--page-gutter);right:var(--page-gutter);max-width:none;margin:0;border-color:var(--line);border-radius:12px; }
.gift-selection strong span { display:inline; }
.gift-copy,.gift-select-button.is-selected { background:var(--accent); }
.gift-select-button { border-color:var(--accent);color:var(--accent);background:var(--accent-soft); }
.filters { gap:14px; padding:20px 24px; border:1px solid var(--line); box-shadow:0 2px 8px #20233203; }
.filters label { position:relative; display:grid; gap:8px; color:var(--muted); font-size:11px; font-weight:500; }
.filters label::after { content:''; position:absolute; right:15px; bottom:18px; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); pointer-events:none; }
.filters select { appearance:none; -webkit-appearance:none; width:164px; min-width:0; height:42px; padding:0 38px 0 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:500; cursor:pointer; transition:border-color .15s,box-shadow .15s,background .15s; }
.filters select:hover { border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); background:color-mix(in srgb,var(--accent-soft) 35%,var(--surface)); }
.filters select:focus-visible { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent); }
.filters label:has(option:checked:not(:first-child)) { color:var(--accent); }
.filters select:has(option:checked:not(:first-child)) { border-color:color-mix(in srgb,var(--accent) 25%,var(--line)); background:var(--accent-soft); color:var(--accent-strong); }
.filters option { color:var(--ink); background:var(--surface); }
.filters .text-button { height:42px; padding:0 12px; font-size:12px; border-radius:10px; }
.filters .text-button:hover { color:var(--accent); background:var(--accent-soft); }
@media(max-width:760px) {
  .filters label select { width:100%; min-height:44px; padding:0 32px 0 12px; font-size:12px; }
  .filters label::after { right:14px; bottom:19px; }
  .filters label { min-width:0; }
}
@media(max-width:1100px) { .sidebar{gap:20px}.brand strong{font-size:17px}.search-wrap{width:190px}.category-nav{gap:12px}.hero::after{right:240px}.course-list{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-stats{gap:7px} }
@media(max-width:760px) { :root{--page-gutter:14px}.sidebar{height:auto;min-height:112px;padding:18px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;transform:none;box-shadow:none}.brand strong{font-size:19px}.brand__mark{width:34px;height:34px}.category-nav{gap:26px}.category-nav>.nav-item{padding:10px 0 14px;font-size:14px}.topbar{top:16px;right:12px;height:36px;padding:0}.search-wrap{width:145px;height:34px}.search-wrap input{font-size:10px}.topbar .icon-button{display:none}#main-content{width:calc(100% - 28px);padding:16px 0 140px}.hero{min-height:176px;padding:24px 20px;gap:14px;flex-direction:row;align-items:center}.hero h1{font-size:25px;max-width:230px}.hero p:last-child{font-size:11px;max-width:230px}.hero .eyebrow{font-size:8px;letter-spacing:.6px}.hero::after{right:-45px;top:20px;width:150px;height:150px;font-size:90px}.catalog-stats{display:none}.filters{margin-top:15px;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.filters label{font-size:11px;gap:6px}.filters select{min-width:0;width:100%;font-size:11px;padding-right:8px}.filters .text-button{grid-column:1/-1;justify-self:end;min-height:24px;padding:0;font-size:11px}.results-heading{flex-direction:row;align-items:center;margin:24px 0 14px}.results-heading h2{font-size:19px}.results-heading p{font-size:10px}.section-caption{display:none}.course-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.course-card__body{padding:11px;gap:7px}.course-card__hit{padding:0;gap:0}.course-name{font-size:13px;min-height:40px}.course-summary{display:none}.course-meta{font-size:9px}.course-code{font-size:8px}.badge{font-size:8px;padding:2px 4px}.course-purchase strong{font-size:14px}.course-purchase>span{font-size:9px}.cover-caption{inset:12px}.cover-caption b{font-size:16px}.cover-caption small{font-size:7px}.course-detail{width:100%}.gift-selection{left:10px;right:10px}.gift-selection>div{flex:1 0 100%} }
.badge--pinned { background:#fff0ee; color:#d84137; }
.badge--recommended { background:#fff4df; color:#9a6619; }
.course-card__top { flex-wrap:wrap; }
.course-badges { flex-wrap:wrap; }