/* Dark Flow Futures — Mission Control visual system
   Frontend-only theme overlay derived from the Dark Flow Cloud design language.
   Loaded after the legacy styles so execution/data behavior stays untouched. */

:root{
  --df-bg:#06080d;
  --df-bg-2:#080c12;
  --df-panel:#0d1218;
  --df-panel-2:#101720;
  --df-panel-3:#141c26;
  --df-panel-soft:rgba(15,21,29,.94);
  --df-line:rgba(148,163,184,.15);
  --df-line-soft:rgba(148,163,184,.09);
  --df-line-strong:rgba(148,163,184,.24);
  --df-muted:#8f9caf;
  --df-muted-2:#69778b;
  --df-text:#e7ecf3;
  --df-text-strong:#f7f9fc;
  --df-good:#3fc78b;
  --df-warn:#d5a64e;
  --df-bad:#e96a77;
  --df-accent:#6592e8;
  --df-accent-2:#82a9f3;
  --df-cyan:#41bfd4;
  --df-violet:#9673e8;
  --df-radius-sm:7px;
  --df-radius-md:10px;
  --df-radius-lg:12px;
  --df-radius-xl:16px;
  --df-shadow-panel:0 1px 0 rgba(255,255,255,.025),0 12px 30px rgba(0,0,0,.20);
  --df-shadow-raised:0 18px 44px rgba(0,0,0,.28),0 0 0 1px rgba(101,146,232,.045);
  --df-sidebar:258px;
}

