/* 3Ball Network static styles: shared tokens and components */
:root { --bg:#0b0b0f; --panel:#18181b; --panel-2:#202027; --text:#e7e7ea; --muted:#a1a1aa; --primary:#2563eb; --primary-600:#1d4ed8; --accent:#f97316; --border:#27272a; --radius:10px; --radius-lg:14px; --shadow:0 6px 24px rgba(0,0,0,.25) }
body { margin:0; min-height:100vh; color:var(--text); background: radial-gradient(60% 80% at 10% 10%, rgba(37,99,235,0.12), transparent 60%), radial-gradient(50% 70% at 90% 10%, rgba(14,165,233,0.12), transparent 60%), radial-gradient(65% 50% at 50% 120%, rgba(236,72,153,0.10), transparent 60%), var(--bg); isolation:isolate }
body::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 14px), radial-gradient(600px 300px at 85% -10%, rgba(249,115,22,.08), transparent 70%), radial-gradient(500px 240px at -10% 105%, rgba(59,130,246,.08), transparent 65%) }
.container { width:100%; max-width:1200px; margin:0 auto; padding:1rem }
.card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:1.25rem }
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:var(--radius); border:1px solid transparent; font-weight:600; background:var(--primary); color:#fff }
.btn:hover{ background:var(--primary-600) }
.btn.btn-outline{ background:transparent; color:#cfe0ff; border-color:var(--primary) }
.btn.btn-secondary{ background:var(--accent); color:#0b0b0f; box-shadow: 0 4px 12px rgba(249,115,22,.25) }
.input{ width:100%; background:#1f1f26; color:#e7e7ea; border:1px solid var(--border); border-radius:8px; padding:.55rem .75rem }
.sidebar{ background:var(--panel); border-right:1px solid var(--border); width:16rem; min-height:100vh; padding:1.25rem }
.sidebar-link{ display:block; padding:.5rem .6rem; border-radius:.5rem; color:var(--text) }
.sidebar-link:hover{ background:#1f2533; color:#cfe0ff }
.hero{ position:relative; display:grid; place-items:center; min-height:60vh; text-align:center }
.hero.bg{ background:url('/assets/images/background.png') center/cover no-repeat }
.hero .overlay{ position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.25), transparent 45%), rgba(0,0,0,.35) }
.hero .content{ position:relative; z-index:1 }

/* Utilities to match SPA */
.row { display:flex; gap:.75rem; align-items:center }
.stack { display:flex; flex-direction:column; gap:.75rem }

/* Simple responsive grid */
.grid{ display:grid; gap:1rem }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)) }
@media (max-width: 960px){ .grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)) } .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 640px){ .grid-3, .grid-4{ grid-template-columns: 1fr } }

/* Badge and subtle text */
.badge { display:inline-flex; gap:.35rem; align-items:center; border:1px solid var(--border); background:var(--panel-2); padding:.25rem .5rem; border-radius:999px; font-size:.75rem; color:var(--text) }
.card .card-title { font-weight:700; margin-bottom:.5rem }
.card .card-subtle { color:var(--muted); font-size:.9rem }

/* Pills for small icons/tags */
.pill{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background:var(--panel-2); border:1px solid var(--border) }

/* Compact chips used in navbar and filters */
.chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .6rem; border-radius:999px; border:1px solid var(--border); color:var(--text); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow:0 1px 0 rgba(255,255,255,.04) inset }
.chip:hover{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15) }

/* Glassy hero/toolbars */
.glass{ background:linear-gradient(180deg, rgba(24,24,27,.65), rgba(24,24,27,.55)); border:1px solid rgba(63,63,70,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius:var(--radius-lg); box-shadow:var(--shadow) }

/* KPI tiles */
.kpi{ background:#101015; border:1px solid var(--border); border-radius:var(--radius); padding:.75rem; text-align:center }
.kpi .label{ color:var(--muted); font-size:.75rem }
.kpi .value{ font-weight:800; font-size:1.25rem; letter-spacing:.02em }

/* Navbar polish to match SPA */
.navbar{ position:sticky; top:0; backdrop-filter: blur(8px); background: rgba(18,18,26,.7); border-bottom:1px solid var(--border); z-index:50; box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 28px rgba(0,0,0,.35) }
.navbar .inner{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem }

/* Subtle entrance animations */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(8px) } to{ opacity:1; transform:none } }
.stagger > *{ opacity:0; animation: fadeUp .6s ease-out both }
.stagger > *:nth-child(1){ animation-delay:.06s }
.stagger > *:nth-child(2){ animation-delay:.12s }
.stagger > *:nth-child(3){ animation-delay:.18s }
.stagger > *:nth-child(4){ animation-delay:.24s }
.stagger > *:nth-child(5){ animation-delay:.30s }
.stagger > *:nth-child(6){ animation-delay:.36s }

