/* StakeClaimer 2026 Lovable design system.
 * This file intentionally styles the existing production DOM instead of
 * replacing it, so payment, authentication, admin and API hooks stay intact.
 */
:root {
  color-scheme: dark;
  --sc-bg: #0d1b29;
  --sc-fg: #f7f9fb;
  --sc-surface: #17303a;
  --sc-surface-2: #21454b;
  --sc-card: #1b3941;
  --sc-primary: #57d8b1;
  --sc-primary-strong: #7ce9c6;
  --sc-primary-fg: #0c2026;
  --sc-muted: #a2b5bd;
  --sc-subtle: #70868f;
  --sc-warning: #f2ad55;
  --sc-danger: #ee6b62;
  --sc-border: #2d5960;
  --sc-ring: rgba(87, 216, 177, .34);
  --sc-radius: 12px;
  --sc-radius-lg: 16px;
  --sc-radius-xl: 20px;
  --sc-shadow-card: 0 18px 42px -28px rgba(0, 0, 0, .9);
  --sc-shadow-glow: 0 0 0 1px rgba(87, 216, 177, .25), 0 18px 50px -23px rgba(87, 216, 177, .72);
  --sc-gradient-primary: linear-gradient(135deg, #57d8b1, #93f0c9);
  --sc-font-display: "Bebas Neue", Impact, "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --sc-font-body: "Barlow", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;
  --sc-display: var(--sc-font-display);
  --sc-body: var(--sc-font-body);
  --sc-mono: var(--sc-font-mono);
  --sc-green: var(--sc-primary);
  --sc-cyan: var(--sc-primary-strong);
  --sc-panel: var(--sc-surface);
  --sc-panel-2: #102631;
  --sc-line: var(--sc-border);
  --sc-line-2: #3a6970;
  --sc-dim: var(--sc-subtle);
  --bg: var(--sc-bg);
  --background: var(--sc-bg);
  --surface: var(--sc-surface);
  --card: var(--sc-card);
  --text: var(--sc-fg);
  --foreground: var(--sc-fg);
  --muted: var(--sc-muted);
  --primary: var(--sc-primary);
  --accent: var(--sc-primary);
  --border: var(--sc-border);
}

html { background: var(--sc-bg); scroll-behavior: smooth; }

body.sc-lovable-next {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 78% 48% at 50% -12%, rgba(87, 216, 177, .15), transparent 72%),
    var(--sc-bg);
  color: var(--sc-fg);
  font-family: var(--sc-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.sc-lovable-next::before {
  position: fixed;
  z-index: -1;
  inset: 0 0 auto;
  height: 680px;
  content: "";
  pointer-events: none;
  opacity: .8;
  background-image:
    linear-gradient(rgba(87, 216, 177, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 216, 177, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 25%, #000, transparent);
  mask-image: radial-gradient(ellipse 70% 58% at 50% 25%, #000, transparent);
}

.sc-lovable-next *, .sc-lovable-next *::before, .sc-lovable-next *::after { box-sizing: border-box; }
.sc-lovable-next img, .sc-lovable-next svg, .sc-lovable-next video { max-width: 100%; }
.sc-lovable-next a { color: var(--sc-primary-strong); text-underline-offset: 3px; }
.sc-lovable-next a:hover { color: var(--sc-primary); }

.sc-lovable-next h1,
.sc-lovable-next h2,
.sc-lovable-next h3,
.sc-lovable-next .display,
.sc-lovable-next .title {
  color: var(--sc-fg);
  font-family: var(--sc-font-display);
  font-weight: 400;
  letter-spacing: .018em;
  line-height: .98;
}

.sc-lovable-next h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); }
.sc-lovable-next h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.sc-lovable-next h3 { font-size: clamp(1.25rem, 2.3vw, 1.75rem); }
.sc-lovable-next p, .sc-lovable-next li { line-height: 1.65; }
.sc-lovable-next :where(.muted, .subtitle, .sub, .desc, .description, .lead, .hint, .help, small) { color: var(--sc-muted); }

/* Shared bento navigation and footer */
.sc-lovable-next .sc-skip {
  position: fixed;
  z-index: 10000;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--sc-primary);
  color: var(--sc-primary-fg);
  font-weight: 800;
}
.sc-lovable-next .sc-skip:focus { transform: translateY(0); }

.sc-lovable-next .sc-nav {
  position: relative;
  z-index: 1000;
  width: min(1160px, calc(100% - 32px));
  margin: 18px auto 0;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-xl);
  background: linear-gradient(155deg, rgba(33, 69, 75, .82), rgba(23, 48, 58, .96));
  box-shadow: var(--sc-shadow-card);
  backdrop-filter: blur(18px);
}
.sc-lovable-next .sc-nav-inner {
  min-height: 68px;
  padding: 9px 12px 9px 18px;
  gap: 18px;
}
.sc-lovable-next .sc-brand { flex: 0 0 auto; }
.sc-lovable-next .sc-brand img {
  display: block;
  width: auto;
  height: 46px;
  object-fit: contain;
  mix-blend-mode: lighten;
}
.sc-lovable-next .sc-nav-links { gap: 3px; }
.sc-lovable-next .sc-nav a,
.sc-lovable-next .sc-nav button {
  font-family: var(--sc-font-body);
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .015em;
}
.sc-lovable-next .sc-nav .sc-direct,
.sc-lovable-next .sc-dd > button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--sc-muted);
  background: transparent;
}
.sc-lovable-next .sc-nav .sc-direct:hover,
.sc-lovable-next .sc-nav .sc-direct[aria-current="page"],
.sc-lovable-next .sc-dd > button:hover,
.sc-lovable-next .sc-dd.sc-current > button,
.sc-lovable-next .sc-dd.sc-open > button {
  border-color: rgba(87, 216, 177, .28);
  background: rgba(87, 216, 177, .08);
  color: var(--sc-fg);
}
.sc-lovable-next .sc-nav .sc-support {
  border-color: transparent;
  background: var(--sc-gradient-primary);
  color: var(--sc-primary-fg) !important;
  box-shadow: var(--sc-shadow-glow);
}
.sc-lovable-next .sc-nav .sc-support:hover { color: var(--sc-primary-fg) !important; filter: brightness(1.05); }
.sc-lovable-next .sc-menu {
  min-width: 280px;
  padding: 8px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  background: rgba(19, 42, 51, .98);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .95);
}
.sc-lovable-next .sc-menu a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--sc-fg);
}
.sc-lovable-next .sc-menu a:hover,
.sc-lovable-next .sc-menu a[aria-current="page"] { background: rgba(87, 216, 177, .1); }
.sc-lovable-next .sc-menu small { font-size: .71rem; color: var(--sc-subtle); }
.sc-lovable-next .sc-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--sc-border);
  border-radius: 12px;
  background: rgba(23, 48, 58, .78);
  color: var(--sc-fg);
}

