:root{--bg:#07111e;--bg2:#0a1727;--panel:#0c1a2a;--panel2:#111f32;--line:#20354f;--text:#f4f8ff;--muted:#8296ad;--blue:#1597ff;--green:#20d778;--red:#ff545f;--orange:#ffa31a;--purple:#a550ff;--shadow:0 4px 14px rgba(0,0,0,.16)}
body.light{--bg:#edf3f8;--bg2:#e6edf5;--panel:#fff;--panel2:#f5f8fb;--line:#d8e1eb;--text:#152236;--muted:#66778a;--shadow:0 3px 10px rgba(20,40,70,.06)}
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
button,input,select{font:inherit}.app{display:grid;grid-template-columns:108px minmax(0,1fr);min-height:100vh}.side{position:sticky;top:0;height:100vh;border-left:1px solid var(--line);background:rgba(5,13,24,.88);padding:18px 10px;display:flex;flex-direction:column;align-items:center;}.light .side{background:rgba(255,255,255,.9)}
.mark{font-size:31px;color:var(--green);font-weight:900;margin:7px 0 24px}.nav{width:100%;display:grid;gap:11px}.nav button{height:74px;border:0;background:transparent;color:var(--muted);border-radius:12px;font-size:11px;font-weight:800;cursor:pointer}.nav button span{font-size:23px;display:block;margin-bottom:7px}.nav button.active{background:var(--panel2);color:var(--blue);box-shadow:inset 0 0 0 1px var(--line)}.side-bottom{margin-top:auto;display:grid;gap:10px;width:100%}.side-bottom button{height:48px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:11px;cursor:pointer}
.main{padding:19px 20px 28px;min-width:0}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.brand{display:flex;align-items:center;gap:12px}.brand-icon{font-size:31px;color:var(--green)}.brand h1{font-size:22px;margin:0}.top-actions{display:flex;gap:10px;align-items:center}.status{font-size:12px;color:var(--muted)}.status i{display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;margin-left:6px}.currency,.icon-btn{height:40px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:0 13px;font-weight:800}.icon-btn{width:48px;font-size:20px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:13px}.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow)}.light .card{background:#fff}
.kpi{grid-column:span 3;padding:17px 18px;min-height:132px;position:relative;overflow:hidden}.kpi h3{font-size:13px;font-weight:700;margin:0;color:#cad5e2}.kpi .num{font-size:25px;font-weight:900;margin:15px 0 8px}.kpi .sub{font-size:12px;color:#c7d1df}.kpi-icon{position:absolute;left:17px;top:39px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:24px}.kpi.blue{border-color:#144d78}.kpi.blue .num{color:var(--blue)}.kpi.blue .kpi-icon{background:rgba(21,151,255,.16);color:var(--blue)}.kpi.green{border-color:#145c45}.kpi.green .num{color:var(--green)}.kpi.green .kpi-icon{background:rgba(32,215,120,.16);color:var(--green)}.kpi.purple{border-color:#49306c}.kpi.purple .num{color:#b362ff}.kpi.purple .kpi-icon{background:rgba(165,80,255,.16);color:#bd73ff}
.goal{grid-column:span 6;padding:18px}.chart-card{grid-column:span 6;padding:18px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-head h2{font-size:16px;margin:0}.range-select{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;padding:7px 10px}
.goal-content{display:grid;grid-template-columns:1fr 230px 1fr;gap:18px;align-items:center;min-height:255px}.goal-side{display:grid;gap:15px}.goal-side .box{background:var(--panel2);border:1px solid var(--line);padding:13px;border-radius:10px}.goal-side span{display:block;color:var(--muted);font-size:11px}.goal-side b{font-size:18px;display:block;margin-top:6px}.gauge{width:220px;height:150px;position:relative;margin:auto}.gauge svg{width:100%;height:100%}.gauge-center{position:absolute;inset:35px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center}.gauge-center strong{font-size:37px}.gauge-center span{font-size:12px;color:var(--muted)}.goal-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:-2px}.goal-progress{margin-top:16px}.goal-progress .track{height:7px;background:#2a3443;border-radius:999px;position:relative}.goal-progress .fill{height:100%;background:linear-gradient(90deg,var(--green),#36e38b);border-radius:999px}.goal-progress .bubble{position:absolute;top:-31px;transform:translateX(50%);padding:4px 8px;background:#126a43;border-radius:6px;font-size:10px;color:white;font-weight:800}.goal-progress .labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px}
.chart{width:100%;height:270px;display:block}.summary{grid-column:1/-1;padding:0}
.summary h2{font-size:16px;margin:0;padding:16px 18px;border-bottom:1px solid var(--line)}
.summary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:13px}
.summary-item{
  position:relative;text-align:right;padding:13px 14px 12px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel2);overflow:hidden;min-height:88px
}
.summary-item:before{content:"";position:absolute;top:0;right:0;left:0;height:3px;background:var(--blue)}
.summary-item span{display:block;font-size:10px;color:var(--muted);min-height:auto;margin-bottom:7px}
.summary-item b{font-size:19px;display:block;margin-top:0}
.summary-item.positive{background:rgba(32,215,120,.055);border-color:rgba(32,215,120,.24)}
.summary-item.positive:before{background:var(--green)}
.summary-item.positive b{color:var(--green)}
.summary-item.negative{background:rgba(255,84,95,.055);border-color:rgba(255,84,95,.24)}
.summary-item.negative:before{background:var(--red)}
.summary-item.negative b{color:var(--red)}
.summary-item.neutral{background:rgba(21,151,255,.05);border-color:rgba(21,151,255,.22)}
.summary-item.neutral:before{background:var(--blue)}
.best-worst{grid-column:span 6;padding:17px}.bw-wrap{display:grid;grid-template-columns:1fr 1px 1fr;gap:13px;min-height:175px}.divider{background:var(--line)}.trade-highlight{padding:10px;border-radius:13px}.trade-highlight.good{background:linear-gradient(135deg,rgba(18,80,55,.34),rgba(16,48,42,.12));border:1px solid #205d48}.trade-highlight.bad{background:linear-gradient(135deg,rgba(96,35,42,.35),rgba(58,25,33,.12));border:1px solid #6e333c}.hl-title{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800}.hl-ticker{font-size:16px;font-weight:900;margin:25px 0 8px}.hl-date{font-size:11px;color:var(--muted)}.hl-value{font-size:22px;font-weight:900;margin-top:8px}.hl-percent{font-size:14px;font-weight:800;margin-top:7px}
.usage{grid-column:span 6;padding:17px}.mini-gauge svg{width:100%;height:100%}.usage-box{background:var(--panel2);border:1px solid var(--line);padding:13px;border-radius:10px}.usage-box span{display:block;color:var(--muted);font-size:11px}.usage-box b{font-size:20px;display:block;margin-top:6px}

.foot{grid-column:1/-1;padding:12px 16px;color:var(--muted);font-size:11px}
@media(max-width:1100px){.goal,.chart-card,.best-worst,.usage{grid-column:1/-1}}@media(max-width:760px){.app{grid-template-columns:1fr}.side{display:none}.main{padding:12px}.kpi{grid-column:span 6}.goal-content{grid-template-columns:1fr}.summary-row{grid-template-columns:repeat(2,1fr)}.usage-wrap{grid-template-columns:1fr}.top{align-items:flex-start}.status{display:none}}@media(max-width:480px){.kpi{grid-column:1/-1}}



*{animation:none!important;transition:none!important}
.card,.kpi,
.chart{image-rendering:auto}
@supports (-webkit-hyphens:none){
  .side{background:var(--bg)}
  .card{box-shadow:none}
}



.view{display:none}.view.active{display:block}
.trades-page{padding-top:2px}
.trades-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.trades-toolbar h2{margin:0;font-size:19px}
.add-trade-btn{
  display:inline-flex;align-items:center;gap:8px;border:0;
  background:linear-gradient(135deg,var(--blue),#3678ff);
  color:white;padding:10px 14px;border-radius:11px;
  font-weight:900;cursor:pointer
}
.add-trade-btn .plus{
  width:23px;height:23px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.17);
  font-size:17px;line-height:1
}
.trades-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:14px}
.overview-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.overview-card span{display:block;color:var(--muted);font-size:11px}
.overview-card b{display:block;margin-top:7px;font-size:19px}
.trades-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.trade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.trade-card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:15px;padding:16px;overflow:hidden
}
.trade-card:before{content:"";position:absolute;top:0;right:0;left:0;height:4px;background:var(--orange)}
.trade-card.risk-low:before{background:var(--green)}
.trade-card.risk-medium:before{background:var(--orange)}
.trade-card.risk-high:before{background:var(--red)}
.trade-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ticker-icon{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(21,151,255,.22),rgba(165,80,255,.18));
  border:1px solid rgba(21,151,255,.3);
  font-size:13px;font-weight:950;letter-spacing:.4px;color:var(--text)
}
.risk-badge{padding:6px 9px;border-radius:999px;font-size:11px;font-weight:900}
.risk-low .risk-badge{background:rgba(32,215,120,.12);color:var(--green)}
.risk-medium .risk-badge{background:rgba(255,163,26,.12);color:var(--orange)}
.risk-high .risk-badge{background:rgba(255,84,95,.12);color:var(--red)}
.trade-amount-label{color:var(--muted);font-size:11px;margin-top:16px}
.trade-amount{font-size:24px;font-weight:900;margin-top:5px}
.trade-sar{font-size:12px;color:var(--muted);margin-top:3px}
.trade-allocation{margin-top:14px}
.trade-allocation-row{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;margin-bottom:7px}
.trade-track{height:7px;background:var(--panel2);border-radius:999px;overflow:hidden}
.trade-track i{display:block;height:100%;border-radius:inherit;background:var(--orange)}
.risk-low .trade-track i{background:var(--green)}
.risk-medium .trade-track i{background:var(--orange)}
.risk-high .trade-track i{background:var(--red)}
.trade-note{margin-top:14px;padding:11px;background:var(--panel2);border:1px solid var(--line);border-radius:11px}
.trade-note span{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}
.trade-note b{font-size:13px;line-height:1.6}
.trade-actions{display:flex;gap:8px;margin-top:13px}
.trade-actions button{flex:1;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:9px;padding:8px;cursor:pointer;font-weight:800}
.trade-actions .danger{color:var(--red)}
.trades-chart-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:16px;position:sticky;top:18px}
.trades-chart-card h3{margin:0 0 12px;font-size:16px}
.trade-chart-wrap{display:flex;align-items:center;justify-content:center;min-height:280px}
#tradesChart{width:280px;height:280px}
.chart-legend{display:grid;gap:8px;margin-top:8px}
.legend-row{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}
.legend-name{display:flex;align-items:center;gap:7px}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal.show{display:flex}
.modal-box{width:min(560px,100%);background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:18px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal-head h3{margin:0}.modal-close{border:0;background:transparent;color:var(--muted);font-size:24px;cursor:pointer}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-field label{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}
.modal-field input,.modal-field select{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:9px}
.modal-actions{display:flex;gap:8px;margin-top:15px}
.modal-actions button{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:9px 13px;border-radius:9px;cursor:pointer;font-weight:800}
.modal-actions .save{background:var(--blue);border-color:var(--blue);color:white}
@media(max-width:1050px){.trades-layout{grid-template-columns:1fr}.trades-chart-card{position:static}.trade-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.trade-grid,.trades-overview,.modal-grid{grid-template-columns:1fr}.trades-toolbar{align-items:flex-start}.add-trade-btn{width:100%;justify-content:center}}



/* Keep dashboard untouched. These rules apply only inside #tradesView. */
#tradesView .trades-metrics{
  position:sticky;
  top:0;
  z-index:20;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:8px 0 12px;
  background:linear-gradient(to bottom,var(--bg) 74%,rgba(7,17,30,0));
}
.light #tradesView .trades-metrics{
  background:linear-gradient(to bottom,var(--bg) 74%,rgba(237,243,248,0));
}
#tradesView .metric-mini{
  position:relative;
  min-height:96px;
  padding:12px 13px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
