:root{
  --bg:#07080d;
  --bg-elev:rgba(20,21,32,0.68);
  --bg-elev-solid:#14151f;
  --card:rgba(255,255,255,0.055);
  --card-solid:#171826;
  --tile:rgba(255,255,255,0.045);
  --border:rgba(255,255,255,0.09);
  --border-strong:rgba(255,255,255,0.15);
  --text:#f3f3f8;
  --muted:#9a9caa;
  --muted-2:#6f7182;
  --accent:#7c5cff;
  --accent-2:#34e0a1;
  --green:#34e0a1;
  --red:#ff5a6e;
  --amber:#ffb85c;
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:11px;
  --nav-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;
  background:
    radial-gradient(circle at 12% -5%, rgba(124,92,255,0.22) 0%, transparent 42%),
    radial-gradient(circle at 90% 8%, rgba(52,224,161,0.14) 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(124,92,255,0.08) 0%, transparent 50%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}

/* ================= app shell: persistent sidebar (desktop) /
   slide-out drawer (mobile) + main content area =================== */
.app-shell{display:flex;min-height:100vh;width:100%}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.content{padding:16px 16px calc(var(--nav-h) + 24px + var(--safe-b))}
.main-guest{align-items:center;justify-content:center;min-height:100vh}
.main-guest .content{padding:24px 16px;width:100%;max-width:420px}

/* ---------- sidebar (nav rail): fixed drawer on mobile, permanent rail on desktop ---------- */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:78%;max-width:290px;z-index:70;
  background:var(--bg-elev-solid);border-right:1px solid var(--border-strong);
  padding:calc(20px + var(--safe-t)) 16px 20px;display:flex;flex-direction:column;gap:4px;
  transform:translateX(-100%);transition:transform .25s cubic-bezier(.32,.72,0,1);
  box-shadow:20px 0 60px rgba(0,0,0,.4);
}
.sidebar.open{transform:translateX(0)}
.sidebar-brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;
  letter-spacing:-.02em;padding:6px 10px 18px}
.sidebar-nav{display:flex;flex-direction:column;gap:3px}
.sidebar-nav a{display:flex;align-items:center;gap:11px;padding:12px 12px;border-radius:12px;
  color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;
  transition:background .12s,color .12s}
.sidebar-nav a:hover{background:var(--tile);color:var(--text)}
.sidebar-nav a.active{background:rgba(124,92,255,0.16);color:var(--accent)}
.nv-ic{font-style:normal;width:19px;text-align:center;flex-shrink:0;font-size:15px}
.sidebar-profile{display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px;
  border-radius:14px;cursor:pointer;transition:background .12s}
.sidebar-profile:hover{background:var(--tile)}
.sidebar-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0a0b12;
  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.sidebar-profile-txt{min-width:0}
.sidebar-profile-email{font-size:12.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-profile-role{font-size:11px;color:var(--muted);margin-top:1px}
.drawer-logout{display:none}

.nav-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.nav-drawer-overlay.open{opacity:1;pointer-events:auto}

/* ---------- profile popover menu (anchored to the profile control) ---------- */
.profile-menu{position:fixed;min-width:220px;
  background:var(--bg-elev-solid);border:1px solid var(--border-strong);border-radius:var(--radius-md);
  box-shadow:0 20px 50px rgba(0,0,0,.5);padding:8px;opacity:0;pointer-events:none;
  transform:translateY(-6px) scale(.97);transition:opacity .15s,transform .15s;z-index:90;
  left:14px;bottom:calc(84px + var(--safe-b));
}
.profile-menu.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.profile-menu a{display:flex;align-items:center;gap:9px;padding:10px;border-radius:9px;
  font-size:13.5px;font-weight:500;color:var(--text);text-decoration:none;transition:background .12s}
.profile-menu a:hover{background:var(--tile)}
.profile-menu a.danger{color:var(--red)}
.pm-ic{font-style:normal;width:16px;text-align:center;flex-shrink:0;font-size:14px}

.pm-look-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;margin:2px 0}
.pm-look-label{font-size:12px;color:var(--muted);font-weight:600}
.pm-look-btns{display:flex;gap:6px}
.pm-look-btn{width:26px;height:26px;border-radius:8px;border:1px solid var(--border-strong);
  background:var(--tile);color:var(--text);font-size:11px;font-weight:700;cursor:pointer;transition:.15s}
.pm-look-btn:hover{background:rgba(255,255,255,.09)}
.pm-look-btn:active{transform:scale(.92)}
[data-look="editorial"] .pm-look-btn[data-look-choice="editorial"],
[data-look="spatial"] .pm-look-btn[data-look-choice="spatial"],
[data-look="chromatic"] .pm-look-btn[data-look-choice="chromatic"]{
  background:var(--lk-accent,var(--accent));color:#fff;border-color:transparent;
}

/* ---------- mobile top bar (hidden on desktop -- sidebar carries brand + profile there) ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 2px 16px;position:relative;z-index:40}
.hamburger-btn{width:38px;height:38px;flex-shrink:0;border:1px solid var(--border-strong);
  background:var(--tile);border-radius:12px;display:grid;place-items:center;
  cursor:pointer;transition:background .15s,transform .12s}
.hamburger-btn:hover{background:rgba(255,255,255,0.09)}
.hamburger-btn:active{transform:scale(.93)}
.hamburger-btn svg{width:19px;height:19px;stroke:var(--text);fill:none;stroke-width:1.9;stroke-linecap:round}
.brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;letter-spacing:-.02em;min-width:0}
.brand-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-btn{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0a0b12;
  font-size:14px;font-weight:700;display:grid;place-items:center;
  transition:transform .12s}
.profile-btn:active{transform:scale(.92)}

@media (min-width:900px){
  .sidebar{position:sticky;top:0;height:100vh;width:264px;max-width:none;transform:none !important;
    box-shadow:none;flex-shrink:0;padding:26px 18px}
  .nav-drawer-overlay{display:none !important}
  .topbar{display:none}
  .main .content{padding:28px 40px calc(28px + var(--safe-b));max-width:1160px}
  .main-guest{width:100%}
  .bottom-nav{display:none !important}
  .profile-menu{position:absolute;left:14px;right:14px;bottom:64px;width:auto}
}
@media (max-width:899px){
  .content{max-width:640px;margin:0 auto;width:100%}
}

.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;
box-shadow:0 0 0 0 rgba(52,224,161,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,224,161,.55)}70%{box-shadow:0 0 0 9px rgba(52,224,161,0)}100%{box-shadow:0 0 0 0 rgba(52,224,161,0)}}

/* ---------- bottom tab bar (mobile) ----------
   FIXED (round 2): the earlier fix made the bar horizontally
   scrollable, which stopped the overlap but traded it for a
   "swipe to find your page" problem the user explicitly rejected.
   The bar now shows a fixed, always-fitting set of slots instead:
   Dashboard / Positions / Orders / Logs, plus a 5th slot that is
   either "API" (non-admin -- exactly 5 items, always fits) or a
   real "More" button (admin -- opens the same full nav drawer as
   the hamburger, listing API/Admin/CopyTrade/Strategy Lab/Order
   Desk/Market Data/Log Out). At most 5 slots, ever -- no scrolling,
   no crushing, nothing can overlap regardless of how many admin
   pages get added later, because new pages go in the drawer, not
   into more bottom-bar slots. */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:stretch;
  height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(14,15,22,0.86);
  backdrop-filter:blur(28px) saturate(1.7);
  -webkit-backdrop-filter:blur(28px) saturate(1.7);
  border-top:1px solid var(--border);
}
.bottom-nav a,.bottom-nav-more{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted-2);text-decoration:none;font-size:10px;font-weight:600;height:100%;
  padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:none;background:none;cursor:pointer;font-family:inherit;appearance:none;
}
.bottom-nav a svg,.bottom-nav-more svg{width:22px;height:22px;stroke:var(--muted-2);fill:none;stroke-width:1.8;flex-shrink:0}
.bottom-nav a.active{color:var(--accent)}
.bottom-nav a.active svg{stroke:var(--accent)}
.bottom-nav-more.active{color:var(--accent)}
.bottom-nav-more.active svg{stroke:var(--accent)}
.bottom-nav-more:active{color:var(--text)}
.bottom-nav a.logout-link{color:var(--muted-2)}
.bottom-nav a.logout-link svg{stroke:var(--muted-2)}
.bottom-nav a.logout-link:active{color:var(--red)}
.bottom-nav a.logout-link:active svg{stroke:var(--red)}

