/* ===========================================================
   Capio Commerce — Base + Components (light theme)
   =========================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text-1);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); letter-spacing:-.02em;}
.font-mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
a{color:inherit; text-decoration:none}
::selection{background:var(--mint); color:#04120A}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:8px}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;
}

/* Buttons */
.btn{border-radius:10px; font-weight:600; padding:.65rem 1.4rem; border:1px solid transparent; transition:transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease); font-family:var(--font-body);}
.btn:active{transform:scale(.97)}
.btn-brand{background:var(--primary); color:#fff;}
.btn-brand:hover{background:var(--primary-deep); color:#fff;}
html[data-theme="dark"] .btn-brand:hover{ color:#04120A; } /* primary-deep is mid-bright in dark mode; dark text keeps contrast on hover */
.btn-outline-light{border-color:var(--border-strong); color:var(--text-1); background:transparent;}
.btn-outline-light:hover{background:var(--bg-hover); color:var(--text-1); border-color:var(--text-3);}
.btn-ghost{background:transparent; color:var(--text-2); border:none;}
.btn-ghost:hover{color:var(--text-1)}
.btn-danger-soft{background:var(--loss-soft); color:var(--loss); border:1px solid rgba(229,72,77,.25)}
.btn-danger-soft:hover{background:rgba(229,72,77,.18); color:var(--loss)}
.btn-sm{padding:.4rem 1rem; font-size:.85rem;}
.btn-block{width:100%}

/* Nav */
.capio-nav{position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(247,248,245,.85); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, background .3s;}
.capio-nav.scrolled{border-color:var(--border); background:rgba(247,248,245,.96);}
[data-theme="dark"] .capio-nav{background:rgba(10,13,15,.82);}
[data-theme="dark"] .capio-nav.scrolled{background:rgba(10,13,15,.95);}
.capio-logo{display:flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem;}
.nav-link-c{color:var(--text-2); font-weight:500; font-size:.92rem; padding:.5rem .9rem !important; transition:color .2s}
.nav-link-c:hover, .nav-link-c.active{color:var(--text-1)}

/* Surfaces */
.surface{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-1);}
.surface-2{background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--r-md);}
.hairline-top{border-top:1px solid var(--border)}
.hairline-bottom{border-bottom:1px solid var(--border)}
.text-muted-c{color:var(--text-2) !important}
.text-faint{color:var(--text-3) !important}
.pill{display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--border); border-radius:999px; padding:.3rem .8rem; font-size:.78rem; color:var(--text-2)}
.up{color:var(--profit)}
.down{color:var(--loss)}
.badge-up{background:var(--profit-soft); color:var(--profit); border-radius:6px; padding:.15rem .5rem; font-size:.78rem; font-family:var(--font-mono)}
.badge-down{background:var(--loss-soft); color:var(--loss); border-radius:6px; padding:.15rem .5rem; font-size:.78rem; font-family:var(--font-mono)}
.badge-warn{background:var(--warning-soft); color:var(--warning-text); border-radius:6px; padding:.15rem .5rem; font-size:.78rem; font-family:var(--font-mono)}
.badge-info{background:var(--info-soft); color:var(--info); border-radius:6px; padding:.15rem .5rem; font-size:.78rem; font-family:var(--font-mono)}
.badge-neutral{background:var(--bg-subtle); color:var(--text-2); border:1px solid var(--border); border-radius:6px; padding:.15rem .5rem; font-size:.78rem;}

/* Inputs */
.form-control-c, .form-select-c{background:var(--bg-card); border:1px solid var(--border-strong); color:var(--text-1); border-radius:var(--r-sm); padding:.68rem .9rem; width:100%; font-size:.95rem; transition:border-color .2s;}
.form-control-c::placeholder{color:var(--text-3)}
.form-control-c:focus, .form-select-c:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);}
.form-label-c{color:var(--text-2); font-size:.85rem; margin-bottom:.4rem; display:block; font-weight:500}

/* Ticker */
.ticker-wrap{border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; white-space:nowrap; background:var(--bg-card);}
.ticker-track{display:inline-flex; animation:ticker-scroll 38s linear infinite;}
.ticker-wrap:hover .ticker-track{animation-play-state:paused}
@keyframes ticker-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item{display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.75rem; font-family:var(--font-mono); font-size:.85rem; border-right:1px solid var(--border); color:var(--text-2)}
.ticker-item b{color:var(--text-1); font-weight:600}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