#tradesView .metric-mini .metric-title{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
#tradesView .metric-mini .metric-value{
  display:block;
  margin-top:8px;
  font-size:19px;
  font-weight:900;
}
#tradesView .metric-mini .metric-sar{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}
#tradesView .metric-mini .metric-sub{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
}
#tradesView .metric-mini.blue{border-color:#144d78}
#tradesView .metric-mini.blue .metric-value{color:var(--blue)}
#tradesView .metric-mini.green{border-color:#145c45}
#tradesView .metric-mini.green .metric-value{color:var(--green)}
#tradesView .metric-mini.cash-good{border-color:#145c45}
#tradesView .metric-mini.cash-good .metric-value{color:var(--green)}
#tradesView .metric-mini.cash-warn{border-color:#70551b}
#tradesView .metric-mini.cash-warn .metric-value{color:var(--orange)}
#tradesView .metric-mini.cash-bad{border-color:#74313a}
#tradesView .metric-mini.cash-bad .metric-value{color:var(--red)}

/* Compact cards only in trades page */
#tradesView .trade-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
#tradesView .trade-card{
  padding:13px;
  border-radius:13px;
}
#tradesView .ticker-icon{
  width:44px;
  height:44px;
  border-radius:13px;
  font-size:12px;
}
#tradesView .trade-amount-label{margin-top:12px}
#tradesView .trade-amount{font-size:21px;margin-top:4px}
#tradesView .trade-sar{font-size:10px}
#tradesView .trade-allocation{margin-top:10px}
#tradesView .trade-note{margin-top:10px;padding:9px}
#tradesView .trade-note b{font-size:12px}
#tradesView .trade-actions{margin-top:9px}
#tradesView .trade-actions button{padding:7px;font-size:11px}

