/* ============================================================
   TickProof — verification page (/p/[id])
   Layered on top of site.css (tokens, .proof, .dcal, .vbadge,
   .ptag, .btn, .footer …). Instrumentation-panel feel:
   hard edges, hairlines, tabular mono numerals, green = verified.
   ============================================================ */

body { background: var(--bg-canvas); color: var(--fg-primary);
  font-family: var(--font-sans); margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* scale-to-fit wrapper for the hero proof card (no content reflow) */
.fitcard { width: 100%; }
.fitcard-in { will-change: transform; }

/* faint chart-axis grid behind the whole page */
.vp-gridbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(var(--chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%); }

/* ---------- 1 · verification status ribbon ---------- */
.vbar { position: sticky; top: 0; z-index: 40; background: rgba(10,12,14,0.86);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-hairline); }
.vbar-in { max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 52px;
  display: flex; align-items: center; gap: 0; }
.vbar .seg { display: inline-flex; align-items: center; gap: 8px; height: 100%;
  padding: 0 16px; border-right: 1px solid var(--border-hairline); white-space: nowrap; }
.vbar .seg:first-child { padding-left: 0; }
.vbar .seg:last-child { border-right: none; margin-left: auto; padding-right: 0; }
.vbar .v-ok { font: 700 11px var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-green); }
.vbar .v-ok .tick { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px;
  border-radius: 50%; background: var(--brand-green); color: var(--fg-inverse); }
.vbar .v-ok .tick svg { width: 11px; height: 11px; }
.vbar .v-dot { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.vbar .k { font: 700 8.5px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.vbar .val { font: 600 12px var(--font-mono); color: var(--fg-secondary); letter-spacing: 0.01em; }
.vbar .atag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: var(--radius-pill);
  font: 700 10px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.vbar .atag.live { color: var(--brand-green); background: var(--brand-green-soft); border: 1px solid var(--brand-green-ring); }
.vbar .atag.eval { color: var(--status-verified); background: rgba(77,163,255,0.10); border: 1px solid rgba(77,163,255,0.35); }
.vbar .atag.sim  { color: var(--status-warn); background: var(--tape-soft); border: 1px solid rgba(255,194,51,0.35); }
.vbar .atag .ad { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vbar .live-pulse { animation: vpulse 2.4s var(--ease-in-out) infinite; }
@keyframes vpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.howlink { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--font-sans);
  color: var(--fg-tertiary); background: none; border: none; cursor: pointer; }
.howlink:hover { color: var(--brand-green); }
.howlink svg { width: 14px; height: 14px; }

/* ---------- page shell ---------- */
.vp { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 24px; }
.vp-wide { max-width: 1080px; }
.vp-sec { padding: 30px 0; border-top: 1px solid var(--border-hairline); }
.vp-sec:first-of-type { border-top: none; }
.vp-label { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.vp-label .eb { font: 700 10px var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-tertiary); }
.vp-label .ix { font: 700 10px var(--font-mono); color: var(--brand-green); }
.vp-label .rule { flex: 1; height: 1px; background: var(--border-hairline); }

/* ---------- 2 · hero — the scanned card ---------- */
.vhero { padding: 44px 0 30px; text-align: center; }
.vhero-eyebrow { font: 700 10px var(--font-display); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand-green); margin: 0 0 8px; }
.vhero-sub { font: 400 14px/1.6 var(--font-sans); color: var(--fg-tertiary); margin: 10px auto 0; max-width: 52ch; }
.vcardwrap { position: relative; max-width: 496px; margin: 26px auto 0; }
.vcardwrap .halo { position: absolute; inset: -40px -20px; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 42%, rgba(0,224,138,0.18), transparent 70%); }
.vcardwrap .proof { position: relative; z-index: 1; text-align: left; }

/* calendar inside the proof card */
.proof .pcal-head { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 10px; }
.proof .pcal-head .l { font: 700 9px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); }
.proof .pcal-head .r { font: 600 13px var(--font-mono); }
.proof .dcal { gap: 4px; }
.proof .dcell { min-height: 40px; padding: 9px 2px 4px; }
.proof .dcell .dn { font-size: 8px; }
.proof .dcell .dp { font-size: 11px; }
.proof .dcell .dm { font-size: 6.5px; }

/* share strip under the card */
.vshare { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px auto 0; flex-wrap: wrap; }
.vchip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--bg-surface);
  font: 600 12px var(--font-sans); color: var(--fg-secondary); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.vchip:hover { border-color: var(--fg-tertiary); color: var(--fg-primary); background: var(--bg-surface-2); }
