/* AlphaBet — design tokens & components (dark premium fintech) */
:root{
  --bg:#0B0D11; --surface:#14171E; --surface2:#1B1F28; --border:#262B36;
  --gold1:#C9A24B; --gold2:#E6C26E; --platinum:#C7CCD1;
  --text:#F4F6F8; --muted:#8A93A2; --green:#22C55E; --red:#EF4444;
}
*{font-family:'Inter',sans-serif;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);margin:0;}
a{text-decoration:none;color:inherit;}
.surface{background:var(--surface);border:1px solid var(--border);}
.surface2{background:var(--surface2);}
.muted{color:var(--muted);}
.gold-text{background:linear-gradient(95deg,var(--gold1),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.gold-btn{background:linear-gradient(95deg,var(--gold1),var(--gold2));color:#0B0D11;font-weight:600;border:none;cursor:pointer;}
.gold-btn:hover{filter:brightness(1.08);}
.border-soft{border:1px solid var(--border);}
.btn-ghost{background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer;}
.btn-ghost:hover{border-color:var(--gold1);}

.nav-item{transition:all .18s;cursor:pointer;border-left:2px solid transparent;}
.nav-item:hover{background:var(--surface2);}
.nav-item.active{background:linear-gradient(95deg,rgba(201,162,75,.16),rgba(230,194,110,.05));border-left:2px solid var(--gold1);color:var(--gold2);}

.seg{cursor:pointer;transition:all .18s;}
.seg.active{background:linear-gradient(95deg,var(--gold1),var(--gold2));color:#0B0D11;font-weight:600;}

.chip{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600;display:inline-flex;align-items:center;gap:4px;}
.soon{background:rgba(138,147,162,.15);color:var(--muted);border:1px solid var(--border);}
.live{background:rgba(34,197,94,.12);color:var(--green);}
.demo{background:rgba(201,162,75,.14);color:var(--gold2);}
.real{background:rgba(34,197,94,.14);color:var(--green);}
.profit{color:var(--green);}
.loss{color:var(--red);}

table{border-collapse:collapse;width:100%;}
th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;font-weight:600;padding:10px 14px;}
td{padding:12px 14px;border-top:1px solid var(--border);font-size:14px;}

input,select{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px 12px;outline:none;width:100%;font-size:14px;}
input:focus,select:focus{border-color:var(--gold1);}
label{font-size:12px;color:var(--muted);}

.toggle{width:46px;height:26px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);position:relative;cursor:pointer;transition:.2s;flex-shrink:0;}
.toggle.on{background:linear-gradient(95deg,var(--gold1),var(--gold2));}
.toggle .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;}
.toggle.on .knob{left:22px;}

.scrollbar::-webkit-scrollbar{width:8px;height:8px;}
.scrollbar::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}

/* layout */
.shell{display:flex;height:calc(100vh - 64px);}
.sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;padding:12px 0;overflow-y:auto;}
.main{flex:1;overflow-y:auto;padding:24px;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:64px;border-bottom:1px solid var(--border);background:var(--surface);}
.menu-btn{display:none;background:none;border:none;color:var(--text);font-size:22px;cursor:pointer;}

/* mobile */
@media (max-width:860px){
  .sidebar{position:fixed;top:64px;left:0;height:calc(100vh - 64px);z-index:40;transform:translateX(-100%);transition:transform .2s;}
  .sidebar.open{transform:translateX(0);}
  .menu-btn{display:block;}
  .main{padding:16px;}
  .grid-collapse{grid-template-columns:1fr !important;}
  .scrim{position:fixed;inset:64px 0 0 0;background:rgba(0,0,0,.5);z-index:30;display:none;}
  .scrim.show{display:block;}
}

/* ---- self-contained utilities (replaces Tailwind CDN; production-safe) ---- */
.flex{display:flex;} .inline{display:inline;} .hidden{display:none;}
.flex-1{flex:1 1 0%;} .flex-col{flex-direction:column;} .flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;} .items-end{align-items:flex-end;}
.justify-between{justify-content:space-between;} .justify-center{justify-content:center;}
.grid{display:grid;}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.col-span-2{grid-column:span 2/span 2;}
.gap-1{gap:.25rem;} .gap-2{gap:.5rem;} .gap-3{gap:.75rem;} .gap-4{gap:1rem;}
.space-y-2>*+*{margin-top:.5rem;} .space-y-3>*+*{margin-top:.75rem;}
.overflow-hidden{overflow:hidden;} .overflow-x-auto{overflow-x:auto;}
.min-h-screen{min-height:100vh;}
.w-full{width:100%;} .w-9{width:2.25rem;} .h-9{height:2.25rem;} .h-24{height:6rem;} .h-1\.5{height:.375rem;}
.mt-auto{margin-top:auto;}
.p-1{padding:.25rem;} .p-3{padding:.75rem;} .p-4{padding:1rem;} .p-5{padding:1.25rem;} .p-6{padding:1.5rem;}
.px-2{padding-left:.5rem;padding-right:.5rem;} .px-3{padding-left:.75rem;padding-right:.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;} .px-5{padding-left:1.25rem;padding-right:1.25rem;}
.py-1{padding-top:.25rem;padding-bottom:.25rem;} .py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem;} .py-3{padding-top:.75rem;padding-bottom:.75rem;}
.mb-1{margin-bottom:.25rem;} .mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:.75rem;}
.mb-4{margin-bottom:1rem;} .mb-5{margin-bottom:1.25rem;} .mb-6{margin-bottom:1.5rem;}
.mt-1{margin-top:.25rem;} .mt-2{margin-top:.5rem;} .mt-3{margin-top:.75rem;} .mt-4{margin-top:1rem;} .mt-5{margin-top:1.25rem;}
.my-4{margin-top:1rem;margin-bottom:1rem;}
.rounded{border-radius:.25rem;} .rounded-md{border-radius:.375rem;} .rounded-lg{border-radius:.5rem;}
.rounded-xl{border-radius:.75rem;} .rounded-2xl{border-radius:1rem;} .rounded-full{border-radius:9999px;}
.text-xs{font-size:.75rem;line-height:1rem;} .text-sm{font-size:.875rem;line-height:1.25rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;} .text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-center{text-align:center;} .text-right{text-align:right;}
.font-normal{font-weight:400;} .font-medium{font-weight:500;} .font-semibold{font-weight:600;} .font-bold{font-weight:700;}
.leading-none{line-height:1;} .leading-relaxed{line-height:1.625;}
.cursor-pointer{cursor:pointer;}
@media (min-width:640px){ .sm\:inline{display:inline;} }