*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg0:#0d0f14;--bg1:#13161e;--bg2:#1a1e28;--bg3:#222736;
  --border:#2a2f3d;--border2:#3a4055;
  --t1:#e8eaf0;--t2:#8b91a8;--t3:#555d78;
  --green:#00d68f;--red:#ff4d6a;--blue:#4d9fff;--amber:#ffb347;--purple:#9b59ff;
  --brand:#1f7bef;        /* logo royal blue (matches the AlphaBotix logo ring) */
  --brand-deep:#0d67e6;
  --gdim:rgba(0,214,143,0.13);--rdim:rgba(255,77,106,0.13);--bdim:rgba(77,159,255,0.1);
  --topbar-h:64px;
  --nav-h:52px;
}
  
body{  
  font-family:system-ui,-apple-system,sans-serif;
  background:var(--bg0);color:var(--t1);
  font-size:13px;overflow-x:hidden;min-height:100vh;
}

/* ════════════════════════════════════════
   TOPBAR & NAV 
════════════════════════════════════════ */
.topbar{
  position:sticky;
  top:0;
  z-index:200;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  margin: 0;
  background:var(--bg1);
  border-bottom:1px solid var(--border);
}
.topbar-left{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.logo-text{font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--brand)}

.nav{
  position:sticky;
  top:var(--topbar-h);
  z-index:199;
  height:var(--nav-h);
  margin: 0;
  display:flex;
  align-items:stretch;
  background:var(--bg1);
  border-bottom:2px solid var(--border);
}
.nav-tab{
  height:100%;
  padding:0 20px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  border:none;
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  color:var(--t2);
  background:none;
  font-family:inherit;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
  transition:color .15s, border-color .15s;
}
.nav-tab:hover{color:var(--t1)}
.nav-tab.active{color:var(--t1);border-bottom-color:var(--blue)}
.nav-spacer{flex:1}

/* ════════════════════════════════════════
   PAGE LAYOUT
════════════════════════════════════════ */
.page{padding:18px 20px;max-width:960px;margin:0 auto}

#main-app{
  background:
    radial-gradient(ellipse at 15% 50%,rgba(0,214,143,.04) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 20%,rgba(77,159,255,.07) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 80%,rgba(155,89,255,.04) 0%,transparent 50%),
    linear-gradient(160deg,#0a0d13 0%,#0d0f18 40%,#0a1018 100%);
  min-height:100vh;
  position:relative;
}
#main-app::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(77,159,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,159,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  pointer-events:none;z-index:0;
}
#main-app>*{position:relative;z-index:1}
#main-app .topbar, #main-app .nav{z-index:200}

/* ════════════════════════════════════════
   RESTORED MISSING COMPONENTS (Centered Auth, Cards, etc.)
════════════════════════════════════════ */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:radial-gradient(ellipse at 60% 20%,rgba(77,159,255,.06) 0%,transparent 60%)}

.hidden{display:none!important}
.card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:16px}
.stat-card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.stat-value{font-size:24px;font-weight:600;letter-spacing:-.5px;margin-top:4px}
.bot-card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:16px 18px;transition:border-color .2s}
.bot-card.running{border-color:rgba(0,214,143,.3)}
.bot-card.paused{border-color:rgba(255,179,71,.2)}
.user-row{display:flex;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
.user-row:last-child{border-bottom:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:7px;border:1px solid var(--border2);background:transparent;color:var(--t1);font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s}
.btn:hover:not(:disabled){background:var(--bg3)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover:not(:disabled){opacity:.88;background:var(--blue)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-danger{background:var(--rdim);color:var(--red);border-color:rgba(255,77,106,.4)}
.btn-danger:hover:not(:disabled){background:rgba(255,77,106,.22)}
.btn-ghost{border-color:transparent;color:var(--t2)}

input,select,textarea{font-family:inherit;font-size:13px;color:var(--t1);background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:8px 11px;width:100%;transition:border .15s}
input::placeholder,textarea::placeholder{color:var(--t3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,159,255,.12)}
select option{background:var(--bg2)}
label.field,div.field{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--t2);font-weight:600;text-transform:uppercase;letter-spacing:.5px}

.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:4px 10px;border-radius:20px;font-weight:600;letter-spacing:.2px}
.badge-green{background:var(--gdim);color:var(--green)}
.badge-blue{background:var(--bdim);color:var(--blue)}
.badge-amber{background:rgba(255,179,71,.15);color:var(--amber)}
.badge-red{background:var(--rdim);color:var(--red)}
.badge-purple{background:rgba(155,89,255,.15);color:var(--purple)}
.ind-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:3px 8px;border-radius:20px;background:var(--bg3);color:var(--t2);margin-right:4px}
.funds-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.funds-ctl-label{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px}
.funds-ctl .btn{padding:6px 10px}
.funds-input{width:110px;flex:0 0 auto;text-align:right}