/* Site footer */
.site-footer{ border-top:1px solid var(--border); background: rgba(18,18,26,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding:1.25rem 0; margin-top:2rem; box-shadow: 0 -1px 0 rgba(255,255,255,.03), 0 -6px 24px rgba(0,0,0,.35) }
.footer-grid{ display:grid; grid-template-columns: 1.2fr auto; gap:1rem; align-items:start }
@media (max-width: 720px){ .footer-grid{ grid-template-columns: 1fr; gap:.75rem } }
.footer-brand{ display:grid; gap:.35rem }
.footer-brand .row{ gap:.5rem; align-items:center }
.footer-links{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-content:flex-start }
.footer-links a{ color: var(--muted); text-decoration:none; font-size:.95rem }
.footer-links a:hover{ color:#d4d4d8 }
.footer-legal{ color: var(--muted); font-size:.85rem; text-align:right }
@media (max-width: 720px){ .footer-legal{ text-align:left } }
.stagger > *:nth-child(5){ animation-delay:.30s }
.stagger > *:nth-child(6){ animation-delay:.36s }

/* Marquee band */
.marquee{ overflow:hidden; border:1px solid var(--border); background:var(--panel); border-radius:var(--radius-lg); }
.marquee-inner{ display:flex; gap:2rem; padding:.65rem 1rem; width:max-content; will-change: transform; animation: marquee 28s linear infinite }
@keyframes marquee{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
.marquee .chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .65rem; border-radius:999px; border:1px solid var(--border); background:var(--panel-2); white-space:nowrap }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
	.stagger > *, .marquee-inner{ animation: none !important; opacity:1; transform:none }
}

/* =============================================
	Pro Visual System v2 (parity with SPA styles)
	============================================= */
/* Panels */
.panel { background: var(--panel); border:1px solid var(--border); border-radius: var(--radius-lg); padding:1.25rem; box-shadow: var(--shadow); }
.panel-alt { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); padding:1.25rem; box-shadow: 0 4px 18px -4px rgba(0,0,0,.55); }

/* Dashboard hero */
.dashboard-hero { position:relative; overflow:hidden; border-bottom:1px solid var(--border); background: radial-gradient(circle at 15% 15%, rgba(59,130,246,.18), transparent 55%), radial-gradient(circle at 85% 10%, rgba(249,115,22,.18), transparent 60%), linear-gradient(180deg, rgba(24,24,27,.85), rgba(24,24,27,.55)); }
.dashboard-hero::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 14px); opacity:.35; pointer-events:none; }
.dashboard-hero-inner { position:relative; max-width:1200px; margin:0 auto; padding:2.5rem 1.25rem 2rem; display:flex; gap:2rem; align-items:flex-start; }
@media (max-width: 860px){ .dashboard-hero-inner { flex-direction:column; padding:2rem 1rem 1.75rem; } }

/* Section heading */
.section-heading { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:.5rem; }
.section-heading::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.25), transparent); }