.sc-lovable-next .sc-footer {
  width: min(1160px, calc(100% - 32px));
  margin: 76px auto 24px;
  padding: 34px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-xl);
  background: linear-gradient(155deg, rgba(33, 69, 75, .54), rgba(23, 48, 58, .84));
  box-shadow: var(--sc-shadow-card);
}
.sc-lovable-next .sc-footer-name { color: var(--sc-fg); font-family: var(--sc-font-display); font-size: 2rem; letter-spacing: .02em; }
.sc-lovable-next .sc-footer-name span { display: block; font-family: var(--sc-font-body); font-size: .72rem; font-weight: 600; color: var(--sc-primary); }
.sc-lovable-next .sc-footer strong { color: var(--sc-fg); }
.sc-lovable-next .sc-footer a { color: var(--sc-muted); }
.sc-lovable-next .sc-footer a:hover { color: var(--sc-primary); }

/* Layout normalization for every existing production template */
.sc-lovable-next :where(
  main, .container, .shell, .simple-product, .install-shell, .studio-shell,
  .app-store, .android-guide, .rain-guide, .guide, .se-shell, .cm-checkout,
  .admin-shell, .admin-wrap, .workspace, .dashboard
) {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}
.sc-lovable-next :where(main, .container, .shell, .simple-product, .install-shell, .studio-shell, .app-store, .android-guide, .rain-guide, .guide, .se-shell) {
  position: relative;
}

