/* ══════════════════════════════════════════════════════════════════
   BioLLM CYBERPUNK — shared theme (navbar + sidebar + subscription)
   Used across every page so look & feel stay identical to /
   ══════════════════════════════════════════════════════════════════ */

:root, [data-theme="dark"] {
    --bg: #05050c;
    --bg-2: #09091a;
    --bg-3: #101028;
    --surface: #161634;
    --surface-hover: #1d1d44;
    --border: rgba(0, 229, 255, 0.09);
    --border-light: rgba(0, 229, 255, 0.22);
    --text: #e8fbff;
    --text-2: #9aaec8;
    --text-3: #5a6278;
    --accent: #7c5cff;
    --accent-2: #5f40ff;
    --accent-tint: #a088ff;
    --accent-deep: #3d2fb0;
    --accent-glow: rgba(124, 92, 255, 0.18);
    --accent-glow-sharp: rgba(124, 92, 255, 0.42);
    --teal: #00ffc6;
    --teal-2: #2dd4a8;
    --cyan: #00e5ff;
    --magenta: #ff2d95;
    --magenta-2: #ff66b8;
    --neon-hot: #ff4d6d;
    --neon-warn: #ffd447;
    --ink-highlight: #050510;
    --msg-border: rgba(0, 229, 255, 0.055);
    --r: 2px;
    --r-lg: 2px;
    --logo-invert: invert(1) brightness(2);
    --sidebar-backdrop: rgba(0, 0, 0, 0.68);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-slow: 420ms;
}

body {
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(0,229,255,0.045), transparent 60%),
        radial-gradient(ellipse 40% 35% at 0% 70%, rgba(124,92,255,0.035), transparent 70%);
}
body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35;
    background:
        linear-gradient(rgba(0,255,198,0.015) 1px, transparent 1px) 0 0 / 100% 52px,
        linear-gradient(90deg, rgba(0,229,255,0.013) 1px, transparent 1px) 0 0 / 52px 100%,
        repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.14) 3px, transparent 4px);
    mask-image: radial-gradient(ellipse 85% 60% at 50% 40%, #000 35%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 60% at 50% 40%, #000 35%, transparent 100%);
}

::selection { background: var(--cyan); color: #05050c; }
::-moz-selection { background: var(--cyan); color: #05050c; }

/* ── Topbar ─────────────────────────────────────────────────────── */
.topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1rem; height: 52px;
    background: rgba(5, 5, 12, 0.82) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 229, 255, 0.12) !important;
    flex-shrink: 0;
}
.topbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0.25; pointer-events: none;
}
.topbar-left { display: flex; align-items: center; gap: 0.75rem; }
.topbar-right { display: flex; align-items: center; gap: 0.5rem; }
.topbar-logo {
    display: flex; align-items: center; gap: 0.5rem;
    text-decoration: none; color: var(--text);
}
.topbar-logo img { width: 28px; height: auto; filter: var(--logo-invert); }
.topbar-logo span {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em;
    transition: text-shadow 0.2s;
}
.topbar-logo:hover span { text-shadow: 0 0 10px rgba(0, 255, 198, 0.3); }

