/* Shared finish for public templates, account screens and admin.
   Kept separate from the legacy component sheet; no build step required. */
:root {
  --etl-bg: #0b101c;
  --etl-surface: #121b2b;
  --etl-surface-2: #172236;
  --etl-border: rgba(177, 199, 230, .14);
  --etl-muted: #a6b5cb;
  --etl-text-muted: #a6b5cb;
  --etl-text-dim: #8c9db6;
  --etl-grad: linear-gradient(115deg, #668fff, #8675ed);
  --etl-radius: 16px;
  --etl-radius-sm: 10px;
  --etl-shadow: 0 10px 30px #00000018;
  --etl-page-space: 5rem;
  --etl-header-height: 76px;
}
html { scroll-padding-top: calc(var(--etl-header-height) + 24px); }
body { background: radial-gradient(ellipse 1000px 650px at 50% -320px, #263b67 0%, transparent 85%), var(--etl-bg); }
body :is(h1, h2, h3) { font-weight: 600; letter-spacing: -.04em; }
body :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid #a9c5ff; outline-offset: 4px; }
::selection { background: #a9c5ff; color: #142238; }

/* One predictable distance from the fixed navbar, and one page-edge rhythm. */
body .site-header, body .site-header.is-scrolled { height: var(--etl-header-height); background: #0b101cf2; box-shadow: 0 1px 0 #c5d8f00d; border-bottom-color: var(--etl-border); }
body .site-header::before { opacity: .3; }
body .page-wrap { padding-top: var(--etl-header-height); min-height: 0; }
body #main-content > main { padding-top: var(--etl-page-space) !important; padding-bottom: var(--etl-page-space) !important; min-height: 0; }
body #main-content > main > div > .page-hero { padding-top: 0; padding-bottom: 2.5rem; margin-bottom: 2.5rem; }
body .page-hero::before { opacity: .4; }
body .page-hero::after { opacity: .14; }
body .page-hero h1 { font-weight: 600; }
body .section { padding-block: var(--etl-page-space); }
body .hero { padding-top: var(--etl-page-space); padding-bottom: var(--etl-page-space); }
body #main-content > main > div > :last-child { margin-bottom: 0; }

/* Quiet navigation, with the existing menus and wallet states preserved. */
body .nav-logo__icon { box-shadow: 0 4px 12px #0002; }
body .nav-logo__icon::after { opacity: .15; }
body .nav-links { background: transparent; border-color: transparent; box-shadow: none; }
body .nav-rail__pill { box-shadow: none; background: #8cb4ff0c; border-color: #a9c5ff20; }
body .nav-link { color: #aebbd0; font-size: .83rem; font-weight: 500; }
body .nav-cta { border-radius: 10px; box-shadow: inset 0 1px 0 #ffffff26; }
body .nav-cta::before { display: none; }
body .btn--wallet { border-radius: 10px; box-shadow: none; background: #8cb4ff06; }
body .nav-dropdown { background: #101a2bf9; border-color: var(--etl-border); box-shadow: 0 20px 48px #0004; }

/* Home: clear hierarchy, a shorter introduction and readable network choices. */
body .hero::before { opacity: .4; }
body .hero::after { opacity: .15; background-size: 72px 72px; }
body .hero__eyebrow { color: #bbd0fc; background: #8cb4ff08; border-color: #8cb4ff29; box-shadow: none; font-size: .72rem; font-weight: 600; letter-spacing: .035em; }
body .hero__title { font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: 1.1; max-width: 860px; margin: 0 auto 1.5rem; letter-spacing: -.055em; }
body .hero__intro { font-size: 1.05rem; line-height: 1.85; max-width: 580px; margin: 0 auto 1.75rem; color: var(--etl-muted); }
body .text-gradient { background-image: linear-gradient(110deg, #a5c4ff, #b0a4ff); }
body .eco-pill { background: #ffffff03; border-color: var(--etl-border); color: #b0bed2; box-shadow: none; }
body .hero__stats { gap: 0; max-width: 880px; margin: 3rem auto 0; border: 1px solid var(--etl-border); border-radius: 16px; overflow: hidden; background: #ffffff02; }
body .hero__stat { flex: 1 1 0; min-width: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; padding: 1.5rem 1rem; }
body .hero__stat + .hero__stat { border-left: 1px solid var(--etl-border); }
body .hero__stat:hover { transform: none; }
body .hero__stat-value { font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; }
body .hero__stat-label { color: #9aadc6; font-size: .72rem; margin-top: .5rem; }

/* Cards, controls and reference content share a consistent surface treatment. */
body :is(.card, .pricing-card, .token-card, .stat-card) { border-radius: 16px; border-color: var(--etl-border); background: linear-gradient(145deg, #ffffff03, transparent), var(--etl-surface); box-shadow: 0 8px 28px #00000014; }
body .card::after, body .pricing-card::after { opacity: .3; }
body .card--hover:hover { transform: translateY(-3px); box-shadow: 0 14px 36px #0003; }
body .card__icon { width: 44px; height: 44px; border-radius: 12px; box-shadow: none; }
body .btn { border-radius: 10px; font-weight: 600; }
body .btn--primary { box-shadow: inset 0 1px 0 #ffffff30, 0 4px 16px #628eff18; }
body .btn--primary:hover:not(:disabled) { box-shadow: 0 8px 24px #628eff26; transform: translateY(-1px); }
body .btn--secondary { background: #ffffff03; border-color: var(--etl-border); }
body :is(.form-input, .form-select, .form-textarea) { background: #0c1524; border-color: #a9c5ff30; border-radius: 10px; }
body :is(.form-input, .form-textarea)::placeholder { color: #8598b3; }
body .form-label { font-weight: 600; }
body .form-check { border-color: var(--etl-border); border-radius: 12px; }
body .form-check:has(input:checked) { border-color: #8cb4ff70; background: #8cb4ff0a; }
body .faq-item { border-radius: 12px; background: #ffffff02; }
body .faq-question { font-weight: 600; }
body .faq-answer { color: var(--etl-muted); line-height: 1.85; }
body :is(.table-wrap, .table-container) { border-radius: 14px; border-color: var(--etl-border); }
body table { font-variant-numeric: tabular-nums; }
body table tbody tr:hover { background: #ffffff03; }

/* Admin page spacing is owned by main, not by the active tab panel. */
body .admin-hero .page-hero { padding-top: 0; }
body .admin-hero__title { font-size: 2rem; font-weight: 600; }
body .admin-tabs { gap: .5rem; border-bottom: 0; padding-bottom: .25rem; }
body .admin-tab { border: 1px solid var(--etl-border); border-radius: 10px; margin: 0; min-height: 44px; padding: .65rem 1rem; color: #a5b5cc; }
body .admin-tab.active { background: #8cb4ff12; border-color: #8cb4ff50; color: #bdd2ff; }
body .tab-panel { padding-bottom: 0; }
body .stat-value { font-weight: 600; font-size: clamp(1.3rem, 3vw, 2rem); }
body :is(.stat-label, .stat-sub) { color: #9aadc6; }
body .settings-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
body .login-wrap { padding: var(--etl-page-space) 1.25rem; }
body .login-wrap::after { opacity: .15; }
body .site-footer { background: #090f1a; padding-top: 3.5rem; margin-top: 0; border-top-color: var(--etl-border); }
body .footer-inner { gap: 2rem; }
body :is(.footer-links a, .footer-tagline) { color: #a0b0c6; }
body .footer-heading { color: #c0cde0; font-weight: 600; }
body #etl-welcome-modal > div { border-radius: 18px !important; box-shadow: 0 24px 70px #0005 !important; max-height: calc(100dvh - 3rem); overflow-y: auto; }
body #cookie-banner { border-radius: 14px !important; box-shadow: 0 12px 40px #0004 !important; }

@media (max-width: 700px) {
  :root { --etl-page-space: 3rem; --etl-header-height: 68px; }
  body .hero__title { font-size: clamp(2.25rem, 9vw, 3.4rem); }
  body .hero__intro { font-size: .95rem; }
  body .hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .hero__stat:nth-child(3) { border-left: 0; }
  body .hero__stat:nth-child(n+3) { border-top: 1px solid var(--etl-border); }
  body #main-content > main > div > .page-hero { padding-bottom: 2rem; margin-bottom: 2rem; }
  body .card { padding: 1.5rem; }
  body .admin-tabs { flex-wrap: wrap; overflow: visible; }
  body .admin-tab { flex: 1 1 calc(33% - .5rem); justify-content: center; font-size: .75rem; padding-inline: .6rem; }
  body .stat-card { padding: 1.15rem; min-width: 0; }
  body .footer-inner { gap: 2rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}