/* ============================================================
   app.css — NFP Rounds · dark editorial fintech theme
   Fonts: Fraunces (display) · Inter (UI) · JetBrains Mono (figures)
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:        #0A0B0D;
  --card:      #121418;
  --card-hi:   #17191F;
  --inset:     #0C0E11;

  --line:      rgba(255,255,255,.07);
  --line-hi:   rgba(255,255,255,.14);

  --text:      #ECEDEF;
  --muted:     #9AA0A8;
  --faint:     #646A73;

  --accent:    #b0d059;              /* signal lime */
  --accent-2:  #E4FF8A;
  --on-accent: #141703;

  --pos:  #45D98A;
  --neg:  #FF7A7A;
  --warn: #F2C14E;
  --info: #7AB8FF;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-lg: 18px;
  --r-md: 12px;

  --shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 34px -18px rgba(0,0,0,.75);
  --ease:   cubic-bezier(.22,.61,.2,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 480px at 50% -180px, rgba(201,241,88,.055), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-attachment:fixed;
  color:var(--text);
  font:400 15px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,dl,dd,figure{ margin:0 }
h1,h2,h3{ font-family:var(--serif); font-weight:480; line-height:1.12; letter-spacing:.005em }
h1{ font-size:clamp(2.05rem, 1.35rem + 3vw, 2.95rem) }
h2{ font-size:1.35rem }
h1 em, h2 em, h3 em{ font-style:italic; font-weight:400; color:var(--accent) }
a{ color:var(--accent); text-decoration:none }
b,strong{ font-weight:600 }
code{
  font:500 12.5px var(--mono);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  padding:2.5px 7px; border-radius:6px;
  color:var(--accent-2);
}
::selection{ background:rgba(201,241,88,.28); color:#fff }
:focus-visible{ outline:2px solid rgba(201,241,88,.6); outline-offset:2px }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-thumb{ background:#24272D; border-radius:8px; border:2px solid var(--bg) }
::-webkit-scrollbar-track{ background:transparent }

/* ---------- layout / entrance ---------- */
.wrap{ max-width:1040px; margin:0 auto; padding:0 22px 80px }
@keyframes rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.wrap > *{ animation:rise .55s var(--ease) both }
.wrap > *:nth-child(2){ animation-delay:.06s }
.wrap > *:nth-child(3){ animation-delay:.12s }
.wrap > *:nth-child(4){ animation-delay:.18s }
.wrap > *:nth-child(5){ animation-delay:.24s }

/* ---------- header / nav ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(10,11,13,.78);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.head-in{ max-width:1040px; margin:0 auto; padding:0 22px; height:62px; display:flex; align-items:center; gap:26px }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); font-family:var(--serif); font-size:1.18rem; letter-spacing:.02em }
.brand .mark{ width:9px; height:9px; border-radius:2.5px; background:var(--accent); transform:rotate(45deg); box-shadow:0 0 14px rgba(201,241,88,.8) }
.main-nav{ display:flex; gap:4px }
.main-nav a{ color:var(--muted); font-size:13.5px; font-weight:500; padding:7px 12px; border-radius:8px; transition:color .18s, background .18s }
.main-nav a:hover{ color:var(--text); background:rgba(255,255,255,.05) }
.main-nav a[aria-current="page"]{ color:var(--text); background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--line) }
.head-right{ margin-left:auto; display:flex; align-items:center; gap:12px }
.user-chip{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted) }
.avatar{
  width:29px; height:29px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(160deg, var(--accent), #97C437);
  color:var(--on-accent); font:600 11px var(--mono); text-transform:uppercase;
}
@media (max-width:560px){ .hide-sm{ display:none } }

/* ---------- mobile tab bar ---------- */
.tabbar{ display:none }
@media (max-width:780px){
  .main-nav{ display:none }
  .wrap{ padding-bottom:110px }
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:rgba(10,11,13,.82);
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    color:var(--faint); font-size:10.5px; font-weight:500; letter-spacing:.04em;
    padding:5px 0 3px; border-radius:10px;
  }
  .tabbar a svg{ width:21px; height:21px }
  .tabbar a[aria-current="page"]{ color:var(--accent) }
}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--line);
  max-width:1040px; margin:40px auto 0; padding:26px 22px 40px;
  color:var(--faint); font-size:12.5px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
@media (max-width:780px){ .site-foot{ padding-bottom:110px } }

/* ---------- page head ---------- */
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; margin:38px 0 26px }
.eyebrow{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  font:600 11px var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent) }
.lead{ color:var(--muted); margin-top:12px; max-width:58ch; line-height:1.65 }
.label{ font:600 11px var(--sans); letter-spacing:.15em; text-transform:uppercase; color:var(--faint) }
.backlink{ display:inline-flex; align-items:center; gap:6px; margin-top:30px; font-size:13px; font-weight:500; color:var(--muted); transition:color .18s }
.backlink:hover{ color:var(--text) }

/* ---------- sections ---------- */
.section{ margin-top:42px }
.section-head{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:14px }
.section-head h2{ font-size:1.45rem }
.section-head a{ font-size:13px; font-weight:500; transition:filter .18s }
.section-head a:hover{ filter:brightness(1.2) }

