/* Exact palette from the Cryptik landing page. Shared by every public surface. */
:root {
  --bg: #0A0612;
  --surface: #140A26;
  --surface2: #1B0F33;
  --line: #2C1B4D;
  --pink: #FF5CC8;
  --violet: #A855F7;
  --cyan: #22D3EE;
  --text: #F4F0FF;
  --muted: #A89DC0;
  --grad: linear-gradient(100deg, #FF5CC8, #A855F7 55%, #22D3EE);
  color-scheme: dark;
}
body[data-cryptik-page] { background-color: var(--bg); color: var(--text); }
body[data-cryptik-page] ::selection { background: var(--violet); color: var(--text); }
/* Navigation is identical on the landing page and all product pages. */
body[data-cryptik-page] :is(.ck-site-header, .ck-site-footer) {
  --ck-surface: #140A26;
  --ck-panel: #1B0F33;
  --ck-line: #2C1B4D;
  --ck-text: #F4F0FF;
  --ck-muted: #A89DC0;
  --ck-pink: #FF5CC8;
}
body[data-cryptik-page] .ck-site-header { background: rgba(10, 6, 18, .97); }
body[data-cryptik-page] .ck-site-footer { background: var(--bg); }
body[data-cryptik-page] :is(.ck-brand-logo, .ck-nav-panel, .ck-footer-bottom) { border-color: var(--line); }
body[data-cryptik-page] .ck-nav-panel { background: var(--surface2); }
body[data-cryptik-page] :is(.ck-nav-summary:hover, .ck-nav-group[open] > .ck-nav-summary, .ck-nav-link:hover, .ck-nav-link[aria-current]) {
  border-color: var(--line); background: var(--surface2); color: var(--pink);
}
body[data-cryptik-page] :is(.ck-launch, .ck-launch:hover) {
  background: var(--grad); border-color: transparent; color: var(--bg);
  box-shadow: 0 3px 16px rgba(255, 92, 200, .12);
}
body[data-cryptik-page] .ck-menu-toggle { background: var(--surface); border-color: var(--line); }
body[data-cryptik-page] .ck-menu-toggle:hover { background: var(--surface2); border-color: var(--violet); }
body[data-cryptik-page] :is(.ck-brand, .ck-nav-summary, .ck-nav-link, .ck-launch, .ck-menu-toggle, .ck-footer-link, .ck-footer-contact, .ck-footer-bottom-link):focus-visible { outline-color: var(--pink); }
body[data-cryptik-page] :is(.ck-footer-link:hover, .ck-footer-contact:hover, .ck-footer-bottom-link:hover) { color: var(--pink); }
/* Main-site pages already use the palette; align the recently added page tools. */
body[data-cryptik-page] .ck-product-guide > a {
  background: linear-gradient(150deg, var(--surface2), var(--surface)); border-color: var(--line); color: var(--text);
}
body[data-cryptik-page] .ck-product-guide > a:hover { border-color: var(--pink); }
body[data-cryptik-page] :is(.ck-product-guide > a > span, .ck-outline-links a span, .ck-page-heading p) { color: var(--pink); }
body[data-cryptik-page] :is(.ck-product-guide small, .ck-site-disclaimer, .ck-page-outline > summary span) { color: var(--muted); }
body[data-cryptik-page] .ck-page-outline { background: var(--surface); border-color: var(--line); }
body[data-cryptik-page] :is(.ck-page-outline > summary, .ck-outline-links a, .ck-page-heading h2, .ck-section-brand) { color: var(--text); }
body[data-cryptik-page] .ck-outline-links a:hover { background: var(--surface2); color: var(--pink); }
body[data-cryptik-page] :is(.ck-print-button, .ck-page-heading > a) { background: var(--surface2); border-color: var(--line); color: var(--text); }
body[data-cryptik-page] :is(.ck-product-guide > a, .ck-print-button, .ck-page-outline > summary, .ck-outline-links a, .ck-page-heading > a):focus-visible { outline-color: var(--pink); }


/* Cryptik landing-page palette, scoped to app and community screens. */
body[data-cryptik-page="app"],
body[data-cryptik-page="communities"] {
  --bg: #0A0612;
  --surface: #140A26;
  --surface2: #1B0F33;
  --line: #2C1B4D;
  --pink: #FF5CC8;
  --purple: #A855F7;
  --cyan: #22D3EE;
  --text: #F4F0FF;
  --muted: #A89DC0;
  --cryptik-brand-gradient: linear-gradient(100deg, #FF5CC8, #A855F7 55%, #22D3EE);
  color: var(--text);
  background: var(--bg);
}

/* Trading app: quote content and semantic gain/loss states stay distinct. */
body[data-cryptik-page="app"] :is(.acct, .sub, .lbl, .row, .tab, footer, footer a) { color: var(--muted); }
body[data-cryptik-page="app"] .chg:not(.up):not(.down) { color: var(--muted); }
body[data-cryptik-page="app"] :is(.card, .tabs) { background: var(--surface); border-color: var(--line); }
body[data-cryptik-page="app"] .out { background: var(--surface2); }
body[data-cryptik-page="app"] :is(.amt, .price, .out .big) { color: var(--text); }
body[data-cryptik-page="app"] .amt::placeholder { color: var(--muted); opacity: .65; }
body[data-cryptik-page="app"] .amt:focus-visible { outline: 2px solid var(--pink); outline-offset: 5px; border-radius: 3px; }
body[data-cryptik-page="app"] #outNote { color: var(--muted) !important; }
body[data-cryptik-page="app"] :is(.link, footer a:hover) { color: var(--pink); }
body[data-cryptik-page="app"] :is(.go, .tab.on) { background: var(--cryptik-brand-gradient); color: var(--bg); }
body[data-cryptik-page="app"] .brand span { background-image: var(--cryptik-brand-gradient); }
body[data-cryptik-page="app"] :is(.pct button, .chain) { background: var(--surface2); border-color: var(--line); color: var(--text); }
body[data-cryptik-page="app"] .pct button:is(:hover, :active) { background: var(--surface); border-color: var(--pink); }
body[data-cryptik-page="app"] :is(button, a):focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
body[data-cryptik-page="app"] .msg.info { background: var(--surface2); color: var(--text); }
body[data-cryptik-page="app"] .msg.info a { color: var(--pink) !important; }
/* App-created wallet chooser sheets have inline styles; scope overrides to their outer overlay. */
body[data-cryptik-page="app"] > div:is([style*="z-index: 9999"], [style*="z-index:9999"]) { background: rgba(10, 6, 18, .92) !important; }
body[data-cryptik-page="app"] > div:is([style*="z-index: 9999"], [style*="z-index:9999"]) > div { background: var(--surface) !important; border-color: var(--line) !important; }
body[data-cryptik-page="app"] > div:is([style*="z-index: 9999"], [style*="z-index:9999"]) > div > :is(button, a) { background: var(--surface2) !important; border-color: var(--line) !important; color: var(--text) !important; }
body[data-cryptik-page="app"] > div:is([style*="z-index: 9999"], [style*="z-index:9999"]) > div > button[style*="linear-gradient"] { background: var(--cryptik-brand-gradient) !important; color: var(--bg) !important; }
body[data-cryptik-page="app"] > div:is([style*="z-index: 9999"], [style*="z-index:9999"]) > div > div[style*="color:"] { color: var(--muted) !important; }
body[data-cryptik-page="app"] > div:is([style*="z-index: 9999"], [style*="z-index:9999"]) > div > div[style*="height: 4px"] { background: var(--line) !important; }

/* Public directory and individual project-page shell. User-uploaded art is never recolored. */
body[data-cryptik-page="communities"] :is(.community-header, .sidebar, .segmented) { background: var(--bg); border-color: var(--line); }
body[data-cryptik-page="communities"] :is(.card, .profile-intro, .visual-card, dialog) { background: var(--surface); border-color: var(--line); color: var(--text); }
body[data-cryptik-page="communities"] :is(.outline, .floating-label, .join-prompt, .preview-label, .local-notice, .badge, .chip, .status-chip, .promotion-active, .promotion-quote, .promotion-receipt, .promotion-product) { background: var(--surface2); border-color: var(--line); color: var(--text); }
body[data-cryptik-page="communities"] :is(.primary, .feature-button) { background: var(--cryptik-brand-gradient); border-color: transparent; color: var(--bg); box-shadow: 0 3px 14px rgba(255, 92, 200, .12); }
body[data-cryptik-page="communities"] :is(.primary, .feature-button):hover { background: var(--cryptik-brand-gradient); border-color: var(--pink); }
body[data-cryptik-page="communities"] :is(.outline, .floating-label):hover { background: var(--surface); border-color: var(--pink); }
body[data-cryptik-page="communities"] :is(.text-button, .eyebrow, .token-symbol, .post-kind, legend, .image-button, .project-links a, .promotion-receipt>a) { color: var(--pink); }
body[data-cryptik-page="communities"] .text-button:hover { color: var(--cyan); }
body[data-cryptik-page="communities"] :is(button, a, summary):focus-visible { outline-color: var(--pink); }
body[data-cryptik-page="communities"] :is(input, select, textarea, .slug-field) { background: var(--bg); border-color: var(--line); color: var(--text); }
body[data-cryptik-page="communities"] :is(input, select, textarea):focus { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(255, 92, 200, .12); }
body[data-cryptik-page="communities"] :is(input, textarea)::placeholder { color: var(--muted); opacity: .8; }
body[data-cryptik-page="communities"] :is(.image-button, .upload-field, .visual-pills span, .promotion-recovery, .network-tag) { border-color: var(--line); }
body[data-cryptik-page="communities"] :is(.network-tag, .visual-pills span, .promotion-recovery, .promotion-details dd, .visual-cover>span, .mini-info strong, summary) { color: var(--text); }
body[data-cryptik-page="communities"] :is(.free-note, .directory-disclosure, .affiliation-note, .post-top small, .slug-field>span, .upload-field>span, .promotion-product>small, .promotion-details dt, .promotion-reference, .promotion-status, label, .footer-sub, .side-label, .orb-label, .stats small) { color: var(--muted); }
body[data-cryptik-page="communities"] .profile-intro .affiliation-note { color: var(--muted); }
body[data-cryptik-page="communities"] .post-body { color: var(--text) !important; }
body[data-cryptik-page="communities"] .project-card:hover { border-color: var(--pink); }
body[data-cryptik-page="communities"] .empty-community { border-color: var(--line); background: var(--surface); }
body[data-cryptik-page="communities"] :is(.project-cover, .profile-cover) { background: radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, .28), transparent 60%), linear-gradient(115deg, #1B0F33, #140A26); }
body[data-cryptik-page="communities"] .profile-cover>span { color: rgba(244, 240, 255, .45); }
body[data-cryptik-page="communities"] .project-avatar { background: var(--surface2); border-color: var(--surface); color: var(--pink); }
body[data-cryptik-page="communities"] :is(.feed-tabs .selected, .segmented .selected, .nav.active) { background: var(--surface2); border-color: var(--pink); color: var(--pink); }
body[data-cryptik-page="communities"] :is(.post-image, .project-details .token-address) { background: var(--bg); color: var(--text); }
body[data-cryptik-page="communities"] .promotion-product:is(:hover, .selected) { background: var(--surface); border-color: var(--pink); }
body[data-cryptik-page="communities"] :is(.promotion-product>strong, .promotion-amount) { color: var(--text); }
body[data-cryptik-page="communities"] .promotion-dialog .eyebrow { color: var(--pink); }
body[data-cryptik-page="communities"] .sponsored-label { color: var(--cyan); }
body[data-cryptik-page="communities"] .sponsored-label>span { background: var(--surface2); border-color: var(--line); }
body[data-cryptik-page="communities"] .sponsored-label small { color: var(--muted); }
body[data-cryptik-page="communities"] .visual-ring { border-color: rgba(168, 85, 247, .2); box-shadow: 0 0 0 32px rgba(168, 85, 247, .04), 0 0 0 65px rgba(168, 85, 247, .03); background: radial-gradient(ellipse, rgba(255, 92, 200, .14), transparent 67%); }
body[data-cryptik-page="communities"] .visual-cover { background: radial-gradient(at 80% 40%, rgba(255, 92, 200, .42), transparent 50%), linear-gradient(140deg, #A855F7, #1B0F33); }
body[data-cryptik-page="communities"] .visual-orb { color: var(--pink); text-shadow: 0 0 30px rgba(255, 92, 200, .4); }
body[data-cryptik-page="communities"] .visual-avatar { border-color: var(--surface); background: var(--surface2); color: var(--pink); }
body[data-cryptik-page="communities"] dialog::backdrop { background: rgba(10, 6, 18, .8); }
body[data-cryptik-page="communities"] .toast { background: var(--surface2); border-color: var(--line); color: var(--text); }
@media (max-width: 720px) {
  body[data-cryptik-page="communities"] .visual-ring { box-shadow: 0 0 0 20px rgba(168, 85, 247, .04); }
}


/* Gaming chrome uses the landing-page palette; game artwork and outcome colors keep their meaning. */
body[data-cryptik-page="play"] {
  --bg: #0A0612;
  --surface: #140A26;
  --surface2: #1B0F33;
  --line: #2C1B4D;
  --pink: #FF5CC8;
  --violet: #A855F7;
  --cyan: #22D3EE;
  --text: #F4F0FF;
  --muted: #A89DC0;
  --grad: linear-gradient(100deg, #FF5CC8, #A855F7 55%, #22D3EE);
  background: var(--bg);
  color: var(--text);
}

body[data-cryptik-page="play"] > nav {
  background: rgba(10, 6, 18, .96);
  border-color: var(--line);
}
body[data-cryptik-page="play"] #sidebar {
  background: var(--surface);
  border-color: var(--line);
  scrollbar-color: var(--line) transparent;
}
body[data-cryptik-page="play"] :is(.sb-group, .sb-item, .sb-item i, .xnav .xn) { color: var(--muted); }
body[data-cryptik-page="play"] :is(.sb-item:hover, .xnav .xn:hover) {
  background: var(--surface2);
  color: var(--text);
}
body[data-cryptik-page="play"] :is(.sb-item.on, .xnav .xn.on) {
  background: rgba(168, 85, 247, .14);
  border-color: var(--line);
  color: var(--pink);
}
body[data-cryptik-page="play"] .sb-item.on i { color: var(--pink); }
body[data-cryptik-page="play"] .sb-item .badge { color: var(--cyan); }
body[data-cryptik-page="play"] :is(.logo img, .sb-logo img) { box-shadow: 0 0 20px rgba(255, 92, 200, .1); }

/* Primary actions mirror the three-color landing-page gradient. */
body[data-cryptik-page="play"] :is(.btn-p, #depositBtn, #walletBtn) {
  background: var(--grad);
  color: var(--bg);
  border-color: transparent;
}
body[data-cryptik-page="play"] :is(.btn-p:hover, #depositBtn:hover, #walletBtn:hover) { background: var(--grad); }
body[data-cryptik-page="play"] :is(.btn-g, #wcBtn, #navBtn, .backbar button, .hero-actions .btn-g) {
  background: var(--surface2);
  border-color: var(--line);
  color: var(--text);
}
body[data-cryptik-page="play"] :is(.btn-g:hover, #wcBtn:hover, #navBtn:hover, .backbar button:hover) {
  background: var(--surface2);
  border-color: var(--violet);
}
body[data-cryptik-page="play"] #logoutBtn { background: transparent; color: var(--muted); }
body[data-cryptik-page="play"] #userbar .chip {
  background: var(--surface);
  border-color: var(--line);
}
body[data-cryptik-page="play"] #userbar .chip b { color: var(--text); }
body[data-cryptik-page="play"] :is(input, select, .game-search) {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--line);
}
body[data-cryptik-page="play"] :is(input, select):focus,
body[data-cryptik-page="play"] .game-search:focus-within { border-color: var(--violet); }
body[data-cryptik-page="play"] input::placeholder { color: var(--muted); opacity: 1; }
body[data-cryptik-page="play"] .game-search input { background: transparent; }
body[data-cryptik-page="play"] .game-search svg { stroke: var(--muted); }

body[data-cryptik-page="play"] #modeBar {
  background: var(--surface);
  border-color: var(--line);
}
body[data-cryptik-page="play"] #modeBar.is-real { border-color: var(--pink); }
body[data-cryptik-page="play"] :is(#modeBar > b, #modeMsg) { color: var(--muted); }
/* These exact active-state rules replace existing important rules in gaming-v2.css. */
body[data-cryptik-page="play"] #modeBar button[aria-pressed="true"] {
  background: rgba(34, 211, 238, .12) !important;
  color: var(--cyan) !important;
  border-color: rgba(34, 211, 238, .4) !important;
}
body[data-cryptik-page="play"] #modeBar.is-real button[aria-pressed="true"] {
  background: rgba(255, 92, 200, .12) !important;
  color: var(--pink) !important;
  border-color: rgba(255, 92, 200, .4) !important;
}

body[data-cryptik-page="play"] .hero-v2 {
  background: radial-gradient(ellipse at 78% 62%, rgba(168, 85, 247, .18), transparent 65%), var(--surface);
  border-color: var(--line);
}
body[data-cryptik-page="play"] .hero-v2::before {
  background: repeating-linear-gradient(115deg, transparent 0, transparent 79px, rgba(168, 85, 247, .035) 80px, rgba(168, 85, 247, .035) 81px);
}
body[data-cryptik-page="play"] :is(.hero-v2 h2 em, .welcome-story h1 em, .eyebrow, .control-heading, .lb-eyebrow) { color: var(--pink); }
body[data-cryptik-page="play"] :is(.eyebrow i, .welcome-features span::before) {
  background: var(--pink);
  box-shadow: 0 0 12px rgba(255, 92, 200, .4);
}
body[data-cryptik-page="play"] :is(.hero-v2 p, .hero-note, .hero-corner, .library-heading .eyebrow, .library-heading h3 span, .library-filters button, .welcome-story > p, .welcome-features, .auth-card > p, .auth-card .wallet-note, .play-principles p, .gaming-footnote) { color: var(--muted); }
body[data-cryptik-page="play"] :is(.library-filters button[aria-pressed="true"], .lb-switch button[aria-pressed="true"], .ex-choices button[aria-pressed="true"]) {
  background: var(--grad);
  border-color: transparent;
  color: var(--bg);
}
body[data-cryptik-page="play"] .library-filters button:hover { color: var(--text); }
body[data-cryptik-page="play"] .library-filters button[aria-pressed="true"]:hover { color: var(--bg); }
body[data-cryptik-page="play"] .gcard {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
body[data-cryptik-page="play"] .gcard:hover { background: var(--surface2); border-color: var(--violet); }
body[data-cryptik-page="play"] .gcard::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, .14), transparent 75%);
  border-color: var(--line);
}
body[data-cryptik-page="play"] .gcard[data-category="arcade"]::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(34, 211, 238, .12), transparent 80%);
}
body[data-cryptik-page="play"] :is(.gcard .game-subtitle, .gcard .gby) { color: var(--muted); }
body[data-cryptik-page="play"] :is(.game-arrow, .play-principles span) { color: var(--pink); }
body[data-cryptik-page="play"] .auth-card { background: var(--surface); border-color: var(--line); }
body[data-cryptik-page="play"] #installQr .iq-line span { background: var(--line); }
body[data-cryptik-page="play"] #installQr :is(.iq-line b, .iq-cap) { color: var(--muted); }
body[data-cryptik-page="play"] #installQr .iq-cap b { color: var(--text); }
body[data-cryptik-page="play"] #installQr .iq-box img { border-color: var(--line); }

