:root {
  --bg: #f5f5f7;
  --bg-start: #fbfbfd;
  --bg-end: #eeeeef;
  --surface: rgba(255,255,255,.78);
  --surface-solid: #fff;
  --surface-soft: rgba(255,255,255,.58);
  --surface-hover: rgba(255,255,255,.92);
  --sidebar-bg: rgba(245,245,247,.76);
  --topbar-bg: rgba(245,245,247,.74);
  --input-bg: rgba(255,255,255,.95);
  --chip-bg: #fff;
  --button-soft: rgba(0,0,0,.055);
  --line: rgba(0,0,0,.08);
  --line-strong: rgba(0,0,0,.13);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --muted-2: #8e8e93;
  --accent: #0071e3;
  --accent-2: #5e5ce6;
  --accent-rgb: 0,113,227;
  --accent-soft: rgba(var(--accent-rgb),.14);
  --accent-wash: rgba(var(--accent-rgb),.22);
  --green: #34c759;
  --orange: #ff9500;
  --purple: #af52de;
  --red: #ff3b30;
  --shadow: 0 16px 44px rgba(0,0,0,.08);
  --shadow-small: 0 6px 20px rgba(0,0,0,.06);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 15px;
  --radius-sm: 11px;
  --sidebar-width: 240px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #0b0b0f;
  --bg-start: #050509;
  --bg-end: #15151b;
  --surface: rgba(31,32,38,.74);
  --surface-solid: #1c1d23;
  --surface-soft: rgba(255,255,255,.065);
  --surface-hover: rgba(45,46,54,.90);
  --sidebar-bg: rgba(13,14,19,.80);
  --topbar-bg: rgba(13,14,19,.78);
  --input-bg: rgba(31,32,38,.92);
  --chip-bg: rgba(37,38,45,.90);
  --button-soft: rgba(255,255,255,.085);
  --line: rgba(255,255,255,.105);
  --line-strong: rgba(255,255,255,.18);
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --muted-2: #7d7d86;
  --shadow: 0 20px 56px rgba(0,0,0,.36);
  --shadow-small: 0 8px 24px rgba(0,0,0,.24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font);
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--accent-rgb),.26), transparent 32%),
    radial-gradient(circle at 88% 4%, rgba(var(--accent-rgb),.18), transparent 30%),
    radial-gradient(circle at 48% 100%, rgba(var(--accent-rgb),.13), transparent 36%),
    linear-gradient(180deg, var(--bg-start) 0%, var(--bg) 48%, var(--bg-end) 100%);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  padding: 18px 14px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.12), transparent 32%),
    var(--sidebar-bg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  overflow-y: auto; z-index: 30;
}
.brand { display:flex; align-items:center; gap:10px; padding:8px 8px 14px; margin-bottom: 4px; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,var(--accent),var(--accent-2)); font-weight:850; letter-spacing:-.05em; box-shadow:0 9px 24px rgba(var(--accent-rgb),.30); }
.brand strong { display:block; font-size:17px; line-height:1.05; }
.brand em { display:block; margin-top:3px; color:var(--muted); font-style:normal; font-size:11px; }
.nav-list { display:grid; gap:3px; }
.nav-list a { display:flex; align-items:center; min-height:38px; padding:0 11px; border-radius:12px; color:var(--text); opacity:.82; font-weight:680; font-size:13px; transition:background .16s ease, color .16s ease, transform .16s ease, opacity .16s ease; }
.nav-list a:hover { background:var(--surface-soft); transform: translateX(1px); opacity:1; }
.nav-list a.active { background:linear-gradient(135deg,rgba(var(--accent-rgb),.18),var(--surface-solid)); color:var(--accent); box-shadow:var(--shadow-small); opacity:1; }
.sidebar-card, .color-card { margin-top:16px; padding:13px; border:1px solid var(--line); border-radius:17px; background:var(--surface-soft); }
.color-eyebrow { margin-top:13px; }
.mode-picker { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom: 5px; }
.mode-button { min-height:34px; border:1px solid var(--line); border-radius:999px; background:var(--chip-bg); color:var(--text); font-weight:820; }
.mode-button.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 8px 18px rgba(var(--accent-rgb),.24); }
.color-picker { display:flex; flex-wrap:wrap; gap:8px; }
.color-dot { width:28px; height:28px; border:2px solid rgba(255,255,255,.75); border-radius:999px; box-shadow:0 2px 9px rgba(0,0,0,.18); background:var(--dot-color); }
.color-dot.active { outline:3px solid var(--accent-soft); box-shadow:0 0 0 2px var(--accent), 0 5px 14px rgba(0,0,0,.20); }
.color-dot[data-accent="blue"] { --dot-color:#0071e3; }
.color-dot[data-accent="purple"] { --dot-color:#af52de; }
.color-dot[data-accent="pink"] { --dot-color:#ff2d55; }
.color-dot[data-accent="red"] { --dot-color:#ff3b30; }
.color-dot[data-accent="orange"] { --dot-color:#ff9500; }
.color-dot[data-accent="green"] { --dot-color:#34c759; }
.color-dot[data-accent="graphite"] { --dot-color:#3a3a3c; }
.main { min-width:0; }
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px; padding:14px clamp(14px,2.4vw,28px); background:linear-gradient(90deg,rgba(var(--accent-rgb),.10),transparent 38%), var(--topbar-bg); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border-bottom:1px solid var(--line); }
.search-form { position:relative; display:flex; gap:10px; width:min(760px,100%); }
.search-form input, .big-search input, .inline-input, select { min-height:44px; border:1px solid var(--line-strong); border-radius:999px; background:var(--input-bg); outline:none; color:var(--text); }
.search-form input { width:100%; padding:0 16px; box-shadow:0 5px 18px rgba(0,0,0,.035); }
.search-form input::placeholder, .big-search input::placeholder, .inline-input::placeholder { color:var(--muted-2); }
.search-form input:focus, .big-search input:focus, .inline-input:focus, textarea:focus { border-color:rgba(var(--accent-rgb),.60); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18); }
.search-form button, .primary-button, .secondary-button, .ghost-button, .copy-button, .icon-button, .small-button { border-radius:999px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease; }
.search-form button, .primary-button { min-height:42px; padding:0 16px; border:0; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); font-weight:780; box-shadow:0 9px 22px rgba(var(--accent-rgb),.24); }
.search-form button:hover, .primary-button:hover { filter:brightness(.98); transform:translateY(-1px); }
.secondary-button, .copy-button, .small-button { min-height:36px; padding:0 13px; border:1px solid var(--line); background:var(--chip-bg); color:var(--text); font-weight:780; }
.secondary-button:hover, .copy-button:hover, .small-button:hover { transform:translateY(-1px); box-shadow:var(--shadow-small); }
.ghost-button { min-height:36px; padding:0 13px; border:0; background:var(--button-soft); color:var(--text); font-weight:780; }
.icon-button { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); background:var(--chip-bg); color:var(--text); }

.suggestions { position:absolute; top:calc(100% + 8px); left:0; width:min(520px,calc(100vw - 34px)); display:none; padding:8px; border:1px solid var(--line); border-radius:18px; background:var(--surface-solid); box-shadow:var(--shadow); z-index:100; }
.suggestions.open { display:grid; gap:4px; }
.suggestion-item { display:flex; justify-content:space-between; gap:14px; padding:10px 12px; border-radius:12px; font-weight:750; }
.suggestion-item:hover { background:var(--accent-soft); }
.suggestion-item span:last-child { color:var(--muted); font-size:12px; font-weight:650; }

.content { max-width:1120px; margin:0 auto; padding:28px clamp(16px,3vw,38px) 84px; }
.hero { display:grid; gap:18px; padding:clamp(28px,5vw,54px); border-radius:var(--radius-xl); background:linear-gradient(135deg,rgba(var(--accent-rgb),.24),rgba(var(--accent-rgb),.055)), linear-gradient(135deg,var(--surface),var(--surface-soft)); border:1px solid rgba(var(--accent-rgb),.22); box-shadow:var(--shadow); }
.hero h1, .page-title h1 { margin:0; font-size:clamp(40px,7vw,78px); line-height:.94; letter-spacing:-.065em; }
.hero p { max-width:760px; margin:0; color:var(--muted); font-size:clamp(16px,1.8vw,20px); line-height:1.42; }
.big-search { display:flex; gap:10px; max-width:720px; margin-top:6px; }
.big-search input { flex:1; min-height:56px; padding:0 20px; font-size:17px; background:var(--input-bg); }

.card, .stat-card, .loading-card, .panel, .mini-panel { border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg,rgba(var(--accent-rgb),.035),transparent), var(--surface); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); box-shadow:var(--shadow-small); }
.card, .panel { padding:20px; }
.mini-panel { padding:16px; }
.stat-card { padding:15px; }
.loading-card { max-width:540px; margin:70px auto; padding:34px; text-align:center; }
.card-grid, .stat-row, .two-column, .three-column, .four-column { display:grid; gap:14px; }
.stat-row { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:18px; }
.card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.two-column { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.three-column { grid-template-columns:repeat(3,minmax(0,1fr)); }
.four-column { grid-template-columns:repeat(4,minmax(0,1fr)); }
.section-stack { display:grid; gap:14px; margin-top:16px; }
.stat-card strong { display:block; font-size:27px; letter-spacing:-.04em; }
.stat-card span, .card p, .muted { color:var(--muted); }
.tiny { font-size:12px; line-height:1.4; }
.small { font-size:13px; line-height:1.45; }
.eyebrow { margin:0 0 7px; color:var(--accent); font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.card h2, .panel h2, .panel h3 { margin-top:0; letter-spacing:-.03em; }
.card p:last-child { margin-bottom:0; }
.card:hover { background:var(--surface-hover); transform:translateY(-1px); border-color:rgba(var(--accent-rgb),.28); }
.card { transition:transform .16s ease, background .16s ease, border-color .16s ease; }

.page-title { display:flex; justify-content:space-between; gap:18px; align-items:flex-end; margin-bottom:18px; }
.page-title h1 { font-size:clamp(36px,6vw,66px); }
.word-header { display:grid; gap:15px; padding:clamp(22px,4vw,38px); border-radius:var(--radius-xl); background:linear-gradient(135deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.05)), var(--surface); border:1px solid rgba(var(--accent-rgb),.24); box-shadow:var(--shadow); }
.word-title-row { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.word-title { margin:0; font-size:clamp(54px,9vw,104px); line-height:.88; letter-spacing:-.08em; text-transform:lowercase; }
.meta-pills, .action-row, .filter-row, .chip-row, .tabs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.badge, .source-badge, .pill, .letter-button, .filter-chip, .tab-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:29px; padding:0 10px; border-radius:999px; background:var(--button-soft); color:var(--text); border:1px solid var(--line); font-size:12px; font-weight:820; white-space:nowrap; }
.badge.level-1 { background:rgba(52,199,89,.16); color:#1f8f41; }
.badge.level-2 { background:rgba(var(--accent-rgb),.16); color:var(--accent); }
.badge.level-3 { background:rgba(255,149,0,.17); color:#b66b00; }
.badge.level-4 { background:rgba(175,82,222,.16); color:#9e48c9; }
.source-badge.verified, .source-badge.curated { background:rgba(52,199,89,.16); color:#1f8f41; }
.source-badge.compound { background:rgba(var(--accent-rgb),.16); color:var(--accent); }
.source-badge.observed { background:rgba(175,82,222,.16); color:#9e48c9; }

.tabs { margin-top:2px; padding:5px; border:1px solid var(--line); border-radius:999px; background:var(--surface-soft); width:max-content; max-width:100%; }
.tab-button { border:0; background:transparent; cursor:pointer; min-height:34px; }
.tab-button.active { color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.word-link, .phrase-chip, .copy-chip, .theme-chip { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 13px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--line); font-weight:760; box-shadow:0 3px 12px rgba(0,0,0,.05); transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.word-link:hover, .phrase-chip:hover, .copy-chip:hover, .theme-chip:hover { transform:translateY(-1px); box-shadow:0 7px 20px rgba(0,0,0,.10); border-color:rgba(var(--accent-rgb),.30); }
.phrase-chip { justify-content:space-between; }
.phrase-chip .phrase-text { white-space:nowrap; }
.phrase-chip .phrase-actions { display:flex; gap:5px; }
.phrase-chip button { border:0; background:var(--button-soft); color:var(--text); border-radius:999px; min-width:28px; min-height:28px; }
.word-grid { display:flex; flex-wrap:wrap; gap:8px; }
.compact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.section-head h2, .section-head h3 { margin:0; }
.list-grid { display:grid; gap:9px; }
.list-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px 14px; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); }
.list-item:hover { background:var(--surface-hover); }
.list-item strong { display:block; letter-spacing:-.02em; }
.list-item small { color:var(--muted); line-height:1.4; }
.filter-chip { border:1px solid transparent; cursor:pointer; user-select:none; }
.filter-chip input { display:none; }
.filter-chip:has(input:checked), .filter-chip.active { color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.inline-input { padding:0 13px; min-width:min(360px,100%); }
.alphabet-bar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:17px; }
.letter-button { min-width:35px; cursor:pointer; }
.letter-button.active { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; }
.saved-box { width:100%; min-height:220px; padding:15px; border:1px solid var(--line); border-radius:18px; background:var(--input-bg); color:var(--text); resize:vertical; outline:none; }
.builder-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:14px; }
.empty-state { padding:27px; border:1px dashed var(--line-strong); border-radius:17px; text-align:center; color:var(--muted); }
.challenge-word { font-size:clamp(48px,8vw,92px); line-height:.9; letter-spacing:-.075em; margin:0; }
.divider { height:1px; background:var(--line); margin:16px 0; }
.spinner { width:34px; height:34px; margin:0 auto 18px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(120%); padding:12px 16px; border-radius:999px; background:rgba(29,29,31,.92); color:#fff; box-shadow:var(--shadow); opacity:0; transition:opacity .18s ease, transform .18s ease; z-index:200; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.mobile-only { display:none; }

@media (min-width: 1180px) {
  .content { padding-top: 30px; }
  .word-header, .hero { box-shadow: 0 14px 36px rgba(0,0,0,.10); }
}
@media (max-width: 1040px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; transform:translateX(-105%); transition:transform .19s ease; width:min(86vw,310px); box-shadow:var(--shadow); }
  .sidebar.open { transform:translateX(0); }
  .mobile-only { display:grid; }
  .topbar { padding:12px 14px; }
  .search-form button { display:none; }
  .content { padding-top:22px; }
  .stat-row, .card-grid, .two-column, .three-column, .four-column, .compact-grid, .builder-layout { grid-template-columns:1fr; }
  .word-title-row, .page-title { display:grid; align-items:start; }
  .tabs { width:100%; border-radius:18px; }
  .tab-button { flex:1; }
}
@media (max-width: 560px) {
  .hero { padding:26px 19px; }
  .hero h1, .page-title h1 { letter-spacing:-.055em; }
  .big-search { display:grid; }
  .big-search input { min-height:52px; }
  .search-form input { min-height:43px; }
  .word-header { padding:22px 17px; }
  .word-title { font-size:58px; }
  .card, .panel { padding:17px; }
  .list-item { grid-template-columns:1fr; }
  .phrase-chip { width:100%; }
}

/* V3.2 compact UI cleanup */
.brand-copy em { display: none !important; }
.theme-pack-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.theme-pack-card { padding:14px 15px; min-height:auto; }
.theme-pack-card .eyebrow { font-size:10px; margin-bottom:5px; }
.theme-pack-card h2 { margin:0 0 5px; font-size:18px; line-height:1.05; letter-spacing:-.035em; text-transform:capitalize; }
.theme-pack-card p { margin:0; font-size:12px; line-height:1.25; }
.compact-page-title { margin-bottom:12px; }
.compact-page-title h1 { font-size:clamp(32px,5vw,56px); }
.compact-search-head { justify-content:flex-start; }
.compact-search-head .inline-input { width:min(520px,100%); }
.mini-theme-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width: 1040px) {
  .theme-pack-grid, .mini-theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .theme-pack-card { padding:13px 14px; }
  .theme-pack-card h2 { font-size:17px; }
}
@media (max-width: 560px) {
  .theme-pack-grid, .mini-theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .theme-pack-card { border-radius:16px; padding:12px; }
  .theme-pack-card h2 { font-size:16px; }
  .theme-pack-card p { font-size:11px; }
}