@media(max-width:1200px){
  #tradesView .trade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:850px){
  #tradesView .trades-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  #tradesView .trade-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  #tradesView .trades-metrics{grid-template-columns:1fr}
}



#performanceView{padding-top:2px}
.performance-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin-bottom:14px
}
.performance-toolbar h2{margin:0;font-size:19px}
.performance-actions{display:flex;gap:8px;flex-wrap:wrap}
.performance-btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:var(--panel2);color:var(--text);
  padding:9px 12px;border-radius:10px;font-weight:850;cursor:pointer
}
.performance-btn.primary{
  border:0;background:linear-gradient(135deg,var(--blue),#3678ff);color:white
}
.performance-btn .plus{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.17);font-size:16px
}
#performanceView .performance-metrics{
  position:sticky;top:0;z-index:20;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;padding:8px 0 12px;
  background:linear-gradient(to bottom,var(--bg) 74%,rgba(7,17,30,0))
}
.light #performanceView .performance-metrics{
  background:linear-gradient(to bottom,var(--bg) 74%,rgba(237,243,248,0))
}
#performanceView .metric-mini{
  min-height:96px;padding:12px 13px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px
}
#performanceView .metric-title{color:var(--muted);font-size:10px;font-weight:800}
#performanceView .metric-value{display:block;margin-top:8px;font-size:19px;font-weight:900}
#performanceView .metric-sar{display:block;margin-top:3px;color:var(--muted);font-size:10px}
#performanceView .metric-sub{display:block;margin-top:5px;color:var(--muted);font-size:10px}
#performanceView .blue{border-color:#144d78}
#performanceView .blue .metric-value{color:var(--blue)}
#performanceView .green{border-color:#145c45}
#performanceView .green .metric-value{color:var(--green)}
#performanceView .cash-good{border-color:#145c45}
#performanceView .cash-good .metric-value{color:var(--green)}
#performanceView .cash-warn{border-color:#70551b}
#performanceView .cash-warn .metric-value{color:var(--orange)}
#performanceView .cash-bad{border-color:#74313a}
#performanceView .cash-bad .metric-value{color:var(--red)}

.performance-summary{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;margin-bottom:14px
}
.performance-summary .box{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:13px;overflow:hidden
}
.performance-summary .box:before{
  content:"";position:absolute;top:0;right:0;left:0;height:3px;background:var(--blue)
}
.performance-summary .box.good:before{background:var(--green)}
.performance-summary .box.bad:before{background:var(--red)}
.performance-summary .box.gold:before{background:var(--orange)}
.performance-summary .box span{display:block;color:var(--muted);font-size:11px}
.performance-summary .box b{display:block;margin-top:7px;font-size:19px}
.performance-summary .box.good b{color:var(--green)}
.performance-summary .box.bad b{color:var(--red)}
.performance-summary .box.gold b{color:var(--orange)}

.performance-filters{
  display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr auto;
  gap:9px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:12px;margin-bottom:12px
}
.performance-filters input,.performance-filters select{
  width:100%;border:1px solid var(--line);background:var(--panel2);
  color:var(--text);border-radius:9px;padding:9px
}
.clear-filter{
  border:1px solid var(--line);background:var(--panel2);
  color:var(--muted);border-radius:9px;padding:9px 11px;cursor:pointer;font-weight:800
}
.performance-table-card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:13px;overflow:hidden
}
.performance-table-wrap{overflow:auto;max-height:620px}
.performance-table{width:100%;border-collapse:collapse;min-width:760px}
.performance-table th,.performance-table td{
  padding:11px 12px;border-bottom:1px solid var(--line);
  text-align:right;font-size:12px;vertical-align:middle
}
.performance-table th{
  position:sticky;top:0;z-index:3;background:var(--panel);
  color:var(--muted);font-weight:850;cursor:pointer
}
.performance-table tr.win td:first-child{border-right:3px solid var(--green)}
.performance-table tr.loss td:first-child{border-right:3px solid var(--red)}
.performance-table tr:hover td{background:rgba(21,151,255,.035)}
.performance-ticker{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;height:30px;padding:0 10px;border-radius:10px;
  background:linear-gradient(135deg,rgba(21,151,255,.18),rgba(165,80,255,.15));
  border:1px solid rgba(21,151,255,.24);
  font-size:11px;font-weight:950;letter-spacing:.35px
}
.performance-result{font-size:13px;font-weight:900}
.performance-result.win{color:var(--green)}
.performance-result.loss{color:var(--red)}
.performance-note{color:var(--muted);line-height:1.65;max-width:430px}
.performance-footer{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;padding:11px 13px;color:var(--muted);font-size:11px
}
.empty-performance{text-align:center!important;padding:30px!important;color:var(--muted)}
@media(max-width:920px){
  .performance-filters{grid-template-columns:1fr 1fr}
  .performance-summary{grid-template-columns:repeat(2,1fr)}
  #performanceView .performance-metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .performance-filters,.performance-summary,#performanceView .performance-metrics{grid-template-columns:1fr}
  .performance-actions{width:100%}.performance-actions .performance-btn{flex:1;justify-content:center}
}



#performanceView .yahoo-reference{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
#performanceView .yahoo-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px;
}
#performanceView .yahoo-card span{
  display:block;
  color:var(--muted);
  font-size:11px;
}
#performanceView .yahoo-card b{
  display:block;
  margin-top:7px;
  font-size:19px;
  color:var(--blue);
}
#performanceView .yahoo-card.cash b{color:var(--orange)}
#performanceView .yahoo-card.realized b{color:var(--green)}
#performanceView .yahoo-card.unrealized b{color:var(--red)}
@media(max-width:900px){
  #performanceView .yahoo-reference{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  #performanceView .yahoo-reference{grid-template-columns:1fr}
}