/* ---------- overflow nav "More" trigger + dropdown (shared structure;
   per-look colors/position for the editorial/spatial/chromatic shells
   live in looks.css) ----------
   Built by nav-overflow.js: any horizontal nav marked
   [data-overflow-nav] measures its own items and moves whichever ones
   don't fit into this dropdown instead of clipping/scrolling them --
   every destination stays exactly one click away, and if the current
   page is one of the collapsed items the trigger gets .has-active so
   the user can still see at a glance that they're "in here somewhere". */
.nav-more-wrap{position:relative;flex-shrink:0}
.nav-more-btn{display:flex;align-items:center;gap:5px;border:none;background:none;cursor:pointer;
  font:inherit;white-space:nowrap;padding:0;appearance:none}
.nav-more-btn svg{flex-shrink:0}
.nav-more-panel{position:absolute;min-width:190px;max-width:260px;
  background:var(--bg-elev-solid);border:1px solid var(--border-strong);border-radius:var(--radius-md);
  box-shadow:0 20px 50px rgba(0,0,0,.35);padding:6px;
  opacity:0;pointer-events:none;transform:translateY(-6px) scale(.97);
  transition:opacity .15s,transform .15s;z-index:95;
  display:flex;flex-direction:column;gap:1px;max-height:60vh;overflow-y:auto;
}
.nav-more-wrap.open .nav-more-panel{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.nav-more-panel-item{display:block;padding:10px 12px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-more-panel-item:hover{background:var(--tile)}
.nav-more-panel-item.active{color:var(--accent)}

/* ---------- cards ---------- */
.card{
  background:var(--card);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--border);
  padding:20px;
  border-radius:var(--radius-xl);
  margin-bottom:16px;
  line-height:1.6;
  box-shadow:0 14px 40px rgba(0,0,0,.32);
}
.strategy-dash-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}
@media (min-width:760px){.strategy-dash-grid{grid-template-columns:1fr 1fr;align-items:start}}
.strategy-dash-grid .card{margin-bottom:0}

/* Combined PnL tile gets hero emphasis within the pnl-summary grid */
.stat-tile.hero-tile{background:linear-gradient(160deg,rgba(124,92,255,0.16),rgba(52,224,161,0.08));
  border-color:rgba(124,92,255,.35)}
.stat-tile.hero-tile .value{font-size:24px}