.topbar-btn {
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.18);
    color: var(--text-2); cursor: pointer;
    padding: 0.4rem 0.6rem; font-size: 0.78rem; font-weight: 500;
    font-family: 'Inter', sans-serif;
    display: flex; align-items: center; gap: 0.35rem;
    transition: color .15s, border-color .15s, background .15s, box-shadow .2s, text-shadow .15s;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.topbar-btn:hover {
    color: var(--cyan); border-color: var(--cyan);
    background: rgba(0, 229, 255, 0.05);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.28);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.45);
}
.topbar-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.wallet-connected {
    border-color: var(--teal) !important; color: var(--teal) !important;
    box-shadow: 0 0 10px rgba(0, 255, 198, 0.3), inset 0 0 8px rgba(0, 255, 198, 0.06);
    text-shadow: 0 0 6px rgba(0, 255, 198, 0.5);
}
.menu-btn {
    width: 36px; height: 36px; padding: 0 !important;
    align-items: center; justify-content: center;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar-backdrop {
    position: fixed; inset: 0; z-index: 98;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

.sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 99;
    width: 320px;
    background: linear-gradient(180deg, rgba(9, 9, 26, 0.98), rgba(5, 5, 12, 0.98));
    border-left: 1px solid rgba(0, 229, 255, 0.22);
    box-shadow: -24px 0 60px -12px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column;
    padding: 0;
}
.sidebar.open { transform: translateX(0); }
@media (max-width: 440px) { .sidebar { width: 85vw; max-width: 340px; } }

.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    position: relative;
}
.sidebar-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, var(--cyan), transparent);
    opacity: 0.35;
}
.sb-brand {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; font-size: 0.95rem;
    letter-spacing: -0.01em; color: var(--text);
}
.sb-brand-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 10px var(--teal), 0 0 20px rgba(0, 255, 198, 0.4);
    animation: sb-brand-pulse 1.8s ease-in-out infinite;
}
@keyframes sb-brand-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--teal), 0 0 20px rgba(0, 255, 198, 0.4); }
    50%      { opacity: 0.55; box-shadow: 0 0 4px var(--teal); }
}
.sidebar-close {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.18);
    color: var(--text-2);
    font-size: 0; padding: 0; cursor: pointer;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
    transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.sidebar-close:hover {
    color: var(--cyan); border-color: var(--cyan);
    background: rgba(0, 229, 255, 0.08);
    box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.4);
}

/* Section labels with // prefix */
.sb-section-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0.9rem 1.1rem 0.45rem;
}
.sb-section-label::before { content: "// "; opacity: 0.6; }
.sb-section-label--inline { margin: 0; }

.sidebar-nav { flex: 1; overflow-y: auto; padding-bottom: 0.5rem; }
.sidebar-links {
    list-style: none; padding: 0 0.55rem; margin: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.sidebar-links li a {
    display: flex; align-items: center;
    padding: 0.58rem 0.75rem;
    color: var(--text-2);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.88rem; font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    position: relative;
    transition: color 0.15s, background 0.15s, padding-left 0.18s;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.sidebar-links li a::before {
    content: "";
    position: absolute; left: 0.75rem; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 4px; border-radius: 50%;
    background: transparent;
    transition: background .15s, box-shadow .15s;
}
.sidebar-links li a:hover {
    color: var(--text);
    background: rgba(0, 229, 255, 0.05);
    padding-left: 1.3rem;
}
.sidebar-links li a:hover::before {
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}
.sidebar-links li a.active {
    color: var(--text);
    background: linear-gradient(90deg, rgba(0, 255, 198, 0.08), rgba(0, 229, 255, 0.02));
    padding-left: 1.3rem;
}
.sidebar-links li a.active::before {
    background: var(--teal);
    box-shadow: 0 0 10px var(--teal);
}

.sidebar-footer {
    padding: 0 1.1rem 1.1rem;
    border-top: 1px solid rgba(0, 229, 255, 0.12);
    position: relative;
}

.sidebar-price {
    padding: 0.7rem 0.85rem;
    background: rgba(0, 229, 255, 0.025);
    border: 1px solid rgba(0, 229, 255, 0.18);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    margin: 0.9rem 0 0.55rem;
}
.sidebar-price .price-row {
    display: flex; justify-content: space-between; align-items: baseline;
}
.sidebar-price .price-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem; font-weight: 700;
    color: var(--text); letter-spacing: -0.005em;
}
.sidebar-price .price-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem; font-weight: 700; color: var(--teal);
    text-shadow: 0 0 10px rgba(0, 255, 198, 0.35);
    letter-spacing: -0.02em;
}
.sidebar-price .price-details {
    display: flex; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem; color: var(--text-3);
    margin-top: 0.35rem; letter-spacing: 0.03em;
}
.sidebar-price .price-details--sub { margin-top: 0.15rem; }
.sidebar-price .price-change { font-weight: 700; color: var(--text-2); }

.sidebar-ca {
    display: flex; align-items: center;
    gap: 0.55rem; width: 100%;
    padding: 0.55rem 0.75rem;
    background: rgba(0, 229, 255, 0.025);
    border: 1px solid rgba(0, 229, 255, 0.18);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    cursor: pointer; font-family: inherit; text-align: left;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.sidebar-ca:hover {
    border-color: var(--cyan);
    background: rgba(0, 229, 255, 0.06);
    box-shadow: 0 0 12px -4px rgba(0, 229, 255, 0.45);
}
.sidebar-ca-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.56rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--cyan);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
    padding: 2px 6px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
    flex-shrink: 0;
}
.sidebar-ca-addr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem; color: var(--text-2);
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; flex: 1; min-width: 0;
}
.sidebar-ca-copy {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cyan); flex-shrink: 0;
}