#performanceView .import-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:13px;
  padding:14px;
  margin-bottom:14px;
}
#performanceView .import-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:11px;
}
#performanceView .import-panel-head h3{
  margin:0;
  font-size:15px;
}
#performanceView .import-panel-head span{
  color:var(--muted);
  font-size:10px;
}
#performanceView .import-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
#performanceView .import-box{
  position:relative;
  border:1px dashed var(--line);
  background:var(--panel2);
  border-radius:11px;
  padding:14px;
  cursor:pointer;
  min-height:92px;
  display:flex;
  align-items:center;
  gap:11px;
}
#performanceView .import-box:hover{border-color:var(--blue)}
#performanceView .import-icon{
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(21,151,255,.12);
  color:var(--blue);
  font-size:20px;
  flex:0 0 auto;
}
#performanceView .import-copy strong{
  display:block;
  font-size:12px;
}
#performanceView .import-copy span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:4px;
}
#performanceView .import-box input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
#performanceView .import-status{
  margin-top:9px;
  color:var(--muted);
  font-size:10px;
}
.performance-sar{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:var(--muted);
  font-weight:700;
}
.performance-result.win + .performance-sar{color:var(--green)}
.performance-result.loss + .performance-sar{color:var(--red)}
@media(max-width:700px){
  #performanceView .import-grid{grid-template-columns:1fr}
}



