
:root{
  --bg:#050b12;--bg2:#07131f;--panel:#091724;--panel2:#0c1c2b;--line:#263d52;
  --red:#d93447;--red2:#7d202c;--gold:#d5aa51;--blue:#5aa2ef;--green:#2ed3a0;
  --text:#e9eef5;--muted:#8093a6;--danger:#ff6474;--shadow:0 18px 50px rgba(0,0,0,.28)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"Microsoft YaHei","Segoe UI",sans-serif;font-weight:400}
button,input,select,textarea{font:inherit;font-weight:400}
button{cursor:pointer}
.hidden{display:none!important}
body{background:
 radial-gradient(circle at 92% 0,rgba(52,108,162,.16),transparent 34%),
 radial-gradient(circle at 5% 100%,rgba(148,23,39,.16),transparent 28%),
 linear-gradient(180deg,#050b12,#06101a 55%,#040a11)}
h1,h2,h3,b,strong{font-weight:400}
.app{min-height:100vh}.shell{padding:16px 20px 28px}
.topbar{height:68px;display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:rgba(5,11,18,.93);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:12px;min-width:270px}.mark{font-family:Georgia,serif;font-size:32px;color:#e43a4d;line-height:1}.mark small{font-family:inherit;font-size:9px;color:var(--gold);display:block;letter-spacing:3px;text-align:center;margin-top:2px}.brandText b{display:block;font-family:Georgia,serif;color:#75a2d9;font-size:19px;letter-spacing:.5px;font-weight:400}.brandText span{display:block;color:#e74050;font-size:9px;letter-spacing:2.4px;margin-top:3px}
.nav{display:flex;gap:5px;flex:1;overflow:auto}.nav button{border:1px solid transparent;background:transparent;color:#95a6b6;padding:9px 11px;border-radius:8px;white-space:nowrap}.nav button.active{border-color:#8e2733;color:#ffe3b0;background:linear-gradient(180deg,rgba(217,52,71,.2),rgba(217,52,71,.06))}
.userArea{display:flex;align-items:center;gap:8px;font-size:12px}.sysok{color:var(--green);white-space:nowrap}.chip,.iconBtn{border:1px solid var(--line);background:#081521;color:#cbd5df;border-radius:8px;padding:8px 10px}.iconBtn{padding:8px}
.pageHead{display:flex;align-items:end;justify-content:space-between;margin:18px 0 12px}.pageHead h1{font-size:22px;margin:0;font-weight:700}.pageHead p{margin:5px 0 0;color:var(--muted);font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:#0a1826;color:#dfe7ee;padding:9px 12px;border-radius:8px}.btn:hover{border-color:#4f6f8a}.btn.primary{border-color:#9b2937;background:linear-gradient(180deg,#5e1722,#321018);color:#ffe3b1}.btn.gold{border-color:#6c542b;background:#241b0b;color:#f1c76d}.btn.danger{border-color:#74303a;color:#ff8793}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin-bottom:13px}.kpi{border:1px solid var(--line);border-left:2px solid var(--red);background:linear-gradient(180deg,rgba(12,28,43,.98),rgba(7,18,29,.98));border-radius:11px;padding:13px 14px;box-shadow:var(--shadow)}.kpi label{display:block;color:var(--muted);font-size:11px}.kpi strong{display:block;font-size:25px;font-weight:400;margin-top:5px}.kpi small{color:#6f8497;font-size:10px}
.grid2{display:grid;grid-template-columns:1.7fr .8fr;gap:13px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}.panel{background:linear-gradient(180deg,rgba(10,24,38,.98),rgba(6,17,27,.99));border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}.panelHead{min-height:52px;padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.panelHead h2{font-size:14px;margin:0;font-weight:700}.panelHead p{font-size:10px;color:var(--muted);margin:3px 0 0}.panelBody{padding:14px}
.tableWrap{overflow:auto}.dataTable{width:100%;border-collapse:collapse;font-size:11px}.dataTable th,.dataTable td{padding:10px 11px;border-bottom:1px solid #173047;text-align:left;white-space:nowrap;font-weight:400}.dataTable th{color:#70869a;background:#081521;position:sticky;top:0}.dataTable tbody tr:hover{background:rgba(89,162,239,.055)}.link{color:#e6b754;cursor:pointer}.up{color:var(--green)}.down{color:var(--danger)}.muted{color:var(--muted)}.statusDot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px}.statusDot.active{background:var(--green)}.statusDot.disabled{background:var(--danger)}.statusDot.pending{background:var(--gold)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}.input,.select,.textarea{width:100%;border:1px solid var(--line);background:#07131f;color:#e6edf4;border-radius:8px;padding:9px 10px;outline:none}.input:focus,.select:focus,.textarea:focus{border-color:#5c7891;box-shadow:0 0 0 2px rgba(90,162,239,.08)}.textarea{min-height:86px;resize:vertical}.toolbar .input{width:220px}.toolbar .select{width:150px}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field label{display:block;color:#8ea0b1;font-size:11px;margin:0 0 5px}.field.full{grid-column:1/-1}
.empty{padding:34px;text-align:center;color:var(--muted);font-size:12px}.list{display:grid;gap:8px}.listItem{border:1px solid #1c3448;border-radius:9px;padding:10px 11px;background:#07131f}.listItem .top{display:flex;justify-content:space-between;gap:12px}.listItem p{margin:7px 0 0;color:#aab8c4;font-size:11px;line-height:1.6}.listItem small{color:#6f8295}
.loginPage{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch}.loginHero{padding:7vw;display:flex;flex-direction:column;justify-content:center;background:
 linear-gradient(90deg,rgba(4,10,17,.94),rgba(4,10,17,.64)),
 radial-gradient(circle at 28% 40%,rgba(156,27,43,.25),transparent 32%),
 linear-gradient(135deg,#07131f,#050b12)}.heroMark{font-family:Georgia,serif;font-size:66px;color:#e33a4d;letter-spacing:2px}.loginHero h1{font-family:Georgia,"Microsoft YaHei",serif;font-size:40px;margin:18px 0 10px;max-width:720px;font-weight:700}.loginHero p{color:#8ea0b1;line-height:1.8;max-width:650px}.heroRule{width:90px;height:2px;background:linear-gradient(90deg,var(--red),var(--gold));margin:18px 0}.loginSide{display:flex;align-items:center;justify-content:center;padding:40px;background:linear-gradient(180deg,#07131f,#050b12)}.loginCard{width:min(430px,100%);border:1px solid #2c4356;background:rgba(8,21,33,.93);padding:30px;border-radius:14px;box-shadow:0 35px 100px rgba(0,0,0,.45)}.loginCard h2{margin:0;font-size:21px;font-weight:700}.loginCard>p{color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:22px}.loginCard .field{margin-bottom:12px}.loginFoot{margin-top:18px;color:#677b8d;font-size:10px;border-top:1px solid #183045;padding-top:13px}
.chartBox{height:280px;padding:12px}.chartBox.small{height:220px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.67);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}.modalCard{width:min(760px,96vw);max-height:90vh;overflow:auto;background:#081521;border:1px solid #37516a;border-radius:13px;box-shadow:0 30px 100px rgba(0,0,0,.55)}.modalHead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}.modalHead h2{font-size:15px;margin:0;font-weight:700}.modalBody{padding:16px}.close{border:0;background:transparent;color:#9fb0bf;font-size:22px}
.customerDetail{position:fixed;inset:0;z-index:90;background:#050b12;overflow:auto}.detailTop{position:sticky;top:0;z-index:5;background:rgba(5,11,18,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:13px 20px;display:flex;align-items:center;gap:13px}.detailTop h1{font-size:19px;margin:0;font-weight:700}.detailBody{padding:18px 20px 30px}.tabs{display:flex;gap:6px;margin-bottom:12px;overflow:auto}.tabs button{border:1px solid var(--line);background:#081521;color:#8fa1b2;border-radius:8px;padding:8px 10px;white-space:nowrap}.tabs button.active{border-color:#8c2935;color:#ffe4b0;background:#331019}
.toast{position:fixed;right:20px;bottom:20px;z-index:150;background:#0a1a28;border:1px solid #35516a;color:#e8eef4;padding:11px 14px;border-radius:9px;box-shadow:var(--shadow);font-size:12px}.toast.error{border-color:#7b2a36;color:#ff9aa4}
.quoteHeader{display:flex;justify-content:space-between;align-items:end;gap:20px}.quoteHeader h3{font-family:Georgia,serif;font-size:28px;margin:4px 0}.quotePrice{font-size:34px}.marketList{display:grid;gap:7px}.marketRow{display:grid;grid-template-columns:.8fr 1.6fr 1.1fr .7fr .7fr;gap:10px;border-bottom:1px solid #183044;padding:9px 0;font-size:11px;align-items:center}.marketRow:hover{background:rgba(90,162,239,.04)}
@media(max-width:1200px){.kpis{grid-template-columns:repeat(3,1fr)}.grid2{grid-template-columns:1fr}.topbar{height:auto;flex-wrap:wrap;padding:10px 0}.brand{min-width:0}.nav{order:3;width:100%}.userArea{margin-left:auto}.loginPage{grid-template-columns:1fr}.loginHero{min-height:42vh;padding:50px}.loginSide{padding:24px}}
@media(max-width:720px){.shell{padding:10px}.kpis{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr}.pageHead{align-items:flex-start;flex-direction:column;gap:10px}.formGrid{grid-template-columns:1fr}.field.full{grid-column:auto}.toolbar .input,.toolbar .select{width:100%}.loginHero{padding:32px 22px}.loginHero h1{font-size:30px}.heroMark{font-size:48px}.userArea .sysok{display:none}}


/* Interaction rules: only page/module titles are bold. */
.panel,.kpi,.listItem,.loginCard,.modalCard,.marketRow,.chip,.btn,.nav button,.iconBtn,.input,.select,.textarea,.tabs button{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.panel:hover,.kpi:hover,.listItem:hover,.loginCard:hover,.marketRow:hover,.chip:hover,.btn:hover,.nav button:hover,.iconBtn:hover,.tabs button:hover{
  transform:translateY(-3px);
  border-color:#456782;
  box-shadow:0 14px 38px rgba(0,0,0,.35),0 0 0 1px rgba(91,164,243,.09),inset 0 0 0 1px rgba(255,255,255,.018);
}
.input:hover,.select:hover,.textarea:hover{
  transform:translateY(-1px);
  border-color:#456782;
  box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 0 1px rgba(91,164,243,.08);
}
.dataTable th,.dataTable td,.nav button,.btn,.chip,.iconBtn,.marketRow,.quotePrice,.kpi strong,.userArea,.field label,.listItem,.input,.select,.textarea{
  font-weight:400!important;
}
.romaniaClock{
  display:inline-flex;align-items:center;gap:6px;border:1px solid #314b61;background:#07131f;color:#a9bac8;border-radius:8px;padding:8px 10px;white-space:nowrap;font-weight:400;
}
.romaniaClock::before{content:"RO";font-size:9px;color:#e6b754;border:1px solid #6b542a;border-radius:4px;padding:1px 4px}
.marketControls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.marketControls .select{width:170px}
.marketControls .input{width:320px}
.marketStatusBar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.marketStatus{border:1px solid #294157;background:#07131f;border-radius:9px;padding:8px 10px;font-size:11px;color:#9fb0bf;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.marketStatus:hover{transform:translateY(-3px);border-color:#496d89;box-shadow:0 12px 28px rgba(0,0,0,.28)}
.marketStatus.live{color:#57dfb2;border-color:#255a4a}
.marketStatus.blocked{color:#f0bd61;border-color:#6a5126}
.marketRow{grid-template-columns:.72fr 1.35fr .9fr 1.15fr .72fr .72fr .92fr;border:1px solid #183044;border-radius:8px;padding:9px 10px}
.liveBadge,.delayBadge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 7px;font-size:10px;font-weight:400}
.liveBadge{color:#55dfb0;border:1px solid #245947;background:#082119}
.delayBadge{color:#efbd62;border:1px solid #6d5124;background:#211908}
.chartBox canvas{cursor:crosshair}
@media(max-width:1200px){.romaniaClock{display:none}.marketControls .input{width:240px}}
@media(max-width:720px){.marketControls .select,.marketControls .input{width:100%}}


/* === Lumen UI contract pass: 16:9 dashboard / consistent scale / no horizontal scroll === */
:root{
  --ui-title:15px;
  --ui-body:13px;
  --ui-data:15px;
  --ui-number:24px;
  --ui-small:11px;
  --ui-radius:12px;
}
html,body,.app,.shell{max-width:100%;overflow-x:hidden}
.shell{padding:12px 18px 18px;min-height:100vh}
.topbar{
  height:72px;
  display:grid;
  grid-template-columns:278px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:0;
  overflow:hidden;
}
.brand{min-width:0;gap:10px;overflow:hidden}
.mark{font-size:28px}
.mark small{font-size:8px;letter-spacing:2.5px}
.brandText{min-width:0}
.brandText b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brandText span{font-size:8px;letter-spacing:2px;white-space:nowrap}
.nav{
  min-width:0;
  width:100%;
  overflow:hidden!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2px;
  scrollbar-width:none;
}
.nav::-webkit-scrollbar,.tableWrap::-webkit-scrollbar{height:0;width:0}
.nav button{
  min-width:0;
  flex:0 1 auto;
  padding:8px 8px;
  font-size:13px;
  line-height:1;
  border-radius:9px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.userArea{gap:5px;font-size:11px;white-space:nowrap;min-width:max-content}
.sysok{font-size:11px}
.romaniaClock,.chip,.iconBtn{padding:7px 8px;font-size:11px;border-radius:8px}
#main{
  min-height:calc(100vh - 102px);
  display:flex;
  flex-direction:column;
  padding-top:12px;
}
.pageHead{display:none!important}
.pageActions{display:flex;justify-content:flex-end;align-items:center;min-height:34px;margin-bottom:8px}
#main>.panel{flex:1;min-height:calc(100vh - 132px)}
#main>.grid3{flex:1;min-height:0}
#main>.grid3>.panel{height:100%;min-height:calc(100vh - 132px)}
#main>.marketStatusBar + .grid2{flex:1;min-height:0}
#main>.marketStatusBar + .grid2>.panel{height:100%;min-height:calc(100vh - 178px)}
.panel{
  border-radius:var(--ui-radius);
  box-shadow:0 8px 24px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.012);
}
.panelHead{
  min-height:48px;
  padding:10px 13px;
  gap:12px;
}
.panelHead h2{font-size:var(--ui-title);line-height:1.25;font-weight:700}
.panelHead p{font-size:var(--ui-small);line-height:1.35;margin-top:3px}
.panelBody{padding:13px}
.btn,.input,.select,.textarea{
  font-size:var(--ui-body)!important;
  line-height:1.25;
}
.btn{padding:8px 11px}
.input,.select{min-height:38px;padding:8px 10px}
.toolbar{gap:7px;align-items:center}
.toolbar .input{width:230px}
.toolbar .select{width:140px}
.dataTable{font-size:var(--ui-body)}
.dataTable th{
  font-size:12px;
  color:#7f92a5;
  padding:9px 11px;
}
.dataTable td{
  font-size:var(--ui-body);
  padding:10px 11px;
}
.kpis{gap:9px;margin-bottom:10px}
.kpi{padding:11px 12px}
.kpi label{font-size:var(--ui-small)}
.kpi strong{font-size:var(--ui-number)!important;line-height:1.1}
.kpi small{font-size:10px}
.list{gap:7px}
.listItem{font-size:var(--ui-body);padding:9px 10px}
.listItem .top{align-items:center}
.listItem .top>span:last-child{font-size:var(--ui-data);font-weight:400!important}
.listItem p{font-size:12px}
.field label{font-size:12px}
.empty{font-size:var(--ui-body)}
.quoteHeader h3{font-size:22px}
.quotePrice{font-size:28px!important}
.marketStatus{font-size:11px;padding:7px 9px}
.marketControls .select{width:150px}
.marketControls .input{width:280px}
.marketRow{
  grid-template-columns:.75fr 1.25fr .82fr 1.1fr .72fr .72fr .9fr;
  gap:8px;
  padding:8px 9px;
  font-size:12px!important;
}
.liveBadge,.delayBadge{font-size:10px}
.chartBox{height:250px;padding:10px}
.grid2,.grid3{gap:10px}
/* Lumen Card interactive treatment: lift with border depth, never bold content */
.panel:hover,.kpi:hover,.listItem:hover,.marketRow:hover{
  transform:translateY(-2px);
  border-color:#42637d;
  box-shadow:0 12px 30px rgba(0,0,0,.30),0 0 0 1px rgba(90,162,239,.07),inset 0 1px 0 rgba(255,255,255,.025);
}
.dataTable th,.dataTable td,.btn,.input,.select,.textarea,.marketRow,.listItem,.chip,.romaniaClock,.userArea,.quotePrice,.kpi strong{
  font-weight:400!important;
}
@media (min-width:1280px) and (max-width:1700px){
  .topbar{grid-template-columns:250px minmax(0,1fr) auto}
  .brandText b{font-size:15px}
  .nav button{font-size:12px;padding:8px 6px}
  .userArea{font-size:10px}
  .romaniaClock,.chip,.iconBtn{font-size:10px;padding:6px 7px}
}
@media(max-width:1279px){
  .topbar{height:auto;min-height:68px;display:grid;grid-template-columns:220px minmax(0,1fr);padding:8px 0}
  .userArea{grid-column:1/-1;justify-content:flex-end}
  .nav{order:initial;width:auto}
  .nav button{font-size:11px;padding:7px 5px}
  .romaniaClock{display:inline-flex}
}


/* === Executive dashboard reference pass === */
.executiveDashboard{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  min-height:calc(100vh - 96px);
}
.executiveKpis{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.execStat{
  min-height:128px;
  padding:14px 16px 12px;
  border:1px solid #294257;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(10,31,47,.98),rgba(7,24,37,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 26px rgba(0,0,0,.2);
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.execStat::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;
  background:linear-gradient(90deg,rgba(213,170,81,.65),transparent 62%);
  opacity:.5;
}
.execStat.accent{border-color:#6e5a23;box-shadow:inset 2px 0 0 rgba(213,170,81,.85),0 10px 26px rgba(0,0,0,.2)}
.execStat:hover{
  transform:translateY(-3px);
  border-color:#54738b;
  box-shadow:0 16px 36px rgba(0,0,0,.32),0 0 0 1px rgba(213,170,81,.08);
}
.execEyebrow{
  font-size:9px;
  letter-spacing:2px;
  color:#607a91;
  text-transform:uppercase;
  margin-bottom:10px;
  font-weight:400!important;
}
.execStatHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#9aacbc;
  font-size:13px;
  font-weight:400!important;
}
.execIcon{
  width:32px;height:32px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#e0b342;border:1px solid #5e4e22;background:#182313;
  font-size:14px;font-weight:400!important;
}
.execValue{
  margin-top:10px;
  color:#edf3f8;
  font-size:25px;
  line-height:1;
  font-weight:400!important;
  letter-spacing:.2px;
}
.execMeta{
  margin-top:10px;
  color:#5f7589;
  font-size:9px;
  letter-spacing:1px;
  text-align:right;
  text-transform:uppercase;
  font-weight:400!important;
}
.executiveMain{
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(310px,.98fr);
  gap:10px;
  min-height:0;
}
.executiveSide{
  display:grid;
  grid-template-rows:1.08fr .92fr;
  gap:10px;
  min-height:0;
}
.executiveTablePanel,.executiveChartPanel,.executiveAllocPanel{
  min-height:0;
  height:100%;
}
.panelHead.compact{
  min-height:46px;
  padding:10px 14px;
}
.panelHead.compact h2{font-size:14px}
.panelHead.compact p{
  font-size:9px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.headMeta{
  color:#688094;
  font-size:9px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  white-space:nowrap;
  font-weight:400!important;
}
.executiveTablePanel .tableWrap{
  height:calc(100% - 46px);
  overflow:hidden;
}
.executiveTable{
  table-layout:fixed;
}
.executiveTable th{
  background:rgba(16,41,58,.86);
  color:#6f8597;
  font-size:10px;
  letter-spacing:.3px;
  padding:10px 14px;
}
.executiveTable td{
  height:52px;
  padding:10px 14px;
  color:#d9e3ea;
  border-bottom:1px solid #142c3e;
  font-size:12px;
}
.symbolCell{color:#e8edf2!important}
.goldData{color:#e7b500!important}
.tableAction{
  border:0;background:transparent;color:#2ed3a0;
  font-size:11px;padding:0;cursor:pointer;font-weight:400!important;
}
.tableAction:hover{color:#65e4ba}
.executiveEmpty{padding:28px 10px}
.executiveChart{height:calc(100% - 46px);min-height:180px;padding:12px 14px 10px}
.executiveAllocPanel .allocBody{
  height:calc(100% - 46px);
  padding:16px 15px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.allocTotal{
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding-bottom:12px;border-bottom:1px solid #1d3547;
  color:#7e92a3;font-size:11px;
}
.allocTotal span:last-child{color:#e8eef3;font-size:16px;font-weight:400!important;text-align:right}
.allocationRows{display:grid;gap:10px;margin-top:13px}
.allocLabels{display:flex;justify-content:space-between;gap:12px;color:#8598a9;font-size:10px}
.allocLabels span:last-child{color:#d7e0e7}
.allocTrack{height:5px;background:#162c3c;border-radius:999px;overflow:hidden;margin-top:5px}
.allocTrack i{display:block;height:100%;background:linear-gradient(90deg,#e2b100,#d7c75b);border-radius:999px}
.recentOrders{
  min-height:144px;
}
.recentOrderGrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  min-height:96px;
}
.recentOrder{
  padding:16px 18px;
  border-right:1px solid #173043;
  min-width:0;
  transition:background .18s ease,transform .18s ease;
}
.recentOrder:last-child{border-right:0}
.recentOrder:hover{background:rgba(213,170,81,.035);transform:translateY(-2px)}
.recentOrderTop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.recentSymbol{font-size:14px;color:#edf2f6}
.recentMarket{font-size:8px;color:#506a7e;text-transform:uppercase}
.recentSub{font-size:10px;color:#6f8597;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recentAmount{font-size:12px;color:#e7b500;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#trendChart{cursor:crosshair}
@media (max-height:850px) and (min-width:1280px){
  .execStat{min-height:110px;padding:12px 14px 10px}
  .execValue{font-size:22px}
  .recentOrders{min-height:126px}
  .recentOrder{padding:12px 15px}
  .executiveTable td{height:46px}
}
@media(max-width:1250px){
  .executiveKpis{grid-template-columns:repeat(3,1fr)}
  .executiveMain{grid-template-columns:1fr}
  .executiveSide{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .recentOrderGrid{grid-template-columns:repeat(3,1fr)}
}


/* === Level 2 client holdings workspace === */
.level2Workspace{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  min-height:calc(100vh - 96px);
}
.level2MetricGrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.level2Metric{
  min-height:118px;
  padding:13px 15px;
  border:1px solid #294257;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(10,31,47,.98),rgba(7,24,37,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 26px rgba(0,0,0,.2);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.level2Metric.accent{
  border-color:#6e5a23;
  box-shadow:inset 2px 0 0 rgba(213,170,81,.85),0 10px 26px rgba(0,0,0,.2);
}
.level2Metric:hover{
  transform:translateY(-3px);
  border-color:#54738b;
  box-shadow:0 16px 36px rgba(0,0,0,.32),0 0 0 1px rgba(213,170,81,.08);
}
.metricLabel{
  color:#607a91;
  font-size:9px;
  letter-spacing:1.7px;
  margin-bottom:7px;
  font-weight:400!important;
}
.metricTitle{
  color:#9aacbc;
  font-size:12px;
  font-weight:400!important;
}
.metricValue{
  margin-top:8px;
  color:#eef3f7;
  font-size:24px;
  line-height:1;
  font-weight:400!important;
}
.metricFoot{
  margin-top:10px;
  color:#607588;
  font-size:9px;
  font-weight:400!important;
}
.level2MainGrid{
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(300px,.82fr);
  gap:10px;
  min-height:0;
}
.level2PositionsPanel{
  height:100%;
  min-height:0;
}
.level2PositionsPanel .tableWrap{
  height:calc(100% - 46px);
  overflow:auto;
}
.level2SideStack{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:10px;
  min-height:0;
}
.level2Chart{
  height:calc(100% - 46px);
  min-height:180px;
}
.level2PnlPanel{
  min-height:0;
}
.level2SummaryList{
  display:grid;
  gap:8px;
  padding:12px;
}
.level2SummaryList>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:38px;
  padding:9px 10px;
  border:1px solid #1c3448;
  border-radius:8px;
  background:#07131f;
  color:#8397a8;
  font-size:11px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.level2SummaryList>div:hover{
  transform:translateY(-2px);
  border-color:#43647d;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}
.level2SummaryList>div span:last-child{
  color:#e5edf3;
  font-size:14px;
  font-weight:400!important;
}
.level2OrdersPanel{
  min-height:170px;
}
.level2OrdersPanel .tableWrap{
  max-height:220px;
}
.level2HoldingsTable td,.level2OrdersTable td{
  font-size:11px;
}
.sideBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid;
  font-size:10px;
  font-weight:400!important;
}
.sideBadge.buy{
  color:#55dfb0;
  border-color:#245947;
  background:#082119;
}
.sideBadge.sell{
  color:#ff8390;
  border-color:#6d2a34;
  background:#241015;
}

/* === Client portfolio detail === */
.clientPortfolioDetail{
  background:
    radial-gradient(circle at 88% 0,rgba(42,90,129,.12),transparent 30%),
    linear-gradient(180deg,#050b12,#06101a 60%,#050b12);
}
.portfolioTop{
  min-height:72px;
  padding:10px 18px;
}
.clientIdentity h1{
  font-size:17px;
}
.clientMetaLine{
  display:flex;
  gap:6px;
  align-items:center;
  margin-top:4px;
  color:#6f8597;
  font-size:10px;
  font-weight:400!important;
}
.portfolioTopActions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.clientOwner{
  color:#72899b;
  font-size:10px;
  border:1px solid #213b50;
  border-radius:8px;
  padding:7px 9px;
}
.clientPortfolioBody{
  padding:12px 16px 18px;
}
.clientMetricStrip{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.clientMetricStrip article{
  min-height:100px;
  padding:11px 12px;
  border:1px solid #294257;
  border-radius:11px;
  background:linear-gradient(180deg,rgba(10,28,42,.98),rgba(7,20,31,.98));
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.clientMetricStrip article:hover{
  transform:translateY(-3px);
  border-color:#496d88;
  box-shadow:0 14px 28px rgba(0,0,0,.28);
}
.clientMetricStrip label{
  display:block;
  color:#718698;
  font-size:10px;
  font-weight:400!important;
}
.clientMetricStrip span{
  display:block;
  margin-top:9px;
  color:#edf2f6;
  font-size:20px;
  line-height:1;
  font-weight:400!important;
}
.clientMetricStrip small{
  display:block;
  margin-top:10px;
  color:#536a7d;
  font-size:8px;
  letter-spacing:.7px;
  font-weight:400!important;
}
.clientPortfolioGrid{
  display:grid;
  grid-template-columns:minmax(0,1.85fr) minmax(300px,.75fr);
  gap:10px;
  margin-bottom:10px;
}
.clientPositionsPanel{
  min-height:300px;
}
.clientProfilePanel{
  min-height:300px;
}
.clientAllocationChart{
  height:190px;
}
.clientProfileMini{
  display:grid;
  gap:6px;
  padding:0 12px 12px;
}
.clientProfileMini>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 9px;
  border:1px solid #1b3347;
  border-radius:7px;
  background:#07131f;
  color:#778b9b;
  font-size:10px;
}
.clientProfileMini>div span:last-child{
  color:#dce5ec;
  font-size:11px;
}
.clientTradeSplit{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.tradeSidePanel{
  min-height:260px;
}
.tradeSidePanel .tableWrap{
  max-height:290px;
}
.buyPanel{
  box-shadow:inset 2px 0 0 rgba(46,211,160,.35),0 8px 24px rgba(0,0,0,.22);
}
.sellPanel{
  box-shadow:inset 2px 0 0 rgba(217,52,71,.35),0 8px 24px rgba(0,0,0,.22);
}
.tradeDetailTable td,.completeTradeTable td,.portfolioTable td{
  font-size:11px;
}
.clientBottomGrid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:10px;
  margin-bottom:10px;
}
.clientTradeChart{
  height:250px;
}
.clientFollowList{
  max-height:250px;
  overflow:auto;
  display:grid;
  gap:7px;
}
.clientFollowItem{
  padding:9px 10px;
  border:1px solid #1b3347;
  border-radius:8px;
  background:#07131f;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.clientFollowItem:hover{
  transform:translateY(-2px);
  border-color:#46677f;
  box-shadow:0 10px 20px rgba(0,0,0,.22);
}
.clientFollowItem>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#6d8193;
  font-size:9px;
}
.followChannel{
  color:#e7b500;
  text-transform:uppercase;
}
.clientFollowItem p{
  margin:7px 0 0;
  color:#c1ced8;
  font-size:11px;
  line-height:1.45;
}
.clientFollowItem small{
  display:block;
  margin-top:7px;
  color:#6d8193;
  font-size:9px;
}
.allTradesPanel{
  margin-bottom:2px;
}
.portfolioTable .liveBadge,.portfolioTable .delayBadge{
  margin-left:5px;
}
@media(max-width:1350px){
  .level2MetricGrid{grid-template-columns:repeat(3,1fr)}
  .level2MainGrid,.clientPortfolioGrid,.clientBottomGrid{grid-template-columns:1fr}
  .level2SideStack{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .clientMetricStrip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .level2MetricGrid,.clientMetricStrip{grid-template-columns:repeat(2,1fr)}
  .level2SideStack,.clientTradeSplit{grid-template-columns:1fr}
  .portfolioTopActions{flex-wrap:wrap;justify-content:flex-end}
}


/* === Viewport lock + Settings typography retune === */
#main.dashboardViewport{
  height:calc(100vh - 102px);
  min-height:0;
  overflow:hidden;
  padding-top:10px;
}
#main.dashboardViewport .executiveDashboard,
#main.dashboardViewport .level2Workspace{
  height:100%;
  min-height:0;
  overflow:hidden;
}
#main.dashboardViewport .executiveDashboard{
  grid-template-rows:112px minmax(0,1fr) 132px;
}
#main.dashboardViewport .executiveKpis,
#main.dashboardViewport .level2MetricGrid{
  min-height:0;
}
#main.dashboardViewport .execStat{
  min-height:0;
  height:112px;
  padding:11px 13px 9px;
}
#main.dashboardViewport .execValue{
  font-size:22px;
  margin-top:7px;
}
#main.dashboardViewport .execMeta{
  margin-top:7px;
}
#main.dashboardViewport .executiveMain{
  min-height:0;
  overflow:hidden;
}
#main.dashboardViewport .executiveTablePanel,
#main.dashboardViewport .executiveChartPanel,
#main.dashboardViewport .executiveAllocPanel{
  min-height:0;
  overflow:hidden;
}
#main.dashboardViewport .recentOrders{
  min-height:0;
  height:132px;
  overflow:hidden;
}
#main.dashboardViewport .recentOrderGrid{
  min-height:82px;
}
#main.dashboardViewport .recentOrder{
  padding:11px 14px;
}
#main.dashboardViewport .executiveTable td{
  height:44px;
}
#main.dashboardViewport .level2Workspace{
  grid-template-rows:106px minmax(0,1fr) 168px;
}
#main.dashboardViewport .level2Metric{
  min-height:0;
  height:106px;
  padding:10px 12px;
}
#main.dashboardViewport .metricValue{
  font-size:21px;
  margin-top:6px;
}
#main.dashboardViewport .metricFoot{
  margin-top:7px;
}
#main.dashboardViewport .level2MainGrid{
  min-height:0;
  overflow:hidden;
}
#main.dashboardViewport .level2OrdersPanel{
  min-height:0;
  height:168px;
  overflow:hidden;
}
#main.dashboardViewport .level2OrdersPanel .tableWrap{
  max-height:120px;
}

/* System settings: consistent title/content/data scale */
#main.settingsMain{
  min-height:calc(100vh - 102px);
  padding-top:12px;
}
.settingsGrid{
  align-items:stretch;
  min-height:calc(100vh - 126px);
}
.settingsCard{
  min-height:0!important;
  height:100%;
}
.settingsCard .panelHead{
  min-height:52px;
  padding:11px 14px;
}
.settingsCard .panelHead h2{
  font-size:15px;
  font-weight:700;
  line-height:1.25;
}
.settingsCard .panelHead p{
  font-size:10px;
  font-weight:400;
  margin-top:3px;
}
.settingsList{
  gap:8px;
  padding:13px;
}
.settingsList .listItem{
  min-height:46px;
  padding:10px 12px;
}
.settingsList .listItem .top{
  align-items:center;
}
.settingsList .listItem .top>span:first-child{
  color:#899cad;
  font-size:12px;
  font-weight:400!important;
  line-height:1.35;
}
.settingsList .listItem .top>span:last-child{
  color:#e2e9ef;
  font-size:13px;
  font-weight:400!important;
  line-height:1.35;
  text-align:right;
  max-width:72%;
  white-space:normal;
  word-break:break-word;
}
.settingsList .listItem .top>span.up{
  color:#2ed3a0;
}
@media(max-height:820px) and (min-width:1280px){
  #main.dashboardViewport .executiveDashboard{
    grid-template-rows:100px minmax(0,1fr) 118px;
  }
  #main.dashboardViewport .execStat{
    height:100px;
    padding:9px 12px 8px;
  }
  #main.dashboardViewport .execValue{font-size:20px}
  #main.dashboardViewport .recentOrders{height:118px}
  #main.dashboardViewport .executiveTable td{height:40px}
  #main.dashboardViewport .level2Workspace{
    grid-template-rows:98px minmax(0,1fr) 150px;
  }
  #main.dashboardViewport .level2Metric{height:98px}
  #main.dashboardViewport .level2OrdersPanel{height:150px}
}


/* === Tradeflare-inspired CRM dashboard prototype === */
#main.terminalMain{
  height:calc(100vh - 102px);
  min-height:0;
  overflow:hidden;
  padding-top:10px;
}
.tradeflareShell{
  height:100%;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:10px;
  min-height:0;
}
.tradeflareRail{
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:8px 5px;
  border:1px solid #26222b;
  border-radius:18px;
  background:linear-gradient(180deg,#18151d,#121017);
  box-shadow:0 16px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025);
}
.railBtn{
  width:34px;height:34px;
  border:1px solid transparent;
  border-radius:11px;
  background:#211d25;
  color:#7d7a84;
  font-size:11px;
  font-weight:400!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
}
.railBtn:hover{
  transform:translateY(-2px);
  color:#c9fbd7;
  border-color:#35523c;
}
.railBtn.active{
  background:#14e76d;
  color:#061109;
  border-color:#14e76d;
  box-shadow:0 0 18px rgba(20,231,109,.22);
}
.railSpacer{flex:1}
.tradeflareCanvas{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:68px minmax(0,1fr);
  gap:10px;
}
.terminalTicker{
  display:grid;
  grid-template-columns:minmax(190px,1.35fr) repeat(5,minmax(82px,.7fr)) 56px;
  align-items:stretch;
  min-width:0;
  border:1px solid #29252e;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg,#211d24,#19161d);
  box-shadow:0 14px 34px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.02);
}
.tickerIdentity,.tickerStat,.tickerGear{
  border-right:1px solid #302b35;
}
.tickerIdentity{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
}
.tickerDot{
  width:12px;height:12px;border-radius:50%;
  background:#14e76d;
  box-shadow:0 0 14px rgba(20,231,109,.45);
  flex:0 0 auto;
}
.tickerIdentity>div{min-width:0}
.tickerSymbol{
  display:block;
  color:#eef2ee;
  font-size:13px;
  letter-spacing:.4px;
  white-space:nowrap;
}
.tickerIdentity small{
  display:block;
  color:#77737c;
  font-size:9px;
  margin-top:3px;
}
.tickerStat{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 11px;
  min-width:0;
}
.tickerStat small{
  color:#77737c;
  font-size:9px;
  font-weight:400!important;
}
.tickerStat span{
  margin-top:4px;
  color:#e8ebe8;
  font-size:12px;
  font-weight:400!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tickerGear{
  border:0;
  background:#201c23;
  color:#88848d;
  font-size:10px;
  font-weight:400!important;
}
.tickerGear:hover{color:#14e76d;background:#252028}
.terminalGrid{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 286px;
  gap:10px;
}
.terminalLeft{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) 182px;
  gap:10px;
}
.terminalChartCard{
  min-height:0;
  display:grid;
  grid-template-rows:42px minmax(0,1fr);
  border:1px solid #28242d;
  border-radius:22px;
  background:linear-gradient(180deg,#17141b,#121017);
  box-shadow:0 18px 42px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.02);
  overflow:hidden;
}
.terminalChartToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 10px;
}
.terminalTabs,.terminalIntervals{
  display:flex;
  align-items:center;
  gap:5px;
}
.terminalTabs button,.terminalIntervals button{
  border:1px solid transparent;
  background:#1f1b22;
  color:#77727d;
  border-radius:9px;
  padding:6px 10px;
  font-size:10px;
  font-weight:400!important;
  transition:all .15s ease;
}
.terminalTabs button:hover,.terminalIntervals button:hover{
  color:#d9ddd9;
  border-color:#39323e;
}
.terminalTabs button.active,.terminalIntervals button.active{
  color:#081109;
  background:#14e76d;
  border-color:#14e76d;
  box-shadow:0 0 16px rgba(20,231,109,.18);
}
.terminalChartWrap{
  min-height:0;
  padding:5px 12px 12px;
}
.terminalChartWrap canvas{
  width:100%!important;
  height:100%!important;
  cursor:crosshair;
}
.terminalPositionList{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  min-height:0;
}
.terminalPositionCard{
  border:1px solid #28242d;
  border-radius:18px;
  background:linear-gradient(180deg,#1a171e,#141118);
  padding:12px 14px;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.terminalPositionCard:hover{
  transform:translateY(-3px);
  border-color:#38533f;
  box-shadow:0 16px 32px rgba(0,0,0,.3);
}
.positionTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.positionTop>div{
  display:flex;align-items:center;gap:8px;
}
.positionSymbol{
  color:#e8ece8;
  font-size:13px;
}
.positionBadge{
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:400!important;
}
.positionBadge.buy{background:#0b2b1a;color:#32e98b;border:1px solid #1e6b43}
.positionBadge.sell{background:#2e1115;color:#ff707b;border:1px solid #71313a}
.positionState{
  color:#6f6a74;
  font-size:9px;
}
.positionMetrics{
  margin-top:13px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.positionMetrics small{
  display:block;
  color:#6f6a74;
  font-size:9px;
  font-weight:400!important;
}
.positionMetrics span{
  display:block;
  margin-top:5px;
  color:#e1e5e1;
  font-size:11px;
  font-weight:400!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.terminalEmpty{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6f6a74;
  border:1px dashed #2f2a34;
  border-radius:18px;
  background:#16131a;
  font-size:11px;
}
.terminalOrderPanel{
  min-height:0;
  border:1px solid #2a2630;
  border-radius:22px;
  background:linear-gradient(180deg,#1e1a21,#17141a);
  box-shadow:0 18px 42px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.025);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.terminalSegment{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.terminalSegment.secondary{
  grid-template-columns:repeat(3,1fr);
}
.terminalSegment button{
  border:1px solid #2e2933;
  border-radius:9px;
  background:#242027;
  color:#77727c;
  padding:8px 6px;
  font-size:10px;
  font-weight:400!important;
}
.terminalSegment button.active{
  color:#081109;
  background:#14e76d;
  border-color:#14e76d;
}
.terminalFormCard{
  display:grid;
  gap:7px;
  padding:10px;
  border:1px solid #2d2832;
  border-radius:15px;
  background:#211d24;
}
.terminalFieldRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 9px;
  border-radius:9px;
  background:#1a171d;
}
.terminalFieldRow label{
  color:#79747d;
  font-size:9px;
  font-weight:400!important;
}
.terminalFieldRow span{
  color:#e4e7e4;
  font-size:10px;
  font-weight:400!important;
  text-align:right;
}
.terminalGreen{color:#27df7a!important}
.terminalRed{color:#ff626e!important}
.terminalActionGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.terminalPrimary,.terminalSecondary{
  min-height:38px;
  border-radius:10px;
  font-size:10px;
  font-weight:400!important;
}
.terminalPrimary{
  grid-column:1/-1;
  border:1px solid #14e76d;
  background:#14e76d;
  color:#081109;
  box-shadow:0 0 18px rgba(20,231,109,.15);
}
.terminalSecondary{
  border:1px solid #302b35;
  background:#211d24;
  color:#aaa6ad;
}
.terminalPrimary:hover,.terminalSecondary:hover{transform:translateY(-2px)}
.terminalUsage{
  margin-top:auto;
  padding:10px 4px 4px;
}
.terminalUsage h3{
  margin:0 0 10px;
  color:#dedede;
  font-size:12px;
  font-weight:700;
}
.usageRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  color:#77727c;
  font-size:10px;
}
.usageRow span:last-child{color:#e1e4e1}
.usageBar{
  height:5px;
  margin-top:12px;
  border-radius:999px;
  background:#27232c;
  overflow:hidden;
}
.usageBar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:#14e76d;
  box-shadow:0 0 10px rgba(20,231,109,.32);
}
@media(max-width:1250px){
  .terminalTicker{grid-template-columns:minmax(160px,1.2fr) repeat(3,minmax(72px,.6fr)) 50px}
  .tickerStat:nth-of-type(5),.tickerStat:nth-of-type(6){display:none}
  .terminalGrid{grid-template-columns:minmax(0,1fr) 250px}
}


/* === Global 16:9 terminal shell + unified navigation === */
html,body,#root,.app{
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
}
html,body{
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.shell{
  width:100%;
  height:100vh;
  min-height:0;
  padding:10px 14px 14px;
  display:grid;
  grid-template-rows:72px minmax(0,1fr);
  gap:10px;
  overflow:hidden;
}
.topbar{
  position:relative;
  top:auto;
  z-index:20;
  width:100%;
  height:72px;
  min-height:72px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:276px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  overflow:hidden;
  border:1px solid #29252e;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(27,24,31,.98),rgba(18,16,23,.98));
  box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025);
  
}
.brand{
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:10px;
  overflow:hidden;
}
.mark{
  font-size:28px;
  flex:0 0 auto;
}
.mark small{
  font-size:8px;
  letter-spacing:2px;
}
.brandText{
  min-width:0;
}
.brandText b{
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brandText span{
  font-size:8px;
  letter-spacing:1.8px;
  white-space:nowrap;
}
.navFrame{
  min-width:0;
  height:50px;
  padding:5px;
  border:1px solid #2c2831;
  border-radius:16px;
  background:#151219;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
  overflow:hidden;
}
.nav{
  width:100%;
  height:100%;
  min-width:0;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  align-items:stretch;
  gap:4px;
  overflow:hidden!important;
}
.nav button{
  min-width:0;
  height:100%;
  padding:0 7px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#8b8791;
  font-size:11px;
  line-height:1;
  font-weight:400!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.nav button:hover{
  transform:translateY(-2px);
  color:#d9ddd9;
  border-color:#39343e;
  background:#201c23;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.nav button.active{
  color:#071109;
  border-color:#14e76d;
  background:#14e76d;
  box-shadow:0 0 18px rgba(20,231,109,.18);
}
.userArea{
  min-width:max-content;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  font-size:10px;
}
.sysok,.romaniaClock,.chip,.iconBtn{
  height:36px;
  display:inline-flex;
  align-items:center;
  border:1px solid #302b35;
  border-radius:11px;
  background:#1b181f;
  color:#aaa6ae;
  padding:0 9px;
  font-size:10px;
  font-weight:400!important;
}
.sysok{
  color:#30e88a;
}
.sysok::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:#14e76d;
  margin-right:6px;
  box-shadow:0 0 10px rgba(20,231,109,.45);
}
.romaniaClock::before{
  color:#e4ba3b;
  border-color:#66531d;
}
.iconBtn:hover,.chip:hover,.romaniaClock:hover,.sysok:hover{
  transform:translateY(-2px);
  border-color:#3b5340;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}

/* Unified view frame: same top/bottom baseline on every module */
#main{
  width:100%;
  height:100%;
  min-height:0!important;
  padding:0!important;
  overflow:hidden;
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .14s ease,transform .14s ease;
}
#main.viewLeaving{
  opacity:.18;
  transform:translateY(2px);
  pointer-events:none;
}
#main.viewBusy{
  opacity:.72;
  transform:translateY(0);
  pointer-events:none;
}
#main.viewReveal{
  animation:viewReveal .14s ease both;
}
@keyframes viewReveal{
  from{opacity:.55;transform:translateY(3px)}
  to{opacity:1;transform:translateY(0)}
}
#main[data-view="customers"],
#main[data-view="personnel"],
#main[data-view="trades"],
#main[data-view="positions"]{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#main[data-view="customers"]>.pageActions,
#main[data-view="personnel"]>.pageActions{
  flex:0 0 36px;
  min-height:36px;
  margin:0;
  align-items:center;
}
#main[data-view="customers"]>.panel,
#main[data-view="personnel"]>.panel,
#main[data-view="trades"]>.panel,
#main[data-view="positions"]>.panel{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  display:grid;
  grid-template-rows:48px minmax(0,1fr);
}
#main[data-view="customers"]>.panel>.tableWrap,
#main[data-view="personnel"]>.panel>.tableWrap,
#main[data-view="trades"]>.panel>.tableWrap,
#main[data-view="positions"]>.panel>.tableWrap{
  min-height:0;
  height:100%;
  overflow:auto;
}

/* Market keeps header row fixed and both bottom borders aligned */
#main[data-view="market"]{
  display:grid;
  grid-template-rows:38px minmax(0,1fr);
  gap:8px;
}
#main[data-view="market"]>.marketStatusBar{
  margin:0;
  align-items:center;
  min-height:38px;
}
#main[data-view="market"]>.grid2{
  min-height:0;
  height:100%;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.78fr);
  gap:10px;
}
#main[data-view="market"]>.grid2>.panel{
  height:100%;
  min-height:0;
}
#main[data-view="market"]>.grid2>.panel:first-child{
  display:grid;
  grid-template-rows:48px auto minmax(0,1fr);
}
#main[data-view="market"]>.grid2>.panel:last-child{
  display:grid;
  grid-template-rows:48px minmax(0,1fr);
}
#main[data-view="market"] .chartBox{
  height:auto!important;
  min-height:0;
}
#main[data-view="market"] .marketList{
  min-height:0;
  overflow:auto;
}

/* Reports: two precise rows, second panel always lands on same bottom line */
#main[data-view="reports"]{
  display:grid;
  grid-template-rows:minmax(0,.96fr) minmax(0,1.04fr);
  gap:8px;
}
#main[data-view="reports"]>.grid2{
  min-height:0;
  height:100%;
  gap:8px;
}
#main[data-view="reports"]>.grid2>.panel{
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:48px minmax(0,1fr);
}
#main[data-view="reports"]>.grid2 .chartBox{
  height:auto!important;
  min-height:0;
}
#main[data-view="reports"]>article.panel{
  min-height:0;
  height:100%;
  margin-top:0!important;
  display:grid;
  grid-template-rows:48px minmax(0,1fr);
}
#main[data-view="reports"]>article.panel>.tableWrap{
  min-height:0;
  overflow:auto;
}

