/* ============================================================
   css/ui-v2.css — UI v2, the Nebula interface.

   Every rule here hangs off html.ui-v2, which js/auth.js sets when
   /api/auth/me says so (lib/ui-v2-gate.js: the UI_V2_EMAILS allowlist
   until UI_V2_PUBLIC flips it on for everyone). Without the class this
   file does nothing, so it ships to every browser and the current
   interface stays byte-for-byte what it was.

   The look: a dark field with two soft colour washes, a centred hero
   (logo and wordmark, headline, the scan box as a glass panel with the
   chain chips under it), and every section and module card a rounded
   glass panel. Module cards carry a dot in their title and a points badge
   from what the rug score found in them (data-edge, js/rug-score.js and
   js/evm-modules-ui.js). Cards lay two abreast; js/ui-v2.js widens any
   card that would otherwise sit alone in its row.

   What it leaves alone: the logo mark and the DeFade wordmark (their
   gradient, weight and glow come from css/main.css), every module's own
   markup, and the tab, lock and lazy-load logic in js/.

   Performance notes from css/main.css still apply: no fixed layers, no
   backdrop blur (the "glass" is a translucent panel with an inset
   highlight over a static gradient), no animated blur, and no outer
   shadow wider than 24px on anything that repaints during a scan (a
   first cut had 60-80px blurs on every panel and edge card, and every
   module update re-blurred them: that was the lag). The colour washes
   are two fixed-size radial gradients on the body, painted once.
   test/ui-v2-gate.test.js checks the scoping.
   ============================================================ */

/* ---- page field ---- */
html.ui-v2 .container { max-width: 1200px; padding: 28px 24px 40px; }
html.ui-v2 .v2-only { display: block; }

/* ---- nav: section links in the action row under the ticker ---- */
html.ui-v2 .v2-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; padding: 0 6px; }
html.ui-v2 .v2-nav a { color: #c4c4dc; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
html.ui-v2 .v2-nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
html.ui-v2 .drawer-btn { margin-right: 0; }

/* ---- layout (the home page: its main sits in .container; the secondary
   pages have a main of their own and must not be gridded) ---- */
html.ui-v2 .container > main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  grid-template-areas:
    "scan scan scan"
    "results results results"
    "rugs rugs rugs"
    "tracker tracker pro"
    "discover discover discover"
    "kol kol every"
    "api api api";
}
html.ui-v2 #v2Scan { grid-area: scan; }
html.ui-v2 #results { grid-area: results; min-width: 0; }
html.ui-v2 #results:empty { display: none; }
html.ui-v2 .rug-db-section { grid-area: rugs; }
html.ui-v2 .tracker-section { grid-area: tracker; }
html.ui-v2 #v2Pro { grid-area: pro; }
html.ui-v2 .discover-section { grid-area: discover; }
html.ui-v2 #v2Kol { grid-area: kol; }
html.ui-v2 #v2Everywhere { grid-area: every; }
html.ui-v2 #apiSection { grid-area: api; max-width: none; margin: 0; padding: 0; }

/* ---- a glass panel ---- */
html.ui-v2 .v2-tile,
html.ui-v2 .tracker-section,
html.ui-v2 .discover-section,
html.ui-v2 .rug-db-section {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 26px;
  margin: 0;
  max-width: none;
  min-width: 0;
  transition: border-color 0.25s ease;
}
html.ui-v2 .v2-tile:hover,
html.ui-v2 .tracker-section:hover,
html.ui-v2 .discover-section:hover,
html.ui-v2 .rug-db-section:hover { border-color: rgba(255, 255, 255, 0.18); }