.v3-import-btn,.v3-undo-btn{
  height:34px;border:1px solid var(--line);border-radius:10px;
  padding:0 9px;font-size:10px;font-weight:900;cursor:pointer;color:white
}
.v3-import-btn{background:linear-gradient(135deg,var(--blue),#3976ff);position:relative;display:inline-flex;align-items:center;gap:7px}
.v3-import-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.v3-undo-btn{background:var(--panel);color:var(--muted)}
.v3-undo-btn:disabled{opacity:.45;cursor:not-allowed}
.v3-status{
  display:none;margin-bottom:13px;padding:11px 13px;border:1px solid var(--line);
  background:var(--panel);border-radius:11px;font-size:11px;color:var(--muted)
}
.v3-status.show{display:block}.v3-status.ok{color:var(--green);border-color:rgba(32,215,120,.35)}
.v3-status.warn{color:var(--orange);border-color:rgba(255,163,26,.35)}
.v3-status.error{color:var(--red);border-color:rgba(255,84,95,.35)}
.chart-insights{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.chart-insight{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px
}
.chart-insight span{display:block;color:var(--muted);font-size:10px}
.chart-insight b{display:block;margin-top:6px;font-size:17px}
.chart-insight small{display:block;margin-top:4px;color:var(--muted);font-size:10px}
.smart-trade-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:11px}
.smart-stat{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px}
.smart-stat span{display:block;color:var(--muted);font-size:9px}
.smart-stat b{display:block;margin-top:4px;font-size:12px}
.break-even-box{
  margin-top:10px;padding:10px;border-radius:10px;border:1px solid var(--line);
  background:rgba(21,151,255,.04)
}
.break-even-title{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted)}
.break-even-needed{font-size:17px;font-weight:950;margin-top:6px}
.break-even-needed.good{color:var(--green)}.break-even-needed.warn{color:var(--orange)}.break-even-needed.bad{color:var(--red)}
.exit-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}
.exit-level{padding:7px 5px;background:var(--panel2);border-radius:8px;text-align:center}
.exit-level span{display:block;color:var(--muted);font-size:8px}
.exit-level b{display:block;margin-top:4px;font-size:10px}
.import-review{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);
  z-index:2000;align-items:center;justify-content:center;padding:18px
}
.import-review.show{display:flex}
.import-review-box{
  width:min(620px,100%);max-height:85vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:17px
}
.import-review-box h3{margin:0 0 12px}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.review-item{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
.review-item span{display:block;color:var(--muted);font-size:9px}.review-item b{display:block;margin-top:5px;font-size:17px}
.review-actions{display:flex;gap:8px;margin-top:14px}.review-actions button{flex:1;padding:10px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-weight:900}
.review-actions .apply{background:var(--blue);border-color:var(--blue);color:white}
.snapshot-note{font-size:10px;color:var(--muted);margin-top:7px}
@media(max-width:760px){
  .top-actions{flex-wrap:wrap;justify-content:flex-end}
  .v3-import-btn,.v3-undo-btn{height:36px;font-size:10px;padding:0 9px}
  .chart-insights{grid-template-columns:1fr}
  .review-grid{grid-template-columns:repeat(2,1fr)}
}



:root{--sar:"⃁"}
.page-shell{display:grid;gap:14px}
.page-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.page-title h2{margin:0;font-size:19px}
.v4-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.calc-field label{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}
.calc-field input,.calc-field select,.settings-field input,.settings-field select,.note-form input,.note-form textarea{
 width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:10px
}
.calc-result{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.calc-result .item{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px}
.calc-result span{display:block;color:var(--muted);font-size:9px}.calc-result b{display:block;margin-top:5px;font-size:15px}
.quick-pcts{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.quick-pcts button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;padding:7px 10px;cursor:pointer}
.notes-layout{display:grid;grid-template-columns:330px 1fr;gap:14px}
.note-form{display:grid;gap:10px}.note-form textarea{min-height:120px;resize:vertical}
.note-save{border:0;background:var(--blue);color:white;border-radius:9px;padding:10px;font-weight:900;cursor:pointer}
.note-list{display:grid;gap:9px}
.note-card{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:12px}
.note-head{display:flex;justify-content:space-between;gap:8px;align-items:center}
.note-ticker{font-weight:950;color:var(--blue)}.note-date{font-size:9px;color:var(--muted)}
.note-text{margin-top:8px;line-height:1.7;font-size:12px}
.note-actions{display:flex;gap:7px;margin-top:9px}.note-actions button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:7px;padding:6px 8px;cursor:pointer}
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.settings-section h3{margin:0 0 12px;font-size:15px}
.settings-field{margin-bottom:10px}.settings-field label{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.toggle-row input{width:20px;height:20px}
.settings-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.settings-actions button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:9px;padding:9px 12px;cursor:pointer;font-weight:800}
.settings-actions .primary{background:var(--blue);border-color:var(--blue);color:white}
.settings-actions .danger{color:var(--red)}
.cost-market-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cost-market-box{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px}
.cost-market-box span{display:block;color:var(--muted);font-size:9px}.cost-market-box b{display:block;margin-top:4px;font-size:14px}
.sar-new:before{content:"⃁ ";font-weight:900}
@media(max-width:850px){
 .calc-grid,.settings-grid,.notes-layout{grid-template-columns:1fr}
}
@media(max-width:560px){
 .calc-form,.calc-result{grid-template-columns:1fr}
}



.hl-icon{
  font-size:10px!important;
  width:18px;height:18px;
  display:inline-grid;place-items:center;
  margin-left:5px;vertical-align:middle;
  border-radius:50%;
  background:rgba(255,255,255,.06)
}
.hl-title span{display:inline-flex;align-items:center;gap:2px}
.trade-highlight .hl-ticker{margin-top:18px}
.usage-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:center;
  justify-items:center
}
.mini-gauge{
  width:250px;
  height:165px;
  position:relative;
  margin:0 auto
}
.mini-gauge svg{width:100%;height:100%;display:block}
.mini-center{
  position:absolute;
  inset:62px 0 auto;
  text-align:center;
  pointer-events:none
}
.mini-center strong{
  display:block;
  font-size:28px;
  line-height:1;
  margin-bottom:7px
}
.mini-center span{
  display:block;
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
  max-width:150px;
  margin:0 auto
}
.usage-boxes{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.usage-box{
  text-align:center;
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.usage-box b{font-size:18px}
@media(max-width:1100px){
  .summary-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .summary-row{grid-template-columns:1fr 1fr}
  .mini-gauge{width:220px;height:150px}
}
@media(max-width:520px){
  .summary-row{grid-template-columns:1fr}
  .usage-boxes{grid-template-columns:1fr}
}


/* V4.3 organized: confined open-position improvements */
#tradesView .trade-grid{gap:10px}
#tradesView .trade-card{padding:11px;border-radius:12px}
#tradesView .ticker-icon{width:44px;height:44px;font-size:13px}
#tradesView .cost-market-row{gap:7px;margin-top:8px}
#tradesView .cost-market-box{padding:8px 9px}
#tradesView .cost-market-box b{font-size:15px}
#tradesView .trade-sar{display:block;margin-top:3px;font-size:9px;color:var(--muted)}
#tradesView .smart-trade-stats{gap:6px;margin-top:7px}
#tradesView .smart-stat{padding:7px}
#tradesView .smart-stat b{font-size:12px}
#tradesView .break-even-box{margin-top:7px;padding:8px}
#tradesView .break-even-needed{font-size:16px;margin-top:4px}
#tradesView .exit-levels{gap:5px;margin-top:6px}
#tradesView .exit-level{padding:7px 4px}
#tradesView .exit-level b{font-size:11px;color:var(--green)}
#tradesView .exit-profit{display:block;margin-top:3px;font-size:9px;font-weight:900;color:var(--green)}
#tradesView .exit-profit-sar{display:block;margin-top:2px;font-size:8px;color:var(--green)}
#tradesView .trade-allocation,#tradesView .trade-note,#tradesView .trade-actions{margin-top:7px!important}
#importReview .review-actions button:disabled{opacity:.55;cursor:wait}


/* =========================================================
   V4.4 — الملاحظات الخمس المعتمدة
   ========================================================= */
.main{padding:12px 14px 18px}
.top{margin-bottom:11px}
.grid{gap:9px}
.kpi{padding:13px 15px;min-height:106px}
.kpi h3{font-size:12px}
.kpi .num{font-size:23px;margin:11px 0 5px}
.kpi .sub{font-size:11px}
.kpi-icon{width:40px;height:40px;top:34px;font-size:21px}

.goal,.chart-card{padding:13px}
.goal-content{grid-template-columns:1fr 178px 1fr;gap:10px;min-height:188px}
.goal-side{gap:8px}
.goal-side .box{padding:9px}
.goal-side span{font-size:10px}
.goal-side b{font-size:16px;margin-top:4px}
.gauge{width:178px;height:120px}
.gauge-center{inset:28px 0 0}
.gauge-center strong{font-size:29px}
.goal-progress{margin-top:10px}

.chart-insights{grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}
.chart-insight{padding:8px}
.chart-insight b{font-size:15px;margin-top:3px}
.chart-insight small{font-size:9px}
.dashboard-chart-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dashboard-chart-pane{min-width:0;background:rgba(255,255,255,.012);border:1px solid var(--line);border-radius:10px;padding:9px}
.dashboard-chart-pane .section-head{margin-bottom:5px}
.dashboard-chart-pane .section-head h2{font-size:13px}
.dashboard-chart-pane .snapshot-note{font-size:8px}
.dashboard-chart-pane .chart{height:166px}

.summary h2{padding:11px 14px}
.summary-row{gap:7px;padding:9px}
.summary-item{min-height:70px;padding:9px 11px}
.summary-item span{font-size:9px;margin-bottom:4px}
.summary-item b{font-size:17px}
.best-worst,.usage{padding:12px}
.bw-wrap{min-height:142px}
.usage-wrap{gap:7px}
.mini-gauge{width:190px;height:124px}
.mini-center{inset:47px 0 auto}
.mini-center strong{font-size:24px}
.usage-box{min-height:58px;padding:8px}
.usage-box b{font-size:16px}

/* بطاقات الصفقات */
#tradesView .trade-grid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:10px}
#tradesView .trade-card{padding:12px!important}
#tradesView .ticker-icon{width:46px;height:46px;font-size:14px}
#tradesView .risk-badge{font-size:11px}
#tradesView .cost-market-row{margin-top:8px}
#tradesView .cost-market-box{padding:8px 10px}
#tradesView .cost-market-box span{font-size:10px}
#tradesView .cost-market-box b{font-size:16px}
#tradesView .trade-sar{font-size:10px}
#tradesView .smart-trade-stats{margin-top:8px}
#tradesView .smart-stat{padding:8px}
#tradesView .smart-stat span{font-size:10px}
#tradesView .smart-stat b{font-size:13px}
#tradesView .break-even-box{padding:9px;margin-top:8px}
#tradesView .break-even-title{font-size:10px}
#tradesView .break-even-needed{font-size:17px}
#tradesView .exit-level span{font-size:9px}
#tradesView .exit-level b{font-size:12px}
#tradesView .exit-profit{font-size:10px}
#tradesView .exit-profit-sar{font-size:9px}
#tradesView .trade-note{padding:8px 10px!important}
#tradesView .trade-note span{font-size:9px;margin-bottom:4px}
#tradesView .trade-note b{font-size:12px!important;line-height:1.45}
#tradesView .trade-actions button{font-size:11px!important;padding:7px!important}

@media(max-width:1200px){
  .dashboard-chart-pair{grid-template-columns:1fr}
  .dashboard-chart-pane .chart{height:180px}
}
@media(max-width:760px){
  .main{padding:10px}
  .goal-content{grid-template-columns:1fr}
}


/* =========================================================
   V4.5 — Dashboard polish only
   ========================================================= */

/* Keep dashboard visually dense but calm */
#dashboardView .grid{gap:10px}
#dashboardView .compact-head{margin-bottom:8px}
#dashboardView .compact-head h2{font-size:14px}

/* Summary */
.compact-summary{grid-column:span 6;padding:12px}
.compact-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}
.compact-summary-item{
  position:relative;
  min-height:72px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel2);
  overflow:hidden
}
.compact-summary-item:before{
  content:"";
  position:absolute;
  top:0;right:0;left:0;
  height:3px;
  background:var(--blue)
}
.compact-summary-item span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-bottom:7px
}
.compact-summary-item b{
  display:block;
  font-size:17px;
  font-weight:900
}
.compact-summary-item.positive{background:rgba(32,215,120,.045);border-color:rgba(32,215,120,.22)}
.compact-summary-item.positive:before{background:var(--green)}
.compact-summary-item.positive b{color:var(--green)}
.compact-summary-item.negative{background:rgba(255,84,95,.045);border-color:rgba(255,84,95,.22)}
.compact-summary-item.negative:before{background:var(--red)}
.compact-summary-item.negative b{color:var(--red)}
.compact-summary-item.neutral{background:rgba(21,151,255,.04);border-color:rgba(21,151,255,.20)}