/* Metric grid + tiles */
.metric-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }
.metric { position:relative; padding:1rem .9rem 1.05rem; background:#101015; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.metric::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 60%); opacity:.15; }
.metric-value { font-size:1.65rem; font-weight:800; letter-spacing:.02em; line-height:1; }
.metric-label { font-size:.65rem; letter-spacing:.2em; font-weight:600; color:var(--muted); margin-top:.4rem; }

/* Chart / analytic cards */
.chart-card { background:#111115; border:1px solid #26262c; border-radius: var(--radius-lg); padding:1rem 1.15rem 1.05rem; box-shadow:0 8px 28px -8px rgba(0,0,0,.65); position:relative; }
.chart-card h3 { margin:0 0 .65rem; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.chart-placeholder { height:5.5rem; border:1px dashed #333; border-radius: .75rem; display:grid; place-items:center; font-size:.75rem; color:#555; }

/* Gradient button */
.btn-gradient { background: linear-gradient(90deg, #2563eb, #f97316); border:none; position:relative; color:#fff; }
.btn-gradient:hover { filter:brightness(1.1); }

/* Divider */
.divider { height:1px; background:linear-gradient(90deg, rgba(255,255,255,.18), transparent); margin:1.5rem 0; border:0; }

/* Density helpers */
.tight-grid { --gap:.65rem; display:grid; gap:var(--gap); grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.surface-spot { position:relative; background:#141418; border:1px solid #26262d; border-radius: var(--radius); padding:1rem .9rem; }
.surface-spot::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 25%, rgba(255,255,255,.18), transparent 65%); opacity:.12; pointer-events:none; }

/* Animations */
@keyframes pulseMetric { 0%,100% { box-shadow:0 0 0 0 rgba(249,115,22,.0) } 50% { box-shadow:0 0 0 4px rgba(249,115,22,.06) } }
.pulse-once { animation:pulseMetric 2.4s ease-in-out 1; }

/* Light theme adaptations (optional if light mode is toggled) */
body.light .metric { background:#fff; border-color:var(--border); }
body.light .chart-card { background:#fff; border-color:var(--border); }
body.light .dashboard-hero { background: radial-gradient(circle at 15% 15%, rgba(37,99,235,0.18), transparent 55%), radial-gradient(circle at 85% 10%, rgba(249,115,22,0.20), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65)); }

/* =============================================
	 Visual Enhancements v2.1 (additive utilities)
	 ============================================= */
.gradient-text{ background:linear-gradient(90deg,#fff,#cbd5e1); -webkit-background-clip:text; background-clip:text; color:transparent }
.hover-lift{ transition:transform .25s ease, box-shadow .25s ease }
.hover-lift:hover{ transform:translateY(-4px); box-shadow:0 10px 32px -6px rgba(0,0,0,.55) }
.panel-hover{ position:relative; overflow:hidden }
.panel-hover::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 15%, rgba(255,255,255,.18), transparent 65%); opacity:.12; pointer-events:none; transition:opacity .4s ease }
.panel-hover:hover::after{ opacity:.25 }

/* Ring metric tile */
.ring-tile{ position:relative; display:grid; place-items:center; width:132px; aspect-ratio:1; border-radius:50%; background:conic-gradient(from 270deg, #2563eb 0deg, #2563eb 330deg, #202027 330deg 360deg); border:3px solid #111; box-shadow:0 8px 28px -6px rgba(0,0,0,.55); }
.ring-tile::before{ content:""; position:absolute; inset:6px; border-radius:50%; background:linear-gradient(180deg,#18181b,#111113); box-shadow:inset 0 2px 4px rgba(255,255,255,.04), inset 0 0 0 1px rgba(255,255,255,.06); }
.ring-tile-value{ position:relative; font-size:2.85rem; font-weight:900; letter-spacing:.01em; background:linear-gradient(180deg,#fff,#d1d5db); -webkit-background-clip:text; background-clip:text; color:transparent }
.ring-tile-label{ position:absolute; bottom:14px; font-size:.55rem; font-weight:700; letter-spacing:.22em; color:#94a3b8 }

/* Mini bars (compact timeline/sequence) */
.bars-mini{ display:flex; align-items:flex-end; gap:3px; height:112px }
.bars-mini .bar{ width:8px; border-radius:3px; background:#334155; position:relative; overflow:hidden }
.bars-mini .bar::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,#3b82f6,#0f172a); opacity:.9 }
.bars-mini .bar[data-accent="1"]::after{ background:linear-gradient(180deg,#f97316,#7a2e04) }

/* Radial progress badge (fallback placeholder) */
.radial-badge{ --size:70px; width:var(--size); height:var(--size); position:relative; display:grid; place-items:center; font-weight:700; font-size:1.05rem; color:#fff; background:conic-gradient(#f97316 var(--pct,75%), #26262c 0); border-radius:50%; box-shadow:0 4px 16px -4px rgba(0,0,0,.6); }
.radial-badge::before{ content:""; position:absolute; inset:6px; background:#111114; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.radial-badge span{ position:relative; z-index:1 }

/* Compact link */
.micro-link{ font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); text-decoration:none }
.micro-link:hover{ color:#fff }

/* Scroll to top button */
.scroll-top-btn{ position:fixed; right:1rem; bottom:1rem; z-index:60; background:#1f2937; border:1px solid #334155; color:#fff; padding:.55rem .65rem; border-radius:10px; font-size:.65rem; letter-spacing:.15em; cursor:pointer; box-shadow:0 6px 20px -6px rgba(0,0,0,.6); opacity:.85; transition:background .25s, opacity .25s }
.scroll-top-btn:hover{ background:#2563eb; opacity:1 }

/* =============================
	Pro Visual System v3 (static)
	============================= */
:root { --surface-0: var(--bg); --surface-1:#141418; --surface-2:#18181c; --surface-3:#1f1f25; --gradient-accent: linear-gradient(135deg,#2563eb 0%,#f97316 100%); --gradient-soft: linear-gradient(135deg,rgba(37,99,235,.35),rgba(249,115,22,.25)); --focus-ring:0 0 0 3px rgba(59,130,246,.45) }
a:focus-visible, button:focus-visible, .chip:focus-visible, .panel:focus-visible, .panel-alt:focus-visible { outline:none; box-shadow: var(--focus-ring) }
.border-gradient{ position:relative; border:1px solid transparent; background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--gradient-soft) border-box; border-radius:var(--radius-lg) }
.tile-grid{ display:grid; gap:.85rem; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)) }
.tile{ position:relative; padding:.85rem .9rem .9rem; background:var(--surface-1); border:1px solid #26262d; border-radius:12px; overflow:hidden }
.tile::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.14), transparent 65%); opacity:.18; pointer-events:none }
.tile h4{ margin:0 0 .45rem; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--muted) }
.tile-value{ font-size:1.6rem; font-weight:800; letter-spacing:.01em; line-height:1 }
.tile-sub{ font-size:.65rem; letter-spacing:.15em; color:var(--muted); margin-top:.4rem; font-weight:600 }
.progress{ --pct:50; position:relative; height:6px; border-radius:4px; background:#222; overflow:hidden }
.progress span{ position:absolute; inset:0; background:linear-gradient(90deg,#2563eb,#f97316); width:var(--pct) }
.timeline{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem }
.timeline-item{ position:relative; padding-left:1.25rem }
.timeline-item::before{ content:""; position:absolute; left:.3rem; top:.25rem; width:8px; height:8px; border-radius:50%; background:#2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.25) }
.timeline-item[data-accent="orange"]::before{ background:#f97316; box-shadow:0 0 0 4px rgba(249,115,22,.25) }
.timeline-item-title{ font-size:.8rem; font-weight:600; letter-spacing:.02em }
.timeline-item-meta{ font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:.15rem }
.sparkline{ height:46px; display:flex; align-items:flex-end; gap:2px }
.sparkline span{ width:6px; background:#334155; border-radius:2px; position:relative; overflow:hidden }
.sparkline span::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,#2563eb,#0f172a); opacity:.9 }
@keyframes heroPulse{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.15) } }
.hero-animate{ animation: heroPulse 6s ease-in-out infinite }
@media (prefers-reduced-motion: reduce){ .hero-animate{ animation:none } }
.elevate-hover{ transition: box-shadow .3s ease, transform .25s ease }
.elevate-hover:hover{ box-shadow:0 14px 40px -10px rgba(0,0,0,.65); transform:translateY(-4px) }
.badge-strip{ display:flex; flex-wrap:wrap; gap:.4rem }
.panel-fade{ background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-lg); padding:1.25rem; position:relative; overflow:hidden }
.panel-fade::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 25%, rgba(255,255,255,.14), transparent 65%); opacity:.18; pointer-events:none }
body.light .tile{ background:#fff; border-color: var(--border) }
body.light .panel-fade{ background:linear-gradient(160deg,#fff,#fafafa) }
.gap-tight{ gap:.35rem }
.gap-loose{ gap:1.5rem }

/* =============================================
	Pro Visual System v4 (static additive)
	Mirrors SPA v4 utilities for visual parity
	============================================= */
.grid-bg{ position:relative }
.grid-bg::before{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) 0 0/ 100% 34px, linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0/ 34px 100%; mask:radial-gradient(circle at 35% 25%, rgba(255,255,255,.55), transparent 65%); opacity:.25; pointer-events:none }
.glow-accent{ position:relative }
.glow-accent::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; background:radial-gradient(circle at 70% 30%, rgba(37,99,235,.35), rgba(249,115,22,.25), transparent 70%); filter:blur(22px); opacity:.55; z-index:-1; pointer-events:none }
.chip[data-active="true"]{ background:linear-gradient(120deg,#2563eb,#f97316); color:#fff; border-color:#2563eb; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 6px 18px -6px rgba(0,0,0,.65) }
.panel-ribbon{ position:relative }
.panel-ribbon::before{ content:attr(data-ribbon); position:absolute; top:0; left:0; padding:.35rem .6rem; font-size:.55rem; letter-spacing:.18em; font-weight:700; text-transform:uppercase; background:linear-gradient(90deg,#2563eb,#f97316); color:#fff; border-radius:0 0 .5rem 0; box-shadow:0 4px 10px -4px rgba(0,0,0,.5) }
.outline-gradient{ position:relative; border:1px solid transparent; background:linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(135deg, rgba(37,99,235,.65), rgba(249,115,22,.6)) border-box; border-radius:var(--radius-lg) }
.toolbar{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.toolbar.tight{ gap:.35rem }
@keyframes headingSheen{ 0%,12%{ background-position: -120% 50% } 20%{ background-position: 120% 50% } 100%{ background-position: 120% 50% } }
.heading-sheen{ background:linear-gradient(110deg,#fff 0%,#fff 35%,#93c5fd 45%,#f97316 55%,#fff 65%,#fff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation: headingSheen 9s ease-in-out infinite }
@media (prefers-reduced-motion: reduce){ .heading-sheen{ animation:none; background:linear-gradient(90deg,#fff,#cbd5e1) } }
.hero-meta{ font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--muted) }
.chip.success{ border-color:#22c55e; color:#22c55e }
.chip.warning{ border-color:#f59e0b; color:#f59e0b }
.chip.danger{ border-color:#ef4444; color:#ef4444 }
.outline-gradient:focus-visible, .panel-ribbon:focus-visible{ box-shadow:0 0 0 3px rgba(249,115,22,.55) }
body.light .chip[data-active="true"]{ background:linear-gradient(120deg,#2563eb,#f97316); color:#fff }
body.light .outline-gradient{ background:linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(135deg, rgba(37,99,235,.55), rgba(249,115,22,.5)) border-box }
/* End v4 additions */

@media (max-width:720px){
	.ring-tile{ width:110px }
	.ring-tile-value{ font-size:2.35rem }
}

/* =============================================
	 Demo profile polish: headings, badges, mobile
	 ============================================= */
/* Global hero heading responsiveness across demo profiles */
@media (max-width: 400px){
	.dashboard-hero h1{ font-size:2.4rem !important; line-height:1.08 !important }
}
@media (max-width: 340px){
	.dashboard-hero h1{ font-size:1.75rem !important }
}
/* Normalize section headings inside cards/panels */
.card .card-title{ font-weight:700; margin-bottom:.6rem; font-size:1rem; letter-spacing:.02em }
.glass h2, .panel h2, .panel-alt h2{ font-size:1rem; font-weight:700; margin:0 0 .5rem; letter-spacing:.02em }

/* Consistent badge sizes in Game Log-like tables */
#gamelog .chip,
#gamelog .pill,
#record .chip,
#record .pill{ font-size:.7rem; line-height:1; padding:.25rem .5rem; border-radius:999px; min-height:24px; display:inline-flex; align-items:center; justify-content:center }
#record .pill, #gamelog .pill{ width:auto; min-width:24px; height:24px; background:var(--panel-2); border:1px solid var(--border) }

/* Tighter mobile spacing and chip sizing */
@media (max-width: 640px){
	.dashboard-hero-inner{ gap:1rem; padding:1.5rem .9rem 1.25rem }
	.container{ padding:.75rem }
	.metric-grid{ gap:.75rem }
	.panel, .panel-alt, .glass{ padding:.9rem .85rem }
	.row{ gap:.5rem }
	.stack{ gap:.5rem }
	.chip{ padding:.3rem .5rem; gap:.35rem }
	.profile-subnav .container{ gap:.35rem }
	.profile-subnav .chip{ padding:.3rem .5rem; font-size:.7rem }
	#gamelog table th, #gamelog table td,
	#record table th, #record table td{ padding:6px 6px }
}