.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card-head .title{display:flex;align-items:center;gap:10px}
.card-head .icon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-size:19px;flex-shrink:0;
}
.card-head .icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-blue{color:#3ba7ff}
.icon-amber{color:#ffb85c}
.icon-silver{color:#c8ccd6}
.icon-natgas{color:#ff8a4c}
.icon-blue{background:rgba(59,167,255,0.18)}
.icon-amber{background:rgba(255,184,92,0.18)}
.card-head .name{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.card-head .sub{font-size:11.5px;color:var(--muted);font-weight:500;margin-top:1px}

.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 11px;
border-radius:999px;background:var(--tile);border:1px solid var(--border);white-space:nowrap}
.status-pill .dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.status-pill.on{color:var(--green)}
.status-pill.off{color:var(--muted)}
.status-pill.warn{color:var(--amber)}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:7px 12px;
border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid var(--border);margin:0 6px 8px 0}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}

/* ---------- stat tiles (data display) ---------- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.stat-tile{background:var(--tile);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px}
.stat-tile .label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.stat-tile .value{font-size:18px;font-weight:700;margin-top:4px;letter-spacing:-.01em}
.stat-tile .value.profit{background:linear-gradient(90deg,var(--green),#7ef0c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-tile .value.loss{color:var(--red)}

.progress-track{background:var(--tile);border-radius:999px;height:6px;overflow:hidden;margin-top:6px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px;transition:width .3s}

.settings-row{font-size:12.5px;color:var(--muted);border-top:1px solid var(--border);
padding-top:12px;margin-top:10px}
.settings-row b{color:var(--text);font-weight:600}

/* ---------- segmented control (broker choice) ---------- */
.segmented{display:flex;background:var(--tile);border:1px solid var(--border);border-radius:var(--radius-sm);
padding:3px;margin-top:6px;gap:3px}
.segmented input{display:none}
.segmented label{
  flex:1;text-align:center;padding:9px 6px;border-radius:8px;font-size:13.5px;font-weight:600;
  color:var(--muted);cursor:pointer;transition:background .15s,color .15s;margin:0;
}
.segmented input:checked + label{background:var(--accent);color:#fff}
.segmented label.disabled{opacity:.4;cursor:not-allowed}

label{font-size:13px;color:var(--muted);display:block;margin-top:14px;font-weight:500}
input[type=text],input[type=number],input[type=email],input[type=password]{
  width:100%;padding:12px 14px;margin-top:6px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:rgba(255,255,255,0.045);color:var(--text);
  font-size:15px;font-family:inherit;
}
input:focus{outline:none;border-color:var(--accent);background:rgba(124,92,255,0.09);box-shadow:0 0 0 4px rgba(124,92,255,0.14)}
input::placeholder{color:var(--muted)}

button, .btn{
  padding:13px 20px;border:1px solid var(--border-strong);border-radius:999px;
  background:var(--tile);color:var(--text);cursor:pointer;
  margin-right:8px;margin-top:12px;font-size:15px;font-weight:600;
  transition:transform .12s,opacity .15s,box-shadow .15s,background .15s;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;
}
button:hover, .btn:hover{opacity:.9}
button:active, .btn:active{transform:scale(.96)}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.primary{background:linear-gradient(135deg,var(--accent),#5a3fd6);width:100%;padding:15px;
  box-shadow:0 8px 24px rgba(124,92,255,.35)}
.start{background:linear-gradient(135deg,var(--green),#1fb381);width:100%;padding:15px;
  box-shadow:0 8px 24px rgba(52,224,161,.28);color:#06120c}
.secondary{background:rgba(255,255,255,0.07);color:var(--text)}

.danger-zone{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.danger-zone button{flex:1;min-width:140px;margin:0}
.kill{background:transparent;border:1.5px solid var(--amber);color:var(--amber)}
.kill:hover{background:rgba(255,184,92,0.1)}
.stop{background:transparent;border:1.5px solid var(--red);color:var(--red)}
.stop:hover{background:rgba(255,90,110,0.1)}

.profit{color:var(--green);font-weight:700}
.loss{color:var(--red);font-weight:700}
.big{font-size:16px;font-weight:600}
.symbol{font-size:17px;font-weight:700;letter-spacing:-.01em}
.row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--border)}
.row:last-child{border-bottom:none}
.row span:first-child{color:var(--muted);font-size:13.5px}
.muted{color:var(--muted)}
.err{color:var(--red);font-size:13.5px;margin:4px 0 10px}
.ok{color:var(--green);font-size:13.5px;margin:4px 0 10px}

a{color:var(--accent)}

/* ---------- admin table -> responsive cards on mobile ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--border)}
td{padding:10px;border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -20px;padding:0 20px}

.ip-box{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:18px;font-weight:700;letter-spacing:.02em;
  background:rgba(255,255,255,0.045);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 16px;margin-top:8px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}

/* ---------- skeleton loading ---------- */
.skel{background:linear-gradient(90deg,var(--tile) 25%,rgba(255,255,255,0.09) 37%,var(--tile) 63%);
background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:var(--radius-sm);height:16px;margin:8px 0}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- strategy picker banner ---------- */
.picker-intro{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.picker-intro b{color:var(--text)}
.strategy-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.picker-chip{
  display:flex;align-items:center;gap:10px;padding:14px;border-radius:var(--radius-lg);
  border:1.5px solid var(--border);background:var(--tile);cursor:pointer;
  text-decoration:none;color:var(--text);transition:border-color .15s,transform .12s;
}
.picker-chip:hover{transform:translateY(-1px)}
.picker-chip:active{transform:scale(.98)}
.picker-chip .icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex-shrink:0}
.picker-chip .icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.picker-chip .txt{min-width:0}
.picker-chip .txt .nm{font-size:13px;font-weight:700;letter-spacing:-.01em}
.picker-chip .txt .st{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;display:flex;align-items:center;gap:5px}
.picker-chip .txt .st .dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2);flex-shrink:0}
.picker-chip.is-on{border-color:var(--green)}
.picker-chip.is-on .txt .st{color:var(--green)}
.picker-chip.is-on .txt .st .dot{background:var(--green)}
.picker-chip.s1-accent{border-color:rgba(59,167,255,.4)}
.picker-chip.s2-accent{border-color:rgba(255,184,92,.4)}

/* per-strategy card accent (top hairline) */
.card.s1-card{border-top:3px solid #3ba7ff}
.card.s2-card{border-top:3px solid var(--amber)}

/* ---------- modern form fields ---------- */
.field{margin-top:16px}
.field .flabel{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:7px;text-transform:uppercase;letter-spacing:.03em}
.field .flabel .fdot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.field input[type=text],.field input[type=number],.field input[type=email],.field input[type=password]{
  margin-top:0;background:rgba(255,255,255,0.055);border:1.5px solid var(--border-strong);
  padding:13px 15px;font-size:15.5px;border-radius:var(--radius-md);color:var(--text);
  transition:border-color .15s,background .15s,box-shadow .15s;cursor:text;
}
.field input::placeholder{color:var(--muted-2)}
.field input:hover{border-color:var(--muted)}
.field input:focus{border-color:var(--accent);background:rgba(124,92,255,0.1);box-shadow:0 0 0 4px rgba(124,92,255,0.16)}
.field .fhint{font-size:11px;color:var(--muted-2);margin-top:5px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.field-row{grid-template-columns:1fr}}
/* Grid items default to min-width:auto, which sizes them to their
   CONTENT's natural width -- fine for a plain text input, but a
   .kn-tab pill group (Broker/Side/Type/etc.) refused to shrink
   below its buttons' natural width and blew the whole row out
   past the container on narrow screens (buttons ran off the edge
   of the panel instead of shrinking to fit). min-width:0 is the
   standard fix -- it lets the item shrink to the row's actual
   available space and rely on .kn-tab-btn's own text-overflow:
   ellipsis instead of overflowing. */
.field-row>.field,.op-field-row-3>.field{min-width:0}

form > label:first-of-type{margin-top:2px}

/* ---------- password visibility toggle ---------- */
.pw-wrap{position:relative}
.pw-wrap input[type=password],.pw-wrap input[type=text]{padding-right:44px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-3px);background:none;border:none;
  color:var(--muted);cursor:pointer;padding:8px;margin:0;font-size:16px;line-height:1}
.pw-toggle:hover{color:var(--text)}
.field .pw-wrap{margin-top:0}

/* ---------- positions & pnl page ---------- */
.pnl-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
@media (min-width:640px){.pnl-summary{grid-template-columns:repeat(4,1fr)}}
.pnl-summary .stat-tile .value{font-size:20px}
.strategy-section{margin-top:6px}
.strategy-section .sec-head{display:flex;align-items:center;gap:9px;margin:22px 0 10px}
.strategy-section .sec-head .tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:4px 9px;border-radius:999px}
.tag.s1-tag{background:rgba(59,167,255,0.18);color:#7cc3ff}
.tag.s2-tag{background:rgba(255,184,92,0.18);color:#ffcb8a}
.tag.s3-tag{background:rgba(192,197,206,0.18);color:#d3d7de}
.tag.s4-tag{background:rgba(56,189,248,0.18);color:#7fdcfb}
.strategy-section .sec-head .nm{font-size:14px;font-weight:700}
.strategy-section .sec-head.clickable{cursor:pointer;user-select:none;border-radius:10px;padding:8px 10px;margin:14px -10px 4px;
  transition:background .12s}
.strategy-section .sec-head.clickable:hover{background:rgba(255,255,255,0.05)}
.strategy-section .sec-head .sec-badge{margin-left:auto;font-size:13px;font-weight:700}
.strategy-section .sec-head .sec-badge .muted{font-weight:500;color:var(--muted)}
.chevron-btn{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;
  padding:2px 4px;line-height:1;flex-shrink:0}
.sec-body{padding:0 10px}

/* Dashboard strategy-card dropdown toggle */
.card-toggle-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  cursor:pointer;user-select:none;margin-bottom:10px}
.card-toggle-head .chevron-btn{font-size:15px;color:var(--text)}
.card-body{transition:none}
.empty-note{font-size:13px;color:var(--muted);padding:10px 0}

/* header logout button (desktop) gets slight emphasis -- legacy selector, harmless if unused */
.header .nav a.logout{color:var(--red);opacity:.85}
.header .nav a.logout:hover{opacity:1}

.kn-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin:16px 0 6px}

.kn-tab{display:flex;background:var(--tile);border-radius:10px;padding:3px;gap:3px}
.kn-tab input{display:none}
.kn-tab label{flex:1;text-align:center;padding:10px 6px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;margin:0}
.kn-tab input:checked + label{background:var(--accent);color:#fff}
.kn-tab label.disabled{opacity:.4;cursor:not-allowed}

.kn-rowgroup{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.kn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--tile);border-radius:10px;padding:11px 13px}
.kn-row-label{font-size:13px;color:var(--text);font-weight:500}
.kn-row input[type=number]{width:96px;margin:0;padding:8px 10px;font-size:14px;
  background:rgba(0,0,0,0.28);border:1px solid var(--border-strong);border-radius:8px;text-align:right;color:var(--text)}
.kn-row input::placeholder{color:var(--muted-2)}
.kn-row input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(124,92,255,0.2)}

.kn-pillrow{display:flex;gap:8px;margin-top:14px}
.kn-pill{flex:1;border-radius:10px;padding:9px;text-align:center}
.kn-pill p{margin:0;font-size:12.5px;font-weight:600}
.kn-pill.green{background:rgba(52,224,161,0.14)}
.kn-pill.green p{color:var(--green)}
.kn-pill.red{background:rgba(255,90,110,0.14)}
.kn-pill.red p{color:var(--red)}

.kn-footer{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.kn-footer-label{font-size:10.5px;color:var(--muted);margin:0;text-transform:uppercase;letter-spacing:.03em}
.kn-footer-value{font-size:14px;color:var(--text);font-weight:600;margin:2px 0 0}
.kn-cta{background:linear-gradient(135deg,var(--accent),#5a3fd6);color:#fff;border:none;padding:13px 26px;border-radius:999px;
  font-size:14.5px;font-weight:600;margin:0;flex-shrink:0;box-shadow:0 6px 18px rgba(124,92,255,.32)}
.kn-cta:active{transform:scale(.96)}

.kn-logbar{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.kn-logbtn{background:transparent;border:1.5px solid var(--border-strong);color:var(--muted);
  padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:600;margin:0}
.kn-logbtn:hover{border-color:var(--muted);color:var(--text)}
.kn-terminal{background:#050608;border:1px solid #1a1b24;border-radius:14px;
  padding:12px 14px;margin-top:10px;max-height:260px;overflow-y:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.6;
  color:#5fecb5;white-space:pre-wrap;word-break:break-all}

.kn-copybtn{background:transparent;border:1.5px solid var(--border-strong);color:var(--muted);
  padding:7px 14px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;
  flex-shrink:0;transition:border-color .15s,color .15s}
.kn-copybtn:hover{border-color:var(--accent);color:var(--accent)}
.kn-copybtn:active{transform:scale(.97)}

/* Strategy 3 (Silver Micro) accent */
.icon-silver{background:rgba(192,197,206,0.18)}
.picker-chip.s3-accent{border-color:rgba(192,197,206,.4)}
.card.s3-card{border-top:3px solid #c0c5ce}

/* Strategy 4 (NatGas Mini) accent -- blue flame */
.icon-natgas{background:rgba(56,189,248,0.18)}
.picker-chip.s4-accent{border-color:rgba(56,189,248,.4)}
.card.s4-card{border-top:3px solid #38bdf8}

/* Strategy 5 (NIFTY Options Gap+Streak) accent -- rose/pink lightning bolt */
.icon-s5{background:rgba(244,114,182,0.18);color:#f472b6}
.picker-chip.s5-accent{border-color:rgba(244,114,182,.4)}
.card.s5-card{border-top:3px solid #f472b6}
.gap-strip{display:flex;gap:6px;margin:10px 0 4px;flex-wrap:wrap}
.gap-chip{flex:1;min-width:110px;display:flex;flex-direction:column;gap:2px;
  padding:8px 10px;border-radius:10px;border:1px solid var(--border-strong)}
.gap-chip .gap-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.gap-chip .gap-val{font-size:14px;font-weight:700}
.streak-strip{display:flex;gap:6px;margin:8px 0 4px;align-items:center}
.streak-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border-strong);flex-shrink:0}
.streak-dot.on-green{background:var(--green);border-color:var(--green)}
.streak-dot.on-red{background:var(--red);border-color:var(--red)}

/* Per-timeframe GREEN/RED/FLAT breakdown strip (admin-only) */
.tf-strip{display:flex;gap:6px;margin:10px 0 4px;flex-wrap:wrap}
.tf-chip{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:6px 4px;border-radius:10px;border:1px solid var(--border-strong)}
.tf-chip .tf-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.tf-chip .tf-val{font-size:11px;font-weight:700}
.tf-chip.tf-green{background:rgba(52,224,161,0.14);border-color:rgba(52,224,161,.4)}
.tf-chip.tf-green .tf-val{color:var(--green)}
.tf-chip.tf-red{background:rgba(255,90,110,0.14);border-color:rgba(255,90,110,.4)}
.tf-chip.tf-red .tf-val{color:var(--red)}
.tf-chip.tf-flat{background:rgba(255,184,92,0.12);border-color:rgba(255,184,92,.4)}
.tf-chip.tf-flat .tf-val{color:var(--amber)}
.tf-chip.tf-wait{opacity:.5}
.tf-chip.tf-wait .tf-val{color:var(--muted)}

/* ================= Admin panel v2 ================= */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;
  animation:fadeSlideIn .35s ease both}
.page-header-title{font-size:21px;font-weight:700;letter-spacing:-.01em}
.page-header-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.page-header-actions{display:flex;gap:8px}
.ph-btn{width:38px;height:38px;border-radius:12px;background:var(--tile);border:1px solid var(--border-strong);
  color:var(--text);display:grid;place-items:center;cursor:pointer;
  transition:background .15s,transform .5s}
.ph-btn:hover{background:rgba(255,255,255,0.09)}
.ph-btn:active svg{transform:rotate(180deg)}
.ph-btn svg{width:17px;height:17px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round;transition:transform .5s}

@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes tileIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes shimmer{0%{background-position:-300px 0}100%{background-position:300px 0}}

.pnl-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.pnl-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px 18px;animation:fadeSlideIn .4s ease both}
.pnl-card.hero{background:linear-gradient(135deg,rgba(124,92,255,0.16),rgba(52,224,161,0.07)),var(--card);
  border-color:rgba(124,92,255,0.28)}
.pnl-card-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:700}
.pnl-card-value{font-size:21px;font-weight:700;margin-top:8px;letter-spacing:-.01em;color:var(--text)}
.pnl-card-value.profit{color:var(--green)} .pnl-card-value.loss{color:var(--red)}
.pnl-card-sub{font-size:11px;color:var(--muted);margin-top:6px}

.date-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:20px}
.date-filter-presets{display:flex;gap:7px;flex-wrap:wrap}
.date-filter-chip{font-size:12px;font-weight:600;padding:7px 13px;border-radius:9px;background:var(--tile);
  color:var(--muted);border:1px solid var(--border);cursor:pointer;transition:.15s}
.date-filter-chip:hover{color:var(--text)}
.date-filter-chip.active{background:rgba(124,92,255,0.16);color:#c9bfff;border-color:rgba(124,92,255,0.35)}
.date-filter-custom{display:flex;align-items:center;gap:8px}
.date-input{background:var(--tile);border:1px solid var(--border);border-radius:9px;color:var(--text);
  padding:7px 10px;font-size:12.5px;font-family:inherit}
.date-sep{color:var(--muted-2)}
.date-apply-btn{background:linear-gradient(135deg,var(--accent),#5a3fe0);color:#fff;border:none;
  padding:8px 15px;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;transition:transform .12s}
.date-apply-btn:active{transform:scale(.95)}

.section-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px;flex-wrap:wrap;gap:10px}
.section-title{font-size:15px;font-weight:700}
.user-search{background:var(--tile);border:1px solid var(--border);border-radius:10px;color:var(--text);
  padding:9px 13px;font-size:13px;width:220px;font-family:inherit}

.user-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:10px}
.tile-skeleton{height:190px;border-radius:var(--radius-lg);
  background:linear-gradient(90deg,var(--tile) 25%,rgba(255,255,255,0.06) 37%,var(--tile) 63%);
  background-size:600px 100%;animation:shimmer 1.4s infinite linear;border:1px solid var(--border)}
.user-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0;font-size:13.5px}

.user-tile{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px 18px;cursor:pointer;transition:transform .15s,border-color .15s,background .15s;
  animation:tileIn .4s ease both}
.user-tile:hover{border-color:var(--border-strong);transform:translateY(-2px);background:var(--bg-elev)}
.user-tile:active{transform:translateY(0) scale(.99)}
.user-tile.blocked{opacity:.55}
.ut-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.ut-avatar{width:38px;height:38px;border-radius:11px;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0a0b12;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:800}
.ut-id{min-width:0}
.ut-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.ut-sub{display:flex;gap:6px;margin-top:4px}
.ut-pill{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:6px}
.ut-pill.admin{background:rgba(124,92,255,0.18);color:#c9bfff}
.ut-pill.blocked{background:rgba(255,90,110,0.15);color:var(--red)}
.ut-pill.live{background:rgba(52,224,161,0.15);color:var(--green)}
.ut-pill.idle{background:var(--tile);color:var(--muted)}
.ut-strats{display:flex;gap:6px;margin-bottom:14px}
.ut-strat-chip{flex:1;text-align:center;padding:6px 0;border-radius:8px;font-size:11px;font-weight:800}
.ut-strat-chip.on{background:rgba(52,224,161,0.14);color:var(--green)}
.ut-strat-chip.off{background:var(--tile);color:var(--muted-2)}
.ut-pnl-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.ut-pnl-box{background:var(--tile);border-radius:10px;padding:9px 11px}
.ut-pnl-label{font-size:10px;color:var(--muted-2);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ut-pnl-val{font-size:14.5px;font-weight:700;margin-top:3px}
.ut-foot{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border)}
.ut-joined{font-size:11px;color:var(--muted-2)}
.ut-chev{stroke:var(--muted-2);fill:none;stroke-width:2;stroke-linecap:round;transition:transform .15s}
.user-tile:hover .ut-chev{transform:translateX(3px);stroke:var(--text)}

.detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:80}
.detail-overlay.open{opacity:1;pointer-events:auto}
.detail-panel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:var(--bg-elev-solid);
  border-left:1px solid var(--border-strong);z-index:90;transform:translateX(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,0.35)}
.detail-panel.open{transform:translateX(0)}
.detail-panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  border-bottom:1px solid var(--border);flex-shrink:0}
.detail-panel-id{display:flex;align-items:center;gap:11px;min-width:0}
.detail-panel-email{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}
.detail-panel-meta{font-size:11px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:6px}
.detail-close-btn{width:32px;height:32px;border-radius:10px;background:var(--tile);border:1px solid var(--border);
  color:var(--text);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.detail-close-btn svg{width:15px;height:15px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round}
.detail-panel-body{flex:1;overflow-y:auto;padding:18px 20px 40px}
.detail-loading,.detail-empty{color:var(--muted);font-size:13px;text-align:center;padding:30px 0}
.detail-summary-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.detail-summary-box{background:var(--tile);border-radius:12px;padding:12px 14px}
.detail-block-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);
  font-weight:700;margin:20px 0 10px}
.detail-block-title:first-of-type{margin-top:0}
.dd-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;padding:7px 0;
  border-bottom:1px solid var(--border);color:var(--muted)}
