/* Vault light direction, applied to the live templates only. The contract UI is unchanged. */
:root {
  --paper: #f4f6f8;
  --ink: #1d2d43;
  --muted: #66758b;
  --soft: #edf2fb;
  --line: #e1e6ee;
  --lime: #195ad5;
  --lime-2: #124cb9;
  --radius: 8px;
}
body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
.topbar { height: 58px; gap: 36px; padding-inline: max(20px, calc((100vw - 1224px)/2)); border-bottom: 1px solid var(--line); background: #fff; backdrop-filter: none; }
.topbar .brand-mark { width: 30px; height: 30px; }
.topbar .brand-type { font-weight: 660; }
.topbar nav { align-self: stretch; align-items: center; gap: 26px; }
.topbar nav a { position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0; border-radius: 0; color: var(--muted); font-size: 12px; font-weight: 560; }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { background: transparent; color: var(--ink); }
.topbar nav a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--lime); }
.network-control { height: 34px; border-radius: 6px; background: #f7f9fc; }
.button { border-radius: 6px; font-weight: 640; box-shadow: none; }
.button:hover:not(:disabled) { transform: none; }
.button.primary { background: var(--lime); border-color: var(--lime); box-shadow: none; }
.button.primary:hover:not(:disabled) { background: var(--lime-2); border-color: var(--lime-2); }
.button.dark { background: #1d2d43; }
.button.light { background: #fff; }

/* Home keeps its real links and protocol content, with the quieter Vault scale. */
.hero { width: min(1224px, calc(100% - 40px)); min-height: 490px; padding: 55px 0 48px; gap: 72px; }
.hero::before { opacity: .35; }
.hero h1 { max-width: 650px; font-size: clamp(44px, 4.5vw, 64px); font-weight: 560; line-height: 1.06; letter-spacing: -.055em; }
.hero h1 span { color: var(--lime); }
.hero-lede { max-width: 470px; margin-top: 22px; font-size: 14px; line-height: 1.8; }
.hero-actions { gap: 18px; margin-top: 27px; }
.hero-actions .button { min-height: 44px; }
.proof-row { margin-top: 24px; font-size: 10px; }
.hero-visual { min-height: 370px; border-color: #d5deec; border-radius: 9px; background: linear-gradient(145deg, #fff, #eff4fc 65%); box-shadow: 0 16px 45px #233c6410; }
.hero-visual::after { opacity: .07; }
.orbit { border-color: #8eb2e9a0; }
.swap-core { border-color: #9abbee; background: radial-gradient(circle at 35% 30%, #fff, #edf4ff 75%); box-shadow: 0 0 0 12px #fff8, 0 18px 50px #28518d20; }
.swap-core strong { color: var(--ink); }
.visual-label { border-color: var(--line); border-radius: 5px; background: #fff; color: var(--ink); box-shadow: 0 8px 20px #233c6410; }
.chain-pill { color: var(--muted); }
.principles { width: min(1224px, calc(100% - 40px)); margin-bottom: 60px; }
.principles article { padding-block: 24px; }
.principles strong { font-size: 12px; font-weight: 600; }
.principles p { font-size: 10px; }
.home-cta { width: min(1224px, calc(100% - 40px)); grid-template-columns: .45fr 1fr auto; padding: 42px 48px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.home-cta h2 { font-size: 32px; font-weight: 560; color: var(--ink); }
.protocol-strip { width: min(1224px, calc(100% - 40px)); padding: 80px 0; }
.protocol-strip h2 { font-size: 32px; font-weight: 560; }
.standalone-footer { padding-inline: max(20px, calc((100vw - 1224px)/2)); border-color: var(--line); background: #fff; }

/* The real indexer-driven list and detail are styled, never replaced by demo cards. */
.market { min-height: calc(100vh - 58px); padding: 58px max(20px, calc((100vw - 1224px)/2)) 76px; background: var(--paper); }
.pools-shell .market { min-height: calc(100vh - 58px); }
.section-head { margin-bottom: 26px; }
.section-head h2 { font-size: 34px; font-weight: 560; letter-spacing: -.045em; }
.section-head>div>p:last-child { font-size: 12px; }
.summary { margin-bottom: 24px; border-color: var(--line); border-radius: 7px; box-shadow: none; }
.summary>div { padding: 19px 23px; border-color: var(--line); }
.summary strong { font-size: 25px; font-weight: 560; }
.summary span { font-size: 10px; }
.summary small { font-size: 9px; }
.search, .filters, .icon-refresh { border-color: var(--line); border-radius: 5px; box-shadow: none; }
.filters { background: #f0f3f7; }
.filters button { border-radius: 3px; }
.filters button.selected { background: #edf2fb; color: var(--lime); }
.pools-page:not(.pool-detail-page) .pool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pools-page:not(.pool-detail-page) .pool-list>.loading-card,
.pools-page:not(.pool-detail-page) .pool-list>.empty-list { grid-column: 1 / -1; }
.pool-card, .detail { border-color: var(--line); border-radius: 7px; box-shadow: 0 8px 24px #233c6408; }
.pool-card { padding: 21px; }
.pool-card:hover { transform: none; border-color: #b7c8e4; background: #f7f9fc; }
.pool-title strong { font-size: 15px; font-weight: 630; }
.pool-metrics { margin-top: 22px; padding-block: 14px; border-color: var(--line); }
.pool-metrics>div { border-color: var(--line); }
.pool-metrics span, .pool-metrics small { font-size: 9px; }
.pool-metrics strong { font-size: 13px; font-weight: 600; }
.pool-foot { font-size: 9px; }
.status { border-radius: 4px; }
.detail { top: 72px; }
.pool-detail-page .detail { max-width: 1100px; margin-inline: auto; padding: 32px; }
.pool-detail-page .detail-pair h2 { font-weight: 570; }
.pool-detail-page .value-box { border-radius: 6px; background: #f7f9fc; }
.pool-detail-page .participant-row { border-color: var(--line); }

/* Keep every form control and its IDs intact for the deployed transaction code. */
dialog#create-dialog, .wallet-dialog, .token-picker-dialog { border-color: var(--line); border-radius: 9px; box-shadow: 0 25px 75px #1d2d4336; }
dialog#create-dialog::backdrop, .wallet-dialog::backdrop, .token-picker-dialog::backdrop { background: #1d2d4380; backdrop-filter: blur(3px); }
dialog#create-dialog form { padding: 27px; }
.dialog-head h2 { font-weight: 590; }
.form-network, .fee-row, .settlement-choice { border-radius: 6px; }
.form-grid input, .form-grid select, .token-preview, .styled-select-trigger, .amount-control { border-radius: 5px; }
.swap-token-button { border-color: var(--lime); }
.token-picker-row, .wallet-option { border-radius: 6px; }
.pool-share-dialog, .pool-share-card { border-radius: 9px; }
.docs-page { color: var(--ink); }

@media (max-width: 980px) {
  .hero { gap: 32px; }
  .pools-page:not(.pool-detail-page) .pool-list { grid-template-columns: 1fr; }
  .home-cta { grid-template-columns: 1fr auto; gap: 18px; }
  .home-cta .section-kicker { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .topbar { height: 56px; padding-inline: 16px; }
  .hero, .principles, .home-cta, .protocol-strip { width: calc(100% - 32px); }
  .hero { padding-block: 34px; }
  .hero h1 { font-size: 44px; }
  .hero-visual { min-height: 340px; }
  .market { padding: 36px 16px 60px; }
  .pools-shell .market { min-height: calc(100vh - 56px); }
  .section-head h2 { font-size: 30px; }
  .summary>div { padding: 15px 17px; border-color: var(--line); }
  .summary>div:nth-child(n) { border-left: 0; }
  .home-cta { grid-template-columns: 1fr; padding: 26px; }
  .pool-detail-page .detail { padding: 20px; }
  dialog#create-dialog form { padding: 20px; }
}