/* ── Subscription dropdown (topbar person icon) ─────────────────── */
.sub-dropdown {
    position: fixed; top: 58px; right: 0.75rem;
    z-index: 120;
    width: min(320px, calc(100vw - 1.5rem));
    opacity: 0; visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s .18s;
    background: linear-gradient(180deg, rgba(9, 9, 26, 0.98), rgba(5, 5, 12, 0.98));
    border: 1px solid rgba(0, 229, 255, 0.28);
    box-shadow: 0 14px 48px rgba(0, 0, 0, 0.55), 0 0 32px -8px rgba(0, 229, 255, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.sub-dropdown::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0.6;
}
.sub-dropdown.open {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .18s ease-out, transform .18s ease-out;
}
.sub-panel {
    padding: 0.85rem 0.95rem;
    background: transparent; border: none;
}
.sub-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.55rem;
}
.sub-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem; color: var(--text-3);
    letter-spacing: 0.04em; text-align: right;
}
.sub-plans { display: flex; flex-direction: column; gap: 0.3rem; }
.sub-plan {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.48rem 0.65rem;
    background: rgba(5, 5, 12, 0.55);
    border: 1px solid rgba(0, 229, 255, 0.14);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem; font-weight: 500;
    color: var(--text-2); cursor: pointer;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.sub-plan:hover {
    border-color: var(--teal);
    background: rgba(0, 255, 198, 0.05);
    color: var(--text);
    box-shadow: 0 0 0 1px rgba(0, 255, 198, 0.25), 0 0 14px -4px rgba(0, 255, 198, 0.35);
}
.sub-plan--featured {
    border-color: rgba(0, 255, 198, 0.35);
    background: rgba(0, 255, 198, 0.04);
    color: var(--text);
}
.sub-plan--featured:hover {
    border-color: var(--teal);
    background: rgba(0, 255, 198, 0.08);
}
.sub-plan-label { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.sub-plan-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem; font-weight: 600;
    font-style: normal; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--teal);
    padding: 2px 6px;
    background: rgba(0, 255, 198, 0.08);
    border: 1px solid rgba(0, 255, 198, 0.25);
}
.sub-plan-tag--muted {
    color: var(--text-3);
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}
.sub-plan-price {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700; color: var(--teal);
    font-size: 0.8rem;
    text-shadow: 0 0 6px rgba(0, 255, 198, 0.3);
}
.sub-add-time { display: none; margin-top: 0.45rem; }
.sub-add-btn {
    width: 100%; padding: 0.5rem;
    background: var(--teal); color: #05050c; border: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
    box-shadow: 0 0 12px rgba(0, 255, 198, 0.35);
    transition: background .15s, box-shadow .15s;
}
.sub-add-btn:hover { background: #3fffdb; box-shadow: 0 0 20px rgba(0, 255, 198, 0.55); }
.sub-msg {
    display: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem; color: var(--text-3);
    margin-top: 0.4rem; text-align: center;
    letter-spacing: 0.04em;
}

/* ── Generic cards / buttons / links on content pages ──────────── */
a { color: var(--accent-tint); transition: color .15s, text-shadow .15s; }
a:hover { color: var(--cyan); text-shadow: 0 0 6px rgba(0, 229, 255, 0.4); }
hr { border: none; border-top: 1px solid rgba(0, 229, 255, 0.12); }
code, pre {
    background: var(--bg-3);
    border: 1px solid rgba(0, 229, 255, 0.18);
    color: var(--cyan);
    font-family: 'JetBrains Mono', monospace;
    border-radius: 2px;
}
pre { padding: 0.75rem 1rem; overflow-x: auto; }
code { padding: 0.12rem 0.4rem; font-size: 0.85em; }

/* Hero block upgrade */
.hero-block img { filter: var(--logo-invert) drop-shadow(0 0 18px rgba(0, 255, 198, 0.3)); }

/* ══════════════════════════════════════════════════════════════════
   CONTENT LAYER — body components unified across all pages
   ══════════════════════════════════════════════════════════════════ */

/* Page container / content wrapper */
.content, .container, .main, .app {
    position: relative;
}

/* Typography on content pages */
.content h1, .container h1, .hero-block h1, .hero h1 {
    font-family: 'Space Grotesk', sans-serif !important;
    letter-spacing: -0.025em !important;
    color: var(--text) !important;
    text-shadow: 0 0 24px rgba(0, 255, 198, 0.18);
}
.content h2, .container h2 {
    font-family: 'Space Grotesk', sans-serif !important;
    color: var(--text) !important;
    letter-spacing: -0.015em !important;
}
.content h2::before, .container h2::before {
    content: "// ";
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7em;
    letter-spacing: 0.2em;
    color: var(--cyan);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.35);
    vertical-align: middle;
    margin-right: 0.25em;
    opacity: 0.8;
}
.content h3, .container h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    color: var(--text) !important;
}
.content p strong, .container p strong, .content li strong, .container li strong {
    color: var(--cyan) !important;
}
.content .sub, .hero-block .sub, .hero .sub {
    color: var(--text-2) !important;
}