/* ---------- cards ---------- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 42%), var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px;
  box-shadow:var(--shadow);
}
a.card{ display:block; color:inherit; transition:transform .22s var(--ease), border-color .22s, background-color .22s }
a.card:hover{ transform:translateY(-2px); border-color:var(--line-hi); background-color:var(--card-hi) }
.card h2 + p, .card h2 + form{ margin-top:12px }

/* feature / glow */
.card.feature{ position:relative; overflow:hidden; padding:26px; border-color:rgba(201,241,88,.22) }
.card.feature::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(430px 210px at 88% -30%, rgba(201,241,88,.13), transparent 65%);
}
.card.feature > *{ position:relative }
.card.feature h2{ font-size:clamp(1.55rem, 1.2rem + 1.6vw, 2.1rem) }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.stat .l{ font:600 11px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--faint) }
.stat .v{ font:500 1.75rem/1.15 var(--mono); letter-spacing:-.01em; margin-top:12px }
.stat .s{ font-size:12.5px; color:var(--faint); margin-top:7px }
.stat .s a{ font-weight:500 }
@media (max-width:720px){ .stats{ grid-template-columns:1fr } }

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px; border-radius:999px; white-space:nowrap;
  font:600 10.5px/1.5 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line);
}
.badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor }
.badge.mono{ font-family:var(--mono); font-size:11px; letter-spacing:0; text-transform:none }
.badge.open,.badge.live,.badge.received,.badge.approved,.badge.paid,.badge.completed,.badge.complete,
.badge.settled,.badge.good,.badge.active,.badge.verified{
  color:var(--pos); background:rgba(69,217,138,.09); border-color:rgba(69,217,138,.22);
}
.badge.upcoming,.badge.submitted,.badge.pending,.badge.processing,.badge.review{
  color:var(--warn); background:rgba(242,193,78,.09); border-color:rgba(242,193,78,.22);
}
.badge.failed,.badge.rejected,.badge.cancelled,.badge.canceled,.badge.closed,.badge.missed,.badge.expired{
  color:var(--neg); background:rgba(255,122,122,.08); border-color:rgba(255,122,122,.2);
}
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(69,217,138,.45) } 70%{ box-shadow:0 0 0 6px rgba(69,217,138,0) } 100%{ box-shadow:0 0 0 0 rgba(69,217,138,0) } }
.badge.open::before,.badge.live::before{ animation:pulse 2.2s infinite }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--r-md);
  background:var(--accent); color:var(--on-accent);
  font:600 14px/1 var(--sans); letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(201,241,88,.5);
  transition:transform .18s var(--ease), filter .18s, background .18s, border-color .18s;
}
.btn:hover{ filter:brightness(1.07); transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn.ghost{ background:rgba(255,255,255,.03); color:var(--text); border-color:var(--line-hi); box-shadow:none }
.btn.ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.26); filter:none }
.btn.danger{ background:rgba(255,122,122,.07); color:var(--neg); border-color:rgba(255,122,122,.28); box-shadow:none }
.btn.danger:hover{ background:rgba(255,122,122,.13); filter:none }
.btn.wa{ background:rgba(37,211,102,.1); color:#4BE088; border-color:rgba(37,211,102,.32); box-shadow:none }
.btn.wa:hover{ background:rgba(37,211,102,.16); filter:none }
.btn.sm{ padding:8px 13px; font-size:12.5px; border-radius:9px }
.btn.block{ display:flex; width:100% }

/* ---------- forms ---------- */
.field{ margin-bottom:18px }
.field label{ display:block; font-size:13px; font-weight:500; margin-bottom:8px }
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],
input[type=tel],input[type=date],select,textarea{
  width:100%; padding:12px 14px;
  background:var(--inset); border:1px solid var(--line-hi); border-radius:10px;
  color:var(--text); font:400 14.5px var(--sans);
  transition:border-color .18s, box-shadow .18s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:rgba(201,241,88,.55);
  box-shadow:0 0 0 3px rgba(201,241,88,.13);
}
input::placeholder,textarea::placeholder{ color:var(--faint) }
input[type=number]{ font-family:var(--mono); -moz-appearance:textfield; appearance:textfield }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
textarea{ resize:vertical; min-height:90px }
.errorlist{ list-style:none; margin:8px 0 0; padding:0; color:var(--neg); font-size:12.5px }
.helptext{ display:block; margin-top:6px; font-size:12.5px; color:var(--faint) }