.dd-row:last-child{border-bottom:none}
.detail-strat-card{background:var(--tile);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.dd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dd-name{font-size:12.5px;font-weight:700}
.dd-status{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:6px;background:rgba(255,255,255,0.06)}
.dd-status.live{background:rgba(52,224,161,0.15);color:var(--green)}
.detail-trades-table{width:100%;border-collapse:collapse;font-size:11.5px}
.detail-trades-table th{text-align:left;color:var(--muted-2);font-weight:700;padding:8px 9px;
  border-bottom:1px solid var(--border);font-size:10px;text-transform:uppercase;white-space:nowrap}
.detail-trades-table td{padding:9px 9px;border-bottom:1px solid var(--border);color:var(--muted)}
.detail-trades-table th:first-child,.detail-trades-table td:first-child{padding-left:2px}
.detail-trades-table th:last-child,.detail-trades-table td:last-child{padding-right:2px}
.detail-block-btn{width:100%;margin-top:22px;padding:12px;border-radius:12px;border:1.5px solid var(--red);
  background:transparent;color:var(--red);font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.detail-block-btn:hover{background:rgba(255,90,110,0.1)}
.detail-block-btn.unblock{border-color:var(--green);color:var(--green)}
.detail-block-btn.unblock:hover{background:rgba(52,224,161,0.1)}
.detail-block-btn:disabled{opacity:.4;cursor:not-allowed}

@media (max-width:640px){
  .pnl-summary-grid{grid-template-columns:1fr 1fr}
  .user-tile-grid{grid-template-columns:1fr}
  .date-filter-bar{flex-direction:column;align-items:stretch}
  .date-filter-custom{justify-content:space-between}
  .user-search{width:100%}
  .detail-panel{width:100vw;max-width:100vw}
}

/* ---------- sitewide footer ---------- */
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:22px 2px calc(14px + var(--safe-b));margin-top:28px;border-top:1px solid var(--border);
  font-size:11.5px;color:var(--muted-2)}
.site-footer-brand{display:flex;align-items:center;gap:7px;color:var(--muted)}
.site-footer-links{display:flex;gap:16px}
.site-footer-links a{color:var(--muted-2);text-decoration:none}
.site-footer-links a:hover{color:var(--text)}
@media (min-width:900px){
  .site-footer{padding-bottom:14px}
}


/* ---------- Quick Order page ---------- */
select,
input[type=date],input[type=datetime-local],
textarea.qo-textarea{
  width:100%;padding:12px 14px;margin-top:6px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:rgba(255,255,255,0.045);color:var(--text);
  font-size:15px;font-family:inherit;
}
select:focus,input[type=date]:focus,input[type=datetime-local]:focus,textarea.qo-textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(124,92,255,0.09);box-shadow:0 0 0 4px rgba(124,92,255,0.14)
}
textarea.qo-textarea{resize:vertical;min-height:70px;font-family:inherit;line-height:1.5}
.qo-warnings{margin-top:10px}
.qo-warn{font-size:12.5px;color:var(--amber);background:rgba(255,184,92,0.1);border:1px solid rgba(255,184,92,.3);
  border-radius:var(--radius-sm);padding:8px 12px;margin-top:6px}
