/* Square controls — product direction 2026-05-25.
   Loaded last so page-level button radius styles cannot win. */
:root {
  --asteria-control-radius: 0px;
  --asteria-focus-radius: 0px;
}

.btn,
.nav-btn,
.nav a,
.nav-links a,
.mobile-menu summary,
.mobile-menu-panel a,
button,
[type="button"],
[type="submit"],
[type="reset"],
input,
select,
textarea,
.eyebrow,
.safe-line span,
.tag,
.badge,
.status,
.status-badge,
.result-badge,
.result-chip,
.pill,
.chip,
.mode-btn,
.theme-toggle,
.num,
.flow-step:before,
.flow-step:not(:last-child):after,
.mini-stat,
.metric,
.notice,
.ok,
.warn,
.warning,
.error,
.security,
.code,
code,
pre,
.asteria-cookie,
.asteria-cookie button,
.asteria-prefs .modal,
.asteria-prefs button,
.asteria-prefs .toggle,
.asteria-account-pill,
.asteria-account-checking,
.asteria-account-action,
.cookie-action,
.cookie-option,
.step-badge,
.status-dot,
.health-pill,
.filter-pill,
.pricing-formula code,
.doc-links a,
.permission-list b,
.strategy-top span,
.status-badge,
.topbar a,
.actions a,
.actions button,
.card-actions a,
.card-actions button,
.tabs a,
.tabs button,
.filters button,
.filters a,
.filters input,
.filters select {
  border-radius:0;
}

.status-badge:before,
.status:before,
.asteria-account-pill:before,
.asteria-account-checking:before,
.asteria-prefs .toggle:after,
.broker-pill .dot {
  border-radius:0;
}

:focus-visible {
  border-radius:0;
}

/* Soft page transitions.
   Keeps the app feeling continuous across static HTML page loads while staying
   subtle enough for dense dashboard screens. */
@keyframes asteriaPageEnter {
  from {
    opacity: .985;
  }
  to {
    opacity: 1;
  }
}

@keyframes asteriaPageExit {
  to {
    opacity: .94;
  }
}

body {
  animation: asteriaPageEnter 90ms ease-out both;
  will-change: opacity;
}