/* ---------- messages / notices ---------- */
.messages{ margin-top:22px; display:grid; gap:8px }
.msg{ padding:12px 15px; border-radius:10px; font-size:13.5px; border:1px solid }
.msg.error{ color:#FFB4B4; background:rgba(255,122,122,.07); border-color:rgba(255,122,122,.25) }
.msg.success{ color:#A9E9C6; background:rgba(69,217,138,.07); border-color:rgba(69,217,138,.25) }
.msg.info{ color:#B9D6F5; background:rgba(122,184,255,.07); border-color:rgba(122,184,255,.2) }
.msg.warning{ color:#F0D9A0; background:rgba(242,193,78,.07); border-color:rgba(242,193,78,.2) }

.notice{ padding:13px 15px; border-radius:10px; font-size:13.5px; line-height:1.6; margin:14px 0;
  color:#B9D6F5; background:rgba(122,184,255,.06); border:1px solid rgba(122,184,255,.18) }
.notice.warn{ color:#F0D9A0; background:rgba(242,193,78,.07); border-color:rgba(242,193,78,.2) }
.notice.good{ color:#A9E9C6; background:rgba(69,217,138,.07); border-color:rgba(69,217,138,.2) }
.banner.bad{ padding:12px 15px; border-radius:10px; font-size:13.5px; margin:0 0 16px;
  color:#FFB4B4; background:rgba(255,122,122,.08); border:1px solid rgba(255,122,122,.25) }

/* ---------- steps ---------- */
.steps{ display:flex; gap:8px; margin:26px 0 }
.st{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:10px 13px; border:1px solid var(--line); border-radius:999px;
  font-size:12.5px; font-weight:500; color:var(--faint); white-space:nowrap;
}
.st b{ display:grid; place-items:center; width:21px; height:21px; border-radius:50%;
  background:rgba(255,255,255,.07); color:var(--muted); font:600 10.5px var(--mono) }
.st.on{ color:var(--text); border-color:rgba(201,241,88,.4); background:rgba(201,241,88,.05) }
.st.on b{ background:var(--accent); color:var(--on-accent) }
.st.done{ color:var(--muted) }
.st.done b{ background:rgba(69,217,138,.16); color:var(--pos) }
@media (max-width:560px){ .st{ font-size:11px; gap:6px; padding:9px 8px } }

/* ---------- payment page ---------- */
.paygrid{ display:grid; grid-template-columns:auto 1fr; gap:38px; align-items:start }
.paygrid > *{ min-width:0 }
.qrbox{
  background:#fff; border-radius:16px; padding:16px; width:fit-content; margin-inline:auto;
  box-shadow:0 0 0 1px var(--line), 0 18px 44px -18px rgba(0,0,0,.85);
}
.qrbox svg{ display:block; width:190px; height:190px; max-width:100% }
.copyrow{ display:flex; gap:8px; margin-bottom:20px }
.copyrow code{ flex:1; display:flex; align-items:center; padding:10px 13px; font-size:13px; background:var(--inset) }
.kv{ display:grid; grid-template-columns:minmax(110px,auto) 1fr; gap:11px 18px }
.kv dt{ font:600 11px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); padding-top:2px }
.kv dd{ margin:0; font-size:14px; min-width:0; overflow-wrap:anywhere }
@media (max-width:760px){
  .paygrid{ grid-template-columns:1fr; gap:26px }
}
.success-ring{
  width:70px; height:70px; margin:6px auto 20px; border-radius:50%;
  display:grid; place-items:center; font-size:28px; color:var(--pos);
  border:1.5px solid rgba(69,217,138,.5); background:rgba(69,217,138,.07);
  box-shadow:0 0 44px -8px rgba(69,217,138,.4);
  animation:pop .5s var(--ease) both;
}
@keyframes pop{ from{ transform:scale(.55); opacity:0 } }

/* ---------- big figures (settled round) ---------- */
.big-figs{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line) }
.fig-v{ font:600 1.28rem/1.2 var(--mono); letter-spacing:-.01em; margin-top:9px }
.fig-v .small{ font-size:.72em; opacity:.65 }
@media (max-width:720px){ .big-figs{ grid-template-columns:repeat(2,1fr) } }

/* ---------- lists / empty states ---------- */
.list-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 2px; border-bottom:1px solid var(--line) }
.list-row:last-child{ border-bottom:0 }
.list-row .t{ font-weight:500; font-size:14.5px }
.list-row .r{ display:flex; align-items:center; gap:10px; text-align:right }
.meta{ margin-top:10px; color:var(--muted); font:500 12.5px var(--mono); letter-spacing:.02em }
.empty{ padding:38px 20px; text-align:center; color:var(--muted); font-size:14px }
.empty h3{ color:var(--text); font-size:1.2rem }

/* ---------- tables ---------- */
.card.tablecard{ padding:0; overflow:hidden }
table.data{ width:100%; border-collapse:collapse; font-size:14px }
table.data th{
  text-align:left; padding:15px 20px; border-bottom:1px solid var(--line);
  font:600 10.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
table.data td{ padding:15px 20px; border-bottom:1px solid var(--line); vertical-align:middle }
table.data tbody tr{ transition:background .15s }
table.data tbody tr:hover{ background:rgba(255,255,255,.02) }
table.data tbody tr:last-child td{ border-bottom:0 }
table.data td.num{ font-family:var(--mono); font-size:13.5px }
table.data td a b{ color:var(--text); transition:color .15s }
table.data td a:hover b{ color:var(--accent) }
.sub{ display:block; font-size:12px; color:var(--faint); margin-top:5px }
@media (max-width:680px){
  table.data thead{ display:none }
  table.data, table.data tbody, table.data tr{ display:block }
  table.data tr{ padding:14px 18px; border-bottom:1px solid var(--line) }
  table.data tr:last-child{ border-bottom:0 }
  table.data td{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:6px 0; border:0 }
  table.data td[data-label]::before{
    content:attr(data-label);
    font:600 10.5px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  }
  table.data td.full{ display:block }
  table.data td.full[data-label]::before{ display:block; margin-bottom:3px }
  table.data td.right{ justify-content:flex-end }
}

/* ---------- grids / utilities ---------- */
.grid{ display:grid; gap:14px }
.g2{ grid-template-columns:repeat(2,1fr) }
@media (max-width:780px){ .g2{ grid-template-columns:1fr } }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.narrow{ max-width:600px }
.mx{ margin-inline:auto }
.center{ text-align:center }
.small{ font-size:12.5px }
.muted{ color:var(--muted) }
.mono{ font-family:var(--mono) }
.pos{ color:var(--pos) }
.neg{ color:var(--neg) }
.right{ text-align:right }
.grad{
  background:linear-gradient(92deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600;
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}


/* ---------- portfolio / my investments (append to the end of app.css) ---------- */
.pf-stats{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-bottom:14px }
.pf-stats .stat .v{ font-size:clamp(1.2rem,1rem + .9vw,1.5rem); overflow-wrap:anywhere }
.pf-ell{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pf-spark{ display:block; width:100%; height:34px; margin-top:14px }
.pf-spark path{ vector-effect:non-scaling-stroke }
.pf-spark .ln{ fill:none; stroke:var(--pos); stroke-width:1.6; stroke-linejoin:round }
.pf-spark .ar{ fill:rgba(69,217,138,.1) }
.pf-spark.dn .ln{ stroke:var(--neg) } .pf-spark.dn .ar{ fill:rgba(255,122,122,.1) }
.pf-ticks{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-height:24px; margin-top:12px }
.pf-ticks i{ width:7px; height:24px; border-radius:2px; background:var(--pos); opacity:.85 }
.pf-ticks i.neg{ height:12px; background:var(--neg) }

.pf-grid{ display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:14px }
@media (max-width:860px){ .pf-grid{ grid-template-columns:1fr } }
.pf-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:12px }
.pf-head h2{ font-size:1.2rem }
.card .pf-head h2 + p{ margin-top:4px }
.pf-seg{ display:inline-flex; gap:2px; padding:3px; background:var(--inset); border:1px solid var(--line); border-radius:10px }
.pf-seg button{ font:500 12.5px var(--sans); color:var(--muted); background:none; border:0; padding:6px 12px; border-radius:7px; cursor:pointer; transition:color .15s, background .15s }
.pf-seg button:hover{ color:var(--text) }
.pf-seg button[aria-pressed="true"]{ color:var(--text); background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px var(--line-hi) }

.pf-plotwrap{ position:relative }
.pf-plot svg{ display:block }
.pf-plot .gl{ stroke:rgba(255,255,255,.06) }
.pf-plot .zl{ stroke:rgba(255,255,255,.22); stroke-dasharray:3 4 }
.pf-plot text{ font:500 10.5px var(--mono); fill:var(--faint) }
.pf-plot .yt{ text-anchor:end } .pf-plot .xt{ text-anchor:middle }
.pf-bar{ transition:opacity .15s; animation:pf-grow .6s var(--ease) both; animation-delay:calc(var(--i) * 40ms) }
.pf-bar.pos{ fill:var(--pos) } .pf-bar.neg{ fill:var(--neg) }
.pf-plot.hovering .pf-bar{ opacity:.35 } .pf-plot.hovering .pf-bar.hot{ opacity:1 }
.pf-line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round }
.pf-area{ animation:pf-fade .9s .2s var(--ease) both }
.pf-pt{ fill:var(--bg); stroke:var(--accent); stroke-width:2; transition:r .15s }
.pf-pt.last{ fill:var(--accent) } .pf-pt.hot{ r:5.5 }
@keyframes pf-grow{ from{ transform:scaleY(0) } }
@keyframes pf-fade{ from{ opacity:0 } }
@keyframes pf-bar{ from{ transform:scaleX(0) } }

.pf-tip{ position:absolute; z-index:5; pointer-events:none; min-width:150px; max-width:230px; padding:10px 12px; border-radius:10px;
  background:rgba(23,25,31,.97); border:1px solid var(--line-hi); box-shadow:0 14px 30px -12px rgba(0,0,0,.8); font-size:12.5px; line-height:1.45 }
.pf-tip[hidden]{ display:none }
.pf-tip b{ display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pf-tip .d{ display:block; color:var(--faint); font-size:11.5px }
.pf-tip .n{ display:block; margin-top:6px; font:600 14px var(--mono) }
.pf-tip .r{ display:block; color:var(--muted); font:500 11.5px var(--mono) }

.pf-donut{ display:block; width:150px; height:150px; margin:4px auto 18px }
.pf-donut circle{ fill:none; stroke-width:14; animation:pf-fade .8s var(--ease) both }
.pf-donut .c1{ font:500 13px var(--mono); fill:var(--text); text-anchor:middle }
.pf-donut .c2{ font:500 9.5px var(--sans); fill:var(--faint); text-anchor:middle }
.pf-legend{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.pf-legend li{ display:flex; align-items:center; gap:10px; font-size:13px; min-width:0 }
.pf-legend i{ width:9px; height:9px; border-radius:3px; flex:none; background:var(--c) }
.pf-legend span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pf-legend em{ font:500 12px var(--mono); font-style:normal; color:var(--muted) }

.pf-filters{ display:flex; gap:6px; flex-wrap:wrap }
.pf-chip{ font:500 12.5px var(--sans); color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line); padding:6px 12px; border-radius:999px; cursor:pointer; transition:color .15s, border-color .15s }
.pf-chip:hover{ color:var(--text); border-color:var(--line-hi) }
.pf-chip[aria-pressed="true"]{ color:var(--on-accent); background:var(--accent); border-color:transparent; font-weight:600 }
.pf-chip span{ margin-left:6px; font:500 11px var(--mono); opacity:.7 }
.pf-off{ display:none !important }

.pf-acell .sub{ margin-top:3px }
.pf-rbar{ display:block; width:96px; height:3px; margin-top:8px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden }
.pf-rbar i{ display:block; height:100%; width:var(--w); border-radius:3px; background:var(--pos); transform-origin:left; animation:pf-bar .7s var(--ease) both }
.pf-rbar.dn i{ background:var(--neg) }
@media (max-width:680px){ .pf-pcell, .pf-acell{ text-align:right } .pf-rbar{ margin-left:auto } }


/* ============ HX dashboard redesign (self-contained; safe to move to app.css) ============ */
.hx-hero{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 45%), var(--card);
  box-shadow:var(--shadow); padding:30px 28px 0; margin:34px 0 16px; }
.hx-hero::before{ content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  right:-160px; top:-320px; pointer-events:none;
  background:radial-gradient(circle at center, rgba(201,241,88,.16), transparent 62%); }
.hx-hero::after{ content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  left:-120px; bottom:-260px; pointer-events:none;
  background:radial-gradient(circle at center, rgba(122,184,255,.09), transparent 60%); }
.hx-hero-in{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.hx-eyebrow{ display:flex; align-items:center; gap:10px; font:600 11px var(--sans); letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.hx-eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); }
.hx-hero h1{ font-size:clamp(1.9rem, 1.3rem + 2.6vw, 2.8rem); }
.hx-sub{ display:flex; align-items:center; gap:10px; margin-top:12px; color:var(--muted); font-size:13.5px; }
.hx-sub .dot{ width:7px; height:7px; border-radius:50%; background:var(--pos); box-shadow:0 0 10px rgba(69,217,138,.9); animation:hx-pulse 2.2s infinite; }
@keyframes hx-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.hx-clock{ font:500 13px var(--mono); color:var(--accent-2); letter-spacing:.06em; }
.hx-quick{ display:flex; gap:10px; flex-wrap:wrap; }

.hx-ticker{ position:relative; z-index:1; margin:26px -28px 0; border-top:1px solid var(--line);
  overflow:hidden; padding:11px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hx-ticker-track{ display:inline-flex; gap:38px; white-space:nowrap; animation:hx-marquee 30s linear infinite; will-change:transform; }
.hx-ticker-track span{ font:500 11.5px var(--mono); letter-spacing:.14em; color:var(--faint); }
.hx-ticker-track span b{ color:var(--muted); font-weight:500; }
.hx-ticker-track i{ color:var(--accent); font-style:normal; }
@keyframes hx-marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .hx-ticker-track{ animation:none; } }

/* ---- next round feature ---- */
.hx-round{ position:relative; overflow:hidden; }
.hx-round-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.hx-round h2{ font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2rem); margin-top:16px; }
.hx-round .meta{ margin-top:8px; }
.hx-cd-label{ font:600 10.5px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.hx-cd{ display:grid; grid-template-columns:repeat(4, 74px); gap:10px; margin-top:12px; }
.hx-cd-cell{ background:var(--inset); border:1px solid var(--line); border-radius:12px; padding:10px 0 8px; text-align:center; }
.hx-cd-cell b{ display:block; font:600 1.45rem/1.1 var(--mono); color:var(--accent-2); font-variant-numeric:tabular-nums; }
.hx-cd-cell span{ font:600 9.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.hx-prog{ height:5px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:18px; }
.hx-prog i{ display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width 1s var(--ease); }
.hx-prog-meta{ display:flex; justify-content:space-between; gap:10px; margin-top:8px; font:500 11.5px var(--mono); color:var(--faint); }
.hx-round-foot{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.hx-stake{ font-size:13.5px; color:var(--muted); }
.hx-stake b{ font-family:var(--mono); color:var(--text); }

/* ---- stats ---- */
.hx-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.hx-stat{ position:relative; overflow:hidden; }
.hx-stat .hx-ico{ position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; background:rgba(201,241,88,.08); border:1px solid rgba(201,241,88,.18); color:var(--accent); }
.hx-stat .hx-ico svg{ width:17px; height:17px; }
.hx-stat .l{ padding-right:44px; }
.hx-stat .v{ font-size:clamp(1.5rem, 1.15rem + 1.2vw, 1.9rem); }
.hx-stat .s{ margin-top:8px; }
@media (max-width:720px){ .hx-stats{ grid-template-columns:1fr; } .hx-cd{ grid-template-columns:repeat(4,1fr); } }

/* ---- chart + activity grid ---- */
.hx-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:14px; margin-top:14px; }
@media (max-width:860px){ .hx-grid{ grid-template-columns:1fr; } }
.hx-bars{ position:relative; height:190px; }
.hx-bars::before{ content:""; position:absolute; left:0; right:0; top:50%; border-top:1px dashed rgba(255,255,255,.16); }
.hx-bar{ position:absolute; border-radius:5px 5px 0 0; min-height:5px; transition:filter .15s; }
.hx-bar.pos{ background:linear-gradient(180deg, var(--accent), rgba(201,241,88,.25)); box-shadow:0 0 16px -4px rgba(201,241,88,.55); }
.hx-bar.neg{ background:linear-gradient(180deg, rgba(255,122,122,.25), var(--neg)); border-radius:0 0 5px 5px; box-shadow:0 0 16px -4px rgba(255,122,122,.45); }
.hx-bar:hover{ filter:brightness(1.25); }
.hx-row{ cursor:default; }

/* ============================================================
   IMPORTANT NOTICE MODAL
   ============================================================ */

.important-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:center;
    padding:20px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}

.important-modal.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* ---------- dark backdrop ---------- */

.important-modal-backdrop{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            500px 300px at 50% 45%,
            rgba(201,241,88,.08),
            transparent 70%
        ),
        rgba(5,6,8,.78);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}


/* ---------- modal box ---------- */

.important-modal-box{
    position:relative;
    z-index:1;

    width:min(480px, 100%);

    padding:34px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,0) 45%
        ),
        var(--card);

    border:1px solid rgba(201,241,88,.22);
    border-radius:var(--r-lg);

    box-shadow:
        0 30px 80px -25px rgba(0,0,0,.95),
        0 0 60px -25px rgba(201,241,88,.25),
        inset 0 1px 0 rgba(255,255,255,.05);

    transform:translateY(18px) scale(.97);

    transition:
        transform .4s var(--ease),
        opacity .3s ease;

    overflow:hidden;
}


/* glowing corner */

.important-modal-box::before{
    content:"";

    position:absolute;
    width:280px;
    height:280px;

    top:-170px;
    right:-100px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(201,241,88,.16),
            transparent 68%
        );

    pointer-events:none;
}


/* bottom glow */

.important-modal-box::after{
    content:"";

    position:absolute;
    width:220px;
    height:220px;

    bottom:-170px;
    left:-100px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(122,184,255,.08),
            transparent 68%
        );

    pointer-events:none;
}


.important-modal.show .important-modal-box{
    transform:translateY(0) scale(1);
}


/* ---------- warning icon ---------- */

.important-modal-icon{
    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    margin-bottom:22px;

    border-radius:14px;

    background:rgba(201,241,88,.08);
    border:1px solid rgba(201,241,88,.25);

    box-shadow:
        0 0 30px -8px rgba(201,241,88,.5);
}


.important-modal-icon span{
    width:27px;
    height:27px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--accent);
    color:var(--on-accent);

    font:700 15px var(--mono);

    box-shadow:
        0 0 18px rgba(201,241,88,.45);
}