.qo-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:520px){.qo-grid{grid-template-columns:1fr}}
.qo-resolved{margin-top:12px;padding:12px 14px;background:var(--tile);border:1px solid var(--border);border-radius:var(--radius-md)}
.qo-action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.qo-action-row button{margin-top:0}
.qo-order-list{display:flex;flex-direction:column;gap:10px}
.qo-order-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:12px 14px;background:var(--tile);border:1px solid var(--border);border-radius:var(--radius-md);flex-wrap:wrap}
.qo-order-main{flex:1;min-width:200px}
.qo-order-actions{display:flex;gap:8px;flex-shrink:0}
.qo-order-actions button{margin:0;padding:9px 14px;font-size:13px}
.qo-status-draft{color:var(--muted)}
.qo-status-armed{color:var(--amber);font-weight:700}
.qo-status-entry_pending{color:var(--accent)}
.qo-status-entry_working{color:var(--amber)}
.qo-status-placed{color:var(--green);font-weight:700}
.qo-status-cancelled{color:var(--muted)}
.qo-status-failed{color:var(--red);font-weight:700}

.qo-fire-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;z-index:9999;padding:20px;
}
.qo-fire-overlay.show{display:flex}
.qo-fire-panel{
  background:var(--card);border:1.5px solid var(--amber);border-radius:var(--radius-xl);
  padding:28px;max-width:420px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.qo-fire-title{font-size:19px;font-weight:800;color:var(--amber);margin-bottom:10px}
.qo-fire-detail{font-size:14px;line-height:1.6;margin-bottom:12px}
.qo-fire-note{font-size:12px;color:var(--muted);margin-bottom:16px}
.qo-fire-btn{width:100%;background:linear-gradient(135deg,var(--amber),#ff7043);color:#1a0f00;
  box-shadow:0 8px 24px rgba(255,184,92,.35);font-size:16px}

/* ---------- CopyTrade page ---------- */
.ct-user-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 14px}
.ct-user-toolbar #ctUserSearch{background:var(--tile);border:1px solid var(--border);border-radius:10px;
  color:var(--text);padding:9px 13px;font-size:13px;min-width:220px;font-family:inherit;flex:1}