.ambient{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
.ambient::before{content:''; position:absolute; top:-120px; left:-80px; width:360px; height:360px; background:var(--primary); opacity:.06; border-radius:50%; filter:blur(90px);}

/* App shell */
.app-shell{display:flex; min-height:100vh}
.app-sidebar{width:236px; flex:0 0 236px; background:var(--bg-card); border-right:1px solid var(--border); position:fixed; top:0; bottom:0; left:0; z-index:900; display:flex; flex-direction:column; transition:transform .25s var(--ease);}
.side-scroll{flex:1; overflow-y:auto; padding-top:.25rem}
.side-foot{padding:1rem; border-top:1px solid var(--border); flex:0 0 auto;}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(10,13,15,.4); z-index:890; opacity:0; pointer-events:none; transition:opacity .25s var(--ease);}
.sidebar-backdrop.show{opacity:1; pointer-events:auto;}
@media (min-width:992px){ .sidebar-backdrop{display:none !important;} }
.app-main{margin-left:236px; flex:1; min-height:100vh; display:flex; flex-direction:column;}
.side-link{display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem; border-radius:var(--r-sm); color:var(--text-2); font-size:.9rem; font-weight:500; margin:0 .6rem .1rem;}
.side-link:hover{background:var(--bg-hover); color:var(--text-1)}
.side-link.active{background:var(--primary-soft); color:var(--primary-deep)}
.side-link svg{width:18px; height:18px; flex:0 0 18px}
.topbar{position:sticky; top:0; z-index:800; background:rgba(247,248,245,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); padding:.85rem 1.5rem;}
[data-theme="dark"] .topbar{background:rgba(10,13,15,.9);}
.stat-tile{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.25rem; box-shadow:var(--shadow-1);}
.table-c{width:100%; border-collapse:collapse; font-size:.88rem}
.table-c th{text-align:left; color:var(--text-3); font-weight:500; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; padding:.6rem .9rem; border-bottom:1px solid var(--border)}
.table-c td{padding:.8rem .9rem; border-bottom:1px solid var(--border); vertical-align:middle}
.table-c tbody tr{transition:background .15s}
.table-c tbody tr:hover{background:var(--bg-hover)}
.avatar-c{width:34px; height:34px; border-radius:50%; background:var(--primary-deep); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; font-family:var(--font-display)}
.modal-backdrop-c{position:fixed; inset:0; background:rgba(16,20,18,.45); z-index:1500; display:none; align-items:center; justify-content:center; padding:1rem;}
.modal-backdrop-c.open{display:flex}
.modal-c{background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-lg); width:100%; max-width:480px; padding:1.5rem; box-shadow:var(--shadow-2); max-height:90vh; overflow-y:auto;}
.toast-c{position:fixed; bottom:1.25rem; right:1.25rem; z-index:2000; background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:var(--r-md); padding:.85rem 1.1rem; color:var(--text-1); font-size:.9rem; box-shadow:var(--shadow-2); transform:translateY(16px); opacity:0; transition:all .3s var(--ease);}
.toast-c.show{transform:translateY(0); opacity:1}

@media (max-width: 991px){
  .app-sidebar{transform:translateX(-100%)}
  .app-sidebar.open{transform:translateX(0)}
  .app-main{margin-left:0; padding-bottom:64px;}
}

.view{display:none; animation:fadeIn .3s var(--ease);}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

.seg{display:inline-flex; background:var(--bg-subtle); border:1px solid var(--border); border-radius:999px; padding:3px;}
.seg button{border:none; background:transparent; color:var(--text-2); font-size:.8rem; font-weight:600; padding:.38rem .9rem; border-radius:999px; transition:all .2s}
.seg button.active{background:var(--primary); color:#fff}
.seg.seg-sell button.active{background:var(--loss)}
.seg-longshort button[data-side="short"].active{background:var(--loss)}

.section-eyebrow{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--primary-deep)}

/* ---- Bottom nav (mobile, user app) ---- */
.bottom-nav{display:none}
@media (max-width: 991px){
  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:950;
    background:var(--bg-card); border-top:1px solid var(--border); padding:.4rem .2rem calc(.4rem + env(safe-area-inset-bottom));
  }
  .bottom-nav a{flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; color:var(--text-3); font-size:.65rem; padding:.3rem 0; border-radius:8px;}
  .bottom-nav a.active{color:var(--primary-deep)}
  .bottom-nav svg{width:20px; height:20px}
}

/* ---- Demo mode banner ---- */
.demo-banner{background:var(--warning-soft); color:var(--warning-text); text-align:center; font-size:.78rem; font-weight:600; padding:.4rem; letter-spacing:.03em;}
.account-switch{display:inline-flex; background:var(--bg-subtle); border:1px solid var(--border); border-radius:999px; padding:3px;}
.account-switch button{border:none; background:transparent; color:var(--text-2); font-size:.75rem; font-weight:700; padding:.3rem .8rem; border-radius:999px; letter-spacing:.03em;}
.account-switch button.active{background:var(--text-1); color:#fff}
.account-switch button.active.demo-active{background:var(--warning);}

/* ---- status dots ---- */
.status-dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:.35rem;}
.status-dot.ok{background:var(--profit)}
.status-dot.bad{background:var(--loss)}
.status-dot.warn{background:var(--warning)}

/* Sparkline */
.mini-chart{height:44px; width:100%;}
.qr-thumb{width:64px; height:64px; flex:0 0 auto; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--bg-subtle); display:flex; align-items:center; justify-content:center; font-size:.65rem; color:var(--text-3); overflow:hidden;}
.qr-thumb img{width:100%; height:100%; object-fit:contain;}

/* Order ticket */
.order-row{display:flex; justify-content:space-between; padding:.5rem 0; font-size:.85rem; color:var(--text-2)}
.order-row b{color:var(--text-1); font-family:var(--font-mono); font-weight:600}

.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%; text-align:left; background:transparent; border:none; color:var(--text-1); padding:1.1rem 0; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:1rem;}
.faq-q .plus{transition:transform .25s var(--ease); color:var(--text-3); font-size:1.2rem;}
.faq-item.open .faq-q .plus{transform:rotate(45deg); color:var(--primary)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s var(--ease);}
.faq-a p{color:var(--text-2); font-size:.9rem; padding-bottom:1.1rem; margin:0; max-width:700px;}

.cmp-table{width:100%; border-collapse:collapse;}
.cmp-table th, .cmp-table td{padding:.9rem 1rem; border-bottom:1px solid var(--border); font-size:.9rem;}
.cmp-table th{color:var(--text-2); font-weight:500; text-align:left}
.cmp-table td.brand-col{color:var(--primary-deep); font-weight:600}
html[data-theme="dark"] .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); }