/* ---------- eyebrow ---------- */

.important-modal-eyebrow{
    display:flex;
    align-items:center;
    gap:9px;

    margin-bottom:9px;

    font:
        600 10.5px var(--sans);

    letter-spacing:.18em;
    text-transform:uppercase;

    color:var(--faint);
}


.important-modal-eyebrow::before{
    content:"";

    width:20px;
    height:1px;

    background:var(--accent);
}


/* ---------- heading ---------- */

.important-modal-box h2{
    position:relative;

    margin:0;

    font:
        480 clamp(1.65rem, 1.4rem + 1.2vw, 2.1rem)
        /1.12 var(--serif);

    color:var(--text);
}


.important-modal-box h2 span{
    color:var(--accent);
}


/* ---------- paragraph ---------- */

.important-modal-text{
    position:relative;

    margin-top:13px;

    color:var(--muted);

    font-size:14px;
    line-height:1.7;
}


/* ---------- small notice ---------- */

.important-modal-note{
    position:relative;

    display:flex;
    align-items:flex-start;
    gap:10px;

    margin-top:22px;
    padding:12px 14px;

    border-radius:10px;

    background:rgba(201,241,88,.045);
    border:1px solid rgba(201,241,88,.13);

    color:var(--muted);

    font-size:12.5px;
    line-height:1.5;
}