/* Scrollable, fixed-height container so the page doesn't grow with user
   count -- the tile grid lives inside this, not directly in page flow. */
.ct-user-scroll{max-height:340px;overflow-y:auto;border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:10px;background:var(--bg-elev)}
.ct-user-tile-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-bottom:0}

/* Compact variant of .user-tile, and -- importantly -- animation:none.
   .user-tile's base "tileIn" entrance animation is meant to play once when
   a tile is first mounted on a page that only re-renders on manual
   refresh (admin.html). CopyTrade polls every 4s; earlier this rebuilt
   the whole grid's innerHTML on every poll, so every tile (including ones
   that hadn't changed at all) got torn down and recreated each time,
   replaying that entrance animation over and over -- this is what looked
   like "blinking". The real fix is on the JS side (renderUserGrid now
   diffs and reuses existing DOM nodes instead of rebuilding), but killing
   the animation here too is a second, independent safety net in case a
   node ever does get recreated (e.g. a genuinely new user appearing). */
.ct-user-tile{position:relative;display:block;padding:9px 34px 9px 10px;
  animation:none!important;transition:border-color .15s,background .15s}
.ct-user-tile .ct-user-cb{position:absolute;top:11px;right:10px;width:16px;height:16px;cursor:pointer}
.ct-user-tile.disabled{opacity:.5;cursor:not-allowed}
.ct-user-tile.disabled .ct-user-cb{cursor:not-allowed}
.ct-user-tile .ut-top{gap:8px;margin-bottom:4px}
.ct-user-tile .ut-avatar{width:28px;height:28px;border-radius:8px;font-size:11px}
.ct-user-tile .ut-name{font-size:12px;max-width:140px}
.ct-user-tile .ut-sub{display:block;color:var(--muted);font-size:10.5px;margin-top:1px}
.ct-user-tile .ut-strats{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.ct-user-tile .chip,.ct-user-tile .ut-pill{font-size:9px;padding:2px 6px}
#ctStartResult{margin-top:10px;font-size:12.5px}
#ctParamsFields.field-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:10px 0}

/* ---------- Strategy Lab page ---------- */
.sl-chat-log{max-height:420px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px;background:var(--bg-elev);margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.sl-msg{display:flex}
.sl-msg-user{justify-content:flex-end}
.sl-msg-ai{justify-content:flex-start}
.sl-bubble{max-width:80%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5}
.sl-msg-user .sl-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.sl-msg-ai .sl-bubble{background:var(--card);border:1px solid var(--border);border-bottom-left-radius:4px}
.sl-thinking .sl-bubble{color:var(--muted);font-style:italic}
.sl-understood{margin-bottom:6px}
.sl-questions ul{margin:6px 0 0;padding-left:18px}
.sl-questions li{margin-bottom:3px}
.sl-generated-title{font-size:14px;font-weight:800;margin-bottom:4px}
.sl-generated-summary{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.sl-generated-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:10px}
.sl-code-block{margin-bottom:8px}
.sl-code-block code{display:block;background:var(--tile);border:1px solid var(--border);border-radius:8px;
  padding:8px 10px;font-size:12px;margin-top:3px;white-space:pre-wrap;word-break:break-word}
.sl-notes{font-size:12.5px;margin-top:4px}
.sl-chat-input-row{display:flex;gap:8px;align-items:flex-end}
.sl-chat-input-row textarea{flex:1;background:var(--tile);border:1px solid var(--border);border-radius:10px;
  color:var(--text);padding:10px 13px;font-size:13px;font-family:inherit;resize:vertical;min-height:44px}

/* ---------- Strategy Lab: MCQ clarifying questions ---------- */
.sl-questions{margin-top:10px;display:flex;flex-direction:column;gap:12px}
.sl-q-text{font-size:12.5px;font-weight:700;margin-bottom:6px}
.sl-q-opts{display:flex;flex-wrap:wrap;gap:6px}
.sl-opt-btn{background:var(--tile);border:1px solid var(--border);border-radius:20px;color:var(--text);
  padding:6px 13px;font-size:12px;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s}
.sl-opt-btn:hover{border-color:var(--border-strong)}
.sl-opt-btn.selected{background:var(--accent);border-color:var(--accent);color:#fff}
.sl-q-custom{margin-top:6px;width:100%;background:var(--tile);border:1px solid var(--border);border-radius:8px;
  color:var(--text);padding:7px 10px;font-size:12.5px;font-family:inherit}
.sl-submit-answers-btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- generic .panel container ----------
   Used across Order Placement, Admin, CopyTrade, Market Data, and
   Strategy Lab. It only ever had background/border/radius from the
   per-look re-skin in looks.css -- no padding was defined ANYWHERE,
   so every field and heading inside a .panel sat flush against its
   own border with zero breathing room. */
.panel{padding:22px}
@media (max-width:480px){.panel{padding:16px}}

/* ---------- Order Placement ---------- */
.kn-tab-btn{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px 6px;
  border-radius:8px;
  font-size:13.5px;
  font-family:inherit;
  font-weight:600;
  line-height:1.2;
  color:var(--muted);
  cursor:pointer;
  transition:background .15s,color .15s;
  border:none;
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.kn-tab-btn.active{background:var(--accent);color:#fff}
/* Segment/side/order-type tab rows can carry 2-4 buttons; on very
   narrow screens (most phones), force them onto their own full-width
   row and let the tab strip itself wrap to two lines rather than
   letting flex:1 buttons get crushed to the point their labels
   overlap each other. */
@media (max-width:480px){
  .kn-tab{flex-wrap:wrap}
  .kn-tab-btn{flex:1 1 45%;font-size:12.5px;padding:9px 4px}
}
.op-search-wrap{position:relative}
.op-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted-2);pointer-events:none}
.op-search-input{padding-left:38px !important}
.op-search-results{margin-top:6px;max-height:280px;overflow-y:auto;background:var(--tile);border-radius:10px;
  border:1px solid var(--border,rgba(255,255,255,.08))}
.op-search-row{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:10px;border-bottom:1px solid rgba(127,127,127,.12);flex-wrap:wrap}
.op-search-row:last-child{border-bottom:none}
.op-search-row:hover{background:rgba(127,127,127,.10)}
.op-search-sym{font-weight:700;font-size:14px}
.op-search-name{font-size:12px;color:var(--muted)}
.op-search-meta{font-size:11.5px;color:var(--muted);text-align:right}
.op-selected-instrument{margin-top:8px;padding:10px 14px;border-radius:10px;background:var(--tile);
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.op-selected-instrument .op-clear-btn{cursor:pointer;color:var(--muted);font-size:18px;line-height:1;padding:0 4px;flex-shrink:0}
.op-status-pill{padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700;display:inline-block;white-space:nowrap}
.op-status-open{background:rgba(46,204,113,.15);color:#2ecc71}
.op-status-pending{background:rgba(241,196,15,.15);color:#f1c40f}
.op-status-closed{background:rgba(127,127,127,.15);color:var(--muted)}
.op-status-cancelled{background:rgba(127,127,127,.15);color:var(--muted)}
.op-status-failed{background:rgba(255,90,110,.15);color:var(--red)}
.op-status-maxloss{background:rgba(255,90,110,.18);color:var(--red)}
.op-source-platform{background:rgba(52,152,219,.15);color:#3498db}
.op-source-direct{background:rgba(127,127,127,.15);color:var(--muted)}
/* The User/Broker/Segment row on the order page has THREE fields --
   the shared .field-row grid only defines 2 columns, which was
   letting the third field (Segment) drop awkwardly onto its own half-
   width row instead of lining up. Give it an explicit 3-column grid
   on desktop and stack cleanly on mobile. */
.op-field-row-3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px}
@media (max-width:700px){.op-field-row-3{grid-template-columns:1fr}}
.op-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:980px){.op-layout{grid-template-columns:460px minmax(0,1fr)}}
.op-layout>*{min-width:0}
.op-orders-panel{min-height:220px;display:flex;flex-direction:column}
.op-orders-panel .table-scroll{flex:1}
.op-empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:8px;padding:36px 20px;color:var(--muted);flex:1;justify-content:center}
.op-empty svg{stroke:var(--muted-2);opacity:.6}
.op-empty div{font-size:13.5px;font-weight:600;color:var(--muted)}
.op-empty p{font-size:12px;color:var(--muted-2);margin:0;max-width:260px}
/* The User column uses a native <select>, the Broker/Segment columns use
   .kn-tab pill groups -- both sit under an identical .kn-label, but the
   page-wide `select{margin-top:6px}` rule (meant for the Quick Order
   page) stacks with the label's own 6px margin-bottom to give the
   select roughly double the gap .kn-tab gets, AND the select's own
   padding renders about 9px shorter than a .kn-tab group. Together
   that made the User field visibly sit higher/shorter than Broker and
   Segment next to it -- a real, visible misalignment, not just a
   feeling. Zero out the extra margin and match the height exactly. */
.op-field-row-3 select{margin-top:0;height:54px}
/* Order popup's own field rows (Side/Type, Qty/Limit, SL/Target) --
   the detail panel is capped at 420px wide, which is already tight
   enough that the default .field-row 420px breakpoint doesn't kick in
   until the panel itself is nearly full-bleed on a phone. Lower the
   breakpoint for rows inside the panel specifically. */
@media (max-width:480px){
  #opOrderModal .field-row{grid-template-columns:1fr}
}
.ghost{background:transparent;border:1.5px solid rgba(127,127,127,.35);color:var(--text);
  padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer}
.ghost:hover{background:rgba(127,127,127,.10)}
.ghost:disabled{opacity:.5;cursor:default}
.detail-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid rgba(127,127,127,.12);font-size:13px}
.detail-row:last-child{border-bottom:none}
.detail-row-key{color:var(--muted)}
.detail-row-val{font-weight:600;text-align:right;word-break:break-word}

/* ---------- Super Indicator page ---------- */
.si-status-banner{
  font-size:13px;line-height:1.5;color:var(--muted);
  background:rgba(255,184,92,0.08);border:1px solid rgba(255,184,92,0.25);
  border-radius:var(--radius-md);padding:12px 16px;
}
.si-status-banner strong{color:var(--amber)}
#siSearchInput{
  width:100%;padding:10px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--tile);color:var(--text);font-size:15px;
}
.si-suggest-list{
  position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:4px;
  background:var(--card-solid);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);max-height:260px;overflow-y:auto;
  box-shadow:0 12px 30px rgba(0,0,0,0.4);
}
.si-suggest-item{
  padding:9px 14px;font-size:14px;cursor:pointer;color:var(--text);
}
.si-suggest-item:hover,.si-suggest-item.active{background:var(--accent);color:#fff}
.si-tf-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:6px;
  align-items:stretch;
}
.si-tf-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px;display:flex;flex-direction:column;height:100%;
}
.si-tf-card .si-tf-head{flex:0 0 auto}
.si-tf-card .si-tf-body{flex:1 1 auto}
.si-tf-card .si-tf-foot{flex:0 0 auto;margin-top:10px}
.si-tf-card .si-tf-name{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.si-tf-card .si-tf-prob{font-size:32px;font-weight:700;margin:8px 0 2px;line-height:1}
.si-tf-card .si-tf-dir{font-size:13px;font-weight:600;margin-bottom:0}
.si-tf-card .si-tf-dir.buy{color:var(--green)}
.si-tf-card .si-tf-dir.sell{color:var(--red)}
.si-tf-card .si-tf-dir.neutral{color:var(--muted)}
.si-tf-card .si-tf-trend{font-size:13px;color:var(--text);margin:10px 0 4px}
.si-tf-card .si-tf-vol{font-size:12px;color:var(--muted)}
.si-tf-card .si-tf-vol.HIGH{color:var(--red)}
.si-tf-card .si-tf-vol.LOW{color:var(--accent-2)}
.si-tf-card .si-tf-meta{font-size:11px;color:var(--muted-2);margin-top:6px;border-top:1px solid var(--border);padding-top:8px}
.si-tf-card.unseasoned{opacity:0.55}
.si-tf-card.no-data{opacity:0.45}
.si-tf-card.no-data .si-tf-body{display:flex;align-items:center}

/* Overall buy-side/sell-side trend banner (2026-07-26, user-requested):
   sits above the per-timeframe grid so the headline verdict for a
   stock is visible without reading all 7 timeframe cards. */
.si-overall-banner{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:14px;margin:14px 0;border:1px solid var(--border)}
.si-overall-banner .si-overall-dir{font-size:20px;font-weight:800;letter-spacing:.03em;flex:0 0 auto;padding:4px 14px;border-radius:8px}
.si-overall-banner .si-overall-label{font-size:14px;color:var(--text);flex:1 1 auto}
.si-overall-banner.buy{background:rgba(46,204,113,0.08)}
.si-overall-banner.buy .si-overall-dir{color:#fff;background:var(--green)}
.si-overall-banner.sell{background:rgba(231,76,60,0.08)}
.si-overall-banner.sell .si-overall-dir{color:#fff;background:var(--red)}
.si-overall-banner.neutral{background:rgba(148,163,184,0.08)}
.si-overall-banner.neutral .si-overall-dir{color:var(--text);background:var(--border)}

/* "Learning" probability state -- replaces a bare 50% for timeframes
   where no indicator has graduated out of shadow mode yet, so it
   reads as "not seasoned" rather than a fake confident number. */
.si-tf-card .si-tf-prob.si-tf-prob-empty{font-size:16px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* Plain-English reason for the BUY/SELL/NEUTRAL call, listing the
   actual top contributing indicators and their learned weights. */
.si-tf-card .si-tf-reason{font-size:12px;color:var(--muted);line-height:1.5;margin:6px 0 10px;padding:8px 10px;background:rgba(148,163,184,0.08);border-radius:8px;border-left:3px solid var(--accent-2)}

.si-badge-shadow{
  display:inline-block;font-size:10px;padding:2px 7px;border-radius:20px;
  background:rgba(255,184,92,0.15);color:var(--amber);margin-left:6px;
}

/* ---- Market Data explorer page: wider responsive filter row + polish ---- */
#mdxSearchPanel .field-row{
  grid-template-columns:2fr 1.1fr 1.1fr 1.3fr auto auto;
  align-items:end;gap:14px;
}
@media (max-width:900px){
  #mdxSearchPanel .field-row{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  #mdxSearchPanel .field-row{grid-template-columns:1fr;}
}
#mdxSearchPanel .field{margin-top:0}
#mdxSearchPanel input[type="text"],
#mdxSearchPanel input[type="date"],
#mdxSearchPanel select{
  width:100%;height:42px;padding:0 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--card);color:var(--text);
  font-size:14px;
}
#mdxLoadBtn,#mdxExportBtn{height:42px;border-radius:10px;font-weight:600}
#mdxSummary{font-size:13px;margin:10px 2px 4px}
#mdxTableHead{margin-top:4px}
.table-scroll{border-radius:12px;overflow:hidden;border:1px solid var(--border)}
#mdxCandleTable thead th{position:sticky;top:0;background:var(--card);z-index:1}
#mdxCandleTable tbody tr:nth-child(even){background:rgba(255,255,255,0.02)}
#mdxCandleTable tbody tr:hover{background:rgba(255,255,255,0.05)}

/* ---- API Sandbox card: cleaner code-block presentation ---- */
#mdApiSandboxCard .md-code-block{position:relative;margin-bottom:4px}
#mdApiSandboxCard .md-code-block pre{margin:0}
#mdApiSandboxCard .md-copy-btn{
  position:absolute;top:8px;right:8px;padding:4px 10px;font-size:11px;
  border-radius:6px;border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.06);color:#e8e8f0;cursor:pointer;
}
#mdApiSandboxCard .md-copy-btn:hover{background:rgba(255,255,255,0.14)}
#mdApiSandboxCard{max-width:100%;overflow-x:hidden}
#mdApiSandboxCard .md-endpoint-row{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:10px 14px;margin-bottom:8px;font-size:13px;
  max-width:100%;overflow-wrap:anywhere;word-break:break-word;
}
#mdApiSandboxCard .md-endpoint-row code{font-family:monospace;overflow-wrap:anywhere;word-break:break-word}
#mdApiSandboxCard pre{max-width:100%;white-space:pre-wrap;word-break:break-word}
@media (min-width:1000px){
  #mdApiSandboxCard .md-examples-grid{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;
  }
  #mdApiSandboxCard .md-examples-grid .md-code-block{margin-bottom:0}
}