/* Hero blocks */
.hero-block, .hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    position: relative;
}
.hero-badge, .hero .hero-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    color: var(--cyan) !important;
    background: rgba(0, 229, 255, 0.06) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    padding: 5px 12px !important;
    margin-bottom: 0.8rem !important;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
    border-radius: 0 !important;
}

/* Stat grid + stat cards */
.stat-grid, .hero-stats, .metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 1.5rem 0;
}
.stat-card, .hero-stat, .metric-card {
    padding: 18px 20px !important;
    background: rgba(0, 229, 255, 0.025) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    border-radius: 2px !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    position: relative;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.stat-card:hover, .hero-stat:hover, .metric-card:hover {
    border-color: var(--cyan) !important;
    background: rgba(0, 229, 255, 0.045) !important;
    box-shadow: 0 0 18px -4px rgba(0, 229, 255, 0.35);
}
.stat-val, .hero-stat-val, .metric-val, .fw-num {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: -0.02em !important;
    display: block;
    line-height: 1.1;
}
.stat-val.teal, .hero-stat-val, .fw-num {
    color: var(--teal) !important;
    text-shadow: 0 0 14px rgba(0, 255, 198, 0.45);
}
.stat-label, .hero-stat-label, .metric-label, .metric-name {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: var(--text-3) !important;
    display: block;
    margin-top: 0.4rem;
}

/* Generic card component */
.card, .teal-box, .highlight-box, .formula-box, .breakdown-item, .flow-step, .fw-step, .cta, .order-guide {
    background: linear-gradient(160deg, var(--bg-2), var(--bg-3)) !important;
    border: 1px solid rgba(0, 229, 255, 0.18) !important;
    border-radius: 2px !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    padding: 1.3rem 1.5rem !important;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.card::before, .teal-box::before, .highlight-box::before, .formula-box::before, .fw-step::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0.5; pointer-events: none;
}
.card:hover, .teal-box:hover, .highlight-box:hover, .breakdown-item:hover, .fw-step:hover {
    border-color: rgba(0, 229, 255, 0.4) !important;
    box-shadow: 0 0 22px -6px rgba(0, 229, 255, 0.35);
}
.teal-box, .highlight-box {
    border-left: 3px solid var(--teal) !important;
}
.formula-box {
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--cyan) !important;
    background: var(--bg-3) !important;
}
.formula-box .label {
    font-size: 0.66rem !important;
    color: var(--text-3) !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.75rem;
}

/* Buttons — unify .btn, .cta-btn, .mode-btn */
.btn, .cta-btn, .mode-btn, .example-btn {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: 2px !important;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: all .18s var(--ease-out) !important;
    cursor: pointer;
}
.btn-primary, .cta-btn.primary {
    background: var(--teal) !important;
    color: #05050c !important;
    border: none !important;
    box-shadow: 0 0 14px rgba(0, 255, 198, 0.4) !important;
}
.btn-primary:hover, .cta-btn.primary:hover {
    background: #3fffdb !important;
    box-shadow: 0 0 22px rgba(0, 255, 198, 0.6) !important;
    transform: translateY(-1px);
}
.btn-secondary, .cta-btn.secondary, .btn-ghost {
    background: rgba(0, 229, 255, 0.04) !important;
    color: var(--cyan) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
}
.btn-secondary:hover, .cta-btn.secondary:hover, .btn-ghost:hover {
    background: rgba(0, 229, 255, 0.08) !important;
    border-color: var(--cyan) !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
    color: var(--cyan) !important;
}
.mode-btn.active, .mode-btn.on {
    background: rgba(0, 255, 198, 0.08) !important;
    border-color: var(--teal) !important;
    color: var(--teal) !important;
}