.info-banner{background:rgba(77,159,255,.07);border:1px solid rgba(77,159,255,.2);border-radius:8px;padding:11px 14px;font-size:12px;color:var(--blue);line-height:1.6;margin-bottom:14px}
.warn-banner{background:rgba(255,77,106,.07);border:1px solid rgba(255,77,106,.2);border-radius:8px;padding:11px 14px;font-size:12px;color:var(--red);line-height:1.6;margin-bottom:14px}

.pup{color:var(--green)}.pdn{color:var(--red)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.slbl{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px}
.divider{border:none;border-top:1px solid var(--border);margin:14px 0}
.log-box{font-family:'SF Mono',Menlo,monospace;font-size:10px;background:var(--bg0);border-radius:6px;padding:9px 11px;max-height:110px;overflow-y:auto;color:var(--t2);line-height:1.7;border:1px solid var(--border)}

/* ════════════════════════════════════════
   TABLES & MODALS
════════════════════════════════════════ */
.table-wrap{width:100%;overflow-x:auto;margin-top:10px}
.data-table{width:100%;border-collapse:collapse;text-align:left}
.data-table th{padding:10px;color:var(--t2);font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
.data-table td{padding:12px 10px;border-bottom:1px solid var(--border);font-size:13px}

.toast-wrap{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:12px 18px;font-size:13px;max-width:340px;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:slideIn .2s ease;pointer-events:all}
.toast.error{border-color:var(--red);color:var(--red);background:var(--rdim)}
.toast.success{border-color:var(--green);color:var(--green);background:var(--gdim)}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:500;padding:16px;backdrop-filter:blur(2px)}
.modal{background:var(--bg1);border-radius:12px;padding:1.5rem;width:100%;max-width:440px;border:1px solid var(--border2);max-height:90vh;overflow-y:auto}

@media(max-width:640px){
  .grid2,.grid3{grid-template-columns:1fr}
  .nav-tab{padding:0 10px;font-size:12px}
}.nav-tab:hover{color:var(--t1)}
.nav-tab.active{color:var(--t1);border-bottom-color:var(--blue)}
.nav-spacer{flex:1}

.page{padding:18px 20px;max-width:960px;margin:0 auto}

#main-app{
  background:
    radial-gradient(ellipse at 15% 50%,rgba(0,214,143,.04) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 20%,rgba(77,159,255,.07) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 80%,rgba(155,89,255,.04) 0%,transparent 50%),
    linear-gradient(160deg,#0a0d13 0%,#0d0f18 40%,#0a1018 100%);
  min-height:100vh;
  position:relative;
}
#main-app::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(77,159,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,159,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  pointer-events:none;z-index:0;
}
#main-app>*{position:relative;z-index:1}
#main-app .topbar, #main-app .nav{z-index:200}

