/* Sankalp mockup — Bounteous brand tokens (see bounteous-branding skill). Shared by concept deck + prototype. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --midnight:#0B111C; --indigo:#33139F; --deep-violet:#693AF4; --purple-rain:#853EFF; --electric-blue:#34B4FF;
  --magenta:#D200B5; --aqua:#2EEFEC; --coral:#FF4759;
  --ink:#0F172A; --slate:#475569; --slate-light:#94A3B8; --line:#E5E7EB; --bg:#FAFAFB; --bg-card:#FFFFFF;
  --teal:#0E6F6E;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,sans-serif;font-size:14px;color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,.font-display{font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em;margin:0}
a{color:var(--purple-rain)}
button{font:inherit;cursor:pointer}

.grad-hero{background:
  radial-gradient(ellipse at 18% 5%,rgba(105,58,244,.55) 0%,transparent 60%),
  radial-gradient(ellipse at 88% 95%,rgba(52,180,255,.42) 0%,transparent 55%),
  linear-gradient(135deg,#0B111C 0%,#1A0B5C 50%,#33139F 100%);color:#fff}
.grad-accent{background:linear-gradient(90deg,#853EFF 0%,#34B4FF 100%)}
.grad-text{background:linear-gradient(90deg,#853EFF 0%,#34B4FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.card-dark{background:linear-gradient(160deg,#0B111C 0%,#1F0F66 70%,#33139F 100%);color:#fff;border-radius:1rem}

.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:500;color:var(--slate)}
.grad-hero .eyebrow,.card-dark .eyebrow{color:rgba(255,255,255,.7)}
.muted{color:var(--slate)}
.small{font-size:12px}

.card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:16px}
.kpi{background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.kpi .v{font-family:'Space Grotesk';font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.btn{border:0;border-radius:.5rem;padding:.55rem 1rem;font-weight:600;color:#fff;background:linear-gradient(90deg,#853EFF 0%,#34B4FF 100%)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:.5rem;padding:.5rem .9rem;font-weight:500}
.btn-ghost:hover{background:#F8FAFC}
.btn-ghost.active{background:var(--midnight);color:#fff;border-color:var(--midnight)}
.btn-sm{padding:.3rem .6rem;font-size:12px}
.btn-danger{border:1px solid #FFC2CA;background:#FFE2E5;color:#9F1230;border-radius:.5rem;padding:.5rem .9rem;font-weight:600}

.tab-btn{padding:.55rem 1rem;border-radius:.5rem;font-weight:500;color:var(--slate);background:transparent;border:0}
.tab-btn.active{background:var(--midnight);color:#fff}

.chip{display:inline-block;padding:.18rem .55rem;border-radius:9999px;font-size:.68rem;font-weight:600;white-space:nowrap}
.chip.good{background:#D6FBFA;color:#0E6F6E} .chip.bad{background:#FFE2E5;color:#9F1230}
.chip.watch{background:#FBE4F4;color:#86006F} .chip.info{background:#E6E0FF;color:#33139F}
.chip.blue{background:#DCEEFF;color:#0E5DAA} .chip.slate{background:#F1F5F9;color:#334155}

table.t{width:100%;border-collapse:collapse;font-size:.8rem}
table.t th{position:sticky;top:0;background:#F8FAFC;color:var(--slate);text-align:left;font-weight:600;padding:.5rem;border-bottom:1px solid var(--line)}
table.t td{padding:.5rem;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr:hover td{background:#F8FAFC}
table.t td.num{text-align:right;font-variant-numeric:tabular-nums}

input,select,textarea{font:inherit;border:1px solid var(--line);border-radius:.5rem;padding:.45rem .6rem;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--electric-blue);outline-offset:0;border-color:transparent}
label{font-size:12px;font-weight:600;color:var(--slate);display:block;margin:10px 0 4px}

.demo-ribbon{background:#FBE4F4;color:#86006F;font-size:12px;font-weight:600;text-align:center;padding:5px 10px}