/* Best / worst */
.compact-best-worst{grid-column:span 3;padding:12px}
.compact-bw-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.compact-bw-card{
  border-radius:11px;
  padding:11px;
  min-height:150px;
  border:1px solid var(--line);
  background:var(--panel2)
}
.compact-bw-card.best{
  background:linear-gradient(135deg,rgba(32,215,120,.09),rgba(32,215,120,.025));
  border-color:rgba(32,215,120,.28)
}
.compact-bw-card.worst{
  background:linear-gradient(135deg,rgba(255,84,95,.09),rgba(255,84,95,.025));
  border-color:rgba(255,84,95,.28)
}
.compact-bw-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:900
}
.compact-bw-card.best .compact-bw-title,
.compact-bw-card.best .compact-bw-value,
.compact-bw-card.best .compact-bw-percent{color:var(--green)}
.compact-bw-card.worst .compact-bw-title,
.compact-bw-card.worst .compact-bw-value,
.compact-bw-card.worst .compact-bw-percent{color:var(--red)}
.compact-bw-icon{font-size:14px}
.compact-bw-ticker{
  margin-top:15px;
  font-size:16px;
  font-weight:950
}
.compact-bw-date{
  margin-top:4px;
  font-size:9px;
  color:var(--muted)
}
.compact-bw-value{
  margin-top:10px;
  font-size:20px;
  font-weight:950
}
.compact-bw-percent{
  margin-top:4px;
  font-size:12px;
  font-weight:900
}

/* Usage */
.compact-usage{grid-column:span 3;padding:12px}
.compact-usage-grid{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:10px;
  align-items:center
}
.compact-mini-gauge{
  position:relative;
  width:150px;
  height:104px
}
.compact-mini-gauge svg{width:100%;height:100%}
.compact-mini-center{
  position:absolute;
  inset:38px 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center
}
.compact-mini-center strong{
  font-size:24px;
  line-height:1
}
.compact-mini-center span{
  margin-top:4px;
  font-size:9px;
  color:var(--muted)
}
.compact-usage-stats{display:grid;gap:8px}
.compact-usage-box{
  min-height:57px;
  padding:9px 10px;
  border-radius:9px;
  background:var(--panel2);
  border:1px solid var(--line)
}
.compact-usage-box span{
  display:block;
  color:var(--muted);
  font-size:9px
}
.compact-usage-box b{
  display:block;
  margin-top:5px;
  font-size:16px
}
.compact-usage-box.used b{color:var(--orange)}
.compact-usage-box.available b{color:var(--green)}

/* Compact dashboard rows */
#dashboardView .foot{padding:9px 12px}
@media(max-width:1200px){
  .compact-summary{grid-column:1/-1}
  .compact-best-worst,.compact-usage{grid-column:span 6}
}
@media(max-width:760px){
  .compact-summary-grid{grid-template-columns:repeat(2,1fr)}
  .compact-best-worst,.compact-usage{grid-column:1/-1}
}
@media(max-width:480px){
  .compact-bw-grid{grid-template-columns:1fr}
  .compact-usage-grid{grid-template-columns:1fr}
  .compact-mini-gauge{margin:auto}
}


/* =========================================================
   V4.7 — Dashboard UI only (Yahoo engine untouched)
   ========================================================= */

#dashboardView .grid{
  gap:10px;
  align-items:start;
}

/* KPI colors */
#dashboardView .kpi.cash-gold{
  border-color:rgba(255,169,46,.52);
  background:
    radial-gradient(circle at 20% 45%,rgba(255,169,46,.08),transparent 32%),
    var(--panel);
}
#dashboardView .kpi.cash-gold .num{color:#ffb24a}
#dashboardView .kpi.cash-gold .kpi-icon{
  color:#ffad32;
  border-color:rgba(255,169,46,.35);
  background:rgba(255,169,46,.10);
}
#dashboardView .kpi.cash-gold .sar-line{color:#d9b778}

/* Goal section: same information, less empty space */
#dashboardView .goal{
  padding:14px;
}
#dashboardView .goal-content{
  grid-template-columns:minmax(185px,.8fr) minmax(190px,.9fr) minmax(210px,1fr);
  min-height:164px;
  gap:12px;
}
#dashboardView .goal-side{
  justify-content:center;
}
#dashboardView .goal-side > div:not(.box){
  padding:6px 4px;
}
#dashboardView .goal-side .box{
  min-height:48px;
  padding:8px 10px;
}
#dashboardView .gauge{
  width:170px;
  height:112px;
}
#dashboardView .gauge-center{
  inset:27px 0 0;
}
#dashboardView .gauge-center strong{
  font-size:29px;
}
#dashboardView .goal-progress{
  margin-top:8px;
}