.hidden{display:none!important}
.card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:7px;border:1px solid var(--border2);background:transparent;color:var(--t1);font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s}
.btn:hover:not(:disabled){background:var(--bg3)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover:not(:disabled){opacity:.88;background:var(--blue)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-danger{background:var(--rdim);color:var(--red);border-color:rgba(255,77,106,.4)}
.btn-danger:hover:not(:disabled){background:rgba(255,77,106,.22)}
.btn-ghost{border-color:transparent;color:var(--t2)}

input,select,textarea{font-family:inherit;font-size:13px;color:var(--t1);background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:8px 11px;width:100%;transition:border .15s}
input::placeholder,textarea::placeholder{color:var(--t3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,159,255,.12)}
select option{background:var(--bg2)}
label.field,div.field{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--t2);font-weight:600;text-transform:uppercase;letter-spacing:.5px}

.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:4px 10px;border-radius:20px;font-weight:600;letter-spacing:.2px}
.badge-green{background:var(--gdim);color:var(--green)}
.badge-blue{background:var(--bdim);color:var(--blue)}
.badge-amber{background:rgba(255,179,71,.15);color:var(--amber)}
.badge-red{background:var(--rdim);color:var(--red)}
.badge-purple{background:rgba(155,89,255,.15);color:var(--purple)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.slbl{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px}
.divider{border:none;border-top:1px solid var(--border);margin:14px 0}

.table-wrap{width:100%;overflow-x:auto;margin-top:10px}
.data-table{width:100%;border-collapse:collapse;text-align:left}
.data-table th{padding:10px;color:var(--t2);font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
.data-table td{padding:12px 10px;border-bottom:1px solid var(--border);font-size:13px}

.toast-wrap{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:12px 18px;font-size:13px;max-width:340px;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:slideIn .2s ease;pointer-events:all}
.toast.error{border-color:var(--red);color:var(--red);background:var(--rdim)}
.toast.success{border-color:var(--green);color:var(--green);background:var(--gdim)}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:500;padding:16px;backdrop-filter:blur(2px)}
.modal{background:var(--bg1);border-radius:12px;padding:1.5rem;width:100%;max-width:440px;border:1px solid var(--border2);max-height:90vh;overflow-y:auto}

@media(max-width:640px){
  .grid2,.grid3{grid-template-columns:1fr}
  .nav-tab{padding:0 10px;font-size:12px}
}

/* ── Auth screen sizing ── */
#auth-screen .card {
    padding: 28px 32px;
}
#auth-screen input[type="email"],
#auth-screen input[type="password"],
#auth-screen input[type="text"] {
    font-size: 15px;
    padding: 12px 14px;
}
#auth-screen .btn-primary {
    padding: 12px 16px;
    font-size: 15px;
}

/* ── Password icon wrapper ── */
.input-icon-wrap {
    position: relative;
    display: block;   /* same width as a normal input */
    line-height: 0;   /* kill any inline ghost space below the input */
}
.input-icon-wrap input {
    display: block;
    width: 100%;
    line-height: normal;
    padding-right: 48px !important;
}

/* Icon is now positioned relative to ONLY the input wrapper,
   so top:50% lands exactly in the middle of the input box */
#robot-login,
#robot-reg,
#robot-reg-confirm {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    object-fit: contain;
    cursor: pointer;
    border-radius: 4px;
    z-index: 10;
    pointer-events: auto;
}

/* ══════════════════════════════════════════════
   SPECIFICITY FIX — sticky topbar & nav
   #main-app>* (1,0,0) was overriding position:sticky
   on .topbar (0,1,0) and nav (0,0,1), turning
   top:64px into a relative offset (the visible gap).
   These rules have specificity 1,1,0 / 1,0,1 → win.
══════════════════════════════════════════════ */
#main-app .topbar { position: sticky; top: 0; }
#main-app .nav    { position: sticky; top: var(--topbar-h); }