/* Card vocabulary covers legacy and current product/admin templates. */
.sc-lovable-next :where(
  .card, .panel, .box, .tile, .step, .plan, .price-card, .feature, .feature-card,
  .faq-item, .faq-card, .post, .article-card, .result, .stat, .stat-card,
  .info-card, .notice, .callout, .download-card, .product-card, .app-card,
  .offer-card, .activity-card, .guide-card, .auth-card, .login-card,
  .admin-card, .dashboard-card, .modal-content, .dialog, .sheet, .lv-card,
  .simple-product, .se-card, .cm-card
) {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-lg);
  background: linear-gradient(155deg, rgba(33, 69, 75, .62), rgba(23, 48, 58, .94));
  color: var(--sc-fg);
  box-shadow: var(--sc-shadow-card);
}
.sc-lovable-next :where(.card, .tile, .feature-card, .product-card, .app-card, .offer-card, .lv-card) {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sc-lovable-next :where(.card, .tile, .feature-card, .product-card, .app-card, .offer-card, .lv-card):hover {
  transform: translateY(-2px);
  border-color: rgba(87, 216, 177, .55);
  box-shadow: var(--sc-shadow-glow);
}

/* Buttons, tabs, forms and dynamic state controls. */
.sc-lovable-next :where(
  button, input[type="button"], input[type="submit"], .btn, .button, .cta,
  .primary-btn, .action-btn, .lv-button
) {
  min-height: 42px;
  border-radius: var(--sc-radius);
  font-family: var(--sc-font-body);
  font-weight: 750;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, background-color .15s ease;
}
.sc-lovable-next :where(button, input[type="button"], input[type="submit"], .btn, .button, .cta, .lv-button):hover { transform: translateY(-1px); }
.sc-lovable-next :where(
  .btn-primary, .primary, .primary-btn, .cta-primary, .buy-btn, .pay-btn,
  button[type="submit"], input[type="submit"], .lv-button-primary
) {
  border: 1px solid transparent;
  background: var(--sc-gradient-primary);
  color: var(--sc-primary-fg);
  box-shadow: var(--sc-shadow-glow);
}
.sc-lovable-next :where(
  #nt-submit, #rt-submit, #rp-submit, .app-button.accent,
  .product-btn:not(.alt), .se-button-primary, .se-button-withdraw:not(:disabled),
  .slot-plan a
) {
  border-color: transparent !important;
  background: var(--sc-gradient-primary) !important;
  color: var(--sc-primary-fg) !important;
  box-shadow: var(--sc-shadow-glow) !important;
}
.sc-lovable-next :where(.btn-secondary, .secondary, .ghost, .lv-button-ghost) {
  border: 1px solid var(--sc-border);
  background: rgba(23, 48, 58, .7);
  color: var(--sc-primary-strong);
}
.sc-lovable-next :where(button, .btn, .button, a[role="button"]):focus-visible,
.sc-lovable-next :where(input, select, textarea):focus-visible {
  outline: 3px solid var(--sc-ring);
  outline-offset: 2px;
}
.sc-lovable-next :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  border: 1px solid var(--sc-border);
  border-radius: 11px;
  background: rgba(13, 27, 41, .72);
  color: var(--sc-fg);
  font: 500 .94rem/1.4 var(--sc-font-body);
}
.sc-lovable-next :where(input, select, textarea)::placeholder { color: var(--sc-subtle); }
.sc-lovable-next label { color: var(--sc-muted); font-weight: 650; }
.sc-lovable-next :where(.tabs, .tab-list, [role="tablist"]) {
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--sc-border);
  border-radius: 13px;
  background: rgba(13, 27, 41, .5);
}
.sc-lovable-next :where(.tab, [role="tab"]) { border-radius: 9px; color: var(--sc-muted); }
.sc-lovable-next :where(.tab.active, .tab[aria-selected="true"], [role="tab"][aria-selected="true"]) { background: rgba(87, 216, 177, .12); color: var(--sc-primary-strong); }