.important-modal-dot{
    flex:none;

    width:7px;
    height:7px;

    margin-top:6px;

    border-radius:50%;

    background:var(--accent);

    box-shadow:
        0 0 10px rgba(201,241,88,.7);
}


/* ---------- button ---------- */

.important-modal-btn{
    position:relative;

    width:100%;

    margin-top:22px;

    padding:14px 18px;

    justify-content:space-between;
}


.important-modal-btn span{
    font-size:18px;

    transition:
        transform .18s var(--ease);
}


.important-modal-btn:hover span{
    transform:translateX(3px);
}


/* ---------- mobile ---------- */

@media (max-width:560px){

    .important-modal{
        padding:16px;
    }

    .important-modal-box{
        padding:27px 22px 23px;

        border-radius:16px;
    }

    .important-modal-icon{
        width:46px;
        height:46px;
        margin-bottom:19px;
    }

    .important-modal-box h2{
        font-size:1.65rem;
    }

    .important-modal-text{
        font-size:13.5px;
    }
    .wd-steps,.wd-pbar,.wd-sub-label,.pf-acell .sub,.pf-rbar {display:none !important;}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion:reduce){

    .important-modal,
    .important-modal-box{
        transition:none;
    }
}

/* ============================================================
   TABS
   ============================================================ */

