:root {
  --navy: #070a2b;
  --navy-2: #121746;
  --ink: #20253a;
  --muted: #687085;
  --gold: #d8ad35;
  --gold-soft: #f6e9b8;
  --cream: #f7f5ec;
  --paper: #fffefa;
  --blue: #4775d1;
  --green: #277a65;
  --red: #a43f45;
  --line: #e2e3e8;
  --shadow: 0 20px 55px rgba(13, 18, 56, .12);
  --radius: 20px;
  --shell: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.03em; }
h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); }
h2 { font-size: clamp(1.8rem, 3vw, 3rem); }
h3 { font-size: 1.18rem; }
.shell { width: min(var(--shell), calc(100% - 40px)); margin-inline: auto; }
.narrow { max-width: 820px; }
.section { padding-block: 84px; }
.section-tinted { background: var(--cream); }
.eyebrow { display: inline-block; margin-bottom: 14px; color: #806619; font-size: .74rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow.light { color: #f0ce69; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 1px solid var(--gold); border-radius: 999px; background: var(--gold); color: var(--navy); font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(116, 84, 9, .22); }
.button-secondary { background: transparent; border-color: var(--navy); color: var(--navy); }
.button-light { background: #fff; border-color: #fff; color: var(--navy); }
.button-ghost-light { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.button-small { min-height: 38px; padding: 8px 15px; font-size: .88rem; }
.button-full { width: 100%; }
.skip-link { position: fixed; z-index: 999; left: 12px; top: -50px; background: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.announcement { padding: 9px 20px; background: var(--gold); color: var(--navy); text-align: center; font-size: .9rem; font-weight: 700; }
.site-header { position: sticky; z-index: 100; top: 0; background: rgba(255,254,250,.94); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(7,10,43,.08); }
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px 12px 12px 3px; background: var(--navy); color: var(--gold); font: italic 900 1.65rem Georgia, serif; }
.brand-name, .brand-subtitle { display: block; }
.brand-name { font-weight: 850; letter-spacing: -.02em; }
.brand-subtitle { color: var(--muted); font-size: .72rem; }
.main-nav { display: flex; align-items: center; gap: 20px; font-size: .92rem; font-weight: 700; }
.main-nav a:not(.button), .nav-button { position: relative; color: #4c5368; }
.main-nav a.active, .main-nav a:hover, .nav-button:hover { color: var(--navy); }
.main-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--gold); }
.admin-link { color: #7b5b00 !important; }
.inline-form { display: inline; }
.nav-button { padding: 0; border: 0; background: none; font-weight: 700; }
.nav-toggle { display: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.alert { margin-top: 18px; padding: 13px 16px; border-radius: 12px; font-weight: 700; }
.alert-success { background: #e5f5ef; color: #185a48; }
.alert-error { background: #fae7e8; color: #8b2f35; }
.hero { overflow: hidden; padding: 78px 0 90px; background: radial-gradient(circle at 80% 20%, #252b6a 0, var(--navy) 36%, #05071d 100%); color: #fff; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.hero h1 { max-width: 800px; margin-bottom: 25px; color: #fff; }
.hero-lead { max-width: 670px; color: #d7d9e7; font-size: 1.17rem; }
.hero .button-row { margin-top: 30px; }
.hero .button-secondary { border-color: rgba(255,255,255,.45); color: #fff; }
.hero-stats { display: flex; gap: 38px; margin-top: 44px; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { color: var(--gold); font-size: 1.65rem; }
.hero-stats span { color: #aeb3cc; font-size: .78rem; }
.hero-visual { position: relative; min-height: 570px; }
.cover-frame { position: absolute; right: 50px; top: 15px; width: min(390px, 80%); padding: 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 30px; background: rgba(255,255,255,.08); transform: rotate(3deg); box-shadow: 0 35px 90px rgba(0,0,0,.4); }
.cover-frame img { width: 100%; border-radius: 20px; }
.floating-card { position: absolute; display: flex; align-items: center; gap: 11px; padding: 13px 17px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(18,23,70,.88); color: #f3f3f8; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: .82rem; font-weight: 700; backdrop-filter: blur(10px); }
.floating-card span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--gold); color: var(--navy); }
.floating-card-one { left: 0; top: 120px; }
.floating-card-two { left: 25px; top: 260px; }
.floating-card-three { left: 0; top: 400px; }
.trust-strip { padding: 17px 0; background: var(--gold); color: var(--navy); text-align: center; font-size: .92rem; font-weight: 800; }
.section-heading { max-width: 760px; margin-bottom: 42px; }
.section-heading h2 { margin-bottom: 14px; }
.section-heading p { color: var(--muted); font-size: 1.03rem; }
.split-heading { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 50px; }
.split-heading > p { max-width: 500px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { min-height: 250px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 26px rgba(22,28,65,.05); }
.feature-card h3 { margin: 19px 0 11px; font-size: 1.25rem; }
.feature-card p { color: var(--muted); }
.icon-chip { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; background: var(--gold-soft); color: #705700; font-weight: 900; }
.chapter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.chapter-card { overflow: hidden; border: 1px solid #ddd9c9; border-radius: 22px; background: var(--paper); box-shadow: 0 10px 26px rgba(22,28,65,.06); transition: transform .2s; }
.chapter-card:hover { transform: translateY(-5px); }
.chapter-card > img { width: 100%; height: 225px; object-fit: cover; object-position: center; filter: saturate(.65); }
.chapter-card-body { padding: 23px; }
.chapter-number { color: #896e20; font-size: .74rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.chapter-card h3 { margin: 9px 0 12px; font-size: 1.35rem; }
.chapter-card p { display: -webkit-box; overflow: hidden; color: var(--muted); -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.chapter-card a { color: var(--navy); font-weight: 850; }
.sample-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sample-card { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: border-color .2s, transform .2s; }
.sample-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.sample-card > span { color: #8b6c13; font-weight: 800; }
.sample-card h3 { margin: 8px 0; }
.sample-card p { margin: 0; color: var(--muted); }
.cta-band { padding: 62px 0; background: var(--navy); color: #fff; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cta-inner h2 { margin: 0; color: #fff; }
.site-footer { padding: 60px 0 25px; background: #05071d; color: #c9cbd8; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; }
.footer-grid h2 { color: #fff; font-size: 1rem; }
.footer-grid a { display: block; margin: 7px 0; }
.footer-brand .brand-name { color: #fff; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .78rem; }
.auth-section, .message-section { min-height: 72vh; display: grid; place-items: center; padding: 70px 20px; background: linear-gradient(145deg, var(--cream), #fff); }
.auth-card, .message-card { width: min(520px, 100%); padding: 42px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.auth-card h1, .message-card h1 { font-size: 2.5rem; }
.auth-card > p, .message-card > p { color: var(--muted); }
.auth-foot { margin-top: 20px; text-align: center; }
.auth-foot a { color: #765d10; font-weight: 800; }
.form-stack { display: grid; gap: 18px; }
.form-stack label, .decision-form label, .lab-form label, .project-name, .media-filters label { display: grid; gap: 7px; font-size: .87rem; font-weight: 800; }
input, select, textarea { width: 100%; padding: 12px 13px; border: 1px solid #cfd2dc; border-radius: 10px; background: #fff; color: var(--ink); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(71,117,209,.14); }
textarea { resize: vertical; }
.field-help, .small-note { color: var(--muted); font-size: .78rem; font-weight: 500; }
.icon-large { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--gold-soft); color: #7f6518; font: italic 900 2rem Georgia, serif; }
.page-hero, .tool-hero, .app-hero, .chapter-hero, .admin-hero { background: var(--navy); color: #fff; }
.page-hero { padding: 70px 0; }
.page-hero.compact h1 { margin-bottom: 15px; font-size: clamp(2.5rem, 5vw, 4.5rem); }
.page-hero p, .tool-hero p, .app-hero p, .chapter-hero p, .admin-hero p { color: #c8cbdd; font-size: 1.05rem; }
.pricing-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr); gap: 55px; align-items: start; }
.pricing-card { padding: 38px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow); }
.plan-label { font-size: .78rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.price { margin: 10px 0; color: var(--navy); font-size: 4rem; font-weight: 900; letter-spacing: -.06em; }
.price > span { margin-right: 7px; font-size: .9rem; letter-spacing: .04em; vertical-align: top; }
.price small { margin-left: 7px; color: var(--muted); font-size: .9rem; letter-spacing: 0; }
.check-list { display: grid; gap: 11px; margin: 25px 0 30px; padding: 0; list-style: none; }
.check-list li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: #dff2e8; color: var(--green); font-weight: 900; }
.status-panel { padding: 20px; border-radius: 15px; background: #edf0f6; }
.status-panel.success { background: #e5f5ef; }
.status-panel.warning { background: #fff3d5; }
.status-panel > span { font-weight: 850; }
.status-panel p { margin: 6px 0 15px; }
.pricing-aside { padding: 20px 0; }
.number-list { display: grid; gap: 25px; padding: 0; list-style: none; }
.number-list li { display: grid; grid-template-columns: 44px 1fr; gap: 15px; }
.number-list li > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--navy); color: var(--gold); font-weight: 900; }
.number-list h3 { margin: 0 0 6px; }
.number-list p { color: var(--muted); }
.info-box { padding: 22px; border-left: 4px solid var(--gold); border-radius: 0 14px 14px 0; background: var(--cream); }
.app-hero { padding: 68px 0; background: radial-gradient(circle at 75% 35%, #26306e, var(--navy) 55%); }
.app-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 35px; align-items: center; }
.app-hero h1 { margin-bottom: 15px; font-size: clamp(2.6rem, 5vw, 4.7rem); }
.progress-orbit { display: grid; place-items: center; width: 190px; height: 190px; border: 16px solid rgba(255,255,255,.12); border-top-color: var(--gold); border-radius: 50%; }
.progress-orbit div { text-align: center; }
.progress-orbit strong, .progress-orbit span { display: block; }
.progress-orbit strong { color: #fff; font-size: 2.5rem; }
.progress-orbit span { color: #bec2d7; font-size: .8rem; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: -112px; margin-bottom: 70px; position: relative; }
.dashboard-metrics > div { padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 12px 28px rgba(15,20,56,.1); }
.dashboard-metrics span, .dashboard-metrics strong { display: block; }
.dashboard-metrics span { color: var(--muted); font-size: .78rem; }
.dashboard-metrics strong { margin-top: 5px; font-size: 1.45rem; }
.dashboard-block { margin-top: 65px; }
.block-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.block-heading h2 { margin: 0; font-size: 2rem; }
.block-heading a { color: #765d10; font-weight: 800; }
.continue-grid, .saved-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.continue-card, .saved-grid article { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.continue-card > span, .saved-grid article > span { color: #8a6c14; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.continue-card h3, .saved-grid article h3 { margin: 9px 0 15px; }
.continue-card small, .saved-grid article small { color: var(--muted); }
.mini-progress { overflow: hidden; height: 6px; border-radius: 99px; background: #e9eaf0; }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.chapter-progress-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.chapter-progress-card { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.chapter-progress-card img { width: 110px; height: 110px; border-radius: 13px; object-fit: cover; }
.chapter-progress-card span { color: #8a6c14; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.chapter-progress-card h3 { margin: 6px 0 15px; }
.chapter-progress-card small { color: var(--muted); }
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tool-card { min-height: 245px; padding: 30px; border-radius: 22px; color: #fff; }
.tool-card > span { font-size: .74rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.tool-card h2 { margin: 23px 0 10px; font-size: 2rem; }
.tool-card p { max-width: 420px; opacity: .8; }
.tool-card b { display: inline-block; margin-top: 15px; }
.feature-a { background: #2b604f; }
.feature-b { background: #66475e; }
.feature-c { background: #3a5176; }
.feature-d { background: #826529; }
.chapter-hero { padding: 55px 0; background: linear-gradient(110deg, var(--navy), #20265e); }
.chapter-hero-grid { display: grid; grid-template-columns: 1fr 300px; gap: 55px; align-items: center; }
.chapter-hero h1 { margin: 10px 0 16px; font-size: clamp(2.8rem, 5vw, 4.8rem); }
.chapter-hero img { width: 300px; height: 300px; border-radius: 24px; object-fit: cover; opacity: .82; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.back-link { display: inline-block; margin-bottom: 24px; color: #d7d9e9; font-size: .86rem; font-weight: 750; }
.chapter-meta { display: flex; gap: 18px; color: #afb4cf; font-size: .8rem; }
.section-list { border-top: 1px solid var(--line); }
.section-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 20px; align-items: center; min-height: 100px; padding: 17px 8px; border-bottom: 1px solid var(--line); }
.section-row:hover { background: #faf8ef; }
.section-row.locked { opacity: .63; }
.section-index { color: #8b6c14; font-weight: 900; }
.section-row h3 { margin: 0 0 7px; font-size: 1.2rem; }
.section-row p { margin: 0; color: var(--muted); font-size: .82rem; }
.section-status { color: #765d10; font-size: .85rem; font-weight: 800; }
.complete-mark { color: var(--green); }
.reader-layout { display: grid; grid-template-columns: 290px minmax(0, 760px); gap: 70px; align-items: start; padding-block: 45px 90px; }
.reader-sidebar { position: sticky; top: 105px; max-height: calc(100vh - 130px); overflow: auto; padding-right: 12px; }
.reader-sidebar .back-link { color: #586078; }
.reader-chapter-label { margin-bottom: 15px; color: #8b6c14; font-size: .75rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.reader-nav { display: grid; gap: 4px; }
.reader-nav a { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 9px; border-radius: 9px; color: #60677a; font-size: .79rem; }
.reader-nav a span { color: #907019; font-weight: 800; }
.reader-nav a.active { background: var(--navy); color: #fff; }
.reader-nav a.locked { opacity: .5; }
.reader-header { display: flex; align-items: start; justify-content: space-between; gap: 25px; padding-bottom: 20px; }
.reader-header h1 { margin: 0 0 9px; font-size: clamp(2.5rem, 5vw, 4.25rem); }
.reader-header p { color: var(--muted); }
.reader-actions { display: flex; gap: 8px; }
.icon-button { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #596075; }
.icon-button.active { border-color: var(--gold); background: var(--gold-soft); color: #6f560c; }
.reading-progress { position: sticky; z-index: 4; top: 78px; height: 4px; margin-bottom: 28px; background: #ececf1; }
.reading-progress i { display: block; width: 0; height: 100%; background: var(--gold); }
.handbook-content { font-family: Georgia, "Times New Roman", serif; font-size: 1.13rem; line-height: 1.82; }
.handbook-content p { margin-bottom: 1.45em; }
.handbook-content h3 { margin: 2.2em 0 .8em; font-family: Inter, ui-sans-serif, sans-serif; font-size: 1.55rem; }
.content-list { padding-left: 23px; }
.content-list li { margin-bottom: .65em; }
.numbered-point { padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--cream); }
.sample-gate { margin-top: 50px; padding: 34px; border-radius: 20px; background: var(--cream); text-align: center; }
.reader-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 55px; padding-top: 24px; border-top: 1px solid var(--line); }
.reader-pager a { padding: 15px; border-radius: 12px; background: var(--cream); font-weight: 750; }
.reader-pager a span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.reader-pager .next { text-align: right; }
.filter-bar { display: grid; grid-template-columns: 1fr 300px; gap: 15px; align-items: end; }
.search-field { display: flex; }
.search-field input { border-radius: 11px 0 0 11px; }
.search-field button, .hero-search button, .admin-search button { padding: 10px 20px; border: 0; border-radius: 0 11px 11px 0; background: var(--navy); color: #fff; font-weight: 800; }
.alphabet { display: flex; flex-wrap: wrap; gap: 5px; margin: 25px 0; }
.alphabet a { display: grid; place-items: center; min-width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; font-size: .8rem; font-weight: 700; }
.alphabet a.active { background: var(--navy); color: #fff; }
.result-count { margin-bottom: 18px; color: var(--muted); font-size: .85rem; }
.glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.glossary-card { padding: 23px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.glossary-card > span { color: #8b6c14; font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.glossary-card h2 { margin: 8px 0 11px; font-size: 1.35rem; }
.glossary-card p { margin: 0; color: #555d72; }
.hero-search { display: flex; max-width: 720px; margin-top: 25px; }
.hero-search input { border-radius: 12px 0 0 12px; }
.hero-search button { background: var(--gold); color: var(--navy); }
.search-columns { display: grid; grid-template-columns: 1.5fr 1fr; gap: 55px; }
.search-columns > div > h3 { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.search-result { display: block; padding: 22px 0; border-bottom: 1px solid var(--line); }
.search-result span { color: #8b6c14; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.search-result h2 { margin: 7px 0; font-size: 1.35rem; }
.search-result p { margin: 0; color: var(--muted); }
.empty-state { padding: 50px; border: 1px dashed #c9ccd5; border-radius: 18px; background: #fafafa; text-align: center; grid-column: 1 / -1; }
.empty-state p { color: var(--muted); }
.tool-hero { padding: 70px 0; }
.tool-hero h1 { margin-bottom: 16px; font-size: clamp(2.7rem, 5vw, 4.8rem); }
.adventure-hero { background: linear-gradient(120deg, #173e34, #071f28); }
.theme-hero { background: linear-gradient(120deg, #56364d, #1b1024); }
.media-hero { background: linear-gradient(120deg, #30486e, #101a35); }
.wizard { max-width: 1000px; margin: auto; }
.wizard-progress { display: flex; align-items: center; justify-content: center; margin-bottom: 45px; }
.wizard-progress span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid #cfd2dc; border-radius: 99px; background: #fff; color: #7b8192; font-weight: 850; }
.wizard-progress span.active { border-color: var(--gold); background: var(--gold); color: var(--navy); }
.wizard-progress i { width: 70px; height: 1px; background: #cfd2dc; }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.wizard-step > h2 { margin-bottom: 10px; }
.wizard-step > p { margin-bottom: 30px; color: var(--muted); }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.choice-grid-small { grid-template-columns: repeat(3, 1fr); }
.choice-card { min-height: 180px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-align: left; transition: border .2s, transform .2s, background .2s; }
.choice-card:hover, .choice-card.selected { transform: translateY(-3px); border-color: var(--gold); background: #fffcf0; }
.choice-card > span { color: #8b6c14; font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.choice-card h3 { margin: 9px 0; }
.choice-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.multi-choice .choice-card { min-height: 95px; }
.wizard-build { margin-top: 28px; }
.wizard-build:disabled { cursor: not-allowed; opacity: .4; }
.wizard-result { padding: 35px; border: 1px solid var(--line); border-radius: 25px; box-shadow: var(--shadow); }
.pathway { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 30px 0; }
.pathway > div { position: relative; padding: 18px 12px; border-radius: 12px; background: var(--cream); text-align: center; }
.pathway > div:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 38%; z-index: 2; color: #9c7b1c; font-weight: 900; }
.pathway strong, .pathway span { display: block; }
.pathway strong { color: #8b6c14; font-size: .72rem; }
.pathway span { margin-top: 6px; font-size: .85rem; font-weight: 800; }
.recommendation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 25px; }
.recommendation-grid article { padding: 19px; border: 1px solid var(--line); border-radius: 13px; }
.recommendation-grid h3 { margin: 0 0 8px; }
.recommendation-grid p { margin: 0; color: var(--muted); }
.project-name { margin: 25px 0; }
.save-status { min-height: 25px; margin-top: 12px; color: var(--green); font-weight: 700; }
.lab-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .65fr); gap: 45px; align-items: start; }
.lab-form { display: grid; gap: 14px; }
.lab-step { display: grid; grid-template-columns: 46px 1fr; gap: 15px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; }
.lab-step > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--gold-soft); color: #6f570e; font-weight: 900; }
.lab-step.final { border-color: #b98c1b; background: #fffcf2; }
.lab-score { position: sticky; top: 105px; padding: 28px; border-radius: 22px; background: var(--navy); color: #fff; }
.score-ring { display: grid; place-items: center; width: 145px; height: 145px; margin: 0 auto 22px; border: 10px solid rgba(255,255,255,.14); border-top-color: var(--gold); border-radius: 50%; }
.score-ring strong { font-size: 2.8rem; }
.score-ring span { color: #aeb3c9; }
.lab-score h2 { font-size: 1.6rem; text-align: center; }
.criteria-list { display: grid; gap: 8px; }
.criteria-list div { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: center; padding: 8px 0; color: #c5c8d9; }
.criteria-list i { width: 17px; height: 17px; border: 1px solid #6f7698; border-radius: 50%; }
.criteria-list div.pass { color: #fff; }
.criteria-list div.pass i { border-color: var(--gold); background: var(--gold); box-shadow: inset 0 0 0 4px var(--navy); }
.so-what-box { margin: 23px 0; padding: 18px; border-radius: 14px; background: rgba(255,255,255,.08); }
.so-what-box > span { color: var(--gold); font-size: .75rem; font-weight: 850; text-transform: uppercase; }
.so-what-box p { margin: 8px 0 0; color: #d4d7e5; font-size: .88rem; }
.media-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.media-card { display: grid; gap: 15px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.media-card.hidden { display: none; }
.media-card-head > span { color: #8b6c14; font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.media-card h2 { margin: 7px 0 0; font-size: 1.4rem; }
.media-card h3 { margin-bottom: 6px; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.media-card p { margin: 0; color: var(--muted); }
.media-card .risk { padding: 13px; border-radius: 10px; background: #f5f5f8; }
.text-button { justify-self: start; padding: 0; border: 0; background: none; color: #735b12; font-weight: 850; }
.text-button.selected { color: var(--green); }
.shortlist-panel { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; margin-top: 45px; padding: 30px; border-radius: 22px; background: var(--navy); color: #fff; }
.shortlist-panel p { color: #bfc3d6; }
.shortlist-panel ul { display: flex; flex-wrap: wrap; gap: 9px; align-content: start; margin: 0; padding: 0; list-style: none; }
.shortlist-panel li { padding: 8px 12px; border-radius: 99px; background: var(--gold); color: var(--navy); font-size: .82rem; font-weight: 800; }
.shortlist-panel li.empty { background: rgba(255,255,255,.1); color: #c7cada; }
.workbook-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; }
.workbook-card { margin-bottom: 15px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; }
.workbook-card > span { color: #8b6c14; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.workbook-card h3 { margin: 8px 0; }
.workbook-card details { margin-top: 15px; }
.workbook-card pre { overflow: auto; max-height: 300px; padding: 12px; border-radius: 9px; background: #f3f4f7; font-size: .72rem; white-space: pre-wrap; }
.theme-workbook-card blockquote { margin: 18px 0 0; padding: 16px; border-left: 3px solid var(--gold); background: var(--cream); font-family: Georgia, serif; font-size: 1.1rem; }
.topic-label { color: var(--muted); }
.compact-empty { padding: 30px; }
.admin-hero { padding: 48px 0 0; background: linear-gradient(110deg, #121746, #070a2b); }
.admin-hero h1 { margin-bottom: 12px; font-size: clamp(2.5rem, 5vw, 4rem); }
.admin-tabs { display: flex; gap: 4px; margin-top: 35px; overflow-x: auto; }
.admin-tabs a { padding: 13px 18px; border-radius: 10px 10px 0 0; color: #bfc3d8; font-size: .88rem; font-weight: 800; white-space: nowrap; }
.admin-tabs a.active { background: var(--paper); color: var(--navy); }
.admin-content { padding-top: 45px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 24px; }
.admin-stats > div { padding: 23px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.admin-stats span, .admin-stats strong, .admin-stats a { display: block; }
.admin-stats span { color: var(--muted); font-size: .78rem; }
.admin-stats strong { margin: 6px 0; font-size: 2.2rem; }
.admin-stats a { color: #765d10; font-size: .78rem; font-weight: 800; }
.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.admin-panel { padding: 23px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.admin-panel.wide { grid-column: 1 / -1; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.panel-heading h2 { margin: 0; font-size: 1.45rem; }
.panel-heading a { color: #765d10; font-size: .8rem; font-weight: 800; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { padding: 13px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
td strong, td small { display: block; }
td small { max-width: 400px; margin-top: 3px; color: var(--muted); }
.status-pill, [class^="decision-"] { display: inline-block; padding: 4px 8px; border-radius: 99px; background: #eceef3; font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.status-active, .status-approved, .status-ready, .decision-approved { background: #dff2e8; color: #1c6552; }
.status-pending, .status-manual, .decision-pending { background: #fff0c7; color: #73580c; }
.status-cancelled, .status-denied, .status-suspended, .status-failed, .decision-denied { background: #f8dfe1; color: #8e3037; }
.status-processing { background: #e3e9fa; color: #345799; }
.version-mini, .user-mini { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.version-mini strong, .version-mini small, .user-mini strong, .user-mini small { display: block; }
.version-mini small, .user-mini small { color: var(--muted); font-size: .75rem; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #9aa0af; }
.status-dot.live { background: #35a17c; box-shadow: 0 0 0 4px #dff2e8; }
.live-label { padding: 4px 8px; border-radius: 99px; background: var(--navy); color: var(--gold); font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.inline-live { margin-left: 7px; }
.user-mini > span, .avatar { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: var(--gold-soft); color: #745b12; font-weight: 900; }
.user-mini > div { flex: 1; }
.user-mini i { width: 9px; height: 9px; border-radius: 50%; background: #bd6470; }
.user-mini i.active { background: #38a180; }
.audit-list > div { display: grid; grid-template-columns: 150px 210px 1fr; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
.audit-list span, .audit-list p { color: var(--muted); }
.audit-list p { margin: 0; }
.file-drop { padding: 25px; border: 2px dashed #c7cad4; border-radius: 14px; background: #fafafa; text-align: center; }
.file-drop input { margin-bottom: 10px; border: 0; }
.check-row { display: flex !important; grid-template-columns: 20px 1fr; align-items: center; }
.check-row input { width: auto; }
.admin-info { margin-top: 25px; }
.admin-info ol { color: var(--muted); }
.table-button { padding: 6px 10px; border: 1px solid #c9ccd5; border-radius: 8px; background: #fff; font-size: .76rem; font-weight: 800; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.filter-links { display: flex; gap: 8px; }
.filter-links a { padding: 8px 13px; border: 1px solid var(--line); border-radius: 99px; font-size: .8rem; font-weight: 750; }
.filter-links a.active { background: var(--navy); color: #fff; }
.subscription-admin-list { display: grid; gap: 16px; }
.subscription-admin-card { padding: 25px; border: 1px solid var(--line); border-radius: 18px; }
.subscription-summary { display: grid; grid-template-columns: 45px 1fr auto; gap: 15px; align-items: center; }
.subscription-summary h2 { margin: 3px 0; font-size: 1.35rem; }
.subscription-summary p, .subscription-summary span { margin: 0; color: var(--muted); font-size: .78rem; }
.subscription-badges { display: flex; gap: 6px; }
.subscription-admin-card dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0; }
.subscription-admin-card dl div { padding: 12px; border-radius: 10px; background: #f5f6f8; }
dt { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
dd { margin: 5px 0 0; overflow-wrap: anywhere; font-size: .82rem; }
.decision-form { display: grid; grid-template-columns: 180px 1fr auto; gap: 12px; align-items: end; }
.admin-search { display: flex; max-width: 500px; margin-bottom: 20px; }
.admin-search input { border-radius: 11px 0 0 11px; }
.settings-list > div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.settings-list dd { font-weight: 800; }
@media (max-width: 980px) {
  .hero-grid, .pricing-layout, .chapter-hero-grid, .reader-layout, .lab-layout, .search-columns, .workbook-layout { grid-template-columns: 1fr; }
  .hero-visual { min-height: 500px; }
  .cover-frame { right: 15%; }
  .feature-grid, .chapter-grid, .media-grid { grid-template-columns: repeat(2, 1fr); }
  .reader-sidebar { position: static; max-height: 300px; }
  .dashboard-metrics { margin-top: -65px; }
  .continue-grid { grid-template-columns: repeat(2, 1fr); }
  .lab-score { position: static; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .subscription-admin-card dl { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .shell { width: min(100% - 26px, var(--shell)); }
  .section { padding-block: 58px; }
  h1 { font-size: 2.7rem; }
  .nav-toggle { display: inline-block; }
  .main-nav { position: absolute; display: none; left: 13px; right: 13px; top: 70px; flex-direction: column; align-items: stretch; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
  .main-nav.open { display: flex; }
  .main-nav a.active::after { display: none; }
  .brand-subtitle { display: none; }
  .hero { padding-top: 55px; }
  .hero-grid { gap: 25px; }
  .hero-visual { min-height: 390px; }
  .cover-frame { right: 6%; width: 70%; }
  .floating-card { font-size: .65rem; padding: 9px 10px; }
  .floating-card-one { top: 70px; }
  .floating-card-two { top: 180px; }
  .floating-card-three { top: 290px; }
  .hero-stats { gap: 18px; }
  .feature-grid, .chapter-grid, .sample-grid, .chapter-progress-grid, .tool-grid, .glossary-grid, .choice-grid, .choice-grid-small, .media-grid, .recommendation-grid, .admin-grid { grid-template-columns: 1fr; }
  .split-heading, .cta-inner, .reader-header, .admin-toolbar { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 25px; }
  .app-hero-grid { grid-template-columns: 1fr; }
  .progress-orbit { width: 130px; height: 130px; }
  .dashboard-metrics { grid-template-columns: 1fr; margin-top: 25px; }
  .continue-grid, .saved-grid { grid-template-columns: 1fr; }
  .chapter-progress-card { grid-template-columns: 82px 1fr; }
  .chapter-progress-card img { width: 82px; height: 82px; }
  .chapter-hero img { width: 100%; height: 220px; }
  .section-row { grid-template-columns: 45px 1fr; }
  .section-status { grid-column: 2; }
  .reader-layout { gap: 35px; }
  .reader-actions { flex-direction: column; }
  .icon-button span { display: none; }
  .filter-bar, .media-filters { grid-template-columns: 1fr; }
  .pathway { grid-template-columns: 1fr; }
  .pathway > div:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -15px; }
  .shortlist-panel { grid-template-columns: 1fr; }
  .admin-stats { grid-template-columns: 1fr; }
  .admin-panel.wide { grid-column: auto; }
  .audit-list > div { grid-template-columns: 1fr; gap: 3px; }
  .subscription-summary { grid-template-columns: 45px 1fr; }
  .subscription-badges { grid-column: 2; }
  .subscription-admin-card dl { grid-template-columns: 1fr; }
  .decision-form { grid-template-columns: 1fr; }
}
.detail-badges { display: flex; gap: 8px; margin-bottom: 22px; }
.danger-zone { margin-top: 22px; padding: 16px; border: 1px solid #efc4c7; border-radius: 12px; background: #fff7f7; }
.danger-zone summary { color: var(--red); font-weight: 850; }
.danger-button { border-color: var(--red); background: var(--red); color: #fff; }
.json-view { overflow: auto; max-height: 600px; padding: 18px; border-radius: 12px; background: #11152b; color: #d7d9e6; font-size: .76rem; white-space: pre-wrap; }
.user-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.legal-copy { max-width: 820px; margin: auto; font-size: 1.05rem; line-height: 1.8; }
.legal-warning { margin-bottom: 28px; padding: 17px; border-left: 4px solid var(--gold); background: var(--cream); font-weight: 750; }

/* User administration */
.user-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.user-stat-grid > div { padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.user-stat-grid span, .account-summary-grid span { display: block; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.user-stat-grid strong { display: block; margin-top: 5px; color: var(--navy); font-size: 1.9rem; }
.user-management-grid { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 2fr); gap: 22px; align-items: start; }
.create-user-panel { position: sticky; top: 100px; }
.panel-heading > div h2 { margin: 0; font-size: 1.55rem; }
.panel-intro { margin-bottom: 20px; color: var(--muted); font-size: .9rem; }
.stack-form { display: grid; gap: 15px; }
.stack-form label, .inline-control-form label, .delete-confirm-form label { display: grid; gap: 6px; color: #41485c; font-size: .78rem; font-weight: 800; }
.stack-form input, .stack-form select, .inline-control-form select, .delete-confirm-form input, .admin-user-filters input, .admin-user-filters select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cfd2dc; border-radius: 10px; background: #fff; color: var(--ink); }
.stack-form input:focus, .stack-form select:focus, .inline-control-form select:focus, .delete-confirm-form input:focus, .admin-user-filters input:focus, .admin-user-filters select:focus { outline: 3px solid rgba(71,117,209,.18); border-color: var(--blue); }
.check-stack { display: grid; gap: 8px; padding: 12px; border-radius: 11px; background: #f7f8fa; }
.check-row { display: grid !important; grid-template-columns: 18px 1fr !important; align-items: start !important; gap: 9px !important; font-size: .78rem !important; font-weight: 700 !important; }
.check-row input { min-height: auto; margin-top: 3px; }
.admin-user-filters { display: grid; grid-template-columns: minmax(180px, 1fr) 150px 150px auto auto; gap: 8px; align-items: center; margin: 15px 0 18px; }
.admin-user-filters button { min-height: 44px; padding: 9px 14px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 800; }
.clear-filter { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; }
.result-count { padding: 5px 9px; border-radius: 999px; background: var(--cream); color: #76601c; font-size: .7rem; font-weight: 850; }
.user-table td { vertical-align: middle; }
.user-cell { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.user-avatar { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; background: var(--navy-2); color: var(--gold); font-weight: 900; }
.user-cell strong, .user-cell small, .user-cell em { display: block; }
.user-cell small { color: var(--muted); }
.user-cell em { margin-top: 3px; color: #8a6510; font-size: .66rem; font-style: normal; font-weight: 800; }
.role-pill { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: #eef0f5; color: #52596d; font-size: .68rem; font-weight: 850; }
.role-pill.role-admin { background: #fff2c8; color: #725600; }
.manage-button { color: var(--navy); white-space: nowrap; }
.empty-state { display: grid; justify-items: center; gap: 5px; padding: 30px; color: var(--muted); text-align: center; }
.compact-admin-hero { padding-bottom: 0; }
.back-link { display: inline-block; margin-bottom: 22px; color: #d7daea; font-weight: 750; }
.user-detail-heading { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.user-detail-heading h1 { margin: 0 0 3px; font-size: clamp(2rem, 4vw, 3.8rem); }
.user-detail-heading p { margin: 0; color: #c7cadc; }
.user-avatar-large { width: 62px; height: 62px; border: 1px solid rgba(255,255,255,.25); border-radius: 18px; background: rgba(255,255,255,.1); font-size: 1.45rem; }
.user-heading-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.credential-reveal { display: grid; grid-template-columns: 1fr minmax(280px, .8fr); gap: 20px; align-items: center; margin-bottom: 22px; padding: 22px; border: 1px solid #dec46e; border-radius: 16px; background: #fff9e5; }
.credential-reveal h2 { margin-bottom: 6px; font-size: 1.4rem; }
.credential-reveal p { margin: 0; color: #6d6244; }
.credential-copy-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.credential-copy-row code { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; overflow-x: auto; border: 1px dashed #b49431; border-radius: 9px; background: #fff; color: #30260b; font-size: 1rem; font-weight: 850; }
.account-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 22px; }
.account-summary-grid > div { padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.account-summary-grid strong, .account-summary-grid small { display: block; }
.account-summary-grid strong { margin-top: 6px; color: var(--navy); font-size: 1.08rem; }
.account-summary-grid small { margin-top: 2px; color: var(--muted); }
.user-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.inline-control-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.form-help { margin: 10px 0 0; color: var(--muted); font-size: .78rem; }
.info-callout { padding: 13px 14px; border-left: 3px solid var(--blue); border-radius: 6px; background: #f1f5fd; color: #36486e; font-size: .84rem; font-weight: 700; }
.access-control-box { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-top: 18px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #f8f8fa; }
.access-control-box p { margin: 3px 0 0; color: var(--muted); font-size: .78rem; }
.permanent-delete-zone { background: #fff8f8; }
.permanent-delete-zone > p { max-width: 850px; color: #6d5052; }
.delete-confirm-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; max-width: 760px; margin-top: 17px; }
.password-change-card { max-width: 560px; }

@media (max-width: 980px) {
  .user-management-grid { grid-template-columns: 1fr; }
  .create-user-panel { position: static; }
  .user-stat-grid, .account-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-user-filters { grid-template-columns: 1fr 1fr; }
  .search-field { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .user-stat-grid, .account-summary-grid, .user-detail-grid { grid-template-columns: 1fr; }
  .admin-user-filters { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
  .user-detail-heading { grid-template-columns: auto 1fr; }
  .user-heading-badges { grid-column: 2; }
  .credential-reveal, .credential-copy-row, .inline-control-form, .access-control-box, .delete-confirm-form { grid-template-columns: 1fr; }
}