.vchip svg { width: 15px; height: 15px; }
.vchip.primary { color: var(--brand-green); border-color: var(--brand-green-ring); background: var(--brand-green-soft); }

/* ---------- 3 · trader attribution ---------- */
.vattr { display: flex; align-items: center; gap: 14px; }
.vattr .av { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--bg-surface-3), var(--bg-surface)); border: 1px solid var(--border-soft);
  font: 700 15px var(--font-display); color: var(--fg-secondary); letter-spacing: 0.02em; }
.vattr .id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.vattr .nm { display: inline-flex; align-items: center; gap: 7px; font: 700 16px var(--font-sans); color: var(--fg-primary); white-space: nowrap; }
.vattr .nm svg { width: 16px; height: 16px; color: var(--status-verified); flex: 0 0 16px; }
.vattr .hd { font: 500 13px var(--font-mono); color: var(--fg-tertiary); }
.vattr .links { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vattr .links a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-soft); font: 600 12px var(--font-sans);
  color: var(--fg-secondary); text-decoration: none; transition: all var(--dur-fast) var(--ease-out); white-space: nowrap; }
.vattr .links a:hover { border-color: var(--fg-tertiary); color: var(--fg-primary); }
.vattr .links a svg { width: 14px; height: 14px; }

/* ---------- 4 · track record ---------- */
.scopebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--border-hairline); border-left: 2px solid var(--brand-green); border-radius: var(--radius-md);
  background: var(--bg-surface); }
.scopebar .sl { font: 700 9px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); }
.scopebar .accs { display: flex; gap: 6px; flex-wrap: wrap; }
.scopebar .acc { font: 500 11px var(--font-mono); color: var(--fg-secondary); padding: 3px 8px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-inset); white-space: nowrap; }
.scopebar .summ { margin-left: auto; font: 500 12px var(--font-sans); color: var(--fg-tertiary); }

.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-hairline);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.statgrid .st { background: var(--bg-surface); padding: 16px 16px 15px; display: flex; flex-direction: column; gap: 7px; }
.statgrid .st .l { font: 700 9px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); }
.statgrid .st .v { font: 600 22px/1 var(--font-mono); color: var(--fg-primary); font-variant-numeric: tabular-nums slashed-zero; }
.statgrid .st .d { font: 500 10.5px var(--font-mono); color: var(--fg-muted); }
.statgrid .st .v.pos { color: var(--pnl-positive); } .statgrid .st .v.neg { color: var(--pnl-negative); }

/* ---------- 5 · equity curve ---------- */
.eqpanel { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; }
.eqpanel .eqh { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px;
  border-bottom: 1px solid var(--border-hairline); background: var(--bg-surface-2); }
.eqpanel .eqh .t { font: 700 9px var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); }
.eqpanel .eqh .r { font: 600 15px var(--font-mono); }
.eqpanel .eqbody { padding: 14px 12px 10px; }
.eqpanel svg { display: block; width: 100%; height: auto; }
.eqaxis { display: flex; justify-content: space-between; padding: 4px 6px 2px; }
.eqaxis span { font: 500 9.5px var(--font-mono); color: var(--fg-muted); }

/* ---------- 6 · trade list (9-column) ---------- */
.tradehead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tradehead .meta { font: 500 12px var(--font-mono); color: var(--fg-tertiary); }
.tradehead .sp { flex: 1; }
.xlsxbtn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--bg-surface);
  font: 600 12px var(--font-sans); color: var(--fg-secondary); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.xlsxbtn:hover { border-color: var(--brand-green-ring); color: var(--brand-green); background: var(--brand-green-soft); }
.xlsxbtn svg { width: 15px; height: 15px; }

.tradescroll { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow-x: auto; background: var(--bg-surface); }
table.ttable { width: 100%; border-collapse: collapse; min-width: 720px; }
table.ttable thead th { position: sticky; top: 0; background: var(--bg-surface-2); z-index: 1;
  font: 700 8.5px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-tertiary);
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
table.ttable thead th.r, table.ttable tbody td.r { text-align: right; }
table.ttable tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border-hairline);
  font: 500 12px var(--font-mono); color: var(--fg-secondary); white-space: nowrap; font-variant-numeric: tabular-nums slashed-zero; }