.tabs {
    display: flex;
    align-items: center;
    gap: 4px;

    width: fit-content;
    padding: 5px;

    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* ---------- tab links ---------- */

.tabs a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 15px;

    border-radius: 8px;

    color: var(--muted);
    text-decoration: none;

    font:
        600 12px var(--sans);

    white-space: nowrap;

    transition:
        color .18s var(--ease),
        background .18s var(--ease),
        box-shadow .18s var(--ease),
        transform .18s var(--ease);
}


/* ---------- hover ---------- */

.tabs a:hover {
    color: var(--text);
    background: rgba(255,255,255,.035);
}


/* ---------- active tab ---------- */

.tabs a.on {
    color: var(--on-accent);

    background: var(--accent);

    box-shadow:
        0 4px 14px rgba(201,241,88,.14),
        inset 0 1px 0 rgba(255,255,255,.18);
}


/* active hover */

.tabs a.on:hover {
    color: var(--on-accent);
    background: var(--accent);

    transform: translateY(-1px);
}


/* ---------- mobile ---------- */

@media (max-width: 600px) {

    .tabs {
        width: 100%;

        overflow-x: auto;
        scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tabs a {
        flex: 1;
        padding: 9px 11px;

        font-size: 11.5px;
    }
}

/* ---------- page loading spinner (htmx) ---------- */
#page-loader{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;
  background:rgba(10,11,13,.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
/* delay of 150ms so fast pages don't flicker the spinner */
#page-loader.htmx-request{
  opacity:1; 
  transition:opacity 1s ease 3s;
}
.page-spinner{
  width:46px; height:46px; border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:var(--accent);
  animation:page-spin .8s linear infinite;
  box-shadow:0 0 28px -6px rgba(176,208,89,.5);
}
@keyframes page-spin{ to{ transform:rotate(360deg) } }

/* ============================================================
   RISK DISCLAIMER PAGE — paste at the END of static/css/app.css
   (delete the previous "RISK DISCLAIMER PAGE" block first)
   ============================================================ */
.ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.rk-ic{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--accent);
  background:rgba(176,208,89,.08); border:1px solid rgba(176,208,89,.2) }