/* Charts */
#dashboardView .chart-card{
  padding:12px;
}
#dashboardView .dashboard-chart-summary{
  display:block;
  margin:0 0 8px;
}
#dashboardView .hidden-metric{
  display:none!important;
}
#dashboardView .dashboard-unrealized-stat{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:45px;
  padding:8px 11px;
  border:1px solid rgba(255,84,95,.25);
  border-radius:10px;
  background:rgba(255,84,95,.035);
}
#dashboardView .dashboard-unrealized-stat span{
  color:var(--muted);
  font-size:10px;
  margin-inline-end:auto;
}
#dashboardView .dashboard-unrealized-stat b{
  color:var(--red);
  font-size:17px;
}
#dashboardView .dashboard-unrealized-stat small{
  color:var(--muted);
  font-size:9px;
}
#dashboardView .dashboard-chart-pair{
  gap:10px;
}
#dashboardView .dashboard-chart-pane{
  padding:10px;
  overflow:hidden;
}
#dashboardView .dashboard-chart-pane .chart{
  height:176px;
}

/* Premium summary */
.premium-summary{
  grid-column:1/-1;
  padding:14px;
}
.premium-section-head{
  margin-bottom:10px;
}
.premium-section-head h2{
  font-size:15px;
}
.summary-primary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.summary-primary-card{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:96px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel2);
}
.summary-primary-icon{
  display:grid;
  place-items:center;
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:50%;
  font-size:18px;
  font-weight:900;
}
.summary-primary-card span,
.summary-secondary-card span{
  display:block;
  color:var(--muted);
  font-size:10px;
}
.summary-primary-card b{
  display:block;
  margin-top:5px;
  font-size:21px;
  line-height:1.1;
}
.summary-primary-card small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
}
.summary-primary-card.positive{
  border-color:rgba(32,215,120,.36);
  background:linear-gradient(135deg,rgba(32,215,120,.08),rgba(32,215,120,.02));
}
.summary-primary-card.positive .summary-primary-icon{
  color:var(--green);
  border:1px solid rgba(32,215,120,.45);
  background:rgba(32,215,120,.08);
}
.summary-primary-card.positive b{color:var(--green)}
.summary-primary-card.neutral{
  border-color:rgba(21,151,255,.36);
  background:linear-gradient(135deg,rgba(21,151,255,.08),rgba(21,151,255,.02));
}
.summary-primary-card.neutral .summary-primary-icon{
  color:var(--blue);
  border:1px solid rgba(21,151,255,.45);
  background:rgba(21,151,255,.08);
}
.summary-primary-card.neutral b{color:var(--blue)}

.summary-secondary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:9px;
}
.summary-secondary-card{
  min-height:66px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel2);
}
.summary-secondary-card b{
  display:block;
  margin-top:6px;
  font-size:16px;
}
.summary-secondary-card.positive{
  border-color:rgba(32,215,120,.30);
  background:rgba(32,215,120,.035);
}
.summary-secondary-card.positive b{color:var(--green)}
.summary-secondary-card.negative{
  border-color:rgba(255,84,95,.30);
  background:rgba(255,84,95,.035);
}
.summary-secondary-card.negative b{color:var(--red)}

/* Best / worst operation */
.compact-best-worst{
  padding:13px;
}
.compact-bw-card.best{
  border-color:rgba(32,215,120,.46);
  background:linear-gradient(135deg,rgba(32,215,120,.10),rgba(32,215,120,.025));
}
.compact-bw-card.worst{
  border-color:rgba(255,84,95,.46);
  background:linear-gradient(135deg,rgba(255,84,95,.10),rgba(255,84,95,.025));
}
.compact-bw-title.best-title,
.compact-bw-card.best .compact-bw-ticker,
.compact-bw-card.best .compact-bw-value,
.compact-bw-card.best .compact-bw-percent{
  color:var(--green)!important;
}
.compact-bw-title.worst-title,
.compact-bw-card.worst .compact-bw-ticker,
.compact-bw-card.worst .compact-bw-value,
.compact-bw-card.worst .compact-bw-percent{
  color:var(--red)!important;
}

/* Portfolio distribution */
.compact-usage{
  padding:13px;
}
.compact-usage-grid{
  grid-template-columns:145px 1fr;
  gap:11px;
}
.compact-mini-gauge{
  width:145px;
  height:102px;
}
.compact-usage-box.used{
  border-color:rgba(21,151,255,.30);
  background:rgba(21,151,255,.035);
}
.compact-usage-box.used b{
  color:var(--blue);
}
.compact-usage-box.available{
  border-color:rgba(255,169,46,.32);
  background:rgba(255,169,46,.035);
}
.compact-usage-box.available b{
  color:#ffb24a!important;
}

/* Compact footer */
.dashboard-foot{
  padding:8px 12px;
  min-height:auto;
  color:var(--muted);
  font-size:9px;
  text-align:center;
}

/* Remove visual dead space */
#dashboardView .best-worst,
#dashboardView .usage{
  min-height:0;
}
#dashboardView .compact-bw-card{
  min-height:137px;
}
#dashboardView .compact-summary,
#dashboardView .summary{
  min-height:0;
}

@media(max-width:1200px){
  .summary-primary-grid,
  .summary-secondary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .summary-primary-grid,
  .summary-secondary-grid{
    grid-template-columns:1fr;
  }
  #dashboardView .goal-content{
    grid-template-columns:1fr;
  }
}