.sc-lovable-next table { border-collapse: separate; border-spacing: 0; color: var(--sc-fg); }
.sc-lovable-next :where(th, td) { border-color: var(--sc-border); }
.sc-lovable-next th { color: var(--sc-muted); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.sc-lovable-next :where(code, pre, .mono, .code) { font-family: var(--sc-font-mono); }
.sc-lovable-next pre { border: 1px solid var(--sc-border); border-radius: 13px; background: #0a1722; }

/* Semantic dynamic states used by checkout, auth, dashboards and admin. */
.sc-lovable-next :where(.loading, .loader, .skeleton, [data-state="loading"]) { color: var(--sc-muted); }
.sc-lovable-next :where(.success, .ok, [data-state="success"]) { border-color: rgba(87, 216, 177, .55); color: var(--sc-primary-strong); }
.sc-lovable-next :where(.warning, [data-state="warning"]) { border-color: rgba(242, 173, 85, .55); color: var(--sc-warning); }
.sc-lovable-next :where(.error, .danger, [data-state="error"]) { border-color: rgba(238, 107, 98, .55); color: var(--sc-danger); }
.sc-lovable-next :where(.modal, .dialog-backdrop, .overlay, [role="dialog"]::backdrop) { backdrop-filter: blur(9px); }
.sc-lovable-next :where(dialog, [role="dialog"], .modal-content) { border-color: var(--sc-border); background: #142c35; color: var(--sc-fg); box-shadow: 0 28px 90px -28px #000; }

/* Homepage: preserve all live hooks while adopting the supplied bento concept. */
.sc-lovable-next.sc-home .lv-page { width: min(1120px, calc(100% - 40px)); color: var(--sc-fg); }
.sc-lovable-next.sc-home .lv-hero { padding: 46px 0 24px; }
.sc-lovable-next.sc-home .lv-hero-logo { width: min(360px, 78vw); }
.sc-lovable-next.sc-home .lv-status { border-color: rgba(87, 216, 177, .4); background: rgba(87, 216, 177, .09); color: var(--sc-primary-strong); }
.sc-lovable-next.sc-home .lv-status-dot { background: var(--sc-primary); box-shadow: 0 0 0 5px rgba(87, 216, 177, .1), 0 0 16px var(--sc-primary); }
.sc-lovable-next.sc-home .lv-hero h1 { max-width: 930px; font-size: clamp(3.5rem, 8vw, 6.3rem); line-height: .9; letter-spacing: .01em; }
.sc-lovable-next.sc-home .lv-hero h1 span,
.sc-lovable-next .lv-plan-price { color: var(--sc-primary-strong); }
.sc-lovable-next.sc-home .lv-lead { color: var(--sc-muted); }
.sc-lovable-next.sc-home .lv-stats { max-width: 760px; }
.sc-lovable-next.sc-home .lv-stat { background: linear-gradient(155deg, rgba(33, 69, 75, .64), rgba(23, 48, 58, .92)); border-color: var(--sc-border); }
.sc-lovable-next.sc-home .lv-stat strong { color: var(--sc-primary-strong); font-family: var(--sc-font-display); font-weight: 400; letter-spacing: .03em; }
.sc-lovable-next.sc-home .lv-plan.is-featured { border-color: rgba(87, 216, 177, .7); box-shadow: var(--sc-shadow-glow); }
.sc-lovable-next .lv-plan-badge { background: var(--sc-primary); color: var(--sc-primary-fg); }

/* Product, guide and SEO pages. */
.sc-lovable-next.sc-guide :where(.container, .android-guide, .rain-guide, .guide, .se-shell, .app-store, .studio-shell, .install-shell),
.sc-lovable-next.product-page .simple-product { padding-top: clamp(34px, 7vw, 72px); }
.sc-lovable-next.product-page {
  --product-green: var(--sc-primary);
  --product-cyan: var(--sc-primary-strong);
  --product-bg: var(--sc-bg);
  --product-card: var(--sc-card);
  --product-line: var(--sc-border);
}
.sc-lovable-next.sc-guide :where(.hero, header.hero, .page-hero, .intro),
.sc-lovable-next.product-page :where(.hero, .product-hero) { text-align: left; }
.sc-lovable-next.sc-guide :where(.eyebrow, .kicker, .badge, .label, .lv-eyebrow) {
  color: var(--sc-subtle);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Checkout and campaign checkout retain their payment JS and identifiers. */
.sc-lovable-next.sc-checkout { background: radial-gradient(ellipse 90% 60% at 50% -20%, rgba(87, 216, 177, .16), transparent 72%), var(--sc-bg); }
.sc-lovable-next.sc-checkout :where(.shell, .cm-checkout) { max-width: 920px; padding-top: clamp(24px, 5vw, 56px); }
.sc-lovable-next.sc-checkout :where(.plan, .price-card, .checkout-card, .payment-card, .cm-card) { border-color: var(--sc-border); }
.sc-lovable-next.sc-checkout :where(.plan.selected, .price-card.selected, [aria-checked="true"]) { border-color: var(--sc-primary); box-shadow: var(--sc-shadow-glow); }
.sc-lovable-next.sc-checkout :where(.amount, .price, .total) { font-family: var(--sc-font-display); color: var(--sc-primary-strong); }

/* Admin and hidden application surfaces are themed, but intentionally do not
 * receive the public site shell or external navigation. */
.sc-lovable-next.sc-admin-page,
.sc-lovable-next.sc-app-surface { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(87, 216, 177, .12), transparent 72%), var(--sc-bg); }
.sc-lovable-next.sc-admin-page :where(.sidebar, aside, .topbar, .toolbar),
.sc-lovable-next.sc-app-surface :where(.sidebar, aside, .topbar, .toolbar) { border-color: var(--sc-border); background: rgba(19, 42, 51, .92); }
.sc-lovable-next.sc-admin-page :where(.admin-eyebrow, .section-label) { color: var(--sc-primary); letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 980px) {
  .sc-lovable-next .sc-nav { width: min(100% - 24px, 1160px); margin-top: 12px; }
  .sc-lovable-next .sc-nav-inner { min-height: 62px; padding-inline: 12px; }
  .sc-lovable-next .sc-brand img { height: 40px; }
  .sc-lovable-next .sc-nav-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(224px, calc(100vw - 24px));
    max-height: min(58dvh, 360px);
    overflow: auto;
    padding: 5px;
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    background: rgba(19, 42, 51, .98);
    box-shadow: 0 24px 60px -24px #000;
    gap: 0;
  }
  .sc-lovable-next .sc-nav-links > .sc-direct,
  .sc-lovable-next .sc-nav-links > .sc-dd > button {
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: .68rem;
  }
  .sc-lovable-next .sc-nav-links > .sc-buy { min-height: 28px !important; margin: 2px 0 0; padding: 4px 8px !important; font-size: .68rem; }
  .sc-lovable-next .sc-menu { position: static; min-width: 0; margin: 1px 0 4px; padding: 4px; border-radius: 9px; box-shadow: none; }
  .sc-lovable-next .sc-menu a { padding: 6px 8px; font-size: .67rem; }
  .sc-lovable-next .sc-menu small { display: none; }
}

@media (max-width: 700px) {
  body.sc-lovable-next::before { height: 520px; }
  .sc-lovable-next :where(main, .container, .shell, .simple-product, .install-shell, .studio-shell, .app-store, .android-guide, .rain-guide, .guide, .se-shell, .cm-checkout) { width: min(100% - 24px, 1120px); }
  .sc-lovable-next .sc-footer { width: min(100% - 24px, 1160px); margin-top: 48px; padding: 24px; }
  .sc-lovable-next h1 { font-size: clamp(2.65rem, 15vw, 4.25rem); }
  .sc-lovable-next h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .sc-lovable-next.sc-home .lv-page { width: min(100% - 24px, 1120px); }
  .sc-lovable-next.sc-home .lv-hero { padding-top: 34px; }
  .sc-lovable-next.sc-home .lv-hero h1 { font-size: clamp(3.2rem, 18vw, 5.1rem); }
  .sc-lovable-next.sc-home .lv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-lovable-next :where(.modal-content, dialog, [role="dialog"]) { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
  .sc-lovable-next :where(input, select, textarea) { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sc-lovable-next *, .sc-lovable-next *::before, .sc-lovable-next *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}