table.ttable tbody tr:hover td { background: var(--bg-surface-2); }
table.ttable tbody tr:last-child td { border-bottom: none; }
table.ttable .inst { color: var(--fg-primary); font-weight: 600; }
table.ttable .acccell { color: var(--fg-tertiary); }
table.ttable .dir-buy { color: var(--brand-green); } table.ttable .dir-sell { color: var(--pnl-negative); }
table.ttable td.pnl.pos { color: var(--pnl-positive); } table.ttable td.pnl.neg { color: var(--pnl-negative); }
table.ttable tfoot td { padding: 13px 12px; background: var(--bg-surface-2); border-top: 1px solid var(--border-soft);
  font: 700 12px var(--font-mono); color: var(--fg-primary); }
table.ttable tfoot td .fl { font: 700 8.5px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-tertiary); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pager .pinfo { font: 500 11.5px var(--font-mono); color: var(--fg-muted); }
.pager .pbtns { display: flex; gap: 6px; }
.pgbtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft); background: var(--bg-surface); color: var(--fg-secondary); cursor: pointer;
  font: 600 12px var(--font-mono); transition: all var(--dur-fast) var(--ease-out); }
.pgbtn:hover:not(:disabled) { border-color: var(--fg-tertiary); color: var(--fg-primary); }
.pgbtn:disabled { opacity: 0.35; cursor: default; }
.pgbtn.cur { background: var(--brand-green); border-color: var(--brand-green); color: var(--fg-inverse); }
.pgbtn svg { width: 15px; height: 15px; }

/* ---------- 7 · verify-it-yourself ---------- */
.howgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.howcard { padding: 18px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md); background: var(--bg-surface); }
.howcard .ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-sm);
  background: var(--brand-green-soft); color: var(--brand-green); margin-bottom: 12px; }
.howcard .ic svg { width: 17px; height: 17px; }
.howcard h4 { font: 600 14px var(--font-sans); color: var(--fg-primary); margin: 0 0 7px; }
.howcard p { font: 400 13px/1.6 var(--font-sans); color: var(--fg-tertiary); margin: 0; }

/* ---------- 8 · disclosures ---------- */
.disc { display: flex; flex-direction: column; gap: 14px; }
.disc p { font: 400 12px/1.7 var(--font-sans); color: var(--fg-muted); margin: 0; max-width: 80ch; }
.disc p strong { color: var(--fg-tertiary); font-weight: 700; }
.disc a { color: var(--brand-green); text-decoration: none; }
.disc a:hover { text-decoration: underline; }

/* ---------- 9 · conversion CTA ---------- */
.vcta { margin: 8px 0 4px; padding: 40px 32px; text-align: center; border-radius: var(--radius-md);
  border: 1px solid var(--brand-green-ring); position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(0,224,138,0.10), transparent 70%), var(--bg-surface); }
.vcta h3 { font: 400 26px var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1;
  color: var(--fg-primary); margin: 0 0 10px; }
.vcta p { font: 400 15px/1.55 var(--font-sans); color: var(--fg-secondary); margin: 0 auto 22px; max-width: 46ch; }
.vcta .capture { margin: 0 auto; }
.vcta .cap-note { margin-top: 14px; }

/* ---------- modal ---------- */
.vmodal-bd { position: fixed; inset: 0; z-index: 90; background: rgba(10,12,14,0.72); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 24px; animation: vfade var(--dur-base) var(--ease-out); }
@keyframes vfade { from { opacity: 0; } }
.vmodal { width: 100%; max-width: 480px; background: var(--bg-surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); box-shadow: var(--shadow-glow-green); overflow: hidden;
  animation: vrise var(--dur-base) var(--ease-out); }
@keyframes vrise { from { transform: translateY(10px); opacity: 0; } }
.vmodal-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px;
  border-bottom: 1px solid var(--border-hairline); background: var(--bg-surface-2); }
.vmodal-h .t { font: 700 11px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-primary); }
.vmodal-x { background: none; border: none; color: var(--fg-tertiary); cursor: pointer; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm); }
.vmodal-x:hover { background: var(--bg-surface-3); color: var(--fg-primary); }
.vmodal-x svg { width: 16px; height: 16px; }
.vmodal-b { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.vmodal-step { display: flex; gap: 13px; }
.vmodal-step .n { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-green-soft); border: 1px solid var(--brand-green-ring); color: var(--brand-green);
  font: 700 11px var(--font-mono); }
.vmodal-step .bd { font: 400 13px/1.6 var(--font-sans); color: var(--fg-secondary); }
.vmodal-step .bd b { color: var(--fg-primary); font-weight: 600; }