/* ══ Mode-toggle buttons (Trading Mode & Broker cards) ══ */
.mode-toggle { display:flex; border:1px solid var(--border2); border-radius:8px; overflow:hidden; width:fit-content; }
.mode-btn { padding:7px 16px; background:transparent; border:none; border-right:1px solid var(--border2); color:var(--t2); font-size:13px; font-family:inherit; cursor:pointer; transition:all .15s; white-space:nowrap; }
.mode-btn:last-child { border-right:none; }
.mode-btn:hover { background:var(--bg3); color:var(--t1); }
.mode-btn.active { background:var(--blue); color:#fff; }

/* ══ Brand logo + wordmark ══ */
.brand-logo{height:34px;width:34px;border-radius:50%;object-fit:contain;display:block;flex-shrink:0}
/* Sign-in page logo: larger for visibility; bottom margin separates it from the title */
.auth-logo{height:148px;width:148px;border-radius:50%;object-fit:contain;display:block;margin:0 auto 20px}
.brand-title{color:var(--brand)}

/* ══ Sign-in page: match the dashboard background + grid overlay ══ */
#auth-screen{
  background:
    radial-gradient(ellipse at 15% 50%,rgba(0,214,143,.04) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 20%,rgba(77,159,255,.07) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 80%,rgba(155,89,255,.04) 0%,transparent 50%),
    linear-gradient(160deg,#0a0d13 0%,#0d0f18 40%,#0a1018 100%);
  min-height:100vh;
  position:relative;
}
#auth-screen::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(77,159,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,159,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  pointer-events:none;z-index:0;
}
#auth-screen>*{position:relative;z-index:1}
/* let the dashboard-style grid show through the centering wrapper */
.auth-wrap{background:transparent}

/* ══ Portfolio performance graph ══ */
.perf-chart-wrap { position:relative; height:360px; background:var(--bg0); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-top:8px; }
#perf-chart { position:absolute; inset:0; }
.legend-dot { display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle; margin-right:3px; }
.perf-tooltip { position:absolute; z-index:20; min-width:180px; max-width:260px; background:var(--bg2); border:1px solid var(--border2); border-radius:8px; padding:10px 12px; font-size:12px; box-shadow:0 8px 24px rgba(0,0,0,.5); pointer-events:auto; }
.perf-tooltip .pt-title { font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.perf-tooltip .pt-row { display:flex; justify-content:space-between; gap:10px; padding:2px 0; color:var(--t2); }
.perf-tooltip .pt-row span:last-child { color:var(--t1); font-weight:500; }
.perf-tooltip .pt-close { position:absolute; top:6px; right:8px; cursor:pointer; color:var(--t3); }

/* ══ Exchange onboarding steps ══ */
.onboarding-steps { margin:6px 0 0 18px; padding:0; color:var(--t2); line-height:1.9; font-size:13px; }
.onboarding-steps li { margin-bottom:4px; }

/* ══ API key paper/live grid ══ */
.keys-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.keys-col { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
@media(max-width:640px){ .keys-grid{ grid-template-columns:1fr; } }

/* ══ Clickable market rows ══ */
.market-row { cursor:pointer; transition:background .12s; }
.market-row:hover { background:var(--bg2); }
.market-row td:first-child { color:var(--blue); font-weight:700; }
.market-open-hint { color:var(--t3); font-size:11px; }
.market-row:hover .market-open-hint { color:var(--blue); }

/* ══ Market Dashboard modal ══ */
.dash-modal { max-width:880px; width:100%; }
.dash-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.dash-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.dash-toolbar .mode-btn { padding:5px 14px; font-size:12px; }
.dash-chart-wrap { position:relative; height:340px; background:var(--bg0); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
#dash-chart { position:absolute; inset:0; }
.dash-chart-msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--t2); font-size:13px; text-align:center; padding:20px; pointer-events:none; }
.dash-chart-msg.hidden { display:none; }
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.dash-panel { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:13px 15px; }
.dash-ind-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.dash-ind { background:var(--bg0); border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.dash-ind .k { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; }
.dash-ind .v { font-size:15px; font-weight:600; font-family:'SF Mono',Menlo,monospace; margin-top:2px; }
.pattern-chip { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-radius:8px; background:var(--bg0); border-left:3px solid var(--t3); font-size:12px; }
.pattern-chip.bullish { border-left-color:var(--green); }
.pattern-chip.bearish { border-left-color:var(--red); }
.pattern-chip .pname { font-weight:700; }
.pattern-chip .pdetail { color:var(--t2); margin-top:2px; }
.bot-status-line { display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-bottom:1px solid var(--border); font-size:12px; }
.bot-status-line:last-child { border-bottom:none; }
.bot-status-line .lbl { color:var(--t2); }

@media(max-width:640px){ .dash-grid{ grid-template-columns:1fr; } .dash-chart-wrap{ height:260px; } }