/* ---- hero: logo and wordmark, headline, the scan box, the chains ---- */
html.ui-v2 #v2Scan { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0 12px; }
html.ui-v2 .header { padding: 0; }
html.ui-v2 .logo { font-size: 72px; }
html.ui-v2 .logo-icon { width: 60px; height: 60px; }
html.ui-v2 .tagline { font-size: 12px; letter-spacing: 0.3em; }
html.ui-v2 .v2-headline { display: block; font-family: 'Manrope', sans-serif; font-size: 56px; line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; color: #f0f0f8; max-width: 820px; margin: 28px auto 0; }
/* The paragraph carries its font and centring inline, so these need !important. */
html.ui-v2 .header > p[style] { font-family: 'Manrope', sans-serif !important; font-size: 18px !important; line-height: 1.55 !important; letter-spacing: 0 !important; color: #b8b8d4 !important; max-width: 640px !important; margin: 18px auto 0 !important; font-weight: 500; }
html.ui-v2 .search-section { width: 100%; max-width: 820px; margin: 30px auto 0; text-align: center; }
html.ui-v2 .search-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  padding: 8px;
  overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 40px rgba(0, 212, 255, 0.16);
}
html.ui-v2 .search-box:focus-within { border-color: rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 40px rgba(0, 212, 255, 0.28); }
html.ui-v2 .search-box input { padding: 16px 18px; font-size: 16px; }
html.ui-v2 .search-box button { margin: 0; clip-path: none; border-radius: 14px; padding: 0 28px; letter-spacing: 0.08em; }
html.ui-v2 .search-hint { font-size: 12px; margin-top: 12px; color: #8484aa; opacity: 1; }

/* ---- the static tiles ---- */
html.ui-v2 .v2-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; color: var(--text); text-decoration: none; }
html.ui-v2 .v2-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #9a9ac0; display: flex; align-items: center; gap: 8px; }
html.ui-v2 .v2-label-accent { color: #5ee4ff; }
html.ui-v2 .v2-tile h3 { margin: 0; font-family: 'Manrope', sans-serif; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
html.ui-v2 .v2-link { font-weight: 700; font-size: 14px; color: #5ee4ff; }
html.ui-v2 .v2-link-purple { color: #d08cff; }
html.ui-v2 #v2Pro { background: linear-gradient(135deg, rgba(0, 212, 255, 0.14), rgba(191, 90, 242, 0.2)), rgba(255, 255, 255, 0.03); border-color: rgba(0, 212, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
html.ui-v2 #v2Pro:hover { border-color: rgba(0, 212, 255, 0.6); }
html.ui-v2 .v2-links { display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-links a { color: var(--text); font-weight: 700; font-size: 15px; text-decoration: none; }
html.ui-v2 .v2-links a:hover { color: #5ee4ff; }

/* ---- section panels ---- */
html.ui-v2 .discover-title,
html.ui-v2 .tracker-title,
html.ui-v2 .rug-db-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #9a9ac0; }
html.ui-v2 .discover-header,
html.ui-v2 .tracker-header,
html.ui-v2 .rug-db-header { margin-bottom: 14px; }
html.ui-v2 .tracker-input,
html.ui-v2 .rug-db-search,
html.ui-v2 .rug-db-filter,
html.ui-v2 #rugDbSort,
html.ui-v2 .tracker-scan-btn { border-radius: 12px; }
html.ui-v2 #rugDbContent { border-radius: 16px !important; border-color: rgba(255, 255, 255, 0.08) !important; }
html.ui-v2 .rug-db-table th { background: #0a0a1a; }

/* ---- a scan result: hero, then module cards two abreast ---- */
html.ui-v2 .tab-nav { border-radius: 999px; background: rgba(8, 8, 22, 0.97); border: 1px solid rgba(255, 255, 255, 0.1); padding: 6px; gap: 4px; margin-bottom: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 20px rgba(0, 0, 0, 0.3); }
html.ui-v2 .tab-btn { border-radius: 999px; clip-path: none; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 10px 16px; background: transparent; border: 1px solid transparent; color: #c4c4dc; }
html.ui-v2 .tab-btn.active { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.12); }
html.ui-v2 .risk-card { border-radius: 28px !important; clip-path: none; margin-bottom: 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.3); }
html.ui-v2 .tab-panel.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
/* Wide content keeps the full row: anything in a panel that is not a card,
   and the cards js/ui-v2.js marks (tables, charts, stat grids, and a card
   that would otherwise sit alone in its row). */
html.ui-v2 .tab-panel.active > :not(.card),
html.ui-v2 .tab-panel .card[data-v2-span="full"] { grid-column: 1 / -1; }
html.ui-v2 .card { margin: 0; padding: 26px; border-radius: 24px !important; clip-path: none; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); animation: none; }
html.ui-v2 .card::before,
html.ui-v2 .card::after { display: none; } /* the cut-corner brackets */
html.ui-v2 .card:hover { border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
html.ui-v2 .card-title { font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: #f0f0f8; margin-bottom: 16px; gap: 10px; }
html.ui-v2 .card-title::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: none; background: #3a3a60; }
html.ui-v2 .card-title::after { background: rgba(255, 255, 255, 0.06) !important; order: 1; }
html.ui-v2 .card-impact { order: 2; flex: none; margin-left: 10px; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0; color: #9a9ac0; }

/* ---- module edges: what the score found in each card ---- */
html.ui-v2 .card[data-edge="critical"] .card-title::before { background: #f0375c; box-shadow: 0 0 12px #f0375c; }
html.ui-v2 .card[data-edge="warning"] .card-title::before { background: #f5873a; box-shadow: 0 0 12px #f5873a; }
html.ui-v2 .card[data-edge="caution"] .card-title::before { background: #f5c842; box-shadow: 0 0 12px #f5c842; }
html.ui-v2 .card[data-edge="clean"] .card-title::before { background: #30d158; box-shadow: 0 0 12px #30d158; }
html.ui-v2 .card[data-edge="critical"] { border-color: rgba(240, 55, 92, 0.45); }
html.ui-v2 .card[data-edge="warning"] { border-color: rgba(245, 135, 58, 0.4); }
html.ui-v2 .card[data-edge="critical"] .card-impact { color: #ff6b8a; }
html.ui-v2 .card[data-edge="warning"] .card-impact { color: #f5a05a; }
html.ui-v2 .card[data-edge="caution"] .card-impact { color: #f5c842; }
html.ui-v2 .card[data-edge="clean"] .card-impact { color: #5be37f; }

/* ---- the rug probability dial (js/rug-score.js and the EVM painter emit
   it with .v2-only, so the current interface never shows it) ---- */
html.ui-v2 .rug-num,
html.ui-v2 .rug-verdict,
html.ui-v2 .rug-bar { display: none; }
html.ui-v2 .rug-dial {
  --rug: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  margin: 6px auto 14px;
  border-radius: 50%;
  background: conic-gradient(from 220deg, #30d158 0deg, #f5c842 95deg, #f5873a 165deg, #f0375c 235deg, #a3072a 280deg, rgba(255, 255, 255, 0.06) 280deg 360deg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
html.ui-v2 .rug-dial-face { width: 188px; height: 188px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #12122e, #07071a); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.5); }
html.ui-v2 .rug-dial-num { font-family: 'JetBrains Mono', monospace; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
html.ui-v2 .rug-dial-verdict { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
html.ui-v2 .rug-dial-needle { position: absolute; top: 10px; left: 50%; width: 4px; height: 22px; margin-left: -2px; background: #fff; border-radius: 2px; box-shadow: 0 0 8px #fff; transform-origin: 50% 110px; transform: rotate(calc(-140deg + var(--rug) * 2.8deg)); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* The signal list under the dial: one row per finding, points on the right. */
html.ui-v2 .flag { border-left: none; border-right: none; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); padding: 12px 14px; margin-bottom: 6px; font-family: 'Manrope', sans-serif; font-size: 14px; }
html.ui-v2 .flag::after { display: none; }

/* ---- footer ---- */
html.ui-v2 .footer { margin-top: 28px; }

/* ---- phone ---- */
@media (max-width: 900px) {
  html.ui-v2 .container { padding: 14px 14px 24px; }
  html.ui-v2 .v2-nav { display: none; }
  html.ui-v2 .container > main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "scan" "results" "rugs" "discover" "tracker" "pro" "kol" "every" "api";
    gap: 14px;
  }
  html.ui-v2 .v2-tile,
  html.ui-v2 .tracker-section,
  html.ui-v2 .discover-section,
  html.ui-v2 .rug-db-section { padding: 18px; border-radius: 18px; }
  html.ui-v2 #v2Scan { padding: 16px 0 4px; }
  html.ui-v2 .logo { font-size: 44px; letter-spacing: -2px; }
  html.ui-v2 .logo-icon { width: 40px; height: 40px; }
  html.ui-v2 .v2-headline { font-size: 34px; margin-top: 18px; }
  html.ui-v2 .header > p[style] { font-size: 15px !important; margin-top: 12px !important; }
  html.ui-v2 .search-box { padding: 6px; border-radius: 18px; }
  html.ui-v2 .search-box input { font-size: 16px; padding: 14px; }
  html.ui-v2 .search-box button { padding: 0 16px; }
  html.ui-v2 .tab-panel.active { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html.ui-v2 .card { padding: 18px; border-radius: 18px !important; }
  html.ui-v2 .risk-card { border-radius: 20px !important; }
  html.ui-v2 .rug-dial { width: 200px; height: 200px; }
  html.ui-v2 .rug-dial-face { width: 156px; height: 156px; }
  html.ui-v2 .rug-dial-num { font-size: 52px; }
  html.ui-v2 .rug-dial-needle { transform-origin: 50% 90px; height: 18px; }
}

/* ============================================================
   SITEWIDE (every page that loads this file: the home page and the
   secondary pages — lookups, leaderboard, rug feed, survival, blog, FAQ,
   pricing, download, modules, submit labels, dashboard). Those pages keep
   their own inline styles; these rules sit over them, keyed on the class
   names they share (.nav / .page-header, .hero, .stat-box, .card,
   .section, .post-card, .plan-card, the button and input classes), so a
   page that uses them gets the Nebula look without a rewrite.
   ============================================================ */

/* ---- one colour from the top bar into the page ---- */
/* The bars stay opaque (css/main.css: the status-bar strip on phones has
   nothing behind it). The page is plain black for its first 120px, so the
   bar's bottom edge meets the same black and the colour washes fade in
   below it, with no line between them. */
html.ui-v2 body {
  background:
    linear-gradient(#030308 0, #030308 120px, rgba(3, 3, 8, 0) 420px),
    radial-gradient(900px 560px at 14% 120px, rgba(0, 212, 255, 0.16), transparent 60%),
    radial-gradient(900px 560px at 86% 160px, rgba(191, 90, 242, 0.16), transparent 60%),
    #030308;
}
html.ui-v2 .top-bar,
html.ui-v2 .nav,
html.ui-v2 .page-header { background: #030308; border-bottom-color: transparent !important; box-shadow: none; }
html.ui-v2 .topbar-actions { border-top: 0 !important; background: transparent; }
html.ui-v2 .sol-price-widget { border-right-color: transparent !important; border-bottom-color: transparent !important; }
html.ui-v2 #topBarSpacer { background: #030308; }

/* ---- phone: burger on the left, the account pill on the right ---- */
@media (max-width: 600px) {
  html.ui-v2 .topbar-actions { justify-content: space-between !important; padding: 0 12px !important; }
  html.ui-v2 .topbar-actions .drawer-btn { margin-left: 0; margin-right: auto; }
  html.ui-v2 .topbar-actions .defade-auth-slot { margin-left: auto; }
}

/* ---- the chain row above the scan box: glass pills with the live dot ---- */
html.ui-v2 #chainToggle { gap: 8px; margin: 0 0 16px; }
html.ui-v2 #chainToggle .chain-tab { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: #d8d8ea; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; padding: 7px 12px; }
html.ui-v2 #chainToggle .chain-tab::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 8px #30d158; flex: none; }
html.ui-v2 #chainToggle .chain-tab:hover { border-color: rgba(255, 255, 255, 0.22); color: #fff; }
html.ui-v2 #chainToggle .chain-tab.active { background: rgba(0, 212, 255, 0.12); border-color: #00d4ff; color: #00d4ff; }

/* ---- the drawer's wordmark: the DeFade cyan ---- */
html.ui-v2 .drawer-title,
html.ui-v2 .dfd-title { color: #00d4ff; }

/* ---- secondary pages: nav, hero, type ---- */
html.ui-v2 .nav-links a { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; color: #c4c4dc; padding: 8px 12px; border-radius: 999px; text-decoration: none; }
html.ui-v2 .nav-links a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
html.ui-v2 .hero { text-align: center; padding-top: 28px; }
html.ui-v2 .hero h1,
html.ui-v2 main > h1,
html.ui-v2 article > h1,
html.ui-v2 .page-title h1 { font-family: 'Manrope', sans-serif; font-size: 44px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: #f0f0f8; background: none; -webkit-text-fill-color: #f0f0f8; }
html.ui-v2 .hero h1 .pro-pill { -webkit-text-fill-color: initial; }
html.ui-v2 .hero p,
html.ui-v2 .hero .hero-sub,
html.ui-v2 .lead { font-family: 'Manrope', sans-serif; font-size: 17px; line-height: 1.55; color: #b8b8d4; font-weight: 500; }
html.ui-v2 h2,
html.ui-v2 .section-title { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.02em; color: #f0f0f8; }
html.ui-v2 article { font-family: 'Manrope', sans-serif; font-size: 17px; line-height: 1.7; color: #d8d8ea; }
html.ui-v2 article h1 { font-size: 40px; }
html.ui-v2 article h2 { font-size: 26px; }
html.ui-v2 article a { color: #5ee4ff; }

/* ---- secondary pages: glass panels ---- */
html.ui-v2 .stat-box,
html.ui-v2 .card,
html.ui-v2 .section,
html.ui-v2 .post-card,
html.ui-v2 .plan-card,
html.ui-v2 .cta-box,
html.ui-v2 .note,
html.ui-v2 .stats-bar,
html.ui-v2 .deaths-section,
html.ui-v2 .token-stat {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html.ui-v2 .note { border-left: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; }
html.ui-v2 .post-card:hover,
html.ui-v2 .card:hover,
html.ui-v2 .plan-card:hover { border-color: rgba(255, 255, 255, 0.18); }
html.ui-v2 .stat-val,
html.ui-v2 .pro-stat-value,
html.ui-v2 .key-stat-mini-value,
html.ui-v2 .token-stat-val { font-family: 'JetBrains Mono', monospace; }
html.ui-v2 .stat-label,
html.ui-v2 .pro-stat-label,
html.ui-v2 .key-stat-mini-label,
html.ui-v2 .token-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #9a9ac0; }

/* ---- secondary pages: controls ---- */
html.ui-v2 .btn,
html.ui-v2 .filter-btn,
html.ui-v2 .seg-btn,
html.ui-v2 .page-btn,
html.ui-v2 .act-pill,
html.ui-v2 .tab-pill,
html.ui-v2 .card-btn,
html.ui-v2 .community-btn,
html.ui-v2 .share-btn,
html.ui-v2 .logout-btn { border-radius: 999px; font-family: 'Manrope', sans-serif; font-weight: 700; }
html.ui-v2 .filter-btn,
html.ui-v2 .seg-btn,
html.ui-v2 .page-btn { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.1); color: #c4c4dc; }
html.ui-v2 .filter-btn.active,
html.ui-v2 .seg-btn.active { background: rgba(0, 212, 255, 0.12); border-color: #00d4ff; color: #00d4ff; }
html.ui-v2 .hero-cta,
html.ui-v2 .cta,
html.ui-v2 .plan-cta,
html.ui-v2 .btn-primary,
html.ui-v2 .card-btn.primary { border-radius: 999px; background: linear-gradient(135deg, #00d4ff, #bf5af2); color: #03030a; font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 0; }
html.ui-v2 input[type="text"],
html.ui-v2 input[type="search"],
html.ui-v2 input[type="email"],
html.ui-v2 .search-input,
html.ui-v2 select,
html.ui-v2 textarea { background: rgba(3, 3, 10, 0.6); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; color: #f0f0f8; }
html.ui-v2 input[type="text"]:focus,
html.ui-v2 input[type="search"]:focus,
html.ui-v2 .search-input:focus,
html.ui-v2 textarea:focus { border-color: rgba(0, 212, 255, 0.6); outline: none; box-shadow: 0 0 24px rgba(0, 212, 255, 0.16); }

/* ---- secondary pages: tables, footers ---- */
html.ui-v2 table th { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #9a9ac0; font-weight: 600; }
html.ui-v2 table td { border-bottom-color: rgba(255, 255, 255, 0.05); }
html.ui-v2 .footer,
html.ui-v2 footer { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #8484aa; border-top-color: rgba(255, 255, 255, 0.06); }

@media (max-width: 900px) {
  html.ui-v2 .hero h1,
  html.ui-v2 main > h1,
  html.ui-v2 article > h1 { font-size: 30px; }
  html.ui-v2 article h1 { font-size: 30px; }
  html.ui-v2 .hero p { font-size: 15px; }
}