/* Settings: equal-height columns, identical bottom frame */
#main[data-view="settings"]{
  display:block;
}
#main[data-view="settings"]>.settingsGrid{
  width:100%;
  height:100%;
  min-height:0;
  gap:10px;
}
#main[data-view="settings"] .settingsCard{
  height:100%;
  min-height:0;
}

/* Dashboard variants fill the same exact frame */
#main.dashboardViewport,
#main.terminalMain{
  width:100%;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0!important;
}
#main.dashboardViewport .executiveDashboard,
#main.dashboardViewport .level2Workspace,
#main.terminalMain .tradeflareShell{
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
}

/* All charts retain data hover + crisp crosshair rendering */
.chartBox canvas,
.terminalChartWrap canvas{
  width:100%!important;
  height:100%!important;
  image-rendering:auto;
  cursor:crosshair;
}

/* Unified depth / hover on every box without shifting layout */
.panel,
.kpi,
.listItem,
.marketRow,
.execStat,
.level2Metric,
.settingsCard,
.terminalPositionCard,
.terminalFormCard,
.terminalOrderPanel,
.terminalChartCard,
.tradeflareRail,
.terminalTicker,
.clientMetricStrip article,
.clientFollowItem{
  transform:translateZ(0);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.panel:hover,
.kpi:hover,
.listItem:hover,
.marketRow:hover,
.execStat:hover,
.level2Metric:hover,
.settingsCard:hover,
.terminalPositionCard:hover,
.terminalFormCard:hover,
.clientMetricStrip article:hover,
.clientFollowItem:hover{
  transform:translateY(-2px);
  border-color:#405248;
  box-shadow:0 16px 34px rgba(0,0,0,.30),0 0 0 1px rgba(20,231,109,.055),inset 0 1px 0 rgba(255,255,255,.02);
}

/* Tables never change page geometry; only their own viewport scrolls */
.tableWrap{
  min-width:0;
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:#343039 #17141b;
}
.tableWrap::-webkit-scrollbar,
.marketList::-webkit-scrollbar,
.clientFollowList::-webkit-scrollbar{
  width:6px;
  height:6px;
}
.tableWrap::-webkit-scrollbar-thumb,
.marketList::-webkit-scrollbar-thumb,
.clientFollowList::-webkit-scrollbar-thumb{
  background:#343039;
  border-radius:999px;
}
.tableWrap::-webkit-scrollbar-track,
.marketList::-webkit-scrollbar-track,
.clientFollowList::-webkit-scrollbar-track{
  background:#17141b;
}

/* High-density displays: CSS/vector UI remains sharp; increase spacing without raster stretching */
@media(min-width:3000px){
  .shell{
    padding:20px 28px 28px;
    grid-template-rows:104px minmax(0,1fr);
    gap:16px;
  }
  .topbar{
    height:104px;
    min-height:104px;
    grid-template-columns:390px minmax(0,1fr) auto;
    padding:12px 16px;
    border-radius:28px;
  }
  .navFrame{height:70px;border-radius:22px}
  .nav button{font-size:16px;border-radius:15px}
  .mark{font-size:40px}
  .brandText b{font-size:23px}
  .brandText span{font-size:11px}
  .sysok,.romaniaClock,.chip,.iconBtn{height:50px;font-size:14px;padding:0 14px;border-radius:15px}
  .panelHead h2{font-size:20px}
  .panelHead p{font-size:13px}
  .dataTable th{font-size:15px}
  .dataTable td{font-size:16px}
}

/* 16:9 desktop guardrail */
@media(min-width:1280px){
  body{min-width:1280px}
}