/* Flywheel (tokenomics) */
.fw-line {
    background: linear-gradient(90deg, transparent, var(--cyan), transparent) !important;
    opacity: 0.45;
    height: 1px !important;
}
.fw-num {
    background: rgba(0, 255, 198, 0.08) !important;
    border: 1px solid rgba(0, 255, 198, 0.3) !important;
    color: var(--teal) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(0, 255, 198, 0.4);
}

/* Breakdown rows (opencure guide breakdown) */
.breakdown, .breakdown-grid {
    border: 1px solid rgba(0, 229, 255, 0.15) !important;
    border-radius: 2px !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.breakdown-row, .breakdown-item {
    border-bottom: 1px dashed rgba(0, 229, 255, 0.12) !important;
}
.breakdown-row:last-child, .breakdown-item:last-child { border-bottom: none !important; }

/* Footer */
.footer, .footer-note {
    color: var(--text-3) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.06em;
    border-top: 1px dashed rgba(0, 229, 255, 0.12) !important;
    padding: 1.5rem 1rem !important;
}

/* Disclaimers */
.disclaimer {
    background: rgba(255, 212, 71, 0.05) !important;
    border: 1px solid rgba(255, 212, 71, 0.25) !important;
    border-left: 3px solid var(--neon-warn) !important;
    border-radius: 2px !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    padding: 1rem 1.2rem !important;
    color: var(--text-2) !important;
}
.disclaimer-title {
    color: var(--neon-warn) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}

/* Badge-style small inline pills */
.privacy-badge, .model-badge {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    color: var(--cyan) !important;
    background: rgba(0, 229, 255, 0.06) !important;
    border: 1px solid rgba(0, 229, 255, 0.28) !important;
    padding: 3px 9px !important;
    border-radius: 0 !important;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

/* CA box on tokenomics (distinct from sidebar-ca) */
.ca-box {
    background: rgba(0, 229, 255, 0.025) !important;
    border: 1px solid rgba(0, 229, 255, 0.22) !important;
    border-radius: 2px !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    padding: 0.85rem 1rem !important;
}
.ca-label {
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--cyan) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
}
.ca-addr {
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--text) !important;
}
.ca-copy {
    color: var(--teal) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
}

/* Input fields on content pages */
input[type="text"]:not(.payment-input):not(.sub-plan input):not(.sidebar-ca input),
textarea.gene-input,
input.gene-input,
select:not(.currencySelect):not(#currencySelect) {
    background: var(--bg-3) !important;
    border: 1px solid rgba(0, 229, 255, 0.18) !important;
    color: var(--text) !important;
    border-radius: 2px !important;
    font-family: 'JetBrains Mono', monospace !important;
    padding: 0.65rem 0.85rem !important;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, textarea.gene-input:focus, input.gene-input:focus {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.5) !important;
}

/* Dividers */
.divider { border-top: 1px dashed rgba(0, 229, 255, 0.15) !important; margin: 2rem 0 !important; }