/* ---- Super Indicator: historical probability + entry/target/SL ---- */
.si-tf-histprob{font-size:12px;color:var(--muted);margin:6px 0 2px}
.si-tf-histprob b{color:var(--text)}
.si-tf-meta-inline{font-size:11px;color:var(--muted-2)}
.si-tf-levels{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.si-tf-level{background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:6px 10px;font-size:12px;display:flex;flex-direction:column;gap:2px;min-width:70px}
.si-tf-level span{color:var(--muted-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em}
.si-tf-level b{font-size:13px}
.si-tf-level.target b{color:var(--green,#2ecc71)}
.si-tf-level.stop b{color:var(--red,#e5484d)}

/* ---- Super Indicator: support/resistance levels ---- */
.si-tf-sr{margin:8px 0;font-size:12px;line-height:1.6}
.si-sr-row{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.si-sr-row span{color:var(--muted-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;margin-right:4px;min-width:66px}
.si-sr-row.resistance b{color:var(--red,#e5484d)}
.si-sr-row.support b{color:var(--green,#2ecc71)}
.si-sr-row i{color:var(--muted-2);font-style:normal;font-size:10.5px;margin-right:6px}
.si-tf-levels-empty{font-size:12.5px;opacity:.65;font-style:italic;padding:4px 0}

/* Entry/Target/SL are now always shown (2026-07-26): tag distinguishes
   a confirmed, threshold-crossing signal from a live projection of
   where levels would sit if the current (sub-threshold) lean firms up. */
.si-tf-levels-tag{font-size:11px;font-weight:600;padding:3px 0;letter-spacing:.01em}
.si-tf-levels-tag-active{color:var(--green,#2ecc71)}
.si-tf-levels-tag-projected{color:var(--muted-2);font-weight:500;font-style:italic}
.si-tf-levels-projected{opacity:.72}
.si-tf-levels-projected .si-tf-level{border-style:dashed}

/* Explicit BUY/SELL badge next to Entry/Target/SL (2026-07-26 user
   request) -- direction must be unmissable, not just implied by
   whether target sits above or below entry. */
.si-dir-badge{display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12.5px;letter-spacing:.04em;border-radius:8px;
  padding:6px 12px;min-width:52px;text-align:center;margin-right:2px}
.si-dir-badge-buy{background:rgba(46,204,113,.16);color:var(--green,#2ecc71);border:1px solid rgba(46,204,113,.4)}
.si-dir-badge-sell{background:rgba(229,72,77,.16);color:var(--red,#e5484d);border:1px solid rgba(229,72,77,.4)}
.si-dir-badge-projected{opacity:.7;border-style:dashed}

.mdx-trend-badge{
  height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;font-weight:700;font-size:13px;padding:0 14px;
  border:1px solid var(--border);background:var(--card);white-space:nowrap;
}
.mdx-trend-badge.up{color:var(--green,#2ecc71);border-color:var(--green,#2ecc71)}
.mdx-trend-badge.down{color:var(--red,#e5484d);border-color:var(--red,#e5484d)}
.mdx-trend-badge.flat{color:var(--muted)}

.si-take-trade-btn{
  margin:8px 0 4px;padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:600;
  border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;
}
.si-take-trade-btn:hover{opacity:.9}
.si-take-trade-btn:disabled{opacity:.6;cursor:default}
.si-take-trade-btn.done{background:var(--green,#2ecc71);border-color:var(--green,#2ecc71)}

.pm-ee-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid var(--border)}
.pm-ee-label{font-size:12px;color:var(--muted)}
.pm-ee-toggle{
  padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid var(--border);background:var(--card);color:var(--muted);white-space:nowrap;
}
.pm-ee-toggle.active{background:var(--red,#e5484d);border-color:var(--red,#e5484d);color:#fff}
.pm-ee-toggle:disabled{opacity:.6;cursor:default}