:root {
  --bg: #F3F5F9;
  --surface: #ffffff;
  --surface-2: #F8FAFD;
  --border: #E8ECF3;
  --text: #0F172A;
  --muted: #64748B;
  --muted-2: #94A3B8;
  --accent: #2563EB;
  --nav-glass: rgba(255,255,255,0.85);
  --accent-soft: rgba(37,99,235,0.10);
  --accent-border: rgba(37,99,235,0.22);
  --success: #16A34A; --success-soft: rgba(22,163,74,0.12); --success-border: rgba(22,163,74,0.30);
  --danger: #DC2626; --danger-soft: rgba(220,38,38,0.12); --danger-border: rgba(220,38,38,0.30);
  --shadow-card: rgba(15,23,42,0.06);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B1220;
  --surface: #141D2E;
  --surface-2: #1B2540;
  --border: #27314B;
  --text: #E7ECF5;
  --muted: #97A4BD;
  --muted-2: #6E7C97;
  --accent: #3B82F6;
  --nav-glass: rgba(15,22,38,0.85);
  --accent-soft: rgba(59,130,246,0.16);
  --accent-border: rgba(59,130,246,0.34);
  --success: #34D07F; --success-soft: rgba(34,197,94,0.15); --success-border: rgba(34,197,94,0.32);
  --danger: #F26D6D; --danger-soft: rgba(239,68,68,0.16); --danger-border: rgba(239,68,68,0.34);
  --shadow-card: rgba(0,0,0,0.38);
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.2s, color 0.2s; }
* { box-sizing: border-box; }
::selection { background: rgba(37,99,235,0.18); }
a { color: var(--accent); }
a:hover { filter: brightness(0.9); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
input, textarea, select, button { font-family: 'Manrope', sans-serif; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
@keyframes b20-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes b20-coinspin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important; } }

.hov-nav:hover { color: var(--text) !important; }
.hov-lift { transition: border-color 0.2s, background 0.2s; }
.hov-lift:hover { border-color: var(--accent-border); }
.hov-bright { transition: filter 0.2s; }
.hov-bright:hover { filter: brightness(1.08); }
.hov-dark { transition: filter 0.2s; }
.hov-dark:hover { filter: brightness(0.94); }
.hov-row:hover { background: var(--surface-2); }
.hov-row[data-href] { cursor: pointer; }
.hov-row[data-href] a { position: relative; z-index: 1; }
.hov-soft:hover { background: var(--surface-2); color: var(--text); }
.hov-chip:hover { background: rgba(37,99,235,0.2); }
.inp { transition: border-color 0.2s, box-shadow 0.2s; }
.inp:focus { border-color: #93B4F5; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.select-caret {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}
.hov-cta2 { transition: border-color 0.2s, background 0.2s; }
.hov-cta2:hover { border-color: var(--border); background: var(--surface-2); }
.hov-scan { transition: background 0.2s; }
.hov-scan:hover { background: var(--surface-2); }

.term-cat { cursor: pointer; font-size: 11.5px; font-weight: 800; color: var(--muted); padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); transition: background 0.2s, color 0.2s, border-color 0.2s; user-select: none; }
.term-cat.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }
.term-chtab { cursor: pointer; padding: 2px 6px; border-radius: 5px; color: var(--muted-2); transition: background 0.2s, color 0.2s; }
.term-chtab.is-active { color: var(--accent); background: var(--accent-soft); }
.donut-track { stroke: var(--border); }
/* Token mini-tables: drop the trailing columns on small screens so the fixed
   grid stops overflowing the card (keeps rank + token + two metrics). */