.rk-ic.hot{ color:var(--neg); background:rgba(255,122,122,.08); border-color:rgba(255,122,122,.25) }
.rk-ic.warn{ color:var(--warn); background:rgba(242,193,78,.08); border-color:rgba(242,193,78,.25) }

/* hero */
.hx-hero.rk-hero{ padding:28px 24px 0 }
.rk-hero::before{ background:radial-gradient(circle at center, rgba(242,193,78,.15), transparent 62%) }
.rk-hero .hx-ticker{ margin:24px -24px 0 }
.rk-hero .lead{ margin-top:12px }
@media (max-width:560px){
  .hx-hero.rk-hero{ padding:22px 18px 0; margin-top:24px }
  .rk-hero .hx-ticker{ margin:20px -18px 0 }
}

/* afford to lose */
.card.feature.rk-afford{ border-color:rgba(242,193,78,.32); padding:30px 26px }
.card.feature.rk-afford::before{ background:radial-gradient(460px 230px at 90% -30%, rgba(242,193,78,.18), transparent 65%) }
.rk-afford h2{ font-size:clamp(1.9rem, 1.2rem + 3vw, 2.9rem); max-width:15ch; margin-top:14px }
.rk-afford h2 em{ color:var(--warn) }
.rk-chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:24px }
.rk-chip{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--inset); border:1px solid var(--line); font-size:13.5px; font-weight:500 }
@media (max-width:720px){ .rk-chips{ grid-template-columns:1fr } }
@media (max-width:560px){ .card.feature.rk-afford{ padding:24px 18px } }

/* chart */
.card.rk-chartcard{ padding:18px 14px }
.rk-chart svg{ display:block; width:100%; max-width:640px; height:auto; margin:0 auto }
.rk-chart .base{ stroke:rgba(255,255,255,.07) }
.rk-chart .rel{ stroke:var(--warn); stroke-dasharray:4 5; opacity:.8 }
.rk-chart .zone{ fill:rgba(255,122,122,.08) }
.rk-chart .px{ fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round }
.rk-chart text{ font:500 10.5px var(--mono); fill:var(--faint); letter-spacing:.05em }
.rk-chart .tw{ fill:var(--warn) } .rk-chart .tn{ fill:var(--neg) }
.js .rk-chart .px{ stroke-dasharray:1; stroke-dashoffset:1 }
.rk-chart.in .px{ animation:rk-draw 2.6s var(--ease) forwards }
@keyframes rk-draw{ to{ stroke-dashoffset:0 } }
.rk-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:14px }

/* NFP risk tiles */
.rk-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
@media (min-width:900px){ .rk-grid{ grid-template-columns:repeat(3,1fr); gap:14px } }
.card.rk-tile{ display:flex; flex-direction:column; gap:12px; padding:16px; transition:transform .22s var(--ease), border-color .22s }
.rk-tile:hover{ transform:translateY(-3px); border-color:var(--line-hi) }
.rk-tile h3{ font-size:1.05rem; line-height:1.2 }
.rk-tile p{ font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:5px }
.rk-meter{ margin-top:auto; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--c, var(--neg)) calc(var(--lv) * 20%), rgba(255,255,255,.08) 0) }
.rk-tile.warn{ --c:var(--warn) }

