/* NovaPad pink theme.
 *
 * Loaded last, so it re-tints the shared design system (style.css) and the
 * component additions (site.css) without touching either file: delete this
 * stylesheet and the previous theme is back.
 *
 * Palette sampled from the reference launchpad (genius.fun): near-black plum
 * ground, magenta-to-pink accents, pink hairline borders.
 *   deep magenta  #be2d78  #d63a8c  #7a164e
 *   bright pink   #ff477e  #ff60b2  #ff7aca  #fe86b4  #ff96d6
 *   pale pink     #ffe8f7
 *   ground        #090016  #0d0212
 */

:root {
  --bg: #0d0212;
  --surface: #1a0722;
  --surface-2: #240b2e;
  --ink: #fdeef8;
  --muted: #c69ac6;
  --line: rgba(255, 122, 202, .20);
  --accent: #ff477e;
  --accent-strong: #ff2d6f;
  --accent-soft: rgba(255, 71, 126, .16);
  --accent-ink: #ffe8f7;
  --warn: #ffb3d9;
  --warn-soft: rgba(255, 122, 202, .12);
  --shadow: 0 18px 44px rgba(255, 71, 126, .18);
  color-scheme: dark;
}

/* Soft dot grid, the reference's ground texture. */
body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(255, 122, 202, .10) 1px, transparent 1px);
  background-size: 22px 22px;
}

a { color: inherit; }

/* -- chrome ------------------------------------------------------------- */
.sidebar { border-right-color: var(--line); background: rgba(20, 5, 26, .86); }
.topbar { border-bottom-color: var(--line); background: rgba(13, 2, 18, .82); }
.site-footer { border-top: 1px solid var(--line); }
.nav-link:hover { background: rgba(255, 71, 126, .08); }
.nav-link.active { background: var(--accent-soft); color: var(--accent-ink); }
.nav-icon { color: inherit; }

/* -- brand mark --------------------------------------------------------- */
.brand-mark {
  background: linear-gradient(145deg, #ff60b2, #be2d78 70%);
  box-shadow: 0 0 0 1px rgba(255, 232, 247, .22), 0 6px 16px rgba(255, 71, 126, .28);
}
.brand-mark::before, .brand-mark::after, .brand-mark span { border-color: #ffe8f7; }
.brand-mark span { background: #fff6fb; border: 0; }
.brand-accent { color: var(--accent); }

/* -- pills, buttons ----------------------------------------------------- */
.network-pill { border-color: var(--line); background: rgba(255, 71, 126, .07); color: var(--muted); }
.network-pill.warning { border-color: rgba(255, 96, 178, .45); background: rgba(255, 71, 126, .14); color: var(--accent-ink); }
.ui-button.accent { background: linear-gradient(135deg, #ff60b2, #ff2d6f); color: #fff; box-shadow: 0 10px 24px rgba(255, 45, 111, .28); }
.ui-button.accent:hover { background: linear-gradient(135deg, #ff7aca, #ff477e); box-shadow: 0 12px 28px rgba(255, 45, 111, .38); }
.ui-button.ghost { border-color: var(--line); background: rgba(255, 71, 126, .06); color: var(--ink); }
.ui-button.ghost:hover { border-color: var(--accent); background: rgba(255, 71, 126, .12); }
.chain-dot, .status-dot, .mini-dot { background: var(--accent); box-shadow: 0 0 0 .2rem rgba(255, 71, 126, .18); }

/* -- hero -------------------------------------------------------------- */
.hero-orbit {
  background: radial-gradient(circle at 30% 25%, #4c0d3a, #1a0620 62%), #1a0620;
  box-shadow: 0 20px 50px rgba(255, 45, 111, .18);
}
.hero-orbit::before {
  background: radial-gradient(circle at 34% 34%, rgba(255, 71, 126, .34), transparent 36%),
              radial-gradient(circle at 76% 70%, rgba(255, 150, 214, .22), transparent 32%);
}
.orbit-ring { border-color: rgba(255, 122, 202, .38); }
.ring-three { border-color: rgba(255, 232, 247, .24); }
.orbit-core {
  background: linear-gradient(145deg, #ff96d6, #d63a8c);
  color: #3a0a24;
  box-shadow: 0 0 0 .7rem rgba(255, 71, 126, .12), 0 18px 36px rgba(0, 0, 0, .32);
}
.orbit-star { color: #ffe8f7; }
.star-one { color: #ffd6ec; }
.star-two { color: #ff96d6; }
.star-three { color: #ff60b2; }
.hero-copy h2 em { color: var(--accent); }

/* -- surfaces ---------------------------------------------------------- */
.stat-card { background: rgba(255, 71, 126, .06); border-color: var(--line); }
.surface, .panel, .data-table, .market-table { box-shadow: 0 1px 0 rgba(255, 122, 202, .05); }
.panel, .data-table, .market-table, .surface, .card, .currency-card { border-color: var(--line); }
.token-avatar, .preview-avatar, .currency-symbol, .coin-avatar {
  background: linear-gradient(145deg, #ff96d6, #d63a8c);
  color: #33081f;
}
.coin-avatar { background: rgba(255, 71, 126, .18); color: var(--accent-ink); }
.badge.success { border-color: rgba(255, 122, 202, .45); }
.progress { background: rgba(255, 71, 126, .10); box-shadow: inset 0 0 0 1px var(--line); }
.progress span { background: linear-gradient(90deg, #ff2d6f, #ff96d6); }
.pill-live { background: rgba(255, 71, 126, .18); color: var(--accent-ink); }
.pill-done { background: rgba(255, 150, 214, .16); color: #ffd6ec; }
.trade-dialog { box-shadow: 0 26px 80px rgba(255, 45, 111, .28); }
.trade-dialog::backdrop { background: rgba(9, 0, 22, .62); }

/* -- messages ---------------------------------------------------------- */
.notice.notice-success { border-color: rgba(255, 122, 202, .45); background: rgba(255, 71, 126, .12); color: #ffd6ec; }
.notice.notice-success strong { color: #ffe8f7; }
.notice.notice-success p { color: #f3c4dd; }
.notice.notice-error { border-color: rgba(255, 45, 111, .55); background: rgba(190, 45, 120, .16); color: #ffc9d6; }
.notice.notice-error strong { color: #ffd6ec; }
.notice.notice-error p { color: #ffb3cc; }
.trade-warning { border-color: rgba(255, 122, 202, .40); background: rgba(255, 71, 126, .12); color: #ffd6ec; }

/* -- transaction panel ------------------------------------------------- */
#tx-panel[data-phase="confirmed"] { border-color: rgba(255, 122, 202, .50); background: rgba(255, 71, 126, .14); }
#tx-panel[data-phase="reverted"] { border-color: rgba(255, 45, 111, .60); background: rgba(190, 45, 120, .18); }

/* -- whitepaper -------------------------------------------------------- */
.doc h2, .doc h3 { color: var(--ink); }
.doc p, .doc li { color: #dcc0dd; }
.doc code { background: rgba(255, 71, 126, .12); color: #ffd6ec; }
.doc th, .doc td { border-bottom-color: var(--line); }

/* -- form controls ----------------------------------------------------- */
.form-grid input, .form-grid textarea, select {
  border-color: var(--line);
  background: rgba(255, 71, 126, .06);
  color: var(--ink);
}
.form-grid input::placeholder, .form-grid textarea::placeholder { color: rgba(198, 154, 198, .7); }
.form-grid input:focus, .form-grid textarea:focus { outline: 2px solid rgba(255, 71, 126, .35); border-color: var(--accent); }
.search-box, .market-toolbar { border-color: var(--line); }