:root{
  --bg:#0f172a;
  --panel:#111b31;
  --panel-2:#16223e;
  --text:#eef4ff;
  --muted:#9bb0d3;
  --line:#25365f;
  --brand:#6b54e3;
  --brand-2:#4da8ff;
  --accent:#f0c94f;
  --green:#35c28f;
  --pink:#ff7dbc;
  --shadow:0 18px 50px rgba(5,10,25,.24);
  --radius:24px;
}
body.light{
  --bg:#f4f7ff;
  --panel:#ffffff;
  --panel-2:#ffffff;
  --text:#20345f;
  --muted:#5f6f94;
  --line:#d7e0ef;
  --shadow:0 16px 40px rgba(25,40,80,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(77,168,255,.15), transparent 22%),
    radial-gradient(circle at top right, rgba(107,84,227,.18), transparent 28%),
    var(--bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1200px, calc(100% - 28px)); margin:0 auto}
.site-shell{min-height:100vh}
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(16px);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--line) 90%, transparent);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:82px;
}
.brand-logo{width:210px}
.nav-links{
  display:flex; gap:18px; flex-wrap:wrap; font-weight:700; color:var(--muted);
}
.nav-links a:hover{color:var(--text)}
.nav-actions{display:flex; gap:10px; align-items:center}
.primary-btn,.ghost-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:14px; font-weight:800; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  border:1px solid transparent;
}
.primary-btn{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:white; box-shadow:0 14px 30px rgba(77,168,255,.2)}
.ghost-btn{background:transparent; border-color:var(--line); color:var(--text)}
.ghost-btn.strong{background:color-mix(in srgb, var(--panel) 86%, transparent)}
.primary-btn.small,.ghost-btn.small{padding:10px 14px; font-size:.95rem}
.primary-btn:hover,.ghost-btn:hover{transform:translateY(-1px)}