/* ── Opencure-specific + chat UI polish ─────────────────────── */
.chat-panel, .config-grid, .order-guide {
    background: linear-gradient(160deg, var(--bg-2), var(--bg-3)) !important;
    border: 1px solid rgba(0, 229, 255, 0.18) !important;
    border-radius: 2px !important;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.chat-messages {
    background: var(--bg-3) !important;
    border: 1px solid rgba(0, 229, 255, 0.12) !important;
}
.chat-input {
    background: var(--bg-3) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    color: var(--text) !important;
    border-radius: 2px !important;
    font-family: 'JetBrains Mono', monospace !important;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.chat-input:focus {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 12px -2px rgba(0, 229, 255, 0.5) !important;
    outline: none;
}
.chat-send {
    background: var(--teal) !important;
    color: #05050c !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 2px !important;
    border: none !important;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    box-shadow: 0 0 12px rgba(0, 255, 198, 0.35);
}
.chat-send:hover { background: #3fffdb !important; box-shadow: 0 0 20px rgba(0, 255, 198, 0.55) !important; }

.config-item, .consent-box {
    background: rgba(0, 229, 255, 0.025) !important;
    border: 1px solid rgba(0, 229, 255, 0.15) !important;
    border-radius: 2px !important;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.config-label {
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--cyan) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
}
.config-num {
    font-family: 'Space Grotesk', sans-serif !important;
    color: var(--teal) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(0, 255, 198, 0.35);
}
.config-select, select.config-select {
    background: var(--bg-3) !important;
    border: 1px solid rgba(0, 229, 255, 0.22) !important;
    color: var(--text) !important;
    font-family: 'JetBrains Mono', monospace !important;
    border-radius: 2px !important;
    padding: 0.45rem 0.65rem !important;
}
.gc-bar {
    background: var(--bg-3) !important;
    border: 1px solid rgba(0, 229, 255, 0.15) !important;
    height: 6px !important;
    overflow: hidden;
}
.gc-fill {
    background: linear-gradient(90deg, var(--teal), var(--cyan)) !important;
    box-shadow: 0 0 8px rgba(0, 255, 198, 0.45);
}
.mode-switch {
    background: rgba(0, 229, 255, 0.03) !important;
    border: 1px solid rgba(0, 229, 255, 0.18) !important;
    border-radius: 2px !important;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.pipeline-progress {
    background: var(--bg-3) !important;
    border: 1px solid rgba(0, 229, 255, 0.18) !important;
}
.pipeline-progress > div {
    background: linear-gradient(90deg, var(--cyan), var(--teal)) !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}
.input-row input, .gene-input {
    background: var(--bg-3) !important;
    border: 1px solid rgba(0, 229, 255, 0.18) !important;
    color: var(--text) !important;
    font-family: 'JetBrains Mono', monospace !important;
    border-radius: 2px !important;
}
.input-row input:focus, .gene-input:focus {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 10px -2px rgba(0, 229, 255, 0.5) !important;
    outline: none;
}

/* ══════════════════════════════════════════════════════════════════
   SHARP SYSTEM PASS — final shared overrides for pages that load this
   after their inline styles and after biollm-polish.css.
   ══════════════════════════════════════════════════════════════════ */

:root, [data-theme="dark"] {
    --bg: #03040a;
    --bg-2: #070a16;
    --bg-3: #0b1022;
    --surface: #10172e;
    --surface-hover: #142040;
    --border: rgba(0, 229, 255, 0.14);
    --border-light: rgba(0, 255, 198, 0.3);
    --text: #ecfdff;
    --text-2: #a9bdd4;
    --text-3: #667086;
    --panel-glass: linear-gradient(145deg, rgba(11, 16, 34, 0.9), rgba(5, 7, 16, 0.97));
    --panel-line: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.74), rgba(0, 255, 198, 0.42), transparent);
    --panel-shadow: 0 22px 70px rgba(0, 0, 0, 0.42), 0 0 42px -28px rgba(0, 229, 255, 0.85);
    --cut-sm: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    --cut-md: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

body {
    background:
        radial-gradient(1200px 720px at 50% -12%, rgba(0, 229, 255, 0.08), transparent 62%),
        radial-gradient(760px 560px at 8% 34%, rgba(124, 92, 255, 0.08), transparent 66%),
        radial-gradient(680px 520px at 95% 78%, rgba(0, 255, 198, 0.055), transparent 66%),
        var(--bg) !important;
}

.topbar {
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.025) inset;
}

.topbar-logo span,
.sb-brand,
.brand,
.logo-text {
    letter-spacing: -0.025em !important;
}

.content,
.container {
    isolation: isolate;
}

.hero,
.hero-block {
    position: relative;
    isolation: isolate;
}

.hero::before,
.hero-block::before {
    content: "";
    position: absolute;
    inset: 10% 4% auto;
    height: min(430px, 52vh);
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 229, 255, 0.13), transparent 58%),
        linear-gradient(90deg, transparent, rgba(0, 255, 198, 0.08), transparent);
    filter: blur(4px);
    opacity: 0.72;
}

.hero h1,
.hero-block h1,
.page-title,
.section-title {
    text-wrap: balance;
}

