/* ==========================================================
   Keystone polish, v3 ("professional" pass)
   Shared add-on for every page except the home page (which has
   its own complete styles). Linked LAST in <head>, so it can
   calm down each page's own styles without touching them:
   steadier headings, tighter corners, quieter shadows, one
   consistent look for panels, fields, buttons and tables.
   Remove the <link> and every page goes back to its own styles.
   ========================================================== */

/* ---------- Small global details ---------- */
::selection{background:var(--accent);color:var(--accent-text)}
html{scrollbar-color:var(--line-2) var(--bg)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--bg);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--soft)}
body{text-rendering:optimizeLegibility}
.lnum,.two strong,.grid9 dd,.seats-row strong,.summary dd,.stat strong,.big{font-variant-numeric:tabular-nums}

/* ---------- Headings: one calm voice on every page ---------- */
:root:root :is(h1,h2,h3,h4,.big,.stat strong,.step-num span,.chain-opt strong,.side-head strong,.words dt){font-variation-settings:"opsz" 28;font-weight:650}
:root:root :is(h1){letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
:root:root :is(h2,h3,h4){letter-spacing:-.022em;line-height:1.15}
/* Big page titles come down a size */
.intro h1{font-size:clamp(40px,5.4vw,72px)}
.dx-hero h1{font-size:clamp(36px,4.6vw,56px)}
.info h1{font-size:clamp(34px,4vw,52px)}
.doc h1,.lost h1{font-size:clamp(36px,5vw,54px)}
.step h2,h2.sec-title{font-size:clamp(28px,3vw,40px)}
.dx-main h2{font-size:26px}
.big{font-size:48px}
.big span{font-size:24px}
/* Small labels: sentence case, no tracking */
.dx-group,.dx-divider span,.dx-table th,.lhead{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}

/* ---------- Top menu: a thin hairline instead of a hard line ---------- */
nav[aria-label="Main"]{border-bottom-color:var(--line)}

/* ---------- Corners: one scale (20 / 14 / 10) ---------- */
.main .box,.panel,.side-box,.vis,.adv,.sec,.pv-page,.pv-pons,.dx-box,.dx-steps li,.dx-defs,.dx-table,.words,.stat,.empty{border-radius:var(--r-lg)!important}
.grid9,.flow div,.summary,.two div,.addr div,.dx-code,.dx-addr,.note,.pool,.potwarn,.pv-row,.fair,.chain-opt,.img-drop{border-radius:var(--r-md)!important}
.pic,.card{border-radius:var(--r-lg)}
.side .card{border-radius:var(--r-md)}
.pav{border-radius:22px}
.input,.field .box,.split-grid .box,.dx-search{border-radius:var(--r-sm)}

/* ---------- Panels: flat surface, crisp line, no glow ---------- */
.main .box,.side-box,.vis,.sec,.adv,.card,.dx-box,.stat,.pv-page{background:var(--card);box-shadow:none}
.panel{background:var(--card);border-color:var(--line-2);box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 30px 60px -36px rgba(0,0,0,.55)}
:root[data-theme="light"] .panel{box-shadow:0 1px 2px rgba(16,22,29,.04),0 24px 48px -28px rgba(16,22,29,.18)}
.panel:not(.live){border-top:2px solid var(--ring)}
.sec.orbit,.sec.review,.stat.fees,.dx-box.warn{border-color:var(--line-2);box-shadow:inset 3px 0 0 var(--ring)}
.grid9 div,.two div,.flow div,.summary div,.addr div,.dx-defs div,.words div{background:var(--surface-2)}
.card:hover{border-color:var(--line-2)}
.pic{box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
:root[data-theme="light"] .pic{box-shadow:0 24px 48px -30px rgba(16,22,29,.25)}

/* ---------- Buttons: steady weight, a soft lift on hover only ---------- */
.cta,.create,.wallet,.b.p,.dx-btn.main,.gate button,.mf-btn,.fake-btn{font-weight:650}
button.cta,a.cta,.create{height:52px;font-size:16px}
button.cta:hover,a.cta:hover,.create:hover{transform:none;box-shadow:0 8px 26px var(--btn-glow)}
.ghost,.more,.pill-btn,.share,.b,.dx-btn,.img-btn,.dx-addr button{font-weight:600}
.pill-btn:hover,.ghost:hover,.share:hover,.b:hover{border-color:var(--soft);background:var(--surface-2)}
.btn:active,.take:active,.cta:active,.wallet:active,.ltrade:active,.create:active{transform:translateY(1px)}

/* ---------- Tags and chips ---------- */
.tag,.pill,.badge,.pv-chip{font-weight:650}
.tag.open{display:inline-flex;align-items:center;gap:7px}
.tag.open:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip[aria-pressed="true"]{box-shadow:none}

/* ---------- Fields ---------- */
.input,.field .box,.split-grid .box,.dx-search{background:var(--field)}
input:not([type=file]):not([type=checkbox]):not([type=radio]):focus,textarea:focus{border-color:var(--ring)!important;box-shadow:0 0 0 3px var(--glow)!important;outline:none}
.field .box:focus-within,.split-grid .box:focus-within{border-color:var(--ring);box-shadow:0 0 0 3px var(--glow)}

/* ---------- Pitch page ---------- */
.dots span.on{background:var(--bar)}
.dots span.on:first-child{background:var(--text);box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line-2)}
.dots span:not(.on):not(.me){border-color:var(--line-2)}
.flow b{font-weight:700}
.people li:hover{background:transparent}
.seat-bar i,.lbar i,.pbar i{background:var(--bar)}

/* ---------- How it works: the closing box is a calm panel, not a colour block ---------- */
div.cta,section.cta{background:radial-gradient(70% 140% at 100% 50%,var(--glow),transparent 60%),var(--card);color:var(--text);border:1px solid var(--line-2);border-radius:var(--r-lg)}
div.cta p,section.cta p{color:var(--muted)}
.cta-btns a{font-weight:650}
.cta-btns a:hover{transform:none}
.cta-btns .dark{background:var(--btn);color:var(--btn-text)}
.cta-btns .line{border:1px solid var(--line-2);color:var(--text)}
.chips b,.step-num span{font-weight:650}
.step-num span{border-color:var(--line-2);background:var(--card)}
.mini-form{transform:none;box-shadow:0 24px 48px -30px rgba(0,0,0,.5)}
.pills .hot{font-weight:650}

/* ---------- Docs ---------- */
#dxNav a.on{box-shadow:inset 2px 0 0 var(--ring)}
.dx-table th{background:var(--surface-2)}

/* ---------- Text pages ---------- */
.doc .callout{border-left:3px solid var(--ring);background:var(--card)}

/* ---------- Pop-up message ---------- */
.toast{border-left:3px solid var(--accent)}

@media(prefers-reduced-motion:reduce){
  .seat-bar i:after,.tag.open:before,.dots span{animation:none!important}
}

/* ==========================================================
   v4: more depth on every inner page, to match the home page
   (soft aurora behind the top, gradient edges, glowing buttons)
   ========================================================== */
:root{
  --grad:linear-gradient(120deg,#a6dcfc 0%,#3a9be4 100%);
  --grad-text:linear-gradient(180deg,#ffffff 20%,#b9dcff 100%);
  --edge:linear-gradient(135deg,rgba(108,196,255,.45),rgba(255,255,255,.05) 38%,rgba(255,255,255,.03) 62%,rgba(58,155,228,.4));
}
:root[data-theme="light"]{
  --grad-text:linear-gradient(180deg,#10161d 30%,#1d4f86 100%);
  --edge:linear-gradient(135deg,rgba(22,118,194,.35),rgba(16,22,29,.06) 38%,rgba(16,22,29,.04) 62%,rgba(22,118,194,.3));
}
/* Aurora behind the top of the page */
body{background:radial-gradient(900px 520px at 85% -120px,rgba(108,196,255,.16),transparent 70%),radial-gradient(700px 420px at 10% -160px,rgba(58,155,228,.14),transparent 70%),var(--bg);background-repeat:no-repeat}
:root[data-theme="light"] body{background:radial-gradient(900px 520px at 85% -120px,rgba(22,118,194,.10),transparent 70%),radial-gradient(700px 420px at 10% -160px,rgba(22,118,194,.08),transparent 70%),var(--bg);background-repeat:no-repeat}
nav[aria-label="Main"]{background:color-mix(in srgb,var(--bg) 72%,transparent)}

/* Page titles pick up the soft white-to-blue fill */
.intro h1,.dx-hero h1,.info h1,.doc h1,.lost h1,.page > .head h1,.ptitle h1{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.05em}
.intro h1,.dx-hero h1{font-weight:750;letter-spacing:-.045em}

/* Panels: a thin gradient edge */
.main .box,.side-box,.vis,.sec,.adv,.dx-box,.dx-steps li,.stat,.pv-page,.words{border:1px solid transparent!important;background:linear-gradient(var(--card),var(--card)) padding-box,var(--edge) border-box!important}
.panel{border:1px solid transparent!important;background:radial-gradient(120% 60% at 50% 0%,rgba(108,196,255,.12),transparent 60%) padding-box,linear-gradient(var(--card),var(--card)) padding-box,var(--edge) border-box!important;box-shadow:0 40px 80px -40px rgba(108,196,255,.35)!important}
.panel:not(.live){border-top-width:1px}
.vis{background:radial-gradient(80% 60% at 50% 0%,rgba(108,196,255,.10),transparent 60%) padding-box,linear-gradient(var(--card),var(--card)) padding-box,var(--edge) border-box!important}
.pic{box-shadow:0 0 0 1px rgba(160,200,255,.14),0 40px 80px -40px rgba(108,196,255,.45)}

/* Primary buttons: the brand gradient with a soft glow */
button.cta,a.cta,.create,.b.p,.dx-btn.main,.gate button,.mf-btn,.fake-btn,.cta-btns .dark,.lost .row a.main,.claim{background:var(--grad)!important;color:#04111e!important;border-color:transparent!important;box-shadow:0 10px 28px -10px rgba(108,196,255,.6),inset 0 1px 0 rgba(255,255,255,.45)}
button.cta:hover,a.cta:hover,.create:hover,.b.p:hover,.dx-btn.main:hover,.gate button:hover{box-shadow:0 16px 40px -10px rgba(120,170,255,.75),inset 0 1px 0 rgba(255,255,255,.45)}
button.cta:disabled,.create:disabled{opacity:.55;box-shadow:none}

/* Tags, chips and progress */
.tag.open,.pill.open,.pv-chip.open,.badge,.chip[aria-pressed="true"],.pv-tabs button[aria-selected="true"],.tab[aria-selected="true"]{background:var(--grad)!important;color:#04111e!important;border-color:transparent!important}
.tab[aria-selected="true"] b{background:rgba(4,17,30,.18);color:#04111e}
.seat-bar i,.lbar i,.pbar i,.pv-bar i{background:var(--grad);box-shadow:0 0 10px rgba(108,196,255,.5)}
.dots span.on{background:radial-gradient(circle at 35% 30%,#d8f1ff,#6cc4ff 55%,#7b8dff);box-shadow:0 0 8px rgba(108,196,255,.55)}
.flow b,.chips b,.step-num span{background:var(--grad);color:#04111e;border-color:transparent}
.switch[aria-checked="true"]{background:var(--grad)}
.step li:before,.side-box li svg{color:var(--ring)}
.step li:before{background:var(--grad)}

/* How it works: the closing box gets the same deep gradient as the home page */
section.cta{background:radial-gradient(70% 120% at 100% 0%,rgba(58,155,228,.55),transparent 60%),radial-gradient(60% 100% at 0% 100%,rgba(180,226,253,.35),transparent 60%),linear-gradient(135deg,#0d2a52,#14123f)!important;color:#fff;border:0;box-shadow:0 50px 100px -50px rgba(108,196,255,.55),inset 0 0 0 1px rgba(255,255,255,.12)}
section.cta h2{color:#fff}
section.cta p{color:rgba(232,240,255,.8)}
.cta-btns .dark{background:#fff!important;color:#10161d!important}
.cta-btns .line{border-color:rgba(255,255,255,.35);color:#fff}

/* Cards in previews */
.card{border:1px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--edge) border-box}