.hero-section{padding:44px 0 20px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
.hero-copy,.hero-panel,.dashboard-card,.resource-card,.accordion-group,.page-box{
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.hero-copy,.hero-panel{border-radius:28px; padding:30px}
.eyebrow{
  display:inline-flex; padding:10px 14px; border-radius:999px;
  background:rgba(107,84,227,.15); color:#cfbfff; font-size:.78rem; letter-spacing:.14em; font-weight:800;
}
body.light .eyebrow{background:#ece8fb; color:#6b54e3}
h1,h2,h3{
  font-family:"Baloo 2","Inter",system-ui,sans-serif;
  line-height:1.04; margin:0;
}
.hero-copy h1{font-size:clamp(2.2rem,4.8vw,4.35rem); margin-top:14px}
.hero-copy p{color:var(--muted); font-size:1.08rem; line-height:1.8; max-width:62ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:24px 0}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.stat-card{
  background:var(--panel-2); border:1px solid var(--line); border-radius:18px; padding:16px
}
.stat-card strong{display:block; font-size:1.55rem}
.stat-card span{display:block; color:var(--muted); margin-top:4px}
.hero-banner{
  min-height:260px; border-radius:24px;
  background:
    linear-gradient(135deg, rgba(76,115,230,.93), rgba(91,124,250,.88)),
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.2), transparent 20%),
    linear-gradient(120deg, rgba(255,255,255,.12) 20%, transparent 20%, transparent 35%, rgba(255,255,255,.1) 35%, rgba(255,255,255,.1) 40%, transparent 40%);
  padding:24px; display:flex; align-items:flex-end; color:#fff;
}
.banner-kicker{display:block; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; opacity:.9; font-weight:800}
.hero-banner h3{font-size:2rem; margin:10px 0 10px}
.hero-banner p{line-height:1.7; max-width:45ch; opacity:.95}
.hero-panel-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.quick-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:16px}
.quick-card{
  border-radius:20px; padding:18px; min-height:110px; color:#fff; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
}
.quick-blue{background:linear-gradient(135deg,#3f65e5,#54a9ff)}
.quick-green{background:linear-gradient(135deg,#0f9d84,#35c28f)}
.quick-gold{background:linear-gradient(135deg,#e4b534,#f0c94f); color:#1d233a}
.quick-pink{background:linear-gradient(135deg,#c85cf0,#ff7dbc)}
.quick-icon{font-size:1.4rem}
.quick-card strong{font-size:1.2rem}
.quick-card small{opacity:.92}

.section-block{padding:34px 0}
.section-heading{
  display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:16px;
}
.section-heading h2{font-size:clamp(1.8rem,3vw,3rem)}
.section-heading p{max-width:52ch; color:var(--muted); margin:0}
.path-grid,.resource-grid,.dash-grid,.quick-grid{display:grid; gap:16px}
.path-grid{grid-template-columns:repeat(3,1fr)}
.path-card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px; font-weight:800;
}
.path-card:hover{outline:2px solid color-mix(in srgb, var(--brand) 50%, transparent)}
.resource-grid{grid-template-columns:repeat(3,1fr)}
.resource-card{
  border-radius:22px; padding:18px; display:flex; flex-direction:column; gap:14px; min-height:220px;
}
.resource-top{display:flex; justify-content:space-between; gap:10px}
.resource-meta{display:flex; flex-wrap:wrap; gap:8px}
.tag{
  display:inline-flex; padding:8px 10px; border-radius:999px; font-size:.75rem; font-weight:800;
  background:rgba(107,84,227,.14); color:#cebfff;
}
body.light .tag{background:#ece8fb; color:#6b54e3}
.note{color:var(--muted); line-height:1.7; flex:1}
.resource-actions{display:flex; justify-content:space-between; align-items:center; gap:10px}
.link-btn{
  display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border-radius:12px;
  background:var(--panel-2); border:1px solid var(--line); font-weight:700;
}
.bookmark-btn{
  background:transparent; border:1px solid var(--line); color:var(--text); border-radius:12px; padding:10px 12px; cursor:pointer;
}
.bookmark-btn.saved{border-color:var(--accent); color:var(--accent)}
.category-filter-row,.level-row,.directory-controls,.practice-topbar{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px;
}
.filter-pill,.level-badge{
  border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:999px; padding:10px 14px; font-weight:700; cursor:pointer;
}
.filter-pill.active{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff}
.search-bar{
  min-width:260px; flex:1; display:flex; align-items:center; gap:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:0 14px;
}
.search-bar.large{min-width:320px}
.search-bar input, .directory-controls select, .profile-form input{
  width:100%; background:transparent; border:none; outline:none; color:var(--text); padding:14px 0; font:inherit;
}
.directory-controls select,.profile-form input{
  min-width:180px; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:16px;
}
.accordion-list{display:grid; gap:12px}
.accordion-group{
  border-radius:18px; overflow:hidden;
}
.accordion-head{
  width:100%; text-align:left; background:transparent; color:var(--text);
  border:none; padding:18px 20px; font:inherit; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:800;
}
.accordion-head.open{background:color-mix(in srgb, var(--panel-2) 82%, transparent)}
.accordion-content{padding:0 18px 18px}
.accordion-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--line);
}
.mini-link{padding:10px 12px; border-radius:999px; background:var(--panel); border:1px solid var(--line); font-weight:700; color:var(--muted)}
.hidden{display:none!important}
.empty-state{
  padding:18px; border-radius:16px; background:var(--panel); border:1px dashed var(--line); color:var(--muted);
}
.dash-grid{grid-template-columns:1fr 1fr 1fr}
.dash-grid.two{grid-template-columns:1fr 1fr}
.dashboard-card{border-radius:22px; padding:20px}
.dashboard-card h3{font-size:1.55rem}
.progress-ring-wrap{padding:14px 0 8px}
.progress-value{font-size:2.2rem; font-weight:800}
.progress-caption{color:var(--muted)}
.mini-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}
.mini-stats div{background:var(--panel-2); border:1px solid var(--line); border-radius:16px; padding:14px}
.mini-stats strong{display:block; font-size:1.4rem}
.mini-stats span{display:block; color:var(--muted); margin-top:4px}
.profile-form{display:grid; gap:10px}
.helper-note{color:var(--muted); line-height:1.7}
.favorites-list{display:grid; gap:10px}
.favorite-item{display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:16px; padding:12px}
.assistant-card{
  border-radius:22px; border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow);
  padding:22px; display:grid; grid-template-columns:1.2fr .8fr; gap:18px;
}
.assistant-card ul{padding-left:18px; line-height:1.8; color:var(--muted)}
.assistant-placeholder{
  display:grid; place-items:center; min-height:180px; border-radius:18px;
  background:linear-gradient(135deg, rgba(77,168,255,.16), rgba(107,84,227,.18)); border:1px dashed var(--line); font-weight:800; font-size:1.2rem;
}
.placeholder-box{
  min-height:120px; border-radius:18px; background:var(--panel-2); border:1px dashed var(--line); display:grid; place-items:center; color:var(--muted);
}
.site-footer{padding:32px 0 40px}
.footer-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:22px;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
}
.footer-logo{width:180px}
.footer-wrap p{color:var(--muted)}
.footer-links{display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-weight:700}

@media (max-width: 1080px){
  .hero-grid,.dash-grid,.assistant-card{grid-template-columns:1fr}
  .resource-grid{grid-template-columns:repeat(2,1fr)}
  .path-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .nav{flex-wrap:wrap; padding:12px 0}
  .nav-links{display:none}
  .hero-stats,.path-grid,.resource-grid,.dash-grid,.dash-grid.two,.mini-stats,.footer-wrap{grid-template-columns:1fr}
  .hero-stats,.mini-stats{display:grid}
  .quick-grid{grid-template-columns:1fr 1fr}
  .section-heading,.accordion-row,.resource-actions,.footer-wrap{align-items:flex-start; flex-direction:column}
  .footer-wrap{display:flex}
  .quick-grid{grid-template-columns:1fr 1fr}
}


.page-box{
  border-radius:24px;
  padding:26px;
}
.page-title{
  font-size:clamp(2rem,4vw,3.2rem);
  margin-top:10px;
}
.page-intro{
  color:var(--muted);
  line-height:1.8;
  max-width:70ch;
}
.contact-layout{
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.assistant-form{
  display:flex;
  gap:10px;
  margin:14px 0;
  flex-wrap:wrap;
}
.assistant-form input{
  flex:1;
  min-width:240px;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:14px;
  padding:14px;
  font:inherit;
}
.assistant-answer{
  min-height:110px;
  border-radius:16px;
  background:var(--panel-2);
  border:1px solid var(--line);
  padding:16px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:14px;
}


.quick-purple{background:linear-gradient(135deg,#6b54e3,#9a6cff)}
.compact-card{padding:18px}
.ai-hero .text-gradient{
  background:linear-gradient(135deg,#6b54e3,#4da8ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.four-grid{grid-template-columns:repeat(4,1fr)}
.ai-banner-card,.ai-logo-card{display:flex;align-items:center}
.ai-banner-gradient{
  width:100%;
  min-height:220px;
  border-radius:22px;
  padding:26px;
  color:#fff;
  background:linear-gradient(120deg, #6d4cff 0%, #31c8ff 45%, #61d46e 100%);
  position:relative;
  overflow:hidden;
}
.ai-banner-gradient::after{
  content:"";
  position:absolute;
  right:-50px;
  bottom:-50px;
  width:180px;
  height:180px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}
.ai-banner-gradient h3{
  font-size:clamp(2rem,3vw,3.2rem);
  line-height:.96;
  margin:12px 0 8px;
}
.ai-banner-gradient p{
  margin:0;
  max-width:44ch;
  color:rgba(255,255,255,.95);
  line-height:1.7;
}
.tiny-kicker{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  opacity:.92;
}
.ai-logo-card{
  gap:18px;
  justify-content:center;
  min-height:220px;
}
.ai-logo-mark{
  width:92px;
  height:92px;
  border-radius:28px;
  display:grid;
  place-items:center;
  font-size:2.5rem;
  color:#fff;
  background:linear-gradient(135deg,#6b54e3,#4da8ff);
  box-shadow:var(--shadow);
}
@media (max-width:1080px){
  .four-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .four-grid{grid-template-columns:1fr}
}


.quick-purple{background:linear-gradient(135deg,#6b54e3,#7f76ff)}
.resource-card-link .link-btn{pointer-events:auto}
.ai-directory-controls{align-items:center}
.cyber-feature-card{padding:22px}
.cyber-feature-layout{display:grid; grid-template-columns:240px 1fr; gap:22px; align-items:center}
.cyber-feature-cover{width:100%; max-width:240px; border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow)}
.book-hero-layout{display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:center}
.book-hero-cover{width:100%; border-radius:20px; box-shadow:var(--shadow); border:1px solid var(--line)}
.book-subtitle{font-weight:700; color:var(--muted); margin:8px 0 12px}
.book-card-lite{min-height:220px}
.cyber-hero-box{padding:28px}

.donate-main{padding-top:28px; padding-bottom:40px}
.donation-shell{display:grid; place-items:center}
.donation-panel{width:min(100%, 840px); background:#fff; color:#111; border-radius:34px; padding:40px 34px; box-shadow:0 18px 46px rgba(0,0,0,.18)}
.donation-panel h1{font-size:clamp(2.1rem,4vw,3.4rem); text-align:center; margin-bottom:24px}
.donation-toggle{display:grid; grid-template-columns:1fr 1fr; gap:8px; background:#dde3f2; padding:8px; border-radius:999px; margin-bottom:22px}
.donate-toggle-btn,.amount-btn{border:none; cursor:pointer; font:inherit; font-weight:800}
.donate-toggle-btn{padding:18px 14px; border-radius:999px; background:transparent; color:#111; font-size:1.15rem}
.donate-toggle-btn.active{background:#2463eb; color:#fff; box-shadow:0 8px 18px rgba(36,99,235,.26)}
.donation-subtitle{font-size:1.15rem; text-align:center; margin:0 0 24px}
.donation-label{display:block; font-weight:700; margin-bottom:10px}
.donation-select,.donation-input{width:100%; border:2px solid #d4d7df; border-radius:18px; padding:18px 20px; font:inherit; font-size:1.05rem; background:#fff; color:#111}
.amount-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0}
.amount-btn{padding:24px 16px; border-radius:18px; background:#e7ecf8; color:#111; font-size:1.35rem}
.amount-btn.active{background:#2463eb; color:#fff}
.currency-box,.other-amount-box{background:#e7ecf8; border-radius:18px; min-height:92px; display:flex; align-items:center; justify-content:center; font-size:1.25rem}
.other-amount-box{justify-content:flex-start; gap:14px; padding:0 22px}
.other-amount-box input{border:none; background:transparent; outline:none; font:inherit; width:100%}
.check-row,.fee-row,.payment-method{display:flex; align-items:center; justify-content:space-between; gap:12px}
.check-row{margin:8px 0 18px; justify-content:flex-start; color:#565656}
.payment-card{border-top:1px solid #dfe4ef; margin-top:8px; padding-top:24px}
.payment-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font-weight:700}
.payment-method-list{border:1px solid #dfe4ef; border-radius:20px; overflow:hidden; background:#fff}
.payment-method{padding:18px 20px; border-top:1px solid #e7ebf3; justify-content:flex-start}
.payment-method:first-child{border-top:none}
.payment-method.active{background:#f8fafc}
.card-fields{padding:0 20px 20px}
.card-fields input{width:100%; border:2px solid #1a1a1a; border-radius:14px; padding:16px 18px; font:inherit; margin-bottom:12px}
.split-fields{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.fee-row{background:#f3f4f6; border-radius:18px; padding:16px 18px; margin-top:18px}
.donate-cta{display:flex; align-items:center; justify-content:center; width:100%; margin-top:26px; background:#000; color:#fff; border-radius:22px; padding:24px 20px; font-weight:800; font-size:1.45rem}

@media (max-width: 900px){
  .cyber-feature-layout,.book-hero-layout{grid-template-columns:1fr}
  .cyber-feature-cover{max-width:260px}
}
@media (max-width: 760px){
  .donation-panel{padding:28px 18px; border-radius:26px}
  .amount-grid,.split-fields{grid-template-columns:1fr}
  .payment-header{flex-direction:column; align-items:flex-start; gap:8px}
}

.book-card-rich{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:start;min-height:280px}
.book-card-cover-link{display:block}
.book-card-cover{width:100%;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);object-fit:cover}
.book-card-content{display:flex;flex-direction:column;gap:10px}
@media (max-width:760px){.book-card-rich{grid-template-columns:1fr}.book-card-cover{max-width:240px}}


.cyber-page-hero .page-box{overflow:hidden}
.cyber-premium-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:24px;align-items:stretch}
.cyber-premium-box{padding:28px;background:linear-gradient(145deg,rgba(12,18,32,.98),rgba(11,31,56,.98));color:#fff;border:1px solid rgba(122,162,255,.18)}
.cyber-premium-box .book-subtitle,.cyber-premium-box .page-intro{color:rgba(255,255,255,.84)}
.cyber-side-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.mini-stat-stack{display:grid;gap:12px}
.cyber-roadmap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.roadmap-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.roadmap-step{display:inline-flex;align-self:flex-start;padding:7px 12px;border-radius:999px;background:#111827;color:#fff;font-size:.85rem;font-weight:800}
.roadmap-cover{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.shelf-heading-row{align-items:end;gap:16px}
.cyber-filter-row{display:flex;flex-wrap:wrap;gap:10px}
.cyber-shelf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:18px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.shelf-book{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:var(--shadow);min-width:220px}
.shelf-book-cover-link{display:block}
.shelf-book-cover{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;border:1px solid var(--line);margin-bottom:12px}
.shelf-book-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.shelf-book h3{font-size:1rem;line-height:1.35;margin:0 0 8px}
.shelf-book p{margin:0;color:var(--muted);font-size:.95rem}
.premium-cyber-card{background:linear-gradient(145deg,#0f172a,#13243d);color:#fff;border-color:rgba(122,162,255,.14)}
.premium-cyber-card .note{color:rgba(255,255,255,.78)}
.cyber-home-feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:18px;align-items:stretch}
.cyber-mini-shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cyber-mini-shelf img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}

@media (max-width:1080px){
  .cyber-premium-grid,.cyber-home-feature{grid-template-columns:1fr}
  .cyber-roadmap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .cyber-roadmap,.cyber-mini-shelf{grid-template-columns:1fr}
  .cyber-shelf{grid-auto-columns:minmax(200px,78vw)}
}