/* hedged != safe */
.card.rk-neq{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:10px;
  padding:22px 18px; text-align:center; background:rgba(255,122,122,.05); border-color:rgba(255,122,122,.22) }
.rk-neq .badge{ font-size:12px; padding:8px 16px }
.rk-neq b{ font:400 2.2rem/1 var(--serif); color:var(--neg) }
.rk-neq p{ flex-basis:100%; color:var(--muted); font-size:13px }

/* other risks */
.rk-mini-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
@media (min-width:900px){ .rk-mini-grid{ grid-template-columns:repeat(4,1fr) } }
.card.rk-mini{ display:flex; align-items:center; gap:12px; padding:14px; font-size:13.5px; font-weight:500; line-height:1.3 }
.rk-mini .rk-ic{ width:34px; height:34px }

/* liability */
.rk-legal{ display:grid; gap:10px }
.card.rk-L{ display:flex; align-items:center; gap:14px; padding:16px; font-size:14.5px; font-weight:500; line-height:1.4 }
.card.rk-L.big{ font:480 1.2rem/1.3 var(--serif); border-color:rgba(176,208,89,.28) }

/* acknowledgement */
.card.feature.rk-ack{ text-align:center; padding:30px 20px }
.rk-ack label{ display:inline-flex; gap:12px; align-items:center; text-align:left; margin:18px 0 20px; font-size:14px; color:var(--muted); cursor:pointer }
.rk-ack input{ appearance:none; -webkit-appearance:none; flex:none; width:22px; height:22px; border-radius:7px; cursor:pointer;
  background:var(--inset); border:1px solid var(--line-hi); display:grid; place-items:center; transition:all .18s }
.rk-ack input:checked{ background:var(--accent); border-color:var(--accent) }
.rk-ack input:checked::after{ content:"✓"; color:var(--on-accent); font:700 14px/1 var(--sans) }
.rk-ack .btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; transform:none; filter:none }
@media (max-width:560px){ .rk-ack .row{ flex-direction:column } .rk-ack .btn{ width:100% } }

/* scroll reveal (only with JS) */
.js .rk-r{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.js .rk-r.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .js .rk-r{ opacity:1; transform:none } .js .rk-chart .px{ stroke-dashoffset:0 } }

/* ---------- authentication pages ---------- */
.authpage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px 20px;
}
.auth{
  width:min(1040px,100%);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.75fr);
  gap:60px;
  align-items:center;
}
.pitch{ padding:28px 0 }
.pitch .brand{ margin-bottom:52px }
.pitch h1{ max-width:12ch; font-size:clamp(2.5rem,4.8vw,4.6rem) }
.pitch .lead{ max-width:48ch; margin-top:20px }
.feats{ list-style:none; padding:0; margin:30px 0 0; display:grid; gap:12px; color:var(--muted); font-size:13.5px }
.feats li{ display:flex; gap:11px; align-items:flex-start }
.feats li::before{ content:"✓"; color:var(--accent); font-weight:700 }
.box{ width:100%; max-width:470px; margin-left:auto }
.authcard{ padding:30px }
.authcard h1{ font-size:clamp(2rem,3vw,2.8rem) }
.muted{ color:var(--muted); margin-top:10px; line-height:1.6 }
.auth-switch{ text-align:center; margin-top:18px; color:var(--muted); font-size:13px }
.auth-switch a{ font-weight:600 }
.auth-note{ color:var(--faint); font-size:12px; line-height:1.55; margin-top:14px }
.auth-divider{ display:flex; align-items:center; gap:12px; color:var(--faint); margin:20px 0 }
.auth-divider::before,.auth-divider::after{ content:""; height:1px; flex:1; background:var(--line) }
.auth-divider span{ font-size:11px; text-transform:uppercase; letter-spacing:.12em }
.google-wrap{ display:flex; justify-content:center; min-height:44px; margin-top:22px }
.google-wrap > div{ max-width:100% }
.csrf-seed{ display:none }
.auth-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:24px 0 }
.auth-steps span{
  padding:8px 5px; text-align:center; border-radius:9px;
  border:1px solid var(--line); color:var(--faint); font-size:10px; font-weight:600;
}
.auth-steps span.active{ color:var(--text); border-color:rgba(176,208,89,.35); background:rgba(176,208,89,.06) }
.auth-steps span.done{ color:var(--pos); border-color:rgba(69,217,138,.2); background:rgba(69,217,138,.05) }
.telegram-btn{ margin-top:8px; background:#229ED9; color:#fff; box-shadow:0 10px 26px -12px rgba(34,158,217,.6) }
.telegram-btn:hover{ filter:brightness(1.08); color:#fff }
.msgs{ display:grid; gap:8px; margin-bottom:18px }
@media (max-width:800px){
  .auth{ grid-template-columns:1fr; gap:20px; max-width:500px }
  .pitch{ display:none }
  .box{ max-width:none }
}
@media (max-width:460px){
  .authpage{ padding:14px }
  .authcard{ padding:22px 18px }
  .auth-steps span{ font-size:9px; padding-inline:2px }
}