@media (max-width: 560px) {
  .tok-grid { grid-template-columns: 16px minmax(0,1fr) auto auto !important; column-gap: 12px !important; padding-left: 14px !important; padding-right: 14px !important; }
  .tok-grid > :nth-child(n+5) { display: none !important; }
}
@media (max-width: 640px) {
  .term-grid { grid-template-columns: 30px minmax(0,1fr) auto auto !important; column-gap: 10px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .term-grid > :nth-child(n+5) { display: none !important; }
}
@media (max-width: 560px) {
  .hero-cta { flex-wrap: nowrap; gap: 10px; }
  .hero-cta > a { flex: 1 1 0; min-width: 0; justify-content: center; padding: 13px 10px; font-size: 13.5px; }
}
.chart-tab { flex: 1; text-align: center; cursor: pointer; font-size: 11.5px; font-weight: 800; padding: 7px 4px; border-radius: 7px; color: var(--muted-2); transition: background 0.2s, color 0.2s; user-select: none; }
.chart-tab.is-active { color: var(--text); background: var(--surface); box-shadow: 0 2px 6px var(--shadow-card); }
.term-th:hover { color: var(--text) !important; }
/* The Trade pill fills with accent on hover, so it must NOT pick up the row's
   generic accent link colour — that made it accent-on-accent (invisible text). */
.term-trade:hover { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.term-row a:not(.term-trade):hover { color: var(--accent) !important; }

/* ---- Terminal page ---- */
.tm-main { max-width: 1280px; margin: 0 auto; padding: 24px clamp(16px,3vw,28px) 34px; }
.tm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tm-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.tm-stat { border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 6px 18px rgba(15,23,42,0.04); padding: 12px 18px; }
.tm-stat-l { font-size: 10.5px; font-weight: 700; color: var(--muted-2); margin-bottom: 4px; }
.tm-stat-v { font-size: 17px; font-weight: 800; color: var(--text); }
.tm-stat-v.accent { color: var(--accent); }
.tm-prow { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.tm-platform { flex: 1.6 1 440px; min-width: min(100%,320px); border-radius: 14px; border: 1px solid var(--accent-border); background: var(--surface); box-shadow: 0 8px 24px var(--shadow-card); padding: 20px 22px; }
.tm-platform-in { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.tm-platform-l { flex: 1 1 240px; }
.tm-platform-r { flex: 1 1 220px; min-width: 200px; }
.tm-psym { font-size: 11px; font-weight: 700; color: var(--muted); }
.tm-price-row { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.tm-price { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.tm-prelaunch { font-size: 13px; font-weight: 800; color: var(--muted-2); }
.tm-pmeta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--muted); }
.tm-pmeta .hi { color: var(--text); }
.tm-psvg { display: block; width: 100%; height: 64px; }
.tm-pbtns { display: flex; gap: 9px; margin-top: 12px; }
.tm-buy { flex: 1; text-align: center; text-decoration: none; padding: 10px 0; border-radius: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px rgba(37,99,235,0.25); }
.tm-copy { flex: 1; cursor: pointer; text-align: center; padding: 10px 0; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 800; transition: background 0.2s; }
.tm-hi-col { flex: 1 1 280px; min-width: min(100%,250px); display: flex; flex-direction: column; gap: 12px; }
.tm-hi { flex: 1; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 6px 18px rgba(15,23,42,0.04); padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tm-hi-l { font-size: 10.5px; font-weight: 700; color: var(--muted-2); margin-bottom: 3px; }
.tm-hi-n { font-size: 14px; font-weight: 800; color: var(--text); }
.tm-hi-sym { font-size: 10.5px; font-weight: 700; color: var(--muted-2); }
.tm-hi-ch { font-size: 13.5px; font-weight: 800; color: #16A34A; }
.tm-hi-age { font-size: 10px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 4px 9px; border-radius: 6px; }
.tm-hi-v { font-size: 13px; font-weight: 800; color: var(--text); }
.tm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 14px; }
.tm-search { flex: 1 1 280px; min-width: min(100%,240px); display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.tm-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 13px; font-weight: 600; }
.term-cat i, .tm-csv i { font-size: 10px; }
.tm-csv { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--muted); padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.tm-chains-wrap { position: relative; margin-bottom: 12px; }
.tm-chains { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.tm-chains::-webkit-scrollbar { display: none; }
/* edge fade — only when there's more to scroll in that direction */
.tm-chains-wrap::before, .tm-chains-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 52px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.2s; }
.tm-chains-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.tm-chains-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.tm-chains-wrap.can-left::before, .tm-chains-wrap.can-right::after { opacity: 1; }
/* round scroll arrows — appear on the fade, only when scrollable that way */
.tm-chains-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.14); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity 0.2s, background 0.2s, color 0.2s, border-color 0.2s; }
.tm-chains-arrow.left { left: 0; }
.tm-chains-arrow.right { right: 0; }
.tm-chains-wrap.can-left .tm-chains-arrow.left, .tm-chains-wrap.can-right .tm-chains-arrow.right { opacity: 1; pointer-events: auto; }
.tm-chains-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.tm-chain-chip { cursor: pointer; flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--muted); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); transition: background 0.2s, color 0.2s, border-color 0.2s; user-select: none; text-decoration: none; }
.tm-chain-chip:hover { border-color: var(--accent); color: var(--text); }
.tm-chain-chip.is-active:hover { color: #fff; }
.tm-chain-chip img { width: 16px; height: 16px; border-radius: 5px; object-fit: cover; }
.tm-chain-chip i { font-size: 11px; }
.tm-chain-chip.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }
.tm-chain-n { font-size: 10px; font-weight: 700; color: var(--muted-2); }
.tm-chain-chip.is-active .tm-chain-n { color: #fff; opacity: 0.8; }
.tm-scroll { overflow-x: auto; }
.tm-tablewrap { min-width: 1020px; }
.term-grid { display: grid; grid-template-columns: 44px minmax(200px,1.7fr) 120px 84px 84px 120px 120px 116px 88px; align-items: center; gap: 10px; padding: 11px 18px; }
.tm-thead { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tm-th-lbl { font-size: 10.5px; font-weight: 700; color: var(--muted-2); }
.tm-th-c { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted-2); }
.term-th { cursor: pointer; text-align: right; font-size: 10.5px; font-weight: 800; color: var(--muted); user-select: none; transition: color 0.2s; }
.tm-th-ch { text-align: right; font-size: 10.5px; font-weight: 800; color: var(--muted); user-select: none; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.term-row { cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.2s; }
.tm-tokcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.term-star { flex: none; cursor: pointer; background: none; border: none; padding: 2px; margin-left: -4px; color: var(--muted-2); font-size: 13px; line-height: 1; }
.tm-avatar { flex: none; position: relative; overflow: visible; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 800; }
.tm-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Token logo (direct child only, not the chain badge) sits on white so transparent PNGs don't
   show the coloured $hue avatar behind them. */
.tm-avatar > img { background: #fff; }
.tm-chain-badge { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--surface); background: var(--surface); z-index: 1; }
.tm-name-row { display: flex; align-items: center; gap: 7px; }
.tm-name { font-size: 13.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.tm-sym { font-size: 10px; font-weight: 700; color: var(--muted-2); }
.tm-tags { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.tm-tag { font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 5px; }
.tm-catbadge { font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); padding: 2px 7px; border-radius: 5px; border: 1px solid var(--border); }
.t-pricecell { text-align: right; font-size: 12.5px; font-weight: 800; color: var(--text); border-radius: 6px; padding: 3px 5px 3px 0; background: rgba(0,0,0,0); transition: background 0.7s; }
.t-pricecell .t-price { font-size: 12.5px; font-weight: 800; color: var(--text); }
.tm-spark-cell { display: flex; justify-content: center; }
.tm-spark-svg { display: block; width: 100px; height: 28px; }
.tm-trade-cell { display: flex; justify-content: flex-end; }
.term-trade { text-decoration: none; font-size: 12px; font-weight: 800; color: var(--accent); padding: 7px 14px; border-radius: 9px; border: 1px solid var(--accent-border); background: var(--accent-soft); transition: background 0.2s, color 0.2s; }
.tm-status { padding: 40px 20px; text-align: center; }
.tm-status.is-hidden { display: none; }
.tm-status-msg { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.tm-clear { cursor: pointer; display: none; margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--accent); padding: 9px 18px; border-radius: 10px; border: 1px solid var(--accent-border); background: var(--accent-soft); }
.tm-pager { align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--border); }
.tm-pager-info { font-size: 12px; font-weight: 600; color: var(--muted-2); }
.tm-pager-nav { display: flex; align-items: center; gap: 10px; }
.tm-pager-pages { font-size: 12.5px; font-weight: 800; color: var(--text); min-width: 52px; text-align: center; }
.tm-pager-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--muted); padding: 8px 14px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tm-pager-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--muted-2); }
.tm-pager-btn:disabled { opacity: 0.45; cursor: default; }
.tm-tfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
.tm-tfoot-txt { font-size: 11px; font-weight: 600; color: var(--muted-2); }
.tm-refresh { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; color: #16A34A; }
.tm-refresh-dot { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; animation: b20-blink 2s ease-in-out infinite; }
.tm-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; border-radius: 14px; background: linear-gradient(120deg,#1D4ED8,#2563EB); box-shadow: 0 14px 34px rgba(37,99,235,0.3); padding: 22px 24px; }
.tm-cta-title { font-size: 17px; font-weight: 800; color: #fff; }
.tm-cta-sub { margin-top: 4px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); max-width: 520px; }
.tm-cta-btn { text-decoration: none; padding: 11px 22px; border-radius: 10px; background: var(--surface); color: #1D4ED8; font-size: 13.5px; font-weight: 800; }

.theme-toggle { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: color 0.2s, border-color 0.2s; }
.theme-toggle:hover { color: var(--text); }
.theme-toggle .fa-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .fa-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .fa-sun { display: inline; }

/* ---- Navbar ---- */
.nav-bar { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px,3vw,28px); min-height: 64px; }
.nav-left { display: flex; align-items: center; gap: 26px; min-width: 0; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 12px 0; }
.nav-brand-logo { display: block; border-radius: 50%; box-shadow: 0 0 0 1px var(--border), 0 4px 12px rgba(37,99,235,0.28); }
.nav-brand-name { display: flex; flex-direction: column; line-height: 1; }
.nav-brand-title { font-family: 'Archivo',sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 0.01em; color: var(--text); }
.nav-brand-title span { color: var(--accent); }
.nav-brand-sub { margin-top: 4px; font-family: 'JetBrains Mono',monospace; font-size: 7.5px; letter-spacing: 0.18em; color: var(--muted-2); }
.nav-desktop { display: flex; align-items: stretch; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; padding: 0 11px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s; cursor: pointer; user-select: none; }
.nav-link.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.nav-markets { position: relative; display: flex; align-items: stretch; }
.nav-drop { display: none; position: absolute; top: 100%; left: 0; margin-top: 6px; width: 232px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 48px rgba(15,23,42,0.14); padding: 6px; flex-direction: column; z-index: 70; }
.nav-markets.open .nav-drop { display: flex; }
.nav-drop-sep { height: 1px; background: var(--border); margin: 5px 0; }
.nav-drop-item { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; padding: 9px 11px; border-radius: 8px; transition: background 0.15s, color 0.15s; }
.nav-chev { transition: transform 0.25s; }
.nav-markets.open .nav-chev { transform: rotate(180deg); }
.nav-search-btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: color 0.2s, border-color 0.2s; }
.nav-search-btn:hover { color: var(--text); border-color: var(--accent-border); }
/* Search overlay (opened by the header magnifier or the "/" key) */
.nav-search-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: clamp(64px,14vh,150px) 16px 16px; }
.nav-search-overlay[hidden] { display: none; }
.nav-search-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.18s ease; }
.nav-search-overlay.is-open .nav-search-backdrop { opacity: 1; }
.nav-search-panel { position: relative; width: min(620px,100%); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 30px 70px rgba(15,23,42,0.30); padding: 14px; transform: translateY(-10px) scale(0.98); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-search-overlay.is-open .nav-search-panel { transform: none; opacity: 1; }
.nav-search-box { display: flex; align-items: center; gap: 12px; padding: 6px 8px; }
.nav-search-ico { flex: none; color: var(--muted); }
.nav-search-box input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 17px; font-weight: 600; }
.nav-search-box input::placeholder { color: var(--muted-2); font-weight: 500; }
.nav-search-esc { flex: none; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); }
.nav-search-esc:hover { color: var(--text); }
.nav-search-hint { margin: 8px 4px 2px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-2); }
.nav-search-hint kbd { font-family: 'JetBrains Mono',monospace; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--muted); }
.nav-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; color: var(--success); background: var(--success-soft); border: 1px solid var(--success-border); padding: 6px 12px; border-radius: 8px; }
.nav-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: b20-blink 2s ease-in-out infinite; }
.nav-social { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--accent); font-size: 16px; text-decoration: none; }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; padding: 10px 16px; border-radius: 10px; background: var(--accent); box-shadow: 0 6px 16px rgba(37,99,235,0.25); }
.nav-cta span { color: #fff; font-size: 13.5px; font-weight: 800; }
.nav-burger { display: none; cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.nav-burger span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--text); }
.nav-burger span:last-child { width: 10px; background: var(--accent); align-self: flex-start; margin-left: 12px; }
.nav-mobile { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 26px 50px rgba(15,23,42,0.14); padding: 12px clamp(16px,3vw,28px) 18px; flex-direction: column; gap: 2px; max-height: calc(100vh - 70px); overflow: auto; }
.nav-mobile.open { display: flex; }
.nav-mlink { display: flex; align-items: center; color: var(--text); font-size: 15px; font-weight: 800; text-decoration: none; padding: 12px; border-radius: 10px; }
.nav-mlink.is-active { color: var(--accent); background: var(--accent-soft); }
.nav-mcta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 2px; padding: 13px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 6px 16px rgba(37,99,235,0.25); }
.nav-mtitle { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; color: var(--muted-2); padding: 14px 0 8px 12px; }
.nav-mchips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 6px; }
.nav-mchip { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); text-decoration: none; }
@media (max-width: 1000px) {
  .nav-desktop { display: none !important; }
  .nav-burger { display: flex !important; }
}
@media (max-width: 640px) {
  .nav-social, .nav-live { display: none !important; }
}
/* Phones: keep the top bar to logo + search + theme + burger so the brand never
   gets crushed. Sign in lives in the burger menu; $B20T is added there too. */
@media (max-width: 600px) {
  .nav-login, .nav-cta { display: none !important; }
}

#termClear:hover { background: rgba(37,99,235,0.2); }

.brand-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 12px; align-items: center; }
@media (max-width: 860px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
.brand-item { display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; color: var(--muted-2); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15.5px; white-space: nowrap; text-decoration: none; transition: color 0.25s; }
.brand-item:hover { color: var(--text); }
.brand-item img { flex: none; width: 24px; height: 24px; object-fit: contain; border-radius: 6px; filter: grayscale(1); opacity: 0.55; transition: filter 0.25s, opacity 0.25s; }
.brand-item:hover img { filter: grayscale(0); opacity: 1; }

/* Partners — a card grid (distinct from the flat greyscale brand strip above).
   Column count is driven by the inline --pcols var (admin-configurable). */
.partner-grid { display: grid; grid-template-columns: repeat(var(--pcols, 4), minmax(0, 1fr)); gap: 18px; padding: 16px 18px 18px; }
@media (max-width: 900px) { .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .partner-grid { grid-template-columns: 1fr; } }
.partner-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 30px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); color: var(--text); text-decoration: none; transition: border-color 0.2s; }
a.partner-card:hover { border-color: var(--accent-border); }
.partner-logo { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; color: var(--muted-2); font-size: 22px; }
.partner-logo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.partner-name { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--text); line-height: 1.25; }
.partner-arrow { position: absolute; top: 10px; right: 12px; color: var(--muted-2); font-size: 11px; opacity: 0; transition: opacity 0.2s; }
a.partner-card:hover .partner-arrow { opacity: 1; }
/* Standalone /partners page: no card wrapper, larger tiles. */
.partners-main { max-width: 1100px; }
.partner-grid-lg { padding: 0; margin-top: 8px; }

