/* =============================================================
   MotionSites × Webs.com.vn Design System V3
   Source DNA: Apple-inspired restraint + Plus Jakarta Sans
   Adaptation layer loaded AFTER the original MotionSites CSS.
   ============================================================= */

:root,
html[data-theme="light"]{
  --bg:#f5f5f7;
  --bg-elev:#ffffff;
  --surface:#ffffff;
  --surface-2:#f5f5f7;
  --surface-3:#e9e9ed;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --muted-2:#86868b;
  --line:#dfe0e4;
  --line-strong:#c8c9ce;
  --white:#ffffff;
  --ink:#1d1d1f;
  --accent:#0066cc;
  --success:#e8f8e8;
  --grad:linear-gradient(135deg,#0066cc 0%,#2997ff 100%);
  --gold:#0066cc;
  --gold-soft:#eaf3ff;
  --gold-deep:#004e9c;
  --ivory:#fbfbfd;
  --container:1250px;
  --content:1050px;
  --radius-sm:10px;
  --radius:22px;
  --radius-lg:32px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.025),0 10px 34px rgba(0,0,0,.045);
  --shadow-lg:0 30px 80px rgba(0,0,0,.11);
  --ease:cubic-bezier(.2,.72,.16,1);
}

/* Preserve the original theme switch, but keep Webs V3 geometry and color logic. */
html[data-theme="neutral"]{
  --bg:#f7f9fb;--bg-elev:#fff;--surface:#fff;--surface-2:#f0f4f7;--surface-3:#e5ebf0;
  --text:#172433;--muted:#617181;--muted-2:#8995a0;--line:#dbe2e8;--line-strong:#c4cfd7;
  --accent:#0066cc;--gold:#0066cc;--gold-soft:#eaf3ff;--gold-deep:#004e9c;--ivory:#fbfcfd;
  --shadow-sm:0 1px 2px rgba(20,35,50,.025),0 10px 34px rgba(20,35,50,.045);
  --shadow-lg:0 30px 80px rgba(20,35,50,.11);
}
html[data-theme="dark"]{
  --bg:#000;--bg-elev:#111113;--surface:#1d1d1f;--surface-2:#27272a;--surface-3:#333336;
  --text:#f5f5f7;--muted:#b8b8bd;--muted-2:#8e8e93;--line:#343438;--line-strong:#4b4b50;
  --accent:#2997ff;--gold:#2997ff;--gold-soft:#d9ecff;--gold-deep:#64adff;--ivory:#111113;
  --shadow-sm:0 1px 2px rgba(0,0,0,.22),0 10px 34px rgba(0,0,0,.16);
  --shadow-lg:0 30px 80px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html{scroll-padding-top:84px}
body,
html[data-theme="light"] body,
html[data-theme="neutral"] body,
html[data-theme="dark"] body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body:before,
html[data-theme] body:before{display:none!important}
.container{width:min(var(--container),calc(100% - 44px));margin:auto}

/* ---------- Navigation ---------- */
.topbar,
html[data-theme="light"] .topbar,
html[data-theme="neutral"] .topbar{
  height:28px;
  border-bottom:1px solid rgba(0,0,0,.045);
  background:#efeff1;
  color:#77777e;
  font-size:10px;
  letter-spacing:0;
}
html[data-theme="dark"] .topbar{background:#111113;color:#8e8e93;border-color:#2b2b2e}
.topbar b{color:var(--text)!important;font-weight:600}
.site-header,
html[data-theme] .site-header{
  position:sticky;top:0;z-index:80;
  border-bottom:1px solid rgba(0,0,0,.045);
  background:rgba(250,250,250,.88);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:none;
}
html[data-theme="dark"] .site-header{background:rgba(20,20,22,.86);border-color:#2b2b2e}
.nav{height:52px;gap:24px}
.brand{gap:8px;color:var(--text);font-size:17px;font-weight:600;letter-spacing:-.035em}
.brand-mark{
  width:23px;height:23px;border-radius:8px;
  background:var(--accent);
  box-shadow:none;
}
.brand-mark:after{width:7px;height:7px;margin:8px;border:0;background:#fff}
.navlinks{gap:4px;margin-left:4px}
.navlinks a,
html[data-theme] .navlinks a{
  padding:7px 9px;border-radius:999px;
  color:var(--muted);font-size:11.5px;font-weight:500;
}
.navlinks a:hover,.navlinks a.active,
html[data-theme] .navlinks a:hover,html[data-theme] .navlinks a.active{
  background:var(--surface-2);color:var(--text)
}
.navlinks sup{color:var(--accent);font-size:7px;font-weight:600}
.nav-actions{gap:7px}.hamb{color:var(--text)!important}
.theme-trigger{
  width:34px;height:34px;border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:none
}
.theme-trigger:hover{background:var(--surface-2)}

/* ---------- Buttons ---------- */
.btn,.card-action,.single-action,
html[data-theme] .btn,html[data-theme] .card-action,html[data-theme] .single-action{
  min-height:42px;
  padding:0 18px;
  border:1px solid var(--accent);
  border-radius:999px;
  background:transparent;
  color:var(--accent);
  font-size:12px;
  font-weight:500;
  letter-spacing:-.01em;
  box-shadow:none;
}
.btn:hover,.card-action:hover,.single-action:hover,
html[data-theme] .btn:hover,html[data-theme] .card-action:hover,html[data-theme] .single-action:hover{
  transform:none;background:#f2f7ff;border-color:var(--gold-deep);color:var(--gold-deep)
}
html[data-theme="dark"] .btn:hover,html[data-theme="dark"] .card-action:hover,html[data-theme="dark"] .single-action:hover{background:#13263c}
.btn.white,.single-action.primary,
html[data-theme] .btn.white,html[data-theme] .single-action.primary,
.btn.grad{
  background:var(--accent);border-color:var(--accent);color:#fff
}
.btn.white:hover,.single-action.primary:hover,.btn.grad:hover,
html[data-theme] .btn.white:hover,html[data-theme] .single-action.primary:hover{
  background:var(--gold-deep);border-color:var(--gold-deep);color:#fff
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:88px 0 64px;
  text-align:center;
  background:linear-gradient(180deg,#fff 0%,#fff 64%,var(--bg) 100%);
}
html[data-theme="neutral"] .hero{background:linear-gradient(180deg,#fff 0%,#fff 64%,var(--bg) 100%)}
html[data-theme="dark"] .hero{background:linear-gradient(180deg,#000 0%,#000 64%,var(--bg) 100%)}
.hero:before{display:none}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);font-size:11px;font-weight:600;
  letter-spacing:0;text-transform:none
}
.dot{width:6px;height:6px;background:#28cd41;box-shadow:none}
.hero h1{
  max-width:980px;
  margin:17px auto 20px;
  font-size:clamp(48px,5vw,68px);
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:600;
}
.hero h1 .accent{
  display:inline;
  background:none;
  color:var(--accent);
  -webkit-text-fill-color:currentColor;
}
.hero p{max-width:720px;color:var(--muted);font-size:17px;line-height:1.7}
.hero-actions{gap:10px;margin-top:28px}

/* ---------- Library toolbar ---------- */
.library{padding:16px 0 100px}
.library>.container{width:min(var(--container),calc(100% - 44px))}
.toolbar,
html[data-theme] .toolbar{
  position:sticky;top:64px;z-index:45;
  align-items:flex-end;gap:20px;
  margin-bottom:24px;padding:14px 16px;
  border:1px solid #e7e7eb;border-radius:22px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 12px 40px rgba(0,0,0,.04)
}
html[data-theme="dark"] .toolbar{background:rgba(29,29,31,.88);border-color:#343438}
.category-bar{gap:9px}.category-label{padding-left:2px;color:var(--muted);font-size:9px;font-weight:600;letter-spacing:.06em}.category-label:before{background:var(--accent)}
.tabs{gap:7px}
.chip,
html[data-theme] .chip{
  min-height:34px;padding:0 13px;
  border:1px solid #e5e5e8;border-radius:999px;
  background:#fff;color:var(--muted);
  font-size:11px;font-weight:500
}
html[data-theme="dark"] .chip{background:#1d1d1f;border-color:#3a3a3e}
.chip:hover,html[data-theme] .chip:hover{background:var(--surface-2);color:var(--text)}
.chip.active,html[data-theme] .chip.active{background:var(--text);border-color:var(--text);color:var(--bg)}
.search,
html[data-theme] .search{
  flex:0 0 255px;height:40px;
  padding:0 14px;
  border:1px solid #e3e3e7;border-radius:999px;
  background:#fff;color:var(--muted-2)
}
html[data-theme="dark"] .search{background:#1d1d1f;border-color:#3a3a3e}
.search input,html[data-theme] .search input{color:var(--text);font-size:12px;background:transparent}
.search input::placeholder{color:var(--muted-2)}

/* ---------- Prompt cards ---------- */
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.card,
html[data-theme] .card{
  overflow:hidden;
  border:1px solid #e9e9ec;
  border-radius:32px;
  background:#fff;
  box-shadow:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease
}
html[data-theme="dark"] .card{background:#1d1d1f;border-color:#343438}
.card:hover,html[data-theme] .card:hover{
  transform:translateY(-3px);
  border-color:#dedee2;
  box-shadow:0 20px 48px rgba(0,0,0,.06)
}
html[data-theme="dark"] .card:hover{border-color:#4a4a4f;box-shadow:0 20px 48px rgba(0,0,0,.24)}
.thumb{aspect-ratio:4/3;background:var(--surface-2);cursor:zoom-in}
.thumb img{transition:transform .35s ease}
.card:not(.is-expanded):hover .thumb img{transform:scale(1.012)}
.badge{
  top:16px;right:16px;
  padding:7px 10px;
  border:1px solid rgba(0,0,0,.07);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--muted);
  backdrop-filter:blur(12px);
  font-size:9px;font-weight:600
}
.badge.free{background:#eaf7ea;border-color:#d9efd9;color:#1b6f2a}
.card-body{min-height:83px;padding:18px 20px;gap:12px;align-items:center}
.card .meta{color:var(--muted);font-size:10px}
.card h3{margin:4px 0 0;color:var(--text);font-size:16px;line-height:1.35;font-weight:600;letter-spacing:-.025em}
.card-category-link{color:var(--muted)}.card-category-link:hover{color:var(--accent)!important}
.card-title-link:hover{text-decoration:none;color:var(--accent)}
.arrow{width:30px;height:30px;border:0;background:var(--surface-2);color:var(--accent)}

/* Expanded cards use the same Webs V3 surfaces, not a dark editor panel. */
.card.is-expanded,
html[data-theme] .card.is-expanded{
  grid-column:span 2;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr);
  min-height:430px;
  border-radius:32px;
  background:#fff;
  box-shadow:0 28px 70px rgba(0,0,0,.08)
}
html[data-theme="dark"] .card.is-expanded{background:#1d1d1f}
.card.is-expanded .thumb{min-height:430px;border-radius:31px 0 0 31px;background:var(--surface-2)}
.card.is-expanded .card-body,
html[data-theme] .card.is-expanded .card-body{
  min-height:430px;
  padding:30px 28px 25px;
  border-left:1px solid var(--line);
  background:var(--surface)
}
.card.is-expanded .meta{color:var(--muted);font-weight:600;letter-spacing:.05em}
.card.is-expanded h3{font-size:30px;line-height:1.08;font-weight:600;letter-spacing:-.045em}
.card.is-expanded .card-desc{color:var(--muted);font-size:13px;line-height:1.7}
.card.is-expanded .card-actions{gap:8px;padding-top:26px}
.card.is-expanded .card-action{min-height:42px;border-radius:999px;font-weight:500}
.card.is-expanded .card-action.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.card.is-expanded .card-action.guide,
.card.is-expanded .card-action.member,
html[data-theme] .card.is-expanded .card-action.guide,
html[data-theme] .card.is-expanded .card-action.member{background:#fff;color:var(--accent);border-color:var(--accent)}
html[data-theme="dark"] .card.is-expanded .card-action.guide,
html[data-theme="dark"] .card.is-expanded .card-action.member{background:#1d1d1f}
.card.is-expanded .card-open-note{color:var(--muted-2)}
.card.is-expanded .thumb-open-hint{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.90);color:#1d1d1f}

/* ---------- Promotional tile ---------- */
.promo{
  min-height:360px;
  grid-column:span 2;
  border:0;
  border-radius:44px;
  background:#1d1d1f;
  color:#fff;
  box-shadow:none
}
.promo>div{padding:48px}
.promo .eyebrow{color:#b9b9bf}.promo h2{font-size:40px;line-height:1.08;font-weight:600;letter-spacing:-.04em}.promo p{max-width:560px;color:#d2d2d7;font-size:15px;line-height:1.7}.promo .btn{background:#0066cc;border-color:#0066cc;color:#fff}

/* ---------- Generic inner-page hero ---------- */
.section-hero{padding:74px 0 46px;text-align:center;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
html[data-theme="dark"] .section-hero{background:linear-gradient(180deg,#000 0%,var(--bg) 100%)}
.section-hero h1{max-width:920px;margin:0 auto 18px;font-size:clamp(42px,4.7vw,58px);line-height:1.06;font-weight:600;letter-spacing:-.045em}
.section-hero p{max-width:700px;color:var(--muted);font-size:16px;line-height:1.7}

/* ---------- Backgrounds / Pricing / Forms / Tutorials ---------- */
.bg-grid{grid-template-columns:repeat(3,1fr);gap:18px}
.bg-card{border:0;border-radius:32px;box-shadow:none}.bg-card:after{left:20px;bottom:18px;font-size:13px;font-weight:600}
.pricing{padding:34px 0 96px}.price-grid{gap:18px}.price-card{
  padding:30px;border:1px solid #e9e9ec;border-radius:32px;background:var(--surface);box-shadow:none
}
.price-card.popular{border-color:#bcd9f7;box-shadow:0 0 0 4px #eef6ff}
.price-card .kicker{color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.05em}
.price{font-size:48px;font-weight:600;letter-spacing:-.045em}.sub{color:var(--muted)}
.features li{border-color:var(--line);color:var(--muted);font-size:12px}.features li:before{color:#28a745}
.faq{max-width:900px}.faq h2{font-size:40px;font-weight:600;letter-spacing:-.035em}.faq details{padding:20px 4px}.faq summary{font-weight:600}.faq p{color:var(--muted)}
.form-wrap{gap:18px}.form-card{padding:30px;border:1px solid #e9e9ec;border-radius:32px;background:var(--surface)}
.field label{color:var(--muted);font-size:11px}.field input,.field textarea,.field select,
html[data-theme] .field input,html[data-theme] .field textarea,html[data-theme] .field select{
  border:1px solid #d2d2d7;border-radius:12px;background:#fff;color:var(--text)
}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field textarea,html[data-theme="dark"] .field select{background:#151518;border-color:#3a3a3e}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,102,204,.10)}
.plan-option{border-color:var(--line);border-radius:18px;background:var(--surface-2)}.plan-option.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,102,204,.08)}.plan-option span{color:var(--muted)}
.big-total{font-size:44px;font-weight:600;letter-spacing:-.04em}
.tutorials{gap:18px}.tutorial{border:1px solid #e9e9ec;border-radius:28px;background:var(--surface)}.tutorial .video{background:linear-gradient(145deg,#f0f4f8,#dfeaff)}.play{background:var(--accent);color:#fff}.tutorial h3{font-size:16px;font-weight:600}.tutorial p{color:var(--muted);font-size:11px}

/* ---------- Single prompt ---------- */
.single-page{padding:60px 0 108px}.single-shell{width:min(var(--content),100%)}
.single-breadcrumbs{color:var(--muted);font-size:10px;font-weight:500}.single-breadcrumbs a:hover{color:var(--accent)}
.single-kicker{color:var(--muted);font-weight:600;letter-spacing:.05em}.single-header{max-width:850px}
.single-header h1{font-size:clamp(42px,5vw,64px);line-height:1.02;font-weight:600;letter-spacing:-.05em}.single-lead{color:var(--muted);font-size:16px}
.single-grid{grid-template-columns:minmax(0,1fr) 310px;gap:30px}
.single-preview{border:1px solid #e9e9ec;border-radius:32px;background:var(--surface);box-shadow:0 24px 70px rgba(0,0,0,.07)}
.article-panel,.side-card,
html[data-theme] .article-panel,html[data-theme] .side-card{
  border:1px solid #e9e9ec;border-radius:28px;background:var(--surface);box-shadow:none
}
.article-panel{padding:30px}.article-panel h2{font-size:26px;font-weight:600}.article-panel .section-note{color:var(--muted)}
.prompt-code,
html[data-theme] .prompt-code{border:1px solid var(--line);border-radius:18px;background:var(--surface-2);color:var(--text)}
.guide-step{border-color:var(--line)}.guide-num{background:#fff;border-color:var(--line);color:var(--accent)}html[data-theme="dark"] .guide-num{background:#242426}.guide-step p{color:var(--muted)}
.side-card{padding:20px}.side-card-title{color:var(--muted);font-weight:600;letter-spacing:.06em}.single-action.guide,.single-action.custom,.single-action.member,
html[data-theme] .single-action.guide,html[data-theme] .single-action.custom,html[data-theme] .single-action.member{background:#fff;color:var(--accent);border-color:var(--accent)}
html[data-theme="dark"] .single-action.guide,html[data-theme="dark"] .single-action.custom,html[data-theme="dark"] .single-action.member{background:#1d1d1f}
.side-meta-row{border-color:var(--line)}.side-meta-row span:first-child{color:var(--muted)}
.category-pill{border-color:var(--line);background:#fff;color:var(--muted);font-weight:500}html[data-theme="dark"] .category-pill{background:#1d1d1f}.category-pill.active,.category-pill:hover{background:var(--text);border-color:var(--text);color:var(--bg)}
.related-card{border:1px solid #e9e9ec;border-radius:22px;background:var(--surface)}.related-head a{color:var(--accent)}
.prompt-guide,.single-main .prompt-guide,
html[data-theme] .single-main .prompt-guide{border:1px solid #dfe8f2;border-radius:28px;background:#fbfdff}.single-main .prompt-guide-label{color:var(--accent)}
html[data-theme="dark"] .single-main .prompt-guide{background:#16202a;border-color:#283d52}
.prompt-guide-steps>div{border-color:var(--line);background:var(--surface)}.prompt-guide-steps b{background:var(--accent);color:#fff}

/* ---------- Category index / category pages ---------- */
.categories-index-page,.category-page{padding:64px 0 104px}
.categories-index-head h1,.category-page-header h1{font-size:clamp(42px,5vw,58px)!important;line-height:1.06!important;font-weight:600!important;letter-spacing:-.045em!important}
.categories-index-head p,.category-page-header p{color:var(--muted)!important;font-size:15px!important;line-height:1.7!important}
.categories-index-count,.category-total{color:var(--muted)}.categories-index-count b,.category-total b{color:var(--text);font-weight:600}
.categories-index-grid{gap:18px}.category-directory-card,
html[data-theme] .category-directory-card{
  min-height:250px;padding:28px;border:1px solid #e9e9ec;border-radius:32px;background:#fff;box-shadow:none
}
html[data-theme="dark"] .category-directory-card{background:#1d1d1f;border-color:#343438}
.category-directory-card:hover{transform:translateY(-3px);background:var(--surface-2)!important;box-shadow:none}.category-directory-icon{background:var(--surface-2)!important;color:var(--accent)!important;border-color:var(--line)!important}.category-directory-card small{color:var(--muted)!important}.category-directory-card h2{font-weight:600!important}.category-directory-card p{color:var(--muted)!important}.category-directory-card>b{color:var(--accent)!important}
.category-breadcrumbs{color:var(--muted)}.category-breadcrumbs a:hover{color:var(--accent)}
.category-switcher-label{color:var(--muted)}.category-top-tabs{gap:7px}
.category-top-tab,
html[data-theme] .category-top-tab{border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:500}html[data-theme="dark"] .category-top-tab{background:#1d1d1f}.category-top-tab:hover,.category-top-tab.active,html[data-theme] .category-top-tab:hover,html[data-theme] .category-top-tab.active{background:var(--text);border-color:var(--text);color:var(--bg)}
.category-layout{grid-template-columns:240px minmax(0,1fr);gap:24px}.category-sidebar,
html[data-theme] .category-sidebar{border:1px solid #e9e9ec;border-radius:28px;background:rgba(255,255,255,.9);box-shadow:none}html[data-theme="dark"] .category-sidebar{background:rgba(29,29,31,.9);border-color:#343438}
.category-filter-head b{font-weight:600}.category-filter-head span,.filter-title{color:var(--muted)}.category-filter-head button{color:var(--accent)}
.check-row{color:var(--muted)}.check-row input{border-color:var(--line);background:#fff}.check-row input:checked{background:var(--accent);border-color:var(--accent)}.check-row input:checked:after{color:#fff}.check-row:hover span{color:var(--text)}
.category-search,.category-results-bar select,
html[data-theme] .category-search,html[data-theme] .category-results-bar select{border:1px solid var(--line);background:#fff;color:var(--text)}html[data-theme="dark"] .category-search,html[data-theme="dark"] .category-results-bar select{background:#1d1d1f}.category-search input,html[data-theme] .category-search input{color:var(--text);background:transparent}
.category-products{gap:18px}.category-product,
html[data-theme] .category-product{border:1px solid #e9e9ec;border-radius:28px;background:#fff}html[data-theme="dark"] .category-product{background:#1d1d1f;border-color:#343438}.category-product:hover{transform:translateY(-3px);border-color:#d9d9de!important;box-shadow:0 18px 44px rgba(0,0,0,.055)}
.category-product-thumb{aspect-ratio:4/3;background:var(--surface-2)}.category-product-body{padding:20px}.category-product-cat{color:var(--muted)}.category-product h3{font-size:18px;font-weight:600}.category-product p{color:var(--muted);font-size:11px}
.category-product-actions{border-color:var(--line)}.category-product-actions button,.category-product-actions a,
html[data-theme] .category-product-actions button,html[data-theme] .category-product-actions a{min-height:38px;border-radius:999px;background:#fff;color:var(--accent);border-color:var(--accent);font-weight:500}html[data-theme="dark"] .category-product-actions button,html[data-theme="dark"] .category-product-actions a{background:#1d1d1f}.category-product-actions button{background:var(--accent)!important;color:#fff!important}.category-product-actions a:hover{background:#f2f7ff!important;color:var(--gold-deep)!important}
.category-empty{border-color:var(--line);border-radius:24px;color:var(--muted)}

/* ---------- Academy ---------- */
.academy-hero{padding:74px 0 42px;text-align:center;background:linear-gradient(180deg,#fff,var(--bg))}html[data-theme="dark"] .academy-hero{background:linear-gradient(180deg,#000,var(--bg))}
.academy-hero h1{max-width:900px;margin:14px auto 18px;font-size:clamp(46px,5vw,64px);line-height:1.04;font-weight:600;letter-spacing:-.045em}.academy-grad{background:none;color:var(--accent);-webkit-text-fill-color:currentColor}.academy-hero>div>p{color:var(--muted);font-size:15px}
.academy-search{height:58px;border:1px solid #e1e1e5;border-radius:999px;background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.05)}html[data-theme="dark"] .academy-search{background:#1d1d1f;border-color:#3a3a3e}.academy-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,102,204,.08)}.academy-search input{color:var(--text)}.academy-search kbd{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.academy-tabs,
html[data-theme] .academy-tabs{top:64px;padding:7px;border:1px solid #e7e7eb;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 10px 34px rgba(0,0,0,.04)}html[data-theme="dark"] .academy-tabs{background:rgba(29,29,31,.88);border-color:#343438}.academy-tab{border-radius:999px;color:var(--muted);font-weight:500}.academy-tab:hover{background:var(--surface-2);color:var(--text)}.academy-tab.active{background:var(--text);color:var(--bg)}
.academy-track,.video-grid{gap:18px}.lesson-card,.academy-video,.qa-item,.qa-side,.ask-form-card,.ask-info-card,
html[data-theme] .lesson-card,html[data-theme] .academy-video,html[data-theme] .ask-form-card,html[data-theme] .ask-info-card{border:1px solid #e9e9ec;border-radius:28px;background:var(--surface);box-shadow:none}.lesson-card{padding:24px;min-height:270px}.lesson-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.05)}.lesson-step{color:var(--muted)}.lesson-step b{border-color:var(--line);color:var(--accent)}.lesson-card h3{font-size:21px;font-weight:600}.lesson-card p{color:var(--muted);font-size:11px}.lesson-tags span{border-color:var(--line);color:var(--muted);font-weight:500}.lesson-open{color:var(--accent)}
.qa-icon{background:var(--surface-2);color:var(--accent)}.qa-question{color:var(--text)}.qa-answer,.qa-side p{color:var(--muted)}.qa-answer a{color:var(--accent)}
.academy-video-thumb{background:linear-gradient(145deg,#eaf3ff,#dfeaff)}.academy-video-body p{color:var(--muted)}
.ask-field label{color:var(--muted)}.ask-field input,.ask-field select,.ask-field textarea{background:#fff;color:var(--text);border-color:var(--line)}html[data-theme="dark"] .ask-field input,html[data-theme="dark"] .ask-field select,html[data-theme="dark"] .ask-field textarea{background:#151518}

/* ---------- Guide / wiki ---------- */
.wiki-page{background:var(--bg);color:var(--text)}
.wiki-sidebar{border-color:var(--line)}.wiki-back,.wiki-breadcrumb,.wiki-meta{color:var(--muted)}.wiki-back:hover,.wiki-breadcrumb a:hover{color:var(--accent)}.wiki-side-title,.wiki-toc-title{color:var(--text)}.wiki-nav-label{color:var(--muted)}
.wiki-nav-link{color:var(--muted);border-radius:10px}.wiki-nav-link span{color:var(--muted-2)}.wiki-nav-link:hover{background:var(--surface-2);color:var(--text)}.wiki-nav-link.active,
html[data-theme] .wiki-nav-link.active{background:#eaf3ff;color:#004e9c}html[data-theme="dark"] .wiki-nav-link.active{background:#15304a;color:#8ac4ff}
.wiki-kicker,.wiki-section-number,.wiki-practice-grid b{color:var(--accent)}.wiki-article-head h1{font-weight:600;letter-spacing:-.05em}.wiki-article-head>p,.wiki-section p,
html[data-theme] .wiki-section p{color:var(--muted);font-size:14px}.wiki-article-head{border-color:var(--line)}
.wiki-video{border:1px solid #e9e9ec;border-radius:28px;background:var(--surface);box-shadow:none}.wiki-video-stage,
html[data-theme] .wiki-video-stage{background:linear-gradient(145deg,#eef5fc,#dfeaff);color:#1d1d1f}.wiki-play{border-color:#9cc7f0;background:#fff;color:var(--accent)}.wiki-video-stage span{color:#6e6e73}.wiki-video-admin{border-color:var(--line);color:var(--muted)}.wiki-video-admin code{background:#eaf3ff;color:#004e9c}.wiki-video-admin a{color:var(--accent)}
.wiki-outcomes{border-color:#d9e8f7;background:#f7fbff}.wiki-outcomes>div span{background:var(--accent);color:#fff}.wiki-outcomes ul{color:var(--muted)}html[data-theme="dark"] .wiki-outcomes{background:#132130;border-color:#274665}
.wiki-note{border-color:var(--accent);background:#f5faff;color:var(--muted)}.wiki-note b{color:var(--accent)}html[data-theme="dark"] .wiki-note{background:#14202b}
.wiki-example{border-color:var(--line)}.wiki-example pre,
html[data-theme] .wiki-example pre{background:#1d1d1f;color:#f5f5f7}.wiki-example-label{border-color:var(--line);color:var(--muted)}
.wiki-checklist,.wiki-nextprev a,.wiki-practice-grid>div{border:1px solid #e9e9ec;border-radius:20px;background:var(--surface)}.wiki-checklist label{border-color:var(--line);color:var(--muted)}.wiki-checklist input{accent-color:var(--accent)}.wiki-nextprev{border-color:var(--line)}.wiki-nextprev small{color:var(--muted)}.wiki-nextprev a:hover{border-color:#bcd9f7;box-shadow:0 12px 34px rgba(0,0,0,.04)}.wiki-toc>a{color:var(--muted)}.wiki-toc>a span{color:var(--muted-2)}.wiki-toc>a:hover,.wiki-toc .wiki-toc-help{color:var(--accent)}
.wiki-mistakes{border-color:var(--line);background:var(--surface-2)}.wiki-mistakes ul,.wiki-practice-grid p{color:var(--muted)}

/* ---------- Footer / modal / toast ---------- */
.footer{padding:42px 0;border-top:1px solid var(--line);color:var(--muted);background:var(--surface)}.footlinks{font-size:10.5px}.footlinks a:hover{color:var(--accent)}
.toast{border-color:rgba(0,0,0,.08);background:rgba(29,29,31,.9);color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.12)}
.modal-backdrop{background:rgba(0,0,0,.46)!important}.modal-panel,
html[data-theme] .modal-panel{border-left:1px solid var(--line);background:var(--surface)}.modal-close{border-color:var(--line);background:var(--surface-2);color:var(--text)}.modal-preview{border-color:var(--line);border-radius:28px}.modal h2{font-weight:600}.modal .mmeta{color:var(--muted)}.promptbox{border-color:var(--line);border-radius:18px;background:var(--surface-2);color:var(--text)}

/* ---------- Responsive: use Webs V3's 3 → 2 → 1 rhythm ---------- */
@media(max-width:1180px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card.is-expanded{grid-column:1/-1}
}
@media(max-width:980px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .toolbar{top:64px}
  .category-layout{grid-template-columns:1fr}.category-sidebar{position:static}
  .academy-track,.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .container,.library>.container{width:min(var(--container),calc(100% - 28px))}
  .topbar{height:26px;font-size:9px}.nav{height:56px}
  .hero{padding:64px 0 48px}.hero h1{font-size:clamp(42px,12vw,56px)}.hero p{font-size:14px}
  .toolbar{position:static;border-radius:20px}
  .card{border-radius:26px}.card.is-expanded{grid-template-columns:1fr;border-radius:26px}.card.is-expanded .thumb{border-radius:25px 25px 0 0}.card.is-expanded .card-body{border-left:0;border-top:1px solid var(--line)}
  .promo{grid-column:1/-1;border-radius:32px}.promo>div{padding:34px}.promo h2{font-size:34px}
  .price-grid,.form-wrap{grid-template-columns:1fr}.price-card,.form-card{border-radius:26px}
  .single-grid{grid-template-columns:1fr}.single-sidebar{position:static}.article-panel,.side-card{border-radius:24px}
  .academy-track,.video-grid{grid-template-columns:1fr}.academy-tabs{position:static;border-radius:22px;overflow-x:auto}.academy-tab{white-space:nowrap}.academy-ask-tab{margin-left:0}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr;gap:14px}
  .hero h1{font-size:44px}.hero-actions{flex-wrap:wrap}
  .section-hero h1,.single-header h1{font-size:40px}
  .card-body{padding:16px 18px}
  .promo{min-height:300px}
}