/* Outer game panels and controls are themed without replacing playing cards or felt. */
body[data-cryptik-page="play"] :is(.panel, #p-blackjack) { background: var(--surface); border-color: var(--line); }
body[data-cryptik-page="play"] .g2 > div:first-child { background: var(--surface2); border-color: var(--line); }
body[data-cryptik-page="play"] .g2 label { color: var(--muted); }
body[data-cryptik-page="play"] .bet-row button {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
body[data-cryptik-page="play"] .result {
  background: radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, .1), transparent 75%), var(--surface2);
  border-color: var(--line);
}
body[data-cryptik-page="play"] :is(.result, .ex-result):not(.win):not(.lose):not(.push) { color: var(--text); }
body[data-cryptik-page="play"] :is(.hist, .game-guide, .ex-paytable) { border-color: var(--line); }
body[data-cryptik-page="play"] .hist span { background: var(--surface2); border-color: var(--line); }
body[data-cryptik-page="play"] .game-guide summary { color: var(--text); }
body[data-cryptik-page="play"] .game-guide summary::marker { color: var(--pink); }
body[data-cryptik-page="play"] :is(.game-guide p, .ex-description, .ex-note, .ex-stage-caption, .ex-paytable > div, .ex-paytable small, .ex-result small, .ex-choices button, .ex-proof, .lb-description, .lb-switch button, .lb-footer) { color: var(--muted); }
body[data-cryptik-page="play"] :is(.ex-return, .ex-paytable b, .ex-stage-label) { color: var(--text); }
body[data-cryptik-page="play"] :is(.seg, .ex-choices, .ex-proof, .lb-switch, .fair-box) { background: var(--surface2); border-color: var(--line); }
body[data-cryptik-page="play"] .seg button { color: var(--muted); }
body[data-cryptik-page="play"] .seg button.on { background: var(--grad); color: var(--bg); }
body[data-cryptik-page="play"] .ex-choices button[aria-pressed="true"],
body[data-cryptik-page="play"] .lb-switch button[aria-pressed="true"] { color: var(--bg); }
body[data-cryptik-page="play"] .fair-box .v { color: var(--cyan); }
body[data-cryptik-page="play"] :is(.cr-stage, .pk-stage, .lb-stage, .dc-stage, .slots-stage, .rps-stage) {
  background: radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, .15), transparent 70%), var(--surface2);
  border-color: var(--line);
}
body[data-cryptik-page="play"] .ex-stage { border-color: var(--line); }
body[data-cryptik-page="play"] .dice-track { background: var(--line); }
body[data-cryptik-page="play"] .dice-fill { background: var(--grad); }
body[data-cryptik-page="play"] .lb-table-wrap { border-color: var(--line); }
body[data-cryptik-page="play"] #p-leaders th { background: var(--surface2); color: var(--muted); border-color: var(--line); }
body[data-cryptik-page="play"] #p-leaders td { color: var(--text); border-color: var(--line); }
body[data-cryptik-page="play"] #p-leaders :is(.lb-rank, .lb-message) { color: var(--muted); }
body[data-cryptik-page="play"] .msg { background: var(--surface2); border-color: var(--violet); color: var(--text); }