.hero .sub,
.hero-block .sub,
.section-subtitle,
.section .sub,
.sec-desc {
    text-wrap: pretty;
}

.topbar-btn,
.btn,
.cta-btn,
.mode-btn,
.example-btn,
.wallet-btn,
.acct-link-btn,
.acct-disconnect,
.cmd-tab,
.sub-plan,
.chat-send,
.key-display .copy-btn {
    border-radius: 0 !important;
    clip-path: var(--cut-sm);
}

.topbar-btn:hover,
.btn:hover,
.cta-btn:hover,
.mode-btn:hover,
.example-btn:hover,
.wallet-btn:hover,
.acct-link-btn:hover,
.cmd-tab:hover {
    transform: translateY(-1px);
}

.card,
.box,
.teal-box,
.warn-box,
.highlight-box,
.formula-box,
.info-card,
.feature-card,
.feature,
.faq-item,
.pricing-card,
.pricing-metric,
.stat-card,
.hero-stat,
.metric-card,
.gm-card,
.culture-card,
.beta-item,
.particle-item,
.breakdown-item,
.flow-step,
.fw-step,
.pack,
.acct-panel,
.wallet-status,
.modal,
.key-display,
.api-card,
.order-guide,
.chat-panel,
.config-grid,
.pipeline-progress,
.consent-box,
.cmd-panel {
    background: var(--panel-glass) !important;
    border-color: var(--border) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 1px 2px rgba(0, 0, 0, 0.32) !important;
    position: relative;
}

.card::after,
.box::after,
.teal-box::after,
.warn-box::after,
.highlight-box::after,
.info-card::after,
.feature-card::after,
.feature::after,
.pricing-card::after,
.stat-card::after,
.hero-stat::after,
.metric-card::after,
.culture-card::after,
.gm-card::after,
.acct-panel::after,
.chat-panel::after,
.config-grid::after,
.cmd-panel::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: var(--panel-line);
    opacity: 0.5;
}

.card:hover,
.box:hover,
.teal-box:hover,
.highlight-box:hover,
.info-card:hover,
.feature-card:hover,
.feature:hover,
.faq-item:hover,
.pricing-metric:hover,
.stat-card:hover,
.hero-stat:hover,
.metric-card:hover,
.gm-card:hover,
.culture-card:hover,
.beta-item:hover,
.particle-item:hover,
.pack:hover,
.acct-panel:hover {
    border-color: var(--border-light) !important;
    box-shadow: var(--panel-shadow) !important;
}

.band-alt,
.band-dark {
    background:
        linear-gradient(180deg, rgba(0, 229, 255, 0.018), rgba(0, 255, 198, 0.01)),
        rgba(3, 4, 10, 0.36) !important;
}

.section-label,
.sec-label,
.sb-section-label,
.form-group label,
.stat-label,
.hero-stat-label,
.metric-label,
.metric-name,
.lbl,
th {
    letter-spacing: 0.18em !important;
}

.stat-val,
.hero-stat-val,
.metric-val,
.pricing-metric .val,
.gm-val,
.cs-val,
.pack-credits {
    text-shadow: 0 0 18px rgba(0, 255, 198, 0.24);
}

pre,
code,
.cmd-block,
.key-display,
.formula-box {
    background:
        linear-gradient(180deg, rgba(0, 229, 255, 0.035), rgba(0, 0, 0, 0)),
        var(--bg-3) !important;
    border-color: rgba(0, 229, 255, 0.24) !important;
    box-shadow: 0 0 24px -20px rgba(0, 229, 255, 0.9) inset;
}

input,
textarea,
select {
    caret-color: var(--teal);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--teal) !important;
    box-shadow: 0 0 0 1px rgba(0, 255, 198, 0.24), 0 0 18px -8px rgba(0, 255, 198, 0.68) !important;
}

.footer {
    color: var(--text-3) !important;
    border-top: 1px solid rgba(0, 229, 255, 0.08);
}

@media (max-width: 720px) {
    .topbar {
        padding-inline: 0.75rem !important;
    }

    .hero,
    .hero-block {
        padding-inline: 1rem !important;
    }

    .card,
    .box,
    .teal-box,
    .warn-box,
    .highlight-box,
    .info-card,
    .feature-card,
    .feature,
    .faq-item {
        padding: 1rem !important;
    }
}