.wp-main { display: flex; position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: clamp(34px,4vw,52px) clamp(20px,4vw,44px) 110px; flex-wrap: wrap; gap: clamp(36px,4vw,64px); }
.wp-toc-link { display: block; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 2px solid transparent; transition: color 0.25s, border-color 0.25s; }
.wp-toc-link:hover { color: var(--text); }
.wp-toc-link.is-active { color: var(--accent); border-left-color: var(--accent); }
[data-wp] { scroll-margin-top: 90px; }
html { scroll-padding-top: 110px; }
.wp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg,#3B82F6,#5B8CFF); box-shadow: 0 0 12px rgba(59,130,246,0.8); z-index: 60; }
.wp-toc { flex: 0 1 250px; min-width: 220px; align-self: flex-start; position: sticky; top: 120px; }
.wp-toc-head { font-family: 'JetBrains Mono',monospace; font-size: 11px; letter-spacing: 0.24em; color: var(--muted-2); margin-bottom: 16px; }
.wp-toc-list { display: flex; flex-direction: column; border-left: 1px solid rgba(96,150,255,0.15); }
.wp-article { flex: 1 1 560px; min-width: 0; max-width: 760px; }
.wp-head { margin-bottom: clamp(48px,6vw,72px); }
.wp-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(37,99,235,0.28); background: rgba(37,99,235,0.12); font-family: 'JetBrains Mono',monospace; font-size: 11px; letter-spacing: 0.18em; color: #3B82F6; }
.wp-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #4D8DFF; box-shadow: 0 0 10px #4D8DFF; animation: b20-blink 2.2s ease-in-out infinite; }
.wp-title { margin: 24px 0 0; font-family: 'Archivo',sans-serif; font-weight: 600; font-size: clamp(38px,5vw,60px); line-height: 1.06; letter-spacing: -0.03em; color: var(--text); text-wrap: balance; }
.wp-title span { background: linear-gradient(100deg,#A5C3FF,#3B82F6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wp-sub { margin: 20px 0 0; font-size: 18px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.wp-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.wp-chip { font-family: 'JetBrains Mono',monospace; font-size: 11.5px; letter-spacing: 0.1em; color: var(--muted); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); }
.wp-pdf-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 12px; font-weight: 800; padding: 8px 16px; border-radius: 999px; background: var(--accent); box-shadow: 0 4px 14px rgba(37,99,235,0.28); transition: transform 0.25s, filter 0.25s; }
.wp-pdf-btn:hover { filter: brightness(1.08); }
.wp-section { padding-top: 10px; margin-bottom: clamp(44px,6vw,64px); }
.wp-section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.wp-section-num { font-family: 'JetBrains Mono',monospace; font-size: 13px; letter-spacing: 0.2em; color: var(--accent); }
.wp-section-title { margin: 0; font-family: 'Archivo',sans-serif; font-weight: 600; font-size: clamp(26px,3vw,34px); letter-spacing: -0.02em; color: var(--text); }
.wp-rule { height: 1px; background: linear-gradient(90deg,rgba(96,150,255,0.4),rgba(96,150,255,0)); margin-bottom: 26px; }
.wp-foot { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.wp-foot-copy { font-family: 'JetBrains Mono',monospace; font-size: 12px; color: var(--muted-2); }
.wp-foot-link { color: var(--accent); font-family: 'Archivo',sans-serif; font-weight: 600; font-size: 14.5px; text-decoration: none; }
@media (max-width: 1024px) { .wp-toc { position: static; top: auto; width: 100%; } }
@media print {
  [data-noprint], .nav-bar { display: none !important; }
  html, body { background: #fff !important; }
  * { box-shadow: none !important; }
  /* Whitepaper: single clean column (the JS forces the light theme before printing). */
  .wp-main { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; }
  [data-doc] * { color: #1a2233 !important; border-color: #d8dee9 !important; background: transparent !important; text-shadow: none !important; box-shadow: none !important; }
  [data-doc] { max-width: 100% !important; width: 100% !important; }
  .wp-title span { -webkit-text-fill-color: #2563EB !important; color: #2563EB !important; background: none !important; }
  .wp-section { break-inside: auto; }
  .wp-head, .wp-section-head, .wp-section-title, .wp-title { break-after: avoid; }
  a { text-decoration: none !important; }
}

/* Testimonials: Swiper carousel with STEPPING autoplay — cards rest, then slide one at a
   time every few seconds. No continuous transform, so it avoids the Windows-GPU flicker.
   Pauses on hover; autoplay disabled under prefers-reduced-motion (handled in JS). */
.testi-swiper { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.testi-band .testi-swiper + .testi-swiper { margin-top: 18px; }
.testi-swiper .swiper-wrapper { align-items: stretch; }
.testi-swiper .swiper-slide { width: 360px; height: auto; display: flex; }
/* If Swiper JS never runs (blocked/offline/vendor dir missing), let the clipped flex row
   scroll so no cards are trapped; Swiper adds .swiper-initialized on init, then this stops matching. */
.testi-swiper:not(.swiper-initialized) { overflow-x: auto; }
.tcard { flex: none; width: 100%; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); padding: 20px 22px; }
@media (max-width: 480px) { .testi-swiper .swiper-slide { width: 84vw; } }

/* ---- Hero: logo-inspired band. Light by default; dark theme swaps to the
   neon look and re-scopes the surface tokens so the inner platform-token card
   adapts to the dark surface automatically. ---- */
.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(48% 70% at 15% 12%, rgba(37,99,235,0.12), transparent 60%),
    radial-gradient(42% 66% at 88% 22%, rgba(59,130,246,0.10), transparent 58%),
    radial-gradient(60% 80% at 65% 118%, rgba(37,99,235,0.10), transparent 62%),
    linear-gradient(165deg, #F3F7FF, #E9F1FD 48%, #EEF4FF);
}
:root[data-theme="dark"] .hero {
  --surface: #111c33; --surface-2: #18243f; --border: #273550;
  --text: #EAF1FF; --muted: #A2B4D6; --muted-2: #7688AC; --accent: #4D8DFF;
  border-bottom-color: #1a2740;
  background:
    radial-gradient(48% 70% at 15% 12%, rgba(37,99,235,0.38), transparent 60%),
    radial-gradient(42% 66% at 88% 22%, rgba(59,130,246,0.30), transparent 58%),
    radial-gradient(60% 80% at 65% 118%, rgba(29,78,216,0.34), transparent 62%),
    linear-gradient(165deg, #0A1120, #0B1322 45%, #091326);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(37,99,235,0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(115% 85% at 50% 0%, #000 25%, transparent 72%);
  mask-image: radial-gradient(115% 85% at 50% 0%, #000 25%, transparent 72%);
}
:root[data-theme="dark"] .hero::before { background-image: radial-gradient(rgba(125,170,255,0.14) 1px, transparent 1px); }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.45; }
:root[data-theme="dark"] .hero-canvas { opacity: 1; }
.hero-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px,3vw,40px); max-width: 1520px; margin: 0 auto; padding: clamp(40px,5.5vw,68px) clamp(16px,3vw,34px); }
.hero-copy { flex: 1 1 320px; min-width: min(100%, 300px); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--accent); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--accent-border); background: var(--accent-soft); }
.hero-eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: b20-blink 2.2s ease-in-out infinite; }
.hero-title { margin: 20px 0 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(32px,4vw,52px); line-height: 1.08; letter-spacing: -0.025em; color: var(--text); text-wrap: balance; }
.hero-hi { background: linear-gradient(100deg, #3B82F6, #2563EB 55%, #1D4ED8); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .hero-hi { background: linear-gradient(100deg, #8FBAFF, #4D8DFF 55%, #A9C6FF); -webkit-background-clip: text; background-clip: text; }
.hero-sub { margin: 18px 0 0; max-width: 460px; font-size: 15.5px; line-height: 1.75; color: var(--muted); text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-glow { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; padding: 13px 22px; border-radius: 12px; background: #2563EB; color: #fff; font-size: 14px; font-weight: 800; transition: background 0.18s; }
.btn-glow:hover { background: #1D4ED8; }
.btn-glow svg { stroke: #fff; }
.btn-ghost-lite { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; padding: 13px 22px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 700; transition: background 0.18s, border-color 0.18s; }
.btn-ghost-lite:hover { background: var(--surface-2); border-color: var(--muted-2); }
.btn-ghost-lite svg { stroke: var(--muted); }
/* Hero combined info card — token summary (left) + repeatable info rows (right) + separate trust bar */
.hero-visual { flex: 2 1 660px; min-width: min(100%, 300px); display: flex; flex-direction: column; gap: 14px; }
.hero-panel { border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 22px 54px var(--shadow-card); padding: 22px; }
:root[data-theme="dark"] .hero-panel { border-color: rgba(125,165,255,0.2); background: rgba(15,25,46,0.62); }
.hp-body { display: flex; flex-wrap: wrap; gap: 22px 26px; }
.hp-left { flex: 0.95 1 230px; min-width: min(100%, 220px); }
.hp-right { flex: 1.7 1 380px; min-width: min(100%, 320px); }
/* left: token summary */
.hp-head { display: flex; align-items: center; gap: 16px; }
.hp-logo { flex: none; display: block; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 4px solid rgba(255,255,255,0.9); background: linear-gradient(135deg, #dbe6ff, #eef3ff); box-shadow: 0 8px 22px rgba(45,110,240,0.28); }
.hp-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root[data-theme="dark"] .hp-logo { border-color: rgba(125,165,255,0.22); }
.hp-sym-row { display: flex; align-items: center; gap: 9px; }
.hp-sym { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1.05; }
.hp-badge { font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 3px 9px; border-radius: 7px; }
.hp-tname { margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.hp-price-row { display: flex; align-items: baseline; gap: 9px; margin-top: 9px; flex-wrap: wrap; }
.hp-price { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.hp-price-note { font-size: 12px; font-weight: 800; color: var(--muted-2); }
.hp-chart { margin-top: 18px; }
.hp-spark { display: block; width: 100%; height: 92px; }
.hp-stats { display: flex; gap: 10px; margin-top: 18px; }
.hp-stat { flex: 1; border: 1px solid var(--border); border-radius: 12px; padding: 12px 6px; text-align: center; background: var(--surface); }
.hp-stat-l { font-size: 11px; font-weight: 700; color: var(--muted-2); margin-bottom: 5px; }
.hp-stat-v { font-size: 15px; font-weight: 800; color: var(--text); }
/* right: info rows in their own bordered box */
.hp-rows { border: 1px solid var(--border); border-radius: 14px; padding: 0 18px; background: var(--surface); }
.hp-row { display: flex; align-items: center; gap: 13px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.hp-row:last-child { border-bottom: none; }
.hp-row-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-size: 15px; }
.hp-row > .mw0 { flex: 1 1 auto; min-width: 0; }
.hp-row-l { font-size: 11.5px; font-weight: 800; color: var(--text); letter-spacing: 0.01em; text-transform: uppercase; }
.hp-row-sub { margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--muted-2); }
.hp-row-v { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; font-size: 15px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.hp-tag { font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 3px 9px; border-radius: 7px; letter-spacing: 0.01em; }
.hp-row-addr { margin-left: auto; display: flex; align-items: center; gap: 10px; max-width: 48%; flex: 0 1 auto; }
.hp-addr { font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; word-break: break-all; line-height: 1.4; text-align: right; }
.hp-ens { color: var(--accent); }
.hp-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--muted-2); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.hp-copy:hover { color: var(--accent); border-color: var(--accent-border); }
.hp-copy.is-copied { color: #16A34A; border-color: var(--success-border); }
/* separate trust bar card below */
.hp-trust-card { border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 30px var(--shadow-card); display: flex; flex-wrap: wrap; }
:root[data-theme="dark"] .hp-trust-card { border-color: rgba(125,165,255,0.2); background: rgba(15,25,46,0.62); }
.hp-trust-item { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); border-left: 1px solid var(--border); }
.hp-trust-item:first-child { border-left: none; }
.hp-trust-item i { color: var(--accent); font-size: 14px; }
@media (max-width: 620px) { .hp-trust-item { flex-basis: 50%; border-left: none; } }
/* Phones: stack each info row — icon + label on top, value/address full-width below
   (aligned under the label) instead of cramped side-by-side. */
@media (max-width: 620px) {
  .hp-rows { padding: 0 14px; }
  .hp-row { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; row-gap: 4px; align-items: start; padding: 11px 0; }
  .hp-row-ic { grid-column: 1; grid-row: 1 / span 2; margin-top: 1px; }
  .hp-row > .mw0 { grid-column: 2; grid-row: 1; }
  .hp-row-l { font-size: 12px; }
  .hp-row-sub { margin-top: 1px; }
  .hp-row-v, .hp-row-addr { grid-column: 2; grid-row: 2; margin: 0; padding-left: 0; max-width: 100%; }
  .hp-row-v { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; text-align: left; gap: 4px 8px; }
  .hp-row-addr { justify-content: flex-start; }
  .hp-row-addr .hp-addr { flex: 1; text-align: left; }
}

/* ---- Shared component vocabulary (replaces repeated inline styles) ---- */
.b20-card { border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 8px 24px var(--shadow-card); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px 13px; }
.empty-state { padding: 22px 18px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.row-wrap { display: flex; flex-wrap: wrap; gap: 18px; }
.row-wrap.gap-t { margin-top: 18px; }
.col-panel { flex: 1 1 520px; min-width: min(100%,320px); overflow: hidden; }
.card-foot-link { display: flex; align-items: center; gap: 7px; padding: 12px 18px 14px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 800; color: var(--accent); text-decoration: none; }
.rt { text-align: right; }
.mw0 { min-width: 0; }
.f1 { flex: 1; }
/* home token mini-tables */
.tok-grid { display: grid; gap: 12px; align-items: center; }
.tok-head { padding: 7px 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 700; color: var(--muted-2); }
.hov-row.tok-grid { padding: 10px 18px; transition: background 0.2s; }
.gc-6a { grid-template-columns: 18px 1fr 92px 72px 84px 66px; }
.gc-5a { grid-template-columns: 18px 1fr 62px 86px 66px; }
.gc-5b { grid-template-columns: 18px 1fr 96px 86px 92px; }
.gc-5c { grid-template-columns: 18px 1fr 88px 100px 72px; }
.gc-5d { grid-template-columns: 18px 1fr 66px 74px 58px; }
.gc-5e { grid-template-columns: 18px 1fr 96px 68px 68px; }
.t-rank { font-size: 12px; font-weight: 700; color: var(--muted-2); }
.t-tok { display: flex; align-items: center; gap: 9px; min-width: 0; }
.t-icon { flex: none; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 800; }
.t-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.t-name { display: block; font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-sym { display: block; font-size: 9.5px; font-weight: 700; color: var(--muted-2); }
.t-price { text-align: right; font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.t-ch { text-align: right; font-size: 12px; font-weight: 800; }
.t-ch.up { color: #16A34A; } .t-ch.down { color: #DC2626; } .t-ch.flat { color: var(--muted-2); }
.t-num { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.t-num.sm { font-size: 12px; }
.t-num.sym { font-size: 11.5px; font-weight: 700; }
.t-mc { text-align: right; font-size: 12.5px; font-weight: 700; color: var(--text); }

/* ---- Home main wrapper + standalone panel ---- */
.home-main { max-width: 1280px; margin: 0 auto; padding: 22px clamp(16px,3vw,28px) 34px; }
.col { display: flex; flex-direction: column; }
.panel { border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 8px 24px var(--shadow-card); overflow: hidden; }
.panel.mt { margin-top: 18px; }

/* ---- Terminal Platform Token card id row (shared .hc-* classes; hero moved to .hp-*) ---- */
.hc-id { display: flex; align-items: center; gap: 11px; }
.hc-logo { display: block; border-radius: 50%; }
.hc-sym-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hc-sym { font-size: 16px; font-weight: 800; color: var(--text); }
.hc-badge { font-size: 10px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 2.5px 8px; border-radius: 6px; }
.hc-name { margin-top: 3px; font-size: 12px; color: var(--muted-2); font-weight: 600; }

/* ---- News list rows ---- */
.nws-row { display: flex; gap: 13px; padding: 14px 18px; border-top: 1px solid var(--border); text-decoration: none; transition: background 0.2s; cursor: pointer; }
.nws-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: linear-gradient(135deg,#1D4ED8,#0F172A); color: #93B4F5; font-size: 17px; }
.nws-title { display: block; font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.4; }
.nws-ex { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nws-age { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--muted-2); }

/* ---- Terminal CTA banner ---- */
.tcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; border-radius: 14px; background: linear-gradient(120deg,#1D4ED8,#2563EB); box-shadow: 0 14px 34px rgba(37,99,235,0.3); padding: 22px 24px; }
.tcta-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tcta-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: rgba(255,255,255,0.16); color: #fff; }
.tcta-title { display: block; font-size: 17px; font-weight: 800; color: #fff; }
.tcta-sub { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }
.tcta-btn { text-decoration: none; padding: 11px 22px; border-radius: 10px; background: #fff; color: #1D4ED8; font-size: 13.5px; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,0.14); white-space: nowrap; }
.submit-cta .tcta-ic { font-size: 19px; }

/* Homepage "Explore the Ecosystem" cards — column count is set per card-count (--eco-cols) for a balanced row. */
.b20-card.mt { margin-top: 18px; }
.eco-grid { display: grid; grid-template-columns: repeat(var(--eco-cols, 3), minmax(0, 1fr)); gap: 12px; padding: 16px 18px 18px; }
@media (max-width: 860px) { .eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .eco-grid { grid-template-columns: 1fr; } }
.eco-card { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); text-decoration: none; transition: border-color 0.2s; }
.eco-card:hover { border-color: var(--accent-border); }
.eco-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(135deg,#1D4ED8,#0F172A); color: #93B4F5; font-size: 18px; overflow: hidden; }
.eco-ic img { width: 100%; height: 100%; object-fit: cover; }
.eco-body { flex: 1; min-width: 0; }
.eco-title { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.eco-ex { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.eco-arrow { flex: none; color: var(--muted-2); font-size: 13px; transition: transform 0.2s, color 0.2s; }
.eco-card:hover .eco-arrow { color: var(--accent); transform: translateX(3px); }

/* Submit-project page — .page-main.submit-main beats .page-main's 1280px so the form stays a comfortable, centered width */
.page-main.submit-main { max-width: 720px; margin-left: auto; margin-right: auto; }
.submit-card { padding: clamp(20px,3vw,30px); }
.submit-form { display: flex; flex-direction: column; gap: 16px; }
.submit-form .req { color: var(--danger); font-weight: 800; }
.submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Drag & drop upload (submit-project logo) */
.dropzone { display: block; position: relative; border: 2px dashed var(--border); border-radius: 12px; background: var(--surface-2); padding: 22px 18px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.dropzone:hover { border-color: var(--accent-border); }
.dropzone.is-drag { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.is-error { border-color: var(--danger); background: var(--danger-soft); }
.dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dropzone-empty[hidden], .dropzone-preview[hidden] { display: none; }   /* our display:flex would otherwise beat the [hidden] attribute */
.dropzone-ic { font-size: 24px; color: var(--muted-2); }
.dropzone-title { font-size: 13.5px; font-weight: 800; color: var(--text); }
.dropzone-sub { font-size: 12px; color: var(--muted); }
.dropzone-sub b { color: var(--accent); }
.dropzone-preview { display: flex; align-items: center; gap: 12px; justify-content: center; }
.dropzone-thumb { flex: none; width: 46px; height: 46px; border-radius: 9px; object-fit: cover; border: 1px solid var(--border); background: var(--surface); }
.dropzone-file { font-size: 13px; font-weight: 700; color: var(--text); word-break: break-all; }
.dropzone.is-error .dropzone-file { color: var(--danger); }
.dropzone-clear { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dropzone-clear:hover { color: var(--danger); border-color: var(--danger); }

/* ---- About / value props ---- */
.abt-grid { display: flex; flex-wrap: wrap; }
.abt-cell { flex: 1 1 250px; min-width: min(100%,240px); padding: 18px 20px; border-right: 1px solid var(--border); }
.abt-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; margin-bottom: 10px; }
.abt-title { font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.abt-text { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.65; color: var(--muted); }

/* ---- Tokenomics ---- */
.tkn-donut { flex: 1 1 320px; min-width: min(100%,280px); }
.tkn-alloc { flex: 1.4 1 400px; min-width: min(100%,300px); }
.tkn-donut-body { display: flex; flex-direction: column; align-items: center; padding: 22px 18px; }
.tkn-ring { position: relative; width: min(220px,60vw); aspect-ratio: 1; }
.tkn-ring-svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.tkn-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tkn-supply { font-family: 'Archivo',sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.tkn-supply-l { margin-top: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--accent); }
.tkn-tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 18px; }
.tkn-tag { font-size: 10.5px; font-weight: 800; color: var(--muted); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.tkn-alloc-body { display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 20px; }
.tkn-alloc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.tkn-alloc-name { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; color: var(--text); }
.tkn-alloc-dot { width: 9px; height: 9px; border-radius: 3px; }
.tkn-alloc-note { font-weight: 600; color: var(--muted-2); font-size: 11.5px; }
.tkn-alloc-pct { font-size: 12.5px; font-weight: 800; color: var(--accent); }
.tkn-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.tkn-bar-fill { height: 100%; border-radius: 999px; transition: width 0.9s cubic-bezier(0.22,0.61,0.21,1); }
.tkn-ca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.tkn-ca-l { font-size: 10.5px; font-weight: 800; color: var(--muted-2); }
.tkn-ca-addr { flex: 1; min-width: 140px; font-family: 'JetBrains Mono',monospace; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkn-ca-copy { cursor: pointer; display: flex; align-items: center; padding: 7px 14px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800; }

/* ---- How to buy ---- */
.htb { flex: 1 1 400px; min-width: min(100%,300px); }
.htb-step { display: flex; gap: 13px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.htb-num { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; }
.htb-title { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); }
.htb-detail { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.htb-link { align-self: center; text-decoration: none; font-size: 12px; font-weight: 800; color: var(--accent); padding: 8px 14px; border-radius: 9px; border: 1px solid var(--accent-border); background: var(--accent-soft); white-space: nowrap; }

/* ---- Roadmap ---- */
.rm { flex: 1.4 1 460px; min-width: min(100%,300px); }
.rm-grid { display: flex; flex-wrap: wrap; }
.rm-cell { flex: 1 1 220px; min-width: min(100%,210px); padding: 16px 18px; border-right: 1px solid var(--border); }
.rm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.rm-period { font-size: 11px; font-weight: 800; color: var(--muted); }
.rm-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.rm-dot { width: 5px; height: 5px; border-radius: 50%; background: #16A34A; animation: b20-blink 2s ease-in-out infinite; }
.rm-title { font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.rm-detail { font-size: 11.5px; font-weight: 600; line-height: 1.7; color: var(--muted); }

/* ---- FAQ ---- */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 18px; cursor: pointer; }
.faq-q { font-size: 13.5px; font-weight: 800; color: var(--text); }
.faq-chev { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; line-height: 1; transition: transform 0.3s ease; transform: rotate(0deg); }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease; }
.faq-body-inner { overflow: hidden; }
.faq-a { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.75; }
.faq-item.is-open .faq-chev { transform: rotate(45deg); }
.faq-item.is-open .faq-body { grid-template-rows: 1fr; }
/* Standalone /faq page (.news-main.faq-main beats .news-main's width) */
.news-main.faq-main { max-width: 840px; margin-left: auto; margin-right: auto; }
.faq-list { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.faq-list .faq-item:last-child { border-bottom: none; }
.faq-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; padding: 20px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); font-size: 14px; font-weight: 600; }
.faq-cta-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--accent); text-decoration: none; }

/* ---- Brands + testimonials headings ---- */
.brands-panel { margin-top: 26px; padding: clamp(22px,3vw,34px); border-radius: 16px; }
.brands-heading { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 24px; }
.testi-band { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top: 40px; padding: 44px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.testi-heading { text-align: center; margin: 0 0 26px; font-family: 'Archivo',sans-serif; font-weight: 800; font-size: clamp(22px,3vw,30px); color: var(--text); }
.tcard-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tcard-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tcard-initials { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.tcard-name { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.tcard-role { display: block; font-size: 12px; font-weight: 600; color: var(--muted-2); }
.tcard-quote { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--muted); }

/* ---- Newsletter + built-on-base ---- */
.nl { flex: 1.6 1 480px; min-width: min(100%,320px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px 22px; }
.nl-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.nl-copy { flex: 1 1 220px; min-width: 200px; }
.nl-title { display: block; font-size: 14.5px; font-weight: 800; color: var(--text); }
.nl-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.nl-form { display: flex; flex-wrap: wrap; gap: 9px; flex: 1 1 280px; min-width: 240px; }
.nl-form[hidden] { display: none; }   /* [hidden] alone loses to display:flex above */
.nl-input { flex: 1; min-width: 150px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; outline: none; }
.nl-btn { cursor: pointer; border: none; padding: 11px 20px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px rgba(37,99,235,0.25); }
/* Confirmation + error render on their OWN full-width line (flex-basis 100%) so
   they never sit inline beside the form and squeeze the row. */
.nl-done { display: none; align-items: center; gap: 8px; flex: 1 1 100%; justify-content: center; padding: 11px 0; border-radius: 10px; background: var(--success-soft); border: 1px solid var(--success-border); color: var(--success); font-size: 13px; font-weight: 800; }
.nl-done.is-shown { display: flex; }
.nl-err { flex: 1 1 100%; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--danger, #dc2626); }
/* Newsletter is now the only panel in its row → it fills full width via flex-grow. */

.card-head.bordered { border-bottom: 1px solid var(--border); }
.card-title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: 'Manrope', sans-serif; font-size: 14.5px; font-weight: 800; color: var(--text); }
.section-head { display: flex; align-items: center; gap: 8px; padding: 15px 18px 13px; border-bottom: 1px solid var(--border); font-size: 14.5px; font-weight: 800; color: var(--text); }
.card-title i, .section-head i { font-size: 15px; color: var(--accent); }
.link-viewall { font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.link-viewall:hover { filter: brightness(1.1); }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; font-size: 12.5px; font-weight: 700; color: var(--muted-2); }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); background: transparent; }
.pill-accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }
.pill-success { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.pill-danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
.pill-muted { color: var(--muted); background: var(--surface-2); border-color: var(--border); }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; border: none; padding: 12px 20px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 8px 20px rgba(37,99,235,0.28); transition: filter 0.2s, transform 0.2s; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-soft { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; text-decoration: none; padding: 10px 18px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent); font-size: 13px; font-weight: 800; transition: background 0.2s; }
.btn-soft:hover { background: var(--accent-border); }
.stat-tile { flex: 1 1 150px; min-width: 140px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); padding: 16px 18px; box-shadow: 0 6px 18px var(--shadow-card); }
.stat-tile .lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.stat-tile .val { font-size: 18px; font-weight: 800; margin-top: 6px; color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- Page scaffolding (shared by contact/token/terminal) ---- */
.page-main { max-width: 1280px; margin: 0 auto; padding: 18px clamp(16px,3vw,28px) 44px; }
.page-head { margin-bottom: 20px; }
.page-title { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(26px,3vw,36px); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.page-lead { margin: 10px 0 0; max-width: 560px; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* ---- Forms ---- */
.inp { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 600; outline: none; }
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inp-area { line-height: 1.6; resize: vertical; min-height: 120px; }
.form-label { display: block; font-size: 11.5px; font-weight: 800; color: var(--muted); margin-bottom: 7px; }
.field-row { display: flex; flex-wrap: wrap; gap: 15px; }
.field { flex: 1 1 200px; min-width: 180px; }
.alert-danger { margin-bottom: 15px; padding: 11px 14px; border-radius: 10px; background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger); font-size: 12.5px; font-weight: 700; }
.hidden-honey { position: absolute; left: -9999px; }
.note-hint { margin: 0; font-size: 11px; font-weight: 600; line-height: 1.6; color: var(--muted-2); }

/* ---- Contact ---- */
.contact-cols { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; }
.contact-form-card { flex: 1.4 1 420px; min-width: min(100%,320px); padding: clamp(20px,3vw,28px); }
.contact-side { flex: 1 1 300px; min-width: min(100%,270px); display: flex; flex-direction: column; gap: 12px; }
.contact-form { display: flex; flex-direction: column; gap: 15px; }
.channel-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; }
.icon-badge { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 18px; }
.channel-meta { min-width: 0; flex: 1; }
.channel-title { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.channel-sub { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--muted-2); }
.channel-arrow { margin-left: auto; color: var(--accent); font-size: 15px; }
.sent-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 10px; }
.sent-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--success-soft); border: 1px solid var(--success-border); display: flex; align-items: center; justify-content: center; color: var(--success); }
.sent-box h2 { margin: 20px 0 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; color: var(--text); }
.sent-box p { margin: 10px 0 0; max-width: 360px; font-size: 13.5px; font-weight: 600; line-height: 1.7; color: var(--muted); }
.note-box { flex: 1 1 auto; display: flex; align-items: center; padding: 15px 18px; border-radius: 14px; border: 1px dashed var(--border); background: var(--surface-2); }
.note-box p { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.7; color: var(--muted); }
.note-box b { color: var(--accent); font-weight: 800; }

/* ---- Token detail ---- */
.tk-header { padding: clamp(20px,3vw,26px); display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: start; }
.tk-id { display: flex; align-items: center; gap: 15px; min-width: 0; }
.tk-avatar { flex: none; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--tk-accent, var(--accent)); color: #fff; font-size: 19px; font-weight: 800; }
.tk-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.tk-name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tk-name { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(22px,3vw,30px); color: var(--text); line-height: 1.1; }
.tk-sym { font-size: 13px; font-weight: 800; color: var(--muted-2); }
.tk-badges { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.tk-badge { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border); }
.tk-badge.warn { color: #D97706; background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.34); }
.tk-chain { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--text); padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); text-decoration: none; transition: border-color 0.2s, background 0.2s; }
a.tk-chain { cursor: pointer; }
a.tk-chain:hover { border-color: var(--accent); background: var(--accent-soft); }
.tk-chain img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.tk-price-box { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.tk-price { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(24px,3.5vw,34px); color: var(--text); line-height: 1; }
.tk-premarket { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 8px 14px; border-radius: 999px; }
.tk-change { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: 8px; }
.tk-change small { font-size: 10px; color: var(--muted-2); font-weight: 700; }
.tk-change.up { color: #16A34A; background: var(--success-soft); }
.tk-change.down { color: #DC2626; background: var(--danger-soft); }
.tk-change.flat { color: var(--muted-2); background: var(--surface-2); }
.tk-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.tk-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; text-decoration: none; padding: 8px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); transition: background 0.18s, border-color 0.18s, color 0.18s; }
.tk-btn:hover { background: var(--surface); color: var(--text); border-color: var(--muted-2); }
.tk-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.tk-btn.primary:hover { filter: brightness(1.07); }
.tk-btn.icon-only { width: 34px; height: 34px; justify-content: center; padding: 0; }
@media (max-width: 860px) { .tk-header { grid-template-columns: 1fr; } .tk-price-box { align-items: flex-start; } }
/* Cards carry a 0 8px 24px shadow, which visually fills a small gap — keep the
   spacing between them comfortably larger than the shadow's offset. */
.tk-chart-card { padding: 20px 22px; margin-bottom: 22px; }
.tk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tk-card-title { font-size: 13px; font-weight: 800; color: var(--text); }
.tk-source { font-size: 11px; font-weight: 700; color: var(--muted-2); }
.tk-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tk-stat-row .v.up { color: #16A34A; }
.tk-stat-row .v.down { color: #DC2626; }
.tk-stat-row .v.flat { color: var(--muted-2); }
.tk-note { margin-top: 8px; font-size: 11px; color: var(--muted-2); }
/* Identity strip above the chart: Market Cap · FDV · Liquidity (3 columns → 1 on mobile). */
.tk-stats-card { padding: 0; margin: 22px 0; overflow: hidden; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.tk-stat-row { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 15px 18px; border-right: 1px solid var(--border); }
.tk-stat-row:last-child { border-right: none; }
.tk-stat-row .k { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tk-stat-row .v { font-size: 16px; font-weight: 800; color: var(--text); }
.tk-stat-row .v.up { color: #16A34A; }
.tk-stat-row .v.down { color: #DC2626; }
.tk-stat-row .v.flat { color: var(--muted-2); }
@media (max-width: 560px) {
  .tk-stats-card { grid-template-columns: 1fr; }
  .tk-stat-row { flex-direction: row; justify-content: space-between; align-items: center; border-right: none; border-bottom: 1px solid var(--border); }
  .tk-stat-row:last-child { border-bottom: none; }
}

/* DexScreener-style momentum matrix: label + 5m/1h/6h/24h, rows Change / Volume.
   The 15 spans flow into a 5-column grid; scrolls horizontally if it can't fit. */
/* Timeframe stat cards (5M / 1H / 6H / 24H) */
.tk-windows-card { padding: clamp(12px,2vw,16px); margin: 22px 0; }
.tk-tf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tk-tf { padding: 14px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); text-align: center; transition: border-color .2s; }
.tk-tf:hover { border-color: var(--accent-border); }
.tk-tf-lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted-2); }
.tk-tf-ch { margin-top: 9px; font-size: clamp(14px,1.6vw,17px); font-weight: 800; letter-spacing: -0.01em; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.tk-tf-ch.up { color: var(--success); }
.tk-tf-ch.down { color: var(--danger); }
.tk-tf-vol { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tk-tf-vol span { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; }
@media (max-width: 520px) { .tk-tf-grid { grid-template-columns: repeat(2, 1fr); } }
.tk-nomarket { display: flex; align-items: center; gap: 15px; padding: 18px 22px; border-style: dashed; margin: 22px 0; }
.tk-nomarket .ic { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 17px; }
.tk-nomarket .txt { min-width: 0; }
.tk-nomarket strong { display: block; font-size: 14px; font-weight: 800; color: var(--text); }
.tk-nomarket span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tk-details { padding: 20px 22px; }
.tk-ca { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 15px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 16px; }
.tk-ca .lab { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--muted-2); letter-spacing: 0.04em; white-space: nowrap; }
.tk-ca .lab i { font-size: 12px; color: var(--accent); }
.tk-ca .addr { flex: 1; min-width: 160px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-copy i { font-size: 11px; }
.tk-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; }
.tk-meta { padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.tk-meta .k { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--muted-2); text-transform: uppercase; }
.tk-meta .k i { font-size: 11px; color: var(--accent); width: 13px; text-align: center; }
.tk-meta .v { font-size: 13.5px; font-weight: 700; color: var(--text); margin-top: 7px; }
.tk-meta.is-empty .v { color: var(--muted-2); font-weight: 600; }
.tk-meta.mono .v { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.tk-chart-svg { display: block; width: 100%; height: clamp(180px,30vw,260px); }

/* ---- Embedded DexScreener chart (token detail) ----
   DexScreener only exposes theme=dark|light (no palette control), so we can't
   recolour their canvas. Instead the chart IS the card: no card head, zero
   padding, and the card clips the iframe to its own radius. Their toolbar
   already carries the pair, interval and a link back, so a header on top would
   just duplicate that chrome. The site theme is passed on every (re)load. */
.tk-chart-card.is-embed { padding: 0; overflow: hidden; }
.tk-chart-card.is-embed .tk-embed { margin: 0; border: 0; border-radius: 0; height: clamp(400px,46vw,580px); }
.tk-embed { position: relative; width: auto; height: clamp(360px,40vw,520px); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.tk-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Quiet shimmer over the iframe until it reports load. It must never swallow
   clicks/scroll on the chart, and it fades out rather than gating the iframe's
   own opacity — so a missed `load` event can't leave the chart invisible. */
.tk-embed::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: tk-embed-pulse 1.4s ease-in-out infinite; transition: opacity 0.3s; }
.tk-embed.is-ready::after { opacity: 0; visibility: hidden; }
@keyframes tk-embed-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (max-width: 860px) { .tk-embed { height: 380px; } }
.tk-details .tk-card-title { margin-bottom: 14px; }
.ext-ic { font-size: 11px; }

/* ---- Token "not found" state ---- */
.notfound { max-width: 760px; margin: 0 auto; padding: 80px clamp(16px,3vw,28px); text-align: center; }
.notfound-ic { font-size: 54px; color: var(--muted-2); }
.notfound-title { margin: 18px 0 8px; font-family: 'Archivo',sans-serif; font-size: 26px; color: var(--text); }
.notfound-text { color: var(--muted); font-size: 14px; }
.notfound-btn { display: inline-block; margin-top: 22px; text-decoration: none; padding: 12px 24px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 800; }

/* ---- Boost system (amber = premium promotion, distinct from the blue accent) ---- */
.tk-badge.boost { color: #fff; background: linear-gradient(135deg,#F59E0B,#F97316); border-color: transparent; }
.boost-btn { color: #fff; background: linear-gradient(135deg,#F59E0B,#F97316); border-color: transparent; }
.boost-btn:hover { filter: brightness(1.06); color: #fff; background: linear-gradient(135deg,#F59E0B,#F97316); border-color: transparent; }
.boost-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; color: #fff; background: linear-gradient(135deg,#F59E0B,#F97316); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.hov-row.is-boosted, .term-row.is-boosted { box-shadow: inset 3px 0 0 #F59E0B; background: rgba(245,158,11,0.06); }

.boost-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 18px; }
.boost-modal[hidden] { display: none; }
.boost-backdrop { position: absolute; inset: 0; background: rgba(8,13,24,0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.boost-card { position: relative; z-index: 1; width: min(560px, 100%); max-height: calc(100vh - 36px); overflow-y: auto; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 30px 70px rgba(8,13,24,0.4); padding: clamp(20px,3vw,26px); }
.boost-2col { display: flex; gap: 12px; }
.boost-2col .boost-field { flex: 1; min-width: 0; }
@media (max-width: 460px) { .boost-2col { flex-direction: column; } }
.boost-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: none; background: transparent; color: var(--muted-2); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px; }
.boost-x:hover { background: var(--surface-2); color: var(--text); }
.boost-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; padding-right: 26px; }
.boost-head-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg,#F59E0B,#F97316); color: #fff; font-size: 18px; }
.boost-title { margin: 0; font-family: 'Archivo',sans-serif; font-weight: 800; font-size: 19px; color: var(--text); }
.boost-sub { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.boost-pkgs { display: flex; flex-direction: column; gap: 9px; }
.boost-pkg { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); transition: border-color 0.15s, background 0.15s; }
.boost-pkg:hover { border-color: #F59E0B; background: rgba(245,158,11,0.08); }
.boost-pkg-name { font-size: 14px; font-weight: 800; color: var(--text); }
.boost-pkg-days { font-size: 12px; font-weight: 600; color: var(--muted-2); }
.boost-pkg-price { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; }
.boost-pkg-cur { font-size: 11px; font-weight: 700; color: var(--muted-2); }
.boost-fine { margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--muted-2); }
.boost-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 0; border: none; background: transparent; color: var(--accent); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.boost-summary { margin: 14px 0; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); overflow: hidden; }
.boost-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.boost-summary-row:last-child { border-bottom: none; }
.boost-summary-row .k { font-size: 12px; font-weight: 700; color: var(--muted); }
.boost-summary-row .v { font-size: 13.5px; font-weight: 800; color: var(--text); }
.boost-flabel { display: block; font-size: 11.5px; font-weight: 800; color: var(--muted); margin-bottom: 7px; }
.boost-wallet { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.boost-wallet-addr { flex: 1; min-width: 0; font-family: 'JetBrains Mono',monospace; font-size: 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boost-copy { flex: none; }
.boost-form { display: flex; flex-direction: column; gap: 12px; }
.boost-field label { display: block; font-size: 11.5px; font-weight: 800; color: var(--muted); margin-bottom: 6px; }
.boost-opt { font-weight: 600; color: var(--muted-2); }
.boost-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.boost-err { padding: 10px 13px; border-radius: 9px; background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger); font-size: 12.5px; font-weight: 700; }
.boost-submit { justify-content: center; }
.boost-done { text-align: center; padding: 12px 6px; }
.boost-done-ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: 26px; margin-bottom: 12px; }
.boost-done p { margin: 8px 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ---- Shared site footer ---- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.site-footer-inner { max-width: 1280px; margin: 0 auto; padding: clamp(38px,4.5vw,60px) clamp(16px,3vw,28px) 28px; }
.footer-top { display: flex; flex-wrap: wrap; gap: clamp(30px,4vw,64px); justify-content: space-between; }
.footer-brand { flex: 1 1 300px; max-width: 380px; }
.footer-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.footer-logo img { border-radius: 50%; box-shadow: 0 0 0 1px var(--border), 0 4px 12px rgba(37,99,235,0.24); }
.footer-brand-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 0.01em; color: var(--text); }
.footer-b20 { color: var(--accent); }
.footer-tagline { margin: 15px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 16px; text-decoration: none; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.footer-social a:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }
/* Cookie consent banner (bottom-left, theme-aware, informational) */
.cookie-banner { position: fixed; left: 18px; bottom: 18px; z-index: 45; max-width: 360px; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 18px 50px rgba(15,23,42,0.22); }
.cookie-banner[hidden] { display: none; }
.cookie-text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.cookie-text a { color: var(--accent); font-weight: 700; text-decoration: none; }
.cookie-text a:hover { text-decoration: underline; }
.cookie-accept { align-self: flex-start; cursor: pointer; border: none; padding: 9px 22px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px rgba(37,99,235,0.25); }
@media (max-width: 520px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
/* Contact form mandatory consent checkbox */
.consent-row { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.consent-row input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.consent-row a { color: var(--accent); font-weight: 700; text-decoration: none; }
.consent-row a:hover { text-decoration: underline; }
/* Legal modal (contact-form privacy-policy link opens the page in-place) */
.legal-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.2s; }
.legal-modal[hidden] { display: none; }
.legal-modal.is-open { opacity: 1; }
.legal-modal-backdrop { position: absolute; inset: 0; background: rgba(10,15,25,0.55); }
.legal-modal-box { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 680px; max-height: 85vh; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,0.4); overflow: hidden; }
.legal-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.legal-modal-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--text); }
.legal-modal-x { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 22px; line-height: 1; padding: 4px 9px; border-radius: 8px; }
.legal-modal-x:hover { background: var(--surface-2); color: var(--text); }
.legal-modal-body { overflow-y: auto; padding: 20px 22px; font-size: 14px; line-height: 1.65; color: var(--text); }
.legal-modal-body h2 { font-size: 16px; margin: 1.1em 0 .4em; color: var(--text); }
.legal-modal-body h3 { font-size: 14.5px; margin: 1em 0 .3em; color: var(--text); }
.legal-modal-body p, .legal-modal-body ul, .legal-modal-body ol { margin: 0 0 .8em; }
.legal-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--border); }
.legal-modal-open { color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: none; }
.legal-modal-open:hover { text-decoration: underline; }
.footer-cols { display: flex; flex-wrap: wrap; gap: clamp(30px,5vw,72px); }
.footer-col h4 { margin: 0 0 15px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.footer-col a { display: block; margin-bottom: 11px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: flex-start; margin-top: clamp(30px,4vw,48px); padding-top: 22px; border-top: 1px solid var(--border); }
.footer-copy { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--muted-2); }
.footer-powered { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--muted-2); }
.footer-powered a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-powered a:hover { color: var(--accent); text-decoration: underline; }
/* Disclaimer drops to its own full-width row below the copyright + credit line. */
.footer-disclaimer { flex: 1 1 100%; margin-top: 4px; font-size: 11.5px; line-height: 1.6; color: var(--muted-2); }

/* Dark-mode remap for hardcoded light-palette inline colors in DB whitepaper HTML.
   Content is admin-authored HTML with baked-in hex values; these !important overrides
   (scoped to the whitepaper body) make that content adapt without rewriting the content. */
:root[data-theme="dark"] [data-wp] [style*="#f8fafd" i] { background: var(--surface-2) !important; }
:root[data-theme="dark"] [data-wp] [style*="background:#ffffff" i],
:root[data-theme="dark"] [data-wp] [style*="background: #ffffff" i] { background: var(--surface) !important; }
:root[data-theme="dark"] [data-wp] [style*="#334155" i],
:root[data-theme="dark"] [data-wp] [style*="#0f172a" i],
:root[data-theme="dark"] [data-wp] [style*="#1e293b" i],
:root[data-theme="dark"] [data-wp] [style*="#475569" i] { color: var(--text) !important; }
:root[data-theme="dark"] [data-wp] [style*="#64748b" i] { color: var(--muted) !important; }
:root[data-theme="dark"] [data-wp] [style*="#94a3b8" i] { color: var(--muted-2) !important; }
:root[data-theme="dark"] [data-wp] [style*="#e8ecf3" i],
:root[data-theme="dark"] [data-wp] [style*="#d3def3" i],
:root[data-theme="dark"] [data-wp] [style*="#d3e0fb" i] { border-color: var(--border) !important; }

/* ---------- news: home thumbnail, list, article ---------- */
.nws-ic { overflow: hidden; }
.nws-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }

.news-main { max-width: 1180px; margin: 0 auto; padding: 34px clamp(16px,3vw,28px) 70px; }
.news-head { margin-bottom: 26px; }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 20px; }
.news-card { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 8px 24px var(--shadow-card); overflow: hidden; text-decoration: none; transition: transform .18s, border-color .18s; }
.news-card:hover { transform: translateY(-2px); border-color: var(--accent-border); }
.news-cover { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; background: linear-gradient(135deg,#1D4ED8,#0F172A); color: #93B4F5; font-size: 30px; overflow: hidden; }
.news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; }
.news-card-title { font-family: 'Archivo',sans-serif; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--text); }
.news-card-ex { font-size: 13px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-age { margin-top: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }

.news-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; }
.news-pager-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--text); text-decoration: none; transition: background .18s, color .18s, border-color .18s; }
a.news-pager-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.news-pager-btn.is-off { opacity: .4; cursor: default; }
.news-pager-pages { font-family: 'JetBrains Mono',monospace; font-size: 12.5px; font-weight: 600; color: var(--muted); }

.article { max-width: 760px; margin: 0 auto; }
.article-head { margin-bottom: 26px; }
.article-meta { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.article-dot { opacity: .5; }
.article-lead { max-width: none; margin-top: 14px; font-size: 15.5px; }
.article-cover { margin: 0 0 30px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.article-cover img { width: 100%; height: auto; display: block; }

.article-body { font-size: 16.5px; line-height: 1.85; color: var(--text-2, var(--text)); }
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 20px; }
.article-body h2 { margin: 38px 0 14px; font-family: 'Archivo',sans-serif; font-size: clamp(21px,2.4vw,26px); font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.article-body h3 { margin: 30px 0 12px; font-family: 'Archivo',sans-serif; font-size: 18.5px; font-weight: 600; color: var(--text); }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
.article-body blockquote { margin: 0 0 20px; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent-border); color: var(--muted); font-style: italic; }
.article-body code { font-family: 'JetBrains Mono',monospace; font-size: .88em; padding: 2px 6px; border-radius: 5px; background: var(--surface-2); }
.article-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--border); }

.article-foot { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); }
.article-back { font-size: 13.5px; font-weight: 700; color: var(--accent); text-decoration: none; }

/* Social share row (info / news / legal detail) */
.share-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 36px 0 4px; padding-top: 22px; border-top: 1px solid var(--border); }
.share-label { display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted-2); }
.share-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 16px; text-decoration: none; cursor: pointer; transition: transform .15s ease, color .15s, border-color .15s, background .15s; }
.share-btn:hover { transform: translateY(-2px); color: #fff; }
.share-btn.share-x:hover    { background: #000;    border-color: #000; }
.share-btn.share-tg:hover   { background: #229ED9; border-color: #229ED9; }
.share-btn.share-wa:hover   { background: #25D366; border-color: #25D366; }
.share-btn.share-rd:hover   { background: #FF4500; border-color: #FF4500; }
.share-btn.share-in:hover   { background: #0A66C2; border-color: #0A66C2; }
.share-btn.share-fb:hover   { background: #1877F2; border-color: #1877F2; }
.share-btn.share-copy:hover { background: var(--accent); border-color: var(--accent); }
.share-btn.is-copied { background: var(--success); border-color: var(--success); color: #fff; transform: none; }

@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ==================== Membership: auth + account + nav ==================== */
/* Alerts (success / warning) — .alert-danger already exists. */
.alert-ok { margin-bottom: 15px; padding: 11px 14px; border-radius: 10px; background: var(--success-soft); border: 1px solid var(--success-border); color: var(--success); font-size: 12.5px; font-weight: 700; }
.alert-warn { margin-bottom: 15px; padding: 11px 14px; border-radius: 10px; background: rgba(217,119,6,0.12); border: 1px solid rgba(217,119,6,0.30); color: #b45309; font-size: 12.5px; font-weight: 700; }
:root[data-theme="dark"] .alert-warn { color: #f59e0b; }
.alert-ok a, .alert-warn a { color: inherit; text-decoration: underline; font-weight: 800; }

/* Pill status variants used on the account page */
.pill-ok { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.pill-bad { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
.pill-warn { color: #b45309; background: rgba(217,119,6,0.12); border-color: rgba(217,119,6,0.30); }
:root[data-theme="dark"] .pill-warn { color: #f59e0b; }

/* Nav account chip + sign-in link */
.nav-acct { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; font-size: 12.5px; font-weight: 700; transition: border-color .2s, background .2s; }
.nav-acct:hover { border-color: var(--accent-border); }
.nav-acct.is-active { border-color: var(--accent-border); background: var(--accent-soft); }
.nav-acct-av { border-radius: 50%; object-fit: cover; }
.nav-acct > i { font-size: 20px; color: var(--muted); }
.nav-acct-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-login { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 800; transition: background .2s; }
.nav-login:hover { background: var(--accent-border); }

/* Auth pages (login/register/verify/reset) */
.auth-main { max-width: 960px; }
.auth-main .breadcrumb { margin-bottom: 18px; }
.auth-main .breadcrumb a { color: var(--muted); text-decoration: none; }
.auth-main .breadcrumb a:hover { color: var(--accent); }
.auth-main .breadcrumb span { color: var(--muted-2); }
.auth-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.auth-card { padding: clamp(22px,3vw,34px); display: flex; flex-direction: column; justify-content: center; }
/* Hero aside */
.auth-aside { position: relative; overflow: hidden; border-radius: 18px; padding: clamp(24px,3vw,34px); color: #fff;
  background: linear-gradient(150deg, #1d4ed8 0%, #2563EB 45%, #1e3a8a 100%);
  display: flex; flex-direction: column; box-shadow: 0 20px 44px rgba(37,99,235,0.30); }
.auth-aside-tag { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.16); font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em; }
.auth-aside-title { margin: 18px 0 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(22px,2.4vw,28px); line-height: 1.15; letter-spacing: -0.02em; }
.auth-aside-lead { margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.86); }
.auth-benefits { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.95); }
.auth-benefits i { margin-top: 2px; color: #BFDBFE; }
.auth-aside-glow { position: absolute; right: -70px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%); }
/* Password reveal */
.pw-wrap { position: relative; }
.pw-wrap .inp { padding-right: 44px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--muted-2); cursor: pointer; border-radius: 8px; }
.pw-eye:hover { color: var(--accent); background: var(--accent-soft); }
/* Inline field validation */
.inp.is-invalid { border-color: var(--danger) !important; background: var(--danger-soft); }
.inp.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-soft) !important; }
/* Reserve space so showing/hiding a message never shifts the form height. */
.field-msg { margin: 5px 0 0; min-height: 15px; font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.field-msg.err { color: var(--danger); }
.field-msg.ok { color: var(--success); }
/* AJAX per-form result banner */
.form-result { margin: 12px 0 0; padding: 9px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.form-result:empty { display: none; }
.form-result.ok { color: var(--success); background: var(--success-soft); border: 1px solid var(--success-border); }
.form-result.err { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger-border); }
/* Live email-check + submit loading */
.email-check.ok { color: var(--success); }
.email-check.err { color: var(--danger); }
.btn-primary.is-loading { opacity: 0.7; cursor: progress; }
/* Indeterminate top progress bar shown while a form is submitting */
.form-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000; background: transparent; opacity: 0; transition: opacity .2s; pointer-events: none; overflow: hidden; }
.form-progress.is-active { opacity: 1; }
.form-progress span { position: absolute; top: 0; bottom: 0; width: 35%; background: var(--accent); border-radius: 3px; animation: b20-progress 1.1s ease-in-out infinite; }
@keyframes b20-progress { 0% { left: -35%; } 100% { left: 100%; } }
.btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
@media (max-width: 720px) { .auth-shell { grid-template-columns: 1fr; } .auth-aside { order: 2; } }
.auth-title { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--text); }
.auth-sub { margin: 8px 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-alt { margin: 16px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.auth-alt a { font-weight: 800; }
.field-hint { margin: 6px 0 0; font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--muted-2); }
.field-hint a { font-weight: 700; }
.form-optional { color: var(--muted-2); font-weight: 700; }
.inp-code { letter-spacing: 0.5em; font-size: 20px; text-align: center; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.link-btn { background: none; border: none; padding: 0; color: var(--accent); font-weight: 800; font-size: inherit; cursor: pointer; text-decoration: underline; }
.auth-resend { margin-top: 4px; }
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .2s, background .2s; }
.btn-google:hover { border-color: var(--accent-border); background: var(--surface-2); }
.btn-google i { color: #EA4335; }
.auth-or { display: flex; align-items: center; text-align: center; gap: 12px; margin: 16px 0; color: var(--muted-2); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Account page */
.account-main { max-width: 1000px; }
/* Profile hero (read-only summary) */
.account-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding: clamp(18px,2.4vw,26px); margin-bottom: 16px; }
.account-hero-id { display: flex; align-items: center; gap: 15px; min-width: 0; }
.account-av-lg { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.account-av-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 26px; }
.account-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 21px; color: var(--text); }
.account-email { margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 7px; word-break: break-word; }
.account-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.meta-chip { display: flex; flex-direction: column; gap: 3px; padding: 9px 15px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.meta-k { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); }
.meta-v { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
/* Tabs */
.account-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 18px; border-bottom: 1px solid var(--border); }
.account-tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: none; background: none; color: var(--muted); font-size: 13.5px; font-weight: 700; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.account-tab:hover { color: var(--text); }
.account-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.account-tab i { font-size: 13px; }
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800; }
.account-panel { display: none; }
.account-panel.is-active { display: block; animation: b20-fade .2s ease; }
@keyframes b20-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sub-when { margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--muted-2); }
/* Settings cards — align to content (no stretch gaps) */
.account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.account-card { padding: clamp(18px,2.4vw,24px); }
.account-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.account-form .form-label { margin: 6px 0 0; }
.account-form .field-hint { margin-top: 2px; }
.account-form .btn-primary { align-self: flex-start; margin-top: 14px; }
.account-h2 { margin: 0 0 6px; display: flex; align-items: center; gap: 9px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; color: var(--text); }
.account-h2 i { color: var(--accent); font-size: 15px; }
.account-note { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.6; color: var(--muted); }
.account-block { margin-top: 16px; }
.subs-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sub-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.sub-task { font-size: 13.5px; font-weight: 700; color: var(--text); }
.sub-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sub-note { font-size: 12px; font-weight: 600; color: var(--muted); }
/* Account watchlist */
.wl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wl-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.wl-main { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1 1 auto; text-decoration: none; }
.wl-av { position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--accent); }
.wl-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-id { display: flex; flex-direction: column; min-width: 0; }
.wl-name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-sym { font-size: 11.5px; color: var(--muted); }
.wl-price { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-left: auto; }
.wl-ch { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; color: var(--muted); }
.wl-ch.up { color: #16A34A; } .wl-ch.down { color: #DC2626; }
.wl-remove { flex: 0 0 auto; background: none; border: 0; cursor: pointer; color: #F59E0B; font-size: 15px; line-height: 1; padding: 5px; border-radius: 6px; transition: opacity .15s; }
.wl-remove:hover { opacity: .6; }
@media (max-width: 520px) { .wl-ch { min-width: 0; } .wl-name { max-width: 40vw; } }
.account-danger { border-color: var(--danger-border); }
.account-danger-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.account-danger-form .inp { max-width: 220px; }
.btn-danger-soft { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 10px 18px; border-radius: 10px; background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger); font-size: 13px; font-weight: 800; transition: filter .2s; }
.btn-danger-soft:hover { filter: brightness(1.05); }
@media (max-width: 680px) { .account-hero { flex-direction: column; align-items: flex-start; } .account-meta { width: 100%; } }
@media (max-width: 560px) { .auth-main { max-width: 100%; } }

/* Impersonation banner */
.imp-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; background: #b45309; color: #fff; font-size: 12.5px; font-weight: 700; text-align: center; }
.imp-bar a { color: #fff; text-decoration: underline; font-weight: 800; }

/* Airdrop page */
.airdrop-main { max-width: 860px; }
.airdrop-list { display: flex; flex-direction: column; gap: 16px; }
/* Task cards (list view) + back link (detail view) */
.airdrop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.airdrop-card { display: flex; flex-direction: column; gap: 11px; text-decoration: none; padding: clamp(18px,2.2vw,24px); }
.airdrop-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.airdrop-card-title { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--text); }
.airdrop-card-desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.airdrop-card-cta { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 800; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }
.airdrop-card-cta i { transition: transform .15s; }
.airdrop-card:hover .airdrop-card-cta i { transform: translateX(3px); }
.airdrop-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; margin-bottom: 12px; }
.airdrop-back:hover { color: var(--accent); }
.airdrop-reward { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 4px 11px; border-radius: 20px; }
.airdrop-reward i { font-size: 11px; }
.airdrop-reward-lg { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--text); background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 9px 15px; border-radius: 11px; }
.airdrop-reward-lg i { color: var(--accent); }
.airdrop-reward-lg b { color: var(--accent); font-weight: 800; }
.airdrop-task { padding: clamp(18px,2.4vw,26px); }
.airdrop-task-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.airdrop-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.airdrop-schedule { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.airdrop-schedule i { color: var(--accent); }
.airdrop-schedule b { color: var(--text); font-weight: 800; }
.airdrop-task.is-upcoming { opacity: .9; }
.airdrop-title { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 19px; color: var(--text); }
.airdrop-desc { margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.airdrop-desc p { margin: 0 0 10px; }
.airdrop-desc a { color: var(--accent); font-weight: 700; }
.airdrop-action { margin-top: 14px; }
.airdrop-submit { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.airdrop-form { display: flex; flex-direction: column; gap: 13px; margin-top: 4px; }
.airdrop-field { display: flex; flex-direction: column; }
.inp-file { padding: 9px 12px; font-weight: 600; }
.inp-file::file-selector-button { margin-right: 12px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.airdrop-msg { margin: 10px 0 0; font-size: 13px; font-weight: 700; }
.airdrop-msg.ok { color: var(--success); }
.airdrop-msg.err { color: var(--danger); }
.airdrop-done { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--success); }