/* ---------- toast ---------- */
.vtoast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); z-index: 95;
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: var(--radius-sm);
  background: var(--bg-surface-3); border: 1px solid var(--brand-green-ring); box-shadow: var(--shadow-glow-green);
  font: 600 13px var(--font-sans); color: var(--fg-primary); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.vtoast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.vtoast svg { width: 16px; height: 16px; color: var(--brand-green); }

/* ---------- footer year reset (reuse site footer) ---------- */
.footer { position: relative; z-index: 1; }

/* ---------- direction variants ---------- */
/* Spotlight: louder card glow, unified verified panel feel */
.dir-spotlight .vcardwrap .halo { inset: -64px -28px; background: radial-gradient(60% 55% at 50% 42%, rgba(0,224,138,0.30), transparent 72%); }
.dir-spotlight .vcardwrap .proof { box-shadow: 0 0 0 1px var(--brand-green-ring), 0 40px 90px rgba(0,224,138,0.26); }
.dir-spotlight .vhero { padding-top: 56px; }
/* Compact: denser hero, smaller card, faster scan */
.dir-compact .vhero { padding: 28px 0 22px; }
.dir-compact .vcardwrap { max-width: 420px; }
.dir-compact .vhero-sub { display: none; }
.dir-compact .vp-sec { padding: 24px 0; }
.dir-compact .statgrid .st { padding: 13px 13px 12px; }
.dir-compact .statgrid .st .v { font-size: 19px; }

/* ---------- phone view shell ---------- */
.as-phone { background: #050607; }
.as-phone .vp-gridbg { display: none; }
.device { max-width: 412px; margin: 32px auto; background: var(--bg-canvas);
  border: 10px solid #000; border-radius: 46px; box-shadow: 0 0 0 2px #1a1d22, 0 40px 90px rgba(0,0,0,0.6);
  overflow: hidden; position: relative; }
.device .notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 128px; height: 26px;
  background: #000; border-radius: 0 0 16px 16px; z-index: 60; }
.device-scroll { height: 760px; overflow-y: auto; overflow-x: hidden; position: relative; }
.device-scroll::-webkit-scrollbar { width: 0; }
/* inside the phone, everything is single-column + tighter */
.as-phone .vbar-in, .as-phone .vp { padding-left: 16px; padding-right: 16px; }
.as-phone .vbar { padding-top: 22px; }   /* clear the notch */
.as-phone .vbar-in { height: 46px; gap: 0; }
/* the bar can't fit 5 segments at phone width — drop the non-critical ones
   (Source / Refreshed) and reduce the how-link to its icon */
.as-phone .vbar .seg.hide-sm { display: none; }
.as-phone .vbar .seg { padding: 0 10px; }
.as-phone .vbar .seg:first-child { padding-left: 0; }
.as-phone .vbar .howlbl { display: none; }
.as-phone .vbar .howlink { gap: 0; }
/* attribution: stack the profile links below the name so they don't overlap it */
.as-phone .vattr { flex-wrap: wrap; }
.as-phone .vattr .links { margin-left: 0; width: 100%; flex-wrap: wrap; }
.as-phone .statgrid { grid-template-columns: repeat(2, 1fr); }
.as-phone .howgrid { grid-template-columns: 1fr; }
.as-phone .vp-wide { max-width: 100%; }
/* footer + forms must reflow inside the fixed-width device shell (real-viewport
   media queries don't fire because the outer viewport is wide) */
.as-phone .foot-grid { grid-template-columns: 1fr; gap: 32px; }
.as-phone .foot-bot { flex-direction: column; align-items: flex-start; gap: 12px; }
.as-phone .capture { flex-direction: column; }
.as-phone .capture input { flex: 0 0 auto; width: 100%; }
.as-phone .capture .btn { width: 100%; }

/* ---------- responsive (real viewport, desktop→mobile) ---------- */
@media (max-width: 720px) {
  .statgrid { grid-template-columns: repeat(2, 1fr); }
  .howgrid { grid-template-columns: 1fr; }
  .vbar .seg.hide-sm { display: none; }
  .vbar .howlbl { display: none; }
  .vbar .howlink { gap: 0; }
  .scopebar .summ { margin-left: 0; width: 100%; }
  .vattr { flex-wrap: wrap; }
  .vattr .links { margin-left: 0; width: 100%; }
}
@media (max-width: 460px) {
  .vp, .vbar-in { padding-left: 16px; padding-right: 16px; }
  .vhero { padding-top: 30px; }
}