/* Wallet inline styles and earlier important declarations need narrowly scoped overrides. */
body[data-cryptik-page="play"] #dwModal { background: rgba(10, 6, 18, .78) !important; }
body[data-cryptik-page="play"] #dwModal > div {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
body[data-cryptik-page="play"] :is(#dwBalanceCard, #dwAddr) {
  background: var(--surface2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-cryptik-page="play"] #dwModal :is(input, select) {
  background: var(--surface2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-cryptik-page="play"] #dwModal :is(input, select):focus { border-color: var(--violet) !important; }
body[data-cryptik-page="play"] #dwModal label,
body[data-cryptik-page="play"] :is(#dwClose, #dwBalanceCard > div > span, #dwWithdrawableNow, #dwHeld) { color: var(--muted) !important; }
body[data-cryptik-page="play"] #dwBalanceAmount { color: var(--text) !important; }
body[data-cryptik-page="play"] #dwTabs .dw-tab { background: var(--surface2); color: var(--muted); border-color: var(--line); }
body[data-cryptik-page="play"] #dwTabs .dw-tab.on { background: var(--grad); color: var(--bg); border-color: transparent; }


/* Cryptik DEX: landing-page colors only. Load after the DEX stylesheets.
   Scope is the three DEX pages; external charts, logos and risk colors are retained. */
body.ck-dex-page[data-cryptik-page] {
  --bg: #0A0612;
  --ink: #0A0612;
  --surface: #140A26;
  --raise: #140A26;
  --surface2: #1B0F33;
  --raise2: #1B0F33;
  --line: #2C1B4D;
  --text: #F4F0FF;
  --mute: #A89DC0;
  --muted: #A89DC0;
  --pink: #FF5CC8;
  --violet: #A855F7;
  --cyan: #22D3EE;
  --grad: linear-gradient(100deg, #FF5CC8, #A855F7 55%, #22D3EE);
  --terminal-bg: var(--bg);
  --terminal-line: var(--line);
  --terminal-muted: var(--muted);
  --terminal-accent: var(--pink);
  background: var(--bg) !important;
  color: var(--text);
  color-scheme: dark;
}

/* Persistent market navigation and the existing toolbar. */
body.ck-dex-page[data-cryptik-page] #market-sidebar {
  background: var(--surface);
  border-color: var(--line);
  scrollbar-color: var(--line) var(--surface);
}
body.ck-dex-page[data-cryptik-page] [data-dex-toolbar] {
  background: rgba(10, 6, 18, .97) !important;
  border-color: var(--line);
}
body.ck-dex-page[data-cryptik-page] .market-brand { color: var(--text) !important; }
body.ck-dex-page[data-cryptik-page] .market-brand span,
body.ck-dex-page[data-cryptik-page] .side-link span,
body.ck-dex-page[data-cryptik-page] .eyebrow,
body.ck-dex-page[data-cryptik-page] .bridge-eyebrow { color: var(--pink); }
body.ck-dex-page[data-cryptik-page] .side-link { color: var(--muted) !important; }
body.ck-dex-page[data-cryptik-page] .side-link:is(:hover, .active) {
  background: var(--surface2);
  color: var(--pink) !important;
}
body.ck-dex-page[data-cryptik-page] .terminal-nav a { color: var(--muted); }
body.ck-dex-page[data-cryptik-page] .terminal-nav a:is(:hover, [aria-current="page"]) { color: var(--pink); }
body.ck-dex-page[data-cryptik-page] .side-bottom a { color: var(--muted); }
body.ck-dex-page[data-cryptik-page] .side-bottom a:hover { color: var(--text); }
body.ck-dex-page[data-cryptik-page] .network-dot { background: var(--violet); }

/* Surfaces, data tables and market summaries. */
body.ck-dex-page[data-cryptik-page] :is(.card, .panel, .swp, .list-card, .tier-banner, .tier-card, .crptk-overview, .project-actions, .project-dialog, .wmodal),
body.ck-dex-page[data-cryptik-page] .market-highlights article,
body.ck-dex-page[data-cryptik-page] .stats .stat {
  background: var(--surface) !important;
  background-image: none !important;
  border-color: var(--line) !important;
}
body.ck-dex-page[data-cryptik-page] :is(.market-table-scroll, .ptab, .overview-changes, .overview-about, .panel-h, .frow, .quote, .tabs, footer),
body.ck-dex-page[data-cryptik-page] .market-table td,
body.ck-dex-page[data-cryptik-page] .highlight-token { border-color: var(--line); }
body.ck-dex-page[data-cryptik-page] .market-table th,
body.ck-dex-page[data-cryptik-page] .ph { background: var(--surface2); color: var(--muted); }
body.ck-dex-page[data-cryptik-page] .market-row:hover,
body.ck-dex-page[data-cryptik-page] #list .row:is(:hover, :focus-visible) { background: var(--surface2); }
body.ck-dex-page[data-cryptik-page] :is(.chartbox, .chart-nopool) { background: var(--bg); }
body.ck-dex-page[data-cryptik-page] .audit-note { background: var(--surface2); border-color: var(--line); color: var(--muted); }
body.ck-dex-page[data-cryptik-page] .tier-card.active { border-color: var(--pink) !important; }
body.ck-dex-page[data-cryptik-page] .token-letter { background: var(--surface2); color: var(--pink); }
body.ck-dex-page[data-cryptik-page] .platform-strip .bnr {
  background-color: var(--surface2) !important;
  border-color: var(--pink);
}
body.ck-dex-page[data-cryptik-page] .bnr:not([style*="background-image"]) {
  background: linear-gradient(100deg, rgba(255, 92, 200, .1), rgba(168, 85, 247, .06), transparent) !important;
  border-color: var(--line);
}
body.ck-dex-page[data-cryptik-page] .bnr-tag { background: var(--pink); color: var(--bg); }
body.ck-dex-page[data-cryptik-page] .grade.plat { color: var(--pink); border-color: var(--pink); background: rgba(255, 92, 200, .08); }
body.ck-dex-page[data-cryptik-page] .tk-score b[style*="color:#ff2c9c"] { color: var(--pink) !important; }

/* Small text remains readable against both exact landing-page surfaces. */
body.ck-dex-page[data-cryptik-page] :is(.side-label, .side-bottom small, .terminal-status, .market-summary, .market-tools, .rank, .network-pill, .score-number, .table-empty, .overview-description, .project-dialog p, .project-actions small, .wmodal h3, .wmodal-close, .woption-desc, .wmodal-sep, .swp-acct, .swp-chain, .swp-row, .swp-slip, #swp-fee-note, .market-brand small),
body.ck-dex-page[data-cryptik-page] :is(.market-highlights h2 small, .highlight-token small, .token-cell small, .market-table caption, .market-table td > small, .overview-heading h2 span, .overview-heading p, .crptk-overview small, .crptk-overview footer, .lede p, .swp-f label),
body.ck-dex-page[data-cryptik-page] .nm > small[style*="color:#b5acc8"] { color: var(--muted) !important; }
body.ck-dex-page[data-cryptik-page] :is(.market-summary b, .market-tools b, .token-cell, .highlight-token, .overview-price > strong, .woption-name, .swp-row b:not(.warn):not(.risk)) { color: var(--text); }
body.ck-dex-page[data-cryptik-page] .crptk-overview a:not(.overview-trade),
body.ck-dex-page[data-cryptik-page] .audit-note a,
body.ck-dex-page[data-cryptik-page] #back-markets { color: var(--pink); }

/* Search, forms and neutral control states. */
body.ck-dex-page[data-cryptik-page] :is(.seek input, .search-shortcut, .project-dialog input, .project-dialog select, .project-dialog textarea, .field, .swp-f, .swp-chain select, #promo input, #promo select, #promo textarea),
body[data-cryptik-page="bridge"] :is(input, select) {
  background: var(--bg);
  color: var(--text);
  border-color: var(--line);
}
body.ck-dex-page[data-cryptik-page] :is(.field input, .swp-f input) { background: transparent; color: var(--text); }
body.ck-dex-page[data-cryptik-page] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
body.ck-dex-page[data-cryptik-page] select option { background: var(--surface); color: var(--text); }
body.ck-dex-page[data-cryptik-page] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--pink); }
body.ck-dex-page[data-cryptik-page] :is(.tchip, .ctab, .pct, .swp-tok, .swp-max, .swp-disc, .swap, .woption),
body.ck-dex-page[data-cryptik-page] .tabs button,
body.ck-dex-page[data-cryptik-page] :is(.slipsel, .swp-slip) button {
  background: var(--surface2);
  color: var(--muted);
  border-color: var(--line);
}
body.ck-dex-page[data-cryptik-page] :is(.tchip.hot, .ctab.on),
body.ck-dex-page[data-cryptik-page] .tabs button[aria-selected="true"] {
  background: var(--surface2);
  color: var(--pink);
  border-color: var(--pink);
}
body.ck-dex-page[data-cryptik-page] .tchip:not(.hot):hover,
body.ck-dex-page[data-cryptik-page] :is(.pct, .swp-max, .swap, .woption):hover { border-color: var(--violet); color: var(--text); }
body.ck-dex-page[data-cryptik-page] :is(.swp-tok, .swp-max) { color: var(--text); }
body.ck-dex-page[data-cryptik-page] .swp-disc:hover { color: var(--risk); border-color: var(--risk); }
body.ck-dex-page[data-cryptik-page] .watch-toggle { color: var(--muted) !important; }
body.ck-dex-page[data-cryptik-page] .watch-toggle.saved { color: var(--pink) !important; }
body.ck-dex-page[data-cryptik-page] :is(#market-refresh, #market-more, .btnlink.alt, .project-actions button:first-of-type) {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--line);
}
body.ck-dex-page[data-cryptik-page] :is(#market-refresh, #market-more, .btnlink.alt):hover { border-color: var(--violet); }

/* Brand actions use the exact landing-page gradient and dark button lettering. */
body.ck-dex-page[data-cryptik-page] :is(.btn-grad, .btnlink:not(.alt), .connect-btn, .list-btn, .overview-trade, button.go),
body.ck-dex-page[data-cryptik-page] .seek button,
body.ck-dex-page[data-cryptik-page] .project-actions button:not(:first-of-type),
body.ck-dex-page[data-cryptik-page] .project-dialog button[type="submit"],
body.ck-dex-page[data-cryptik-page] :is(.slipsel, .swp-slip) button.on {
  background: var(--grad) !important;
  background-image: var(--grad) !important;
  color: #12041F !important;
  border-color: transparent;
}

/* Preserve the purpose of buy/sell colors; a disconnected wallet is a brand action. */
body.ck-dex-page[data-cryptik-page] .swp-tab { background: var(--surface2); color: var(--muted); }
body.ck-dex-page[data-cryptik-page] .swp-tab.b { background: rgba(52, 211, 153, .12) !important; color: var(--good) !important; border-color: var(--good); }
body.ck-dex-page[data-cryptik-page] .swp-tab.s { background: rgba(248, 113, 113, .12) !important; color: var(--risk) !important; border-color: var(--risk); }
body.ck-dex-page[data-cryptik-page] .swp-cta.b { background: linear-gradient(90deg, #34D399, #7FE9BD) !important; background-image: linear-gradient(90deg, #34D399, #7FE9BD) !important; color: #07130D !important; }
body.ck-dex-page[data-cryptik-page] .swp-cta.s { background: linear-gradient(90deg, #F87171, #FF9D9D) !important; background-image: linear-gradient(90deg, #F87171, #FF9D9D) !important; color: #180708 !important; }
body.ck-dex-page[data-cryptik-page] .swp:not(:has(.swp-acct)) .swp-cta { background: var(--grad) !important; background-image: var(--grad) !important; color: #12041F !important; }

/* Local wallet and payment dialogs; the wallet providers retain their own logos. */
body.ck-dex-page[data-cryptik-page] :is(.wmodal, .project-dialog) { color: var(--text); }
body.ck-dex-page[data-cryptik-page] .wmodal-bg,
body.ck-dex-page[data-cryptik-page] .project-dialog::backdrop { background: rgba(10, 6, 18, .86); }
body.ck-dex-page[data-cryptik-page] .wmodal-close:hover { background: var(--surface2); color: var(--text); }
body.ck-dex-page[data-cryptik-page] .wmodal-sep::before,
body.ck-dex-page[data-cryptik-page] .wmodal-sep::after { background: var(--line); }
body.ck-dex-page[data-cryptik-page] .project-close { color: var(--muted); }
body.ck-dex-page[data-cryptik-page] #ck-toasts > div { background: var(--surface2) !important; color: var(--text) !important; }
body.ck-dex-page[data-cryptik-page] #ck-toasts button { color: var(--muted) !important; }
body[data-cryptik-page="bridge"] > div[style*="position:fixed"] > div > button[style*="background:#0F0720"] { background: var(--surface2) !important; }

/* Apply landing accents to route UI without altering quote warnings or transactions. */
body[data-cryptik-page="bridge"] .chip { background: var(--surface); border-color: var(--line); }
body[data-cryptik-page="bridge"] .chip.hub { background: var(--grad); color: var(--bg); border-color: transparent; }
body[data-cryptik-page="bridge"] .leg { background: linear-gradient(90deg, var(--line), var(--violet), var(--line)); }
body[data-cryptik-page="bridge"] .leg span { background: var(--bg); color: var(--muted); }

body.ck-dex-page[data-cryptik-page] :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--pink);
}
body.ck-dex-page[data-cryptik-page] :is(input, select, textarea):focus { border-color: var(--violet); }
body.ck-dex-page[data-cryptik-page] .swp-f:focus-within { border-color: var(--violet); }