/* V4.7.2 five top cards — visual only */
#dashboardView .grid{grid-template-columns:repeat(10,minmax(0,1fr))!important;gap:9px}
#dashboardView .grid>.top-kpi{grid-column:span 2!important;min-width:0}
#dashboardView .top-kpi{position:relative;min-height:154px;padding:14px 15px 12px;overflow:hidden;border-radius:12px}
#dashboardView .top-kpi h3{font-size:12px;margin:0 0 9px}
#dashboardView .top-kpi .num{font-size:25px;line-height:1.05;margin:0 0 5px}
#dashboardView .top-kpi .sar-line{font-size:10px}
#dashboardView .top-kpi .sub{position:absolute;right:14px;bottom:9px;z-index:3;font-size:10px;font-weight:800}
#dashboardView .top-kpi .kpi-icon{width:43px;height:43px;top:34px;left:14px;font-size:21px}
#dashboardView .top-spark{position:absolute;left:12px;right:12px;bottom:28px;width:calc(100% - 24px)!important;height:32px!important;display:block}
#dashboardView .capital-line{position:absolute;left:13px;right:13px;bottom:31px;height:5px;border-radius:999px;background:linear-gradient(90deg,#7a56e8,#9a71ff)}
#dashboardView .capital-top{border-color:rgba(126,91,237,.50);background:radial-gradient(circle at 18% 42%,rgba(126,91,237,.11),transparent 35%),var(--panel)}
#dashboardView .capital-top .num,#dashboardView .capital-top h3{color:#d7c9ff}
#dashboardView .capital-top .kpi-icon{color:#9673ff;border-color:rgba(126,91,237,.38);background:rgba(126,91,237,.11)}
#dashboardView .portfolio-top{border-color:rgba(21,151,255,.48);background:radial-gradient(circle at 18% 42%,rgba(21,151,255,.10),transparent 35%),var(--panel)}
#dashboardView .portfolio-top .num{color:#45adff}
#dashboardView .portfolio-top .kpi-icon{color:#1597ff;border-color:rgba(21,151,255,.38);background:rgba(21,151,255,.10)}
#dashboardView .pnl-top{border-color:rgba(32,215,120,.45);background:radial-gradient(circle at 18% 42%,rgba(32,215,120,.10),transparent 35%),var(--panel)}
#dashboardView .pnl-top .num{color:var(--green)}
#dashboardView .pnl-top .kpi-icon{color:var(--green);border-color:rgba(32,215,120,.36);background:rgba(32,215,120,.10)}
#dashboardView .cash-top{border-color:rgba(255,169,46,.50);background:radial-gradient(circle at 18% 42%,rgba(255,169,46,.10),transparent 35%),var(--panel)}
#dashboardView .cash-top .num{color:#ffad32}
#dashboardView .cash-top .kpi-icon{color:#ffad32;border-color:rgba(255,169,46,.38);background:rgba(255,169,46,.10)}
#dashboardView .used-top{border-color:rgba(49,180,255,.48);background:radial-gradient(circle at 18% 42%,rgba(49,180,255,.10),transparent 35%),var(--panel)}
#dashboardView .used-top .num{color:#5ec4ff}
#dashboardView .used-top .kpi-icon{color:#5ec4ff;border-color:rgba(49,180,255,.38);background:rgba(49,180,255,.10)}
#dashboardView .lower-usage-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;padding:0!important;margin:0!important;border:0!important}
#dashboardView .goal,#dashboardView .chart-card{grid-column:span 5!important}
#dashboardView .summary,#dashboardView .premium-summary,#dashboardView .best-worst{grid-column:1/-1!important}
@media(max-width:1350px){#dashboardView .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#dashboardView .grid>.top-kpi{grid-column:span 1!important}#dashboardView .grid>.used-top{grid-column:1/-1!important}}
@media(max-width:760px){#dashboardView .grid{grid-template-columns:1fr!important}#dashboardView .grid>.top-kpi{grid-column:1/-1!important}}


/* =========================================================
   V4.7.3 — Focused fixes only
   ========================================================= */

/* Better top sparklines */
#dashboardView .top-kpi{min-height:164px}
#dashboardView .top-spark{height:36px!important;bottom:28px}
#dashboardView .top-kpi .sub{bottom:8px}

/* Goal: no duplicated information */
#dashboardView .goal-clean{padding:13px}
#dashboardView .goal-clean-content{
  display:grid;
  grid-template-columns:190px 190px 1fr;
  align-items:center;
  gap:12px;
  min-height:186px;
}
#dashboardView .goal-clean-stats{display:grid;gap:8px}
#dashboardView .goal-clean-stat{
  min-height:52px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)
}
#dashboardView .goal-clean-stat span{display:block;font-size:9px;color:var(--muted)}
#dashboardView .goal-clean-stat b{display:block;margin-top:4px;font-size:16px}
#dashboardView .goal-clean-stat.warning b{color:var(--orange)}
#dashboardView .goal-clean-center{display:flex;justify-content:center}
#dashboardView .goal-clean .gauge{width:184px;height:124px}
#dashboardView .goal-clean .gauge-center{inset:31px 0 0}
#dashboardView .goal-clean .gauge-center strong{font-size:31px}
#dashboardView .goal-clean-progress{align-self:center}
#dashboardView .goal-clean-progress .goal-progress{margin:0}
#dashboardView .goal-clean-caption{margin-top:12px;text-align:center;font-size:10px;color:var(--muted)}
#dashboardView .goal-clean-caption b{color:var(--orange);font-size:15px;margin-inline-start:5px}

/* Charts: amount inside chart header, more space for both charts */
#dashboardView .chart-card-focused{padding:10px 11px}
#dashboardView .chart-card-focused .dashboard-chart-pair{gap:9px}
#dashboardView .chart-card-focused .dashboard-chart-pane{padding:8px 9px}
#dashboardView .chart-card-focused .dashboard-chart-pane .chart{height:205px}
#dashboardView .chart-title-with-value{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#dashboardView .chart-inline-value{text-align:left;direction:ltr;white-space:nowrap}
#dashboardView .chart-inline-value b{display:block;color:var(--red);font-size:18px;line-height:1.1}
#dashboardView .chart-inline-value small{display:block;color:var(--muted);font-size:9px;margin-top:3px}

/* Summary: uniform, clear typography */
#dashboardView .summary-primary-grid,
#dashboardView .summary-secondary-grid{gap:8px}
#dashboardView .summary-primary-card,
#dashboardView .summary-secondary-card{
  min-height:82px;padding:10px 11px;border-radius:10px
}
#dashboardView .summary-primary-card span,
#dashboardView .summary-secondary-card span{font-size:10px!important}
#dashboardView .summary-primary-card b,
#dashboardView .summary-secondary-card b{font-size:18px!important;line-height:1.15;margin-top:6px}
#dashboardView .summary-primary-card small,
#dashboardView .summary-secondary-card small{font-size:9px!important;margin-top:5px}
#dashboardView .summary-primary-icon{width:34px;height:34px;flex-basis:34px;font-size:15px}

@media(max-width:1200px){
  #dashboardView .goal-clean-content{grid-template-columns:1fr}
  #dashboardView .chart-card-focused .dashboard-chart-pane .chart{height:190px}
}