html.asteria-page-leaving body {
  pointer-events: none;
  animation: asteriaPageExit 70ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  body,
  html.asteria-page-leaving body {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}


/* Strong selected state — 2026-05-25.
   Selection must be obvious in every setup step, not only strategy cards. */
.select-card.selected,
.cookie-option.selected,
.option-card.selected,
.choice-card.selected,
.plan.selected,
[aria-selected="true"],
[aria-pressed="true"].mode-btn,
[data-selected="true"] {
  position: relative !important;
  border: 2px solid #a855f7 !important;
  background:
    linear-gradient(90deg, rgba(168, 85, 247, .12), rgba(236, 72, 153, .06)),
    #ffffff !important;
  box-shadow:
    inset 6px 0 0 #a855f7,
    0 0 0 1px rgba(168, 85, 247, .20),
    0 18px 40px rgba(168, 85, 247, .18) !important;
  transform: translateY(-1px) !important;
}

.select-card.selected::before,
.cookie-option.selected::before,
.option-card.selected::before,
.choice-card.selected::before,
.plan.selected::before,
[aria-selected="true"]::before,
[aria-pressed="true"].mode-btn::before,
[data-selected="true"]::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px auto -2px -2px !important;
  width: 7px !important;
  background: linear-gradient(180deg, #a855f7, #ec4899) !important;
  pointer-events: none !important;
}

.select-card.selected::after,
.cookie-option.selected::after,
.option-card.selected::after,
.choice-card.selected::after,
.plan.selected::after,
[aria-selected="true"]::after,
[data-selected="true"]::after {
  content: "✓ Selected" !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  background: #a855f7 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .35px !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 20px rgba(168, 85, 247, .28) !important;
}

.exchange-card.select-card.selected::after {
  content: "✓" !important;
  top: 9px !important;
  right: 9px !important;
  width: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  justify-content: center !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

.exchange-card.select-card.selected .exchange-logo {
  margin-top: 8px !important;
}

.step-row.active {
  position: relative !important;
  border: 2px solid #a855f7 !important;
  background:
    linear-gradient(90deg, rgba(168, 85, 247, .13), rgba(236, 72, 153, .06)),
    #faf5ff !important;
  box-shadow: inset 5px 0 0 #a855f7, 0 12px 28px rgba(168, 85, 247, .14) !important;
}

.step-row.active .step-num,
.step-row.done .step-num {
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .16) !important;
}

html[data-theme="dark"] .select-card.selected,
html[data-theme="dark"] .cookie-option.selected,
html[data-theme="dark"] .option-card.selected,
html[data-theme="dark"] .choice-card.selected,
html[data-theme="dark"] .plan.selected,
html[data-theme="dark"] [aria-selected="true"],
html[data-theme="dark"] [aria-pressed="true"].mode-btn,
html[data-theme="dark"] [data-selected="true"] {
  border-color: #c084fc !important;
  background:
    linear-gradient(90deg, rgba(168, 85, 247, .26), rgba(236, 72, 153, .10)),
    #111827 !important;
  box-shadow:
    inset 7px 0 0 #c084fc,
    0 0 0 1px rgba(192, 132, 252, .35),
    0 22px 48px rgba(168, 85, 247, .24) !important;
}

html[data-theme="dark"] .select-card.selected::before,
html[data-theme="dark"] .cookie-option.selected::before,
html[data-theme="dark"] .option-card.selected::before,
html[data-theme="dark"] .choice-card.selected::before,
html[data-theme="dark"] .plan.selected::before,
html[data-theme="dark"] [aria-selected="true"]::before,
html[data-theme="dark"] [aria-pressed="true"].mode-btn::before,
html[data-theme="dark"] [data-selected="true"]::before {
  background: linear-gradient(180deg, #c084fc, #ec4899) !important;
}

html[data-theme="dark"] .select-card.selected::after,
html[data-theme="dark"] .cookie-option.selected::after,
html[data-theme="dark"] .option-card.selected::after,
html[data-theme="dark"] .choice-card.selected::after,
html[data-theme="dark"] .plan.selected::after,
html[data-theme="dark"] [aria-selected="true"]::after,
html[data-theme="dark"] [data-selected="true"]::after {
  background: #c084fc !important;
  color: #111827 !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 10px 24px rgba(192, 132, 252, .30) !important;
}

html[data-theme="dark"] .exchange-card.select-card.selected::after {
  color: #111827 !important;
}

html[data-theme="dark"] .step-row.active {
  border-color: #c084fc !important;
  background:
    linear-gradient(90deg, rgba(168, 85, 247, .24), rgba(236, 72, 153, .10)),
    #111827 !important;
  box-shadow: inset 7px 0 0 #c084fc, 0 16px 34px rgba(168, 85, 247, .20) !important;
}

@media (max-width: 640px) {
  .select-card.selected::after,
  .cookie-option.selected::after,
  .option-card.selected::after,
  .choice-card.selected::after,
  .plan.selected::after,
  [aria-selected="true"]::after,
  [data-selected="true"]::after {
    top: 10px !important;
    right: 10px !important;
  }
}

/* Final mobile overrides.
   This file is loaded last on every HTML page, so these rules protect the
   phone layout from later page-specific CSS such as landing-store-cards.css. */
@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .nav,
  .topbar {
    max-width: 100vw !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .logo {
    min-width: 0 !important;
    max-width: calc(100vw - 150px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .page,
  .main,
  .shell,
  .wrap,
  .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero,
  .hero-inner,
  .hero-grid,
  .catalog-grid,
  .main-grid,
  .formula-strip,
  .security-strip,
  .connect-guide,
  .simple-grid,
  .flow-grid,
  .plans,
  .strategies,
  .review-grid,
  .api-help,
  .path-grid,
  .layout,
  .grid,
  .grid.two,
  .content,
  .returns,
  .runner-grid,
  .equity-layout,
  .equity-head {
    grid-template-columns: 1fr !important;
  }

  .hero > *,
  .hero-inner > *,
  .hero-main,
  .launch-card,
  .progress-card,
  .panel,
  .strategy-card,
  .card,
  .guide-panel,
  .permission-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .hero h1,
  .hero-main h1,
  h1 {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.07 !important;
  }

  .lead,
  .hero p,
  .hero-main p,
  p {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  .toolbar,
  .variant-filter-top {
    grid-template-columns: 1fr !important;
  }

  .pill-row,
  .variant-filter-row,
  .safe-line,
  .hero-actions,
  .chart-legend,
  .chart-tools {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pill-row::-webkit-scrollbar,
  .variant-filter-row::-webkit-scrollbar,
  .safe-line::-webkit-scrollbar,
  .hero-actions::-webkit-scrollbar,
  .chart-legend::-webkit-scrollbar,
  .chart-tools::-webkit-scrollbar {
    display: none;
  }

  .pill-row > *,
  .variant-filter-row > *,
  .safe-line > *,
  .hero-actions > *,
  .chart-legend > *,
  .chart-tools > * {
    flex: 0 0 auto !important;
  }

  .nav[data-asteria-fallback-nav] .nav-links,
  .nav-tabs,
  .admin-nav {
    display: flex !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    padding: 4px 0 8px !important;
    background: transparent !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav[data-asteria-fallback-nav] .nav-links::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar,
  .admin-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 760px) {
  .page,
  .main,
  .shell,
  .wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .hero,
  .hero-main,
  .launch-card,
  .progress-card,
  .panel {
    padding: 16px !important;
  }

  .strategy-inner {
    padding: 15px !important;
  }

  .strategy-top,
  .result-primary,
  .result-oss,
  .price-note,
  .variant-filter-meta,
  .selected-variant.active {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    text-align: left !important;
  }

  .result-grid,
  .mini-stats,
  .paper-monitor,
  .metric-grid,
  .hero-stats,
  .facts,
  .asset-grid,
  .audit-grid,
  .variant-facts,
  .checks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .variant-grid {
    grid-template-columns: 1fr !important;
  }

  .actions,
  .strategy-actions,
  .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .actions .btn,
  .strategy-actions .btn,
  .modal-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .equity-chart,
  .runner-chart,
  .chart {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .equity-chart svg,
  #equityChart {
    width: 840px !important;
    min-width: 840px !important;
    max-width: none !important;
  }

  .runner-chart svg,
  #runnerChart {
    width: 900px !important;
    min-width: 900px !important;
    max-width: none !important;
  }

  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table {
    min-width: 680px !important;
  }

  footer {
    padding-right: 58px !important;
    text-align: left !important;
  }
}

@media (max-width: 430px) {
  .nav > .btn:not(.primary):not(.dark),
  .nav > .nav-btn:not(.primary),
  .topbar > .btn:not(.primary):not(.dark),
  .topbar > .back:not(:first-child) {
    display: none !important;
  }

  .hero h1,
  .hero-main h1,
  h1 {
    font-size: 30px !important;
    letter-spacing: -0.55px !important;
  }

  .lead,
  .hero-main p,
  .hero p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .result-grid,
  .mini-stats,
  .paper-monitor,
  .metric-grid,
  .hero-stats,
  .facts,
  .asset-grid,
  .audit-grid,
  .variant-facts,
  .checks,
  .ex-grid,
  .exchanges {
    grid-template-columns: 1fr !important;
  }

  .actions,
  .strategy-actions,
  .modal-actions {
    grid-template-columns: 1fr !important;
  }

  .field input,
  .field select,
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Keep the floating support button from covering footer links. */
body:has(.help-fab) footer {
  padding-right: 96px !important;
}
@media (max-width: 760px) {
  body:has(.help-fab) footer {
    padding-right: 76px !important;
  }
}


/* Explainable labels and neutral profile badges — 2026-05-27. */
.strategy-top .profile-badge,
.strategy-top > span:not(.variant-close-time),
#catalog .strategy-top span,
[data-aq-term="advanced profile"] {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #dbe0e7 !important;
}

.variant-card .strategy-top .profile-badge,
.variant-card .strategy-top > span:not(.variant-close-time),
.profile-badge {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #dbe0e7 !important;
}

.aq-explain {
  cursor: help !important;
  text-decoration: none !important;
}

.aq-explain:focus-visible {
  outline: 2px solid #a855f7 !important;
  outline-offset: 2px !important;
}

.aq-tooltip {
  position: fixed;
  z-index: 20000;
  left: 0;
  top: 0;
  display: block;
  padding: 10px 12px;
  background: #111827;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .30);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  max-width: 300px;
}

.aq-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

html[data-theme="dark"] .strategy-top .profile-badge,
html[data-theme="dark"] .strategy-top > span:not(.variant-close-time),
html[data-theme="dark"] #catalog .strategy-top span,
html[data-theme="dark"] .profile-badge {
  background: #1f2937 !important;
  color: #e5e7eb !important;
  border-color: #475569 !important;
}

html[data-theme="dark"] .aq-explain {
  text-decoration-color: rgba(203, 213, 225, .78) !important;
}

html[data-theme="dark"] .aq-tooltip {
  background: #111827;
  color: #f8fafc;
  border-color: #475569;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .52);
}


/* Cleaner strategy catalog cards — 2026-05-27. */
.variant-card .strategy-top p {
  color: #4b5563 !important;
}
html[data-theme="dark"] .variant-card .strategy-top p {
  color: #cbd5e1 !important;
}
.strategy-card .result-primary span,
.strategy-card .price-note em,
.strategy-card .result-oss span {
  text-decoration: none !important;
}


/* Cleaner strategy catalog cards — 2026-05-27. */
.variant-card .strategy-top p {
  color: #4b5563 !important;
}
html[data-theme="dark"] .variant-card .strategy-top p {
  color: #cbd5e1 !important;
}
.strategy-card .result-primary span,
.strategy-card .price-note em,
.strategy-card .result-oss span {
  text-decoration: none !important;
}

/* Account section layout parity — 2026-05-27.
   API keys and payment records are sibling account pages, so they should not
   feel like different products. */
body.account-page .page,
body.account-page .main {
  width: min(1160px, calc(100% - 44px)) !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 42px 0 80px !important;
}

body.account-page .page-head,
body.account-page .main > h1,
body.account-page .main > p {
  max-width: 760px !important;
}

body.account-page .panel,
body.account-page .card {
  width: 100% !important;
  min-height: 340px !important;
  box-sizing: border-box !important;
}

body.account-page .card-head,
body.account-page .panel-head {
  min-height: 82px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

body.account-page .empty,
body.account-page .empty-row {
  min-height: 154px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

body.account-page table {
  width: 100% !important;
}

@media (max-width: 860px) {
  body.account-page .page,
  body.account-page .main {
    width: 100% !important;
    padding: 26px 14px 56px !important;
  }

  body.account-page .card-head,
  body.account-page .panel-head {
    min-height: auto !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}