html{
  background:var(--df-bg);
  color-scheme:dark;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  min-width:320px;
  background:
    radial-gradient(circle at 16% -8%,rgba(58,94,155,.14),transparent 31rem),
    radial-gradient(circle at 92% 10%,rgba(65,191,212,.045),transparent 28rem),
    linear-gradient(180deg,#080b10 0%,var(--df-bg) 44%);
  color:var(--df-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
  font-synthesis:none;
  font-variant-numeric:tabular-nums lining-nums;
}

button,input,select,textarea{font:inherit;font-variant-numeric:tabular-nums lining-nums}
strong,b{color:var(--df-text-strong)}

.shell{
  grid-template-columns:var(--df-sidebar) minmax(0,1fr);
  background:transparent;
}

aside{
  z-index:40;
  width:var(--df-sidebar);
  padding:24px 16px 20px;
  background:
    radial-gradient(circle at 30% 0%,rgba(61,109,188,.11),transparent 22rem),
    linear-gradient(180deg,#0a0f16 0%,#080c12 56%,#070a0f 100%);
  border-right:1px solid var(--df-line-soft);
  box-shadow:14px 0 38px rgba(0,0,0,.18);
  scrollbar-width:thin;
  scrollbar-color:#263343 transparent;
}

.brand-lockup{
  gap:11px;
  margin-bottom:24px;
  padding:3px 5px 17px;
  border-bottom:1px solid var(--df-line-soft);
}

.brand-mark{
  width:42px;
  height:42px;
  flex-basis:42px;
  filter:drop-shadow(0 8px 18px rgba(79,140,255,.20));
}

.brand-lockup .brand{
  color:var(--df-text-strong);
  font-size:13px;
  font-weight:780;
  letter-spacing:.105em;
}

.brand-lockup .brand span{color:var(--df-accent-2)}
.brand-lockup .sub{
  margin:4px 0 0;
  color:var(--df-muted);
  font-size:10px;
  font-weight:650;
  letter-spacing:.055em;
  text-transform:uppercase;
}

aside nav{display:grid;gap:3px}

.nav{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:39px;
  margin:0;
  padding:6px 9px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#9eabba;
  font-size:11.5px;
  font-weight:620;
  line-height:1;
  letter-spacing:.004em;
  overflow:hidden;
}

.nav::before{
  content:"·";
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border:1px solid rgba(148,163,184,.12);
  border-radius:7px;
  background:rgba(255,255,255,.022);
  color:#77879b;
  font-size:13px;
  font-weight:750;
  line-height:1;
}
.nav[data-tab="dashboard"]::before{content:"▦"}
.nav[data-tab="accounts"]::before{content:"◎"}
.nav[data-tab="journey"]::before{content:"⇢"}
.nav[data-tab="series"]::before{content:"↻"}
.nav[data-tab="signals"]::before{content:"⌁"}
.nav[data-tab="orders"]::before{content:"≡"}
.nav[data-tab="trades"]::before{content:"⇄"}
.nav[data-tab="risk"]::before{content:"◇"}
.nav[data-tab="modes"]::before{content:"◈"}
.nav[data-tab="profiles"]::before{content:"⌑"}
.nav[data-tab="strategy"]::before{content:"⌘"}
.nav[data-tab="system"]::before{content:"⚙"}
.nav[data-tab="add"]::before{content:"＋"}
.nav[data-tab="help"]::before{content:"?"}

.nav:hover{
  border-color:rgba(101,146,232,.12);
  background:rgba(101,146,232,.055);
  color:#dbe4f1;
}

.nav.active{
  border-color:rgba(101,146,232,.18);
  background:linear-gradient(90deg,rgba(73,117,195,.18),rgba(73,117,195,.065));
  color:#edf4ff;
  box-shadow:inset 2px 0 0 var(--df-accent),0 7px 20px rgba(0,0,0,.09);
}
.nav.active::before{
  border-color:rgba(101,146,232,.28);
  background:rgba(101,146,232,.11);
  color:#9fc0ff;
  box-shadow:0 0 16px rgba(101,146,232,.09);
}

.status-card{
  margin-top:18px;
  padding:11px 12px;
  border:1px solid var(--df-line);
  border-radius:var(--df-radius-md);
  background:rgba(255,255,255,.018);
  color:var(--df-muted);
  font-size:9.5px;
  line-height:1.45;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}
.status-card strong{
  margin-top:3px;
  color:var(--df-warn);
  font-size:10px;
  font-weight:700;
  letter-spacing:.025em;
}

.logout-button{
  width:100%;
  min-height:36px;
  margin-top:12px;
  border:1px solid var(--df-line);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  color:#aab6c6;
  font-size:10.5px;
  font-weight:650;
  cursor:pointer;
}
.logout-button:hover{border-color:rgba(233,106,119,.28);background:rgba(233,106,119,.06);color:#ef9aa4}
.crm-session-note{margin-top:8px;color:#647286;font-size:8.5px;line-height:1.45}

main{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:1720px;
  padding:0 clamp(22px,3vw,44px) 64px;
  color:var(--df-text);
}

main>header{
  position:sticky;
  top:0;
  z-index:30;
  min-height:72px;
  margin:0 calc(clamp(22px,3vw,44px)*-1) 26px;
  padding:11px clamp(22px,3vw,44px);
  border-bottom:1px solid var(--df-line-soft);
  background:rgba(6,8,13,.88);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}

main>header>div{min-width:0}
main>header h1{
  margin:0;
  color:var(--df-text-strong);
  font-size:clamp(21px,1.65vw,27px);
  font-weight:650;
  line-height:1.18;
  letter-spacing:-.03em;
}
main>header p{
  max-width:760px;
  margin:4px 0 0;
  color:var(--df-muted);
  font-size:11px;
  line-height:1.45;
}

h1,h2,h3,h4{color:var(--df-text-strong);font-family:inherit;text-wrap:balance}
h2{font-size:15.5px;font-weight:650;letter-spacing:-.012em}
h3{font-size:13.5px;font-weight:650}
h4{font-size:12px;font-weight:650}
p{color:var(--df-muted)}

.tab{min-width:0}
.tab.active{display:block}

.card,.panel{
  border:1px solid var(--df-line);
  background:linear-gradient(180deg,rgba(15,21,29,.97),rgba(11,16,23,.97));
  color:var(--df-text);
  box-shadow:var(--df-shadow-panel);
}
.card{border-radius:var(--df-radius-lg);padding:18px}
.panel{border-radius:var(--df-radius-xl);padding:20px}
.card span,.card small,.panel p{color:var(--df-muted)}
.card strong{color:var(--df-text-strong)}

.panel-title{align-items:flex-start;gap:18px;margin-bottom:4px}
.panel-title h2{margin-bottom:4px}
.panel-title p{margin:0;font-size:11px}
.panel-actions{gap:7px}

.primary,.secondary,.danger,
button.primary,button.secondary,button.danger{
  min-height:37px;
  padding:0 13px;
  border:1px solid #2b3a4d;
  border-radius:8px;
  font-size:11px;
  font-weight:650;
  line-height:1;
  letter-spacing:0;
  box-shadow:0 1px 0 rgba(255,255,255,.025);
}
.primary,button.primary{
  border-color:rgba(101,146,232,.42);
  background:linear-gradient(180deg,#315fae,#294f92);
  color:#f8fbff;
}
.secondary,button.secondary{background:#151e2a;color:#dbe4ef}
.danger,button.danger{border-color:rgba(233,106,119,.30);background:rgba(233,106,119,.10);color:#f39aa4}

label{color:#aab5c4;font-size:11px;font-weight:650}
input,select,textarea{
  width:100%;
  min-height:40px;
  margin-top:6px;
  padding:9px 11px;
  border:1px solid #263446;
  border-radius:8px;
  outline:0;
  background:#090e14;
  color:var(--df-text-strong);
  caret-color:var(--df-accent-2);
}
input::placeholder,textarea::placeholder{color:#536174}
select{color-scheme:dark}

.preview,.notice,.setup-required{
  border:1px solid var(--df-line);
  border-radius:var(--df-radius-md);
  background:var(--df-panel-2);
  color:#b9c6d7;
}
.notice,.setup-required{border-color:rgba(213,166,78,.20);background:rgba(213,166,78,.055);color:#d7b978}
.result{color:var(--df-text)}
.ok{color:var(--df-good)!important}.err{color:var(--df-bad)!important}

.firm-section{border-color:var(--df-line);background:var(--df-panel);box-shadow:var(--df-shadow-panel)}
.stage-head{border-color:var(--df-line-soft);background:var(--df-panel-2);color:#d6deea}
.account-row{border-color:var(--df-line-soft)}
.badge{background:#1b2532;color:#aebbc9}
.badge.active{background:rgba(63,199,139,.10);color:#6bd9a7}

.data-table-wrap{
  border-color:var(--df-line);
  background:#090e14;
  scrollbar-color:#273547 transparent;
}
.data-table{color:var(--df-text)}
.data-table th,.data-table td{border-bottom-color:var(--df-line-soft);border-right-color:rgba(148,163,184,.06)}
.data-table th{background:#101720;color:#a9b5c5}
.data-table tr:hover td{background:rgba(101,146,232,.045)}
code,pre{border:1px solid var(--df-line-soft);background:#090e14;color:#bdc9d9}
.empty-state{color:var(--df-muted)}

::selection{background:rgba(101,146,232,.28);color:#fff}
*{scrollbar-width:thin;scrollbar-color:#273547 transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:#273547;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#34465c;background-clip:padding-box}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  aside{position:relative;width:auto;height:auto;padding:18px 16px}
  aside nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-lockup{margin-bottom:15px}
  main{padding:0 16px 42px}
  main>header{margin:0 -16px 20px;padding:12px 16px 12px 58px;position:sticky}
  .status-card{margin-top:15px}
}

@media(max-width:560px){
  aside nav{grid-template-columns:1fr}
  .panel{padding:15px}
  main>header h1{font-size:19px}
  main>header p{display:none}
}