/* TinyX Bug Bounty Hub — design tokens from tinyx.co theme-clean */
:root {
  --bg-ghost: #f8f9fa; --surface: #fff; --charcoal: #1a1a2e; --muted: #556274;
  --border: #e2e8f0; --ash: #cbd5e1; --accent: #4f46e5; --accent-dark: #4338ca;
  --accent-glow: rgba(79,70,229,.15); --wordmark: linear-gradient(145deg,#4f46e5,#7c3aed);
  --gold: #b8860b; --gold-bg: linear-gradient(160deg,#fff8e1,#fff 60%);
  --silver: #6b7280; --silver-bg: linear-gradient(160deg,#f1f5f9,#fff 60%);
  --bronze: #a0522d; --bronze-bg: linear-gradient(160deg,#fdf0e6,#fff 60%);
  --ok: #047857; --no: #b91c1c;
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 12px; --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(26,26,46,.04), 0 8px 24px rgba(26,26,46,.06);
  --shadow-lg: 0 2px 4px rgba(26,26,46,.05), 0 18px 40px rgba(26,26,46,.10);
  --max: 760px; --max-wide: 1040px;
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin:0; font-family:var(--font-sans); font-size:1.0625rem; line-height:1.65; color:var(--charcoal); background:var(--bg-ghost); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-dark); text-decoration:underline; text-underline-offset:.15em; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
.mono { font-family:var(--font-mono); font-size:.92em; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:1rem; top:-3rem; background:var(--charcoal); color:#fff; padding:.5rem 1rem; border-radius:8px; z-index:20; }
.skip:focus { top:1rem; color:#fff; }

.site-header { position:sticky; top:0; z-index:10; background:rgba(248,249,250,.88); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--border); }
.header-inner { max-width:var(--max-wide); margin:0 auto; padding:.85rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.wordmark { font-weight:700; font-size:1.15rem; background:var(--wordmark); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wordmark span { color:var(--muted); -webkit-text-fill-color:var(--muted); font-weight:500; }
.wordmark:hover { text-decoration:none; }
.nav { display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.95rem; }
.nav a { color:var(--muted); font-weight:500; }
.nav a:hover { color:var(--charcoal); }

main { padding-bottom:3rem; }
.hero { max-width:var(--max); margin:0 auto; padding:5rem 1.25rem 3rem; text-align:center; }
.kicker { margin:0 0 .5rem; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
h1 { font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 1rem; }
h2 { font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.01em; line-height:1.2; margin:0 0 .5rem; }
h3 { margin:0 0 .5rem; font-size:1.1rem; }
.lead { font-size:1.2rem; color:var(--muted); margin:0 auto 2rem; max-width:34em; }
.hero-meta { margin-top:1.5rem; font-size:.9rem; color:var(--muted); }
.cta-row { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.8rem 1.35rem; border-radius:999px; font-weight:600; border:1px solid transparent; transition:transform .15s, box-shadow .15s, background .15s; }
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 6px 18px var(--accent-glow); }
.btn-primary:hover { background:var(--accent-dark); color:#fff; }
.btn-secondary { background:var(--surface); color:var(--charcoal); border-color:var(--border); }
.btn-secondary:hover { border-color:var(--ash); color:var(--charcoal); }

.section { max-width:var(--max); margin:0 auto; padding:3rem 1.25rem; }
.section.wide { max-width:var(--max-wide); }
.section-head { margin-bottom:1.75rem; }
.section-intro { color:var(--muted); margin:0; max-width:40em; }
.note { color:var(--muted); font-size:.95rem; margin-top:1.25rem; }

/* Leaderboard */
.podium { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.rcard { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem 1.25rem 1.25rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.75rem; }
.rcard.gold { background:var(--gold-bg); border-color:#ecd28a; box-shadow:var(--shadow-lg); }
.rcard.silver { background:var(--silver-bg); border-color:#d5dbe3; }
.rcard.bronze { background:var(--bronze-bg); border-color:#e9c7ac; }
.rcard.plain { grid-column:1 / -1; flex-direction:row; align-items:center; padding:1rem 1.25rem; }
.rcard.plain .rbody { flex:1; }
.medal { position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.gold .medal { background:linear-gradient(145deg,#f5c84c,#b8860b); }
.silver .medal { background:linear-gradient(145deg,#d1d5db,#6b7280); }
.bronze .medal { background:linear-gradient(145deg,#e0a070,#a0522d); }
.avatar { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff; background:var(--wordmark); font-size:1.1rem; flex:none; }
.plain .avatar { width:44px; height:44px; font-size:.95rem; }
.rrank { margin:0; font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.gold .rrank { color:#7a5a00; } .bronze .rrank { color:#7c3f1d; }
.rname { margin:.1rem 0 0; font-size:1.2rem; }
.rlink { margin:0; font-size:.88rem; }
.rsum { margin:.35rem 0 0; color:var(--muted); font-size:.95rem; }
.rpts { margin:0; margin-top:auto; font-size:.9rem; color:var(--muted); }
.rpts strong { font-size:1.5rem; color:var(--charcoal); font-variant-numeric:tabular-nums; }
.plain .rpts { margin:0; }

/* Glance */
.glance { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gcard { display:flex; flex-direction:column; gap:.25rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; color:var(--charcoal); box-shadow:var(--shadow); transition:border-color .15s, transform .15s; }
.gcard:hover { text-decoration:none; border-color:var(--accent); color:var(--charcoal); transform:translateY(-2px); }
.gk { font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.gcard span:last-child { color:var(--muted); font-size:.93rem; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:.5rem; vertical-align:middle; }
.scope-in .dot { background:var(--ok); } .scope-out .dot { background:var(--no); }
.list-clean, .list-check, .list-x { list-style:none; margin:0; padding:0; }
.list-clean li, .list-check li, .list-x li { position:relative; padding:.35rem 0 .35rem 1.6rem; }
.list-clean li::before { content:"•"; position:absolute; left:.4rem; color:var(--accent); }
.list-check li::before { content:"✓"; position:absolute; left:.2rem; color:var(--ok); font-weight:700; }
.list-x li::before { content:"✕"; position:absolute; left:.2rem; color:var(--no); font-weight:700; }

.steps { list-style:none; counter-reset:s; margin:0 0 1.75rem; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.steps li { counter-increment:s; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; display:flex; flex-direction:column; gap:.3rem; }
.steps li::before { content:counter(s); width:32px; height:32px; border-radius:50%; background:var(--accent-glow); color:var(--accent-dark); font-weight:700; display:grid; place-items:center; margin-bottom:.4rem; }
.steps span { color:var(--muted); font-size:.95rem; }
#report .cta-row { justify-content:flex-start; }

.fold { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:.75rem; }
.fold summary { cursor:pointer; padding:1rem 1.25rem; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; border-radius:var(--radius); }
.fold summary::-webkit-details-marker { display:none; }
.fold summary::after { content:"+"; font-size:1.3rem; color:var(--accent); line-height:1; }
.fold[open] summary::after { content:"−"; }
.fold-body { padding:0 1.25rem 1.1rem; }
.fold-body p { margin:.25rem 0 .75rem; }
.fold.small { margin-top:1.25rem; }
.promise { margin:0; display:grid; grid-template-columns:1fr; gap:.2rem; }
.promise dt { font-weight:600; margin-top:.6rem; }
.promise dd { margin:0; color:var(--muted); }

.site-footer { border-top:1px solid var(--border); padding:2rem 1.25rem; text-align:center; color:var(--muted); font-size:.9rem; }
.footer-links { display:flex; gap:1.25rem; justify-content:center; flex-wrap:wrap; margin-bottom:.5rem; }

@media (max-width: 860px) {
  .podium, .glance { grid-template-columns:1fr; }
  .rcard.gold { order:-1; }
  .steps { grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px) {
  .two-col, .steps { grid-template-columns:1fr; }
  .hero { padding-top:3rem; }
  .nav { gap:.8rem; font-size:.88rem; }
  .rcard.plain { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .btn:hover, .gcard:hover { transform:none; }
}

/* HackerOne embedded submission form (hidden unless it loads) */
.btn-lg { font-size: 1.05rem; padding: .9rem 1.4rem; }
.h1-embed { margin-top: 1.75rem; }
.h1-embed[hidden] { display: none; }
.h1-embed-frame { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.h1-embed-frame iframe { display: block; width: 100%; min-height: 820px; border: 0; }

/* /submit page */
.hero-compact { padding-bottom: 1.5rem; }
.submit-section { padding-top: 1rem; }
.submit-embed { min-height: 420px; padding: .5rem; }
.submit-embed iframe { display: block; width: 100% !important; min-height: 820px; border: 0; }
.submit-fallback { text-align: center; margin-top: 1rem; }
@media (max-width: 640px) { .submit-embed { padding: 0; border-radius: var(--radius); } .submit-section { padding-left: .75rem; padding-right: .75rem; } }