body{
  background:#021014;
  color:#e6fbff;
  font-family:'Microsoft JhengHei','Segoe UI',Arial,sans-serif;
  margin:0;
}
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 28px;
  background:#03242f;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.brand{display:flex;align-items:center;gap:14px;}
.logo-wrap{background:#002232;border-radius:18px;padding:6px;box-shadow:0 10px 25px rgba(0,0,0,0.35);overflow:hidden;} 
.logo{height:46px;display:block;filter:drop-shadow(0 0 10px rgba(69,233,255,0.6));border-radius:12px;}
.title{font-size:26px;font-weight:600;color:#aef5ff;}
.subtitle{font-size:13px;color:#45e9ff;letter-spacing:0.5px;}
.meta{text-align:right;font-size:13px;color:#7ec7d8;}
.grid{display:grid;gap:16px;padding:20px 24px 0;}
.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.two-column{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.card{
  background:linear-gradient(135deg,#0a2f40,#021624);
  border-radius:14px;
  padding:16px;
  border:1px solid rgba(69,233,255,0.25);
  box-shadow:0 12px 35px rgba(0,0,0,0.5);
}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.card-header h3{margin:0;font-size:18px;color:#45e9ff;}
.kpi .label{font-size:13px;color:#7ec7d8;margin-bottom:6px;}
.kpi .value{font-size:28px;font-weight:600;color:#e6fbff;}
.kpi .value.small{font-size:20px;line-height:1.2;}
.alert-bar{
  margin:12px 24px 0;
  padding:10px 16px;
  border-radius:10px;
  background:rgba(69,233,255,0.1);
  border:1px solid rgba(69,233,255,0.4);
  font-size:13px;
  color:#aef5ff;
}
.gauge-card{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.gauge{
  width:90px;height:90px;border-radius:50%;
  background:conic-gradient(#45e9ff 0deg,#45e9ff 120deg,rgba(255,255,255,0.05) 0deg);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.gauge::after{
  content:'';position:absolute;width:70px;height:70px;border-radius:50%;background:#021014;
}
#risk_gauge_value{position:relative;font-size:16px;font-weight:600;color:#45e9ff;}
.gauge-number{margin-top:8px;font-size:13px;color:#aef5ff;}
.list-card .list{font-size:14px;color:#defbff;line-height:1.6;}
.list-card .list div,.list-card .list li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.12);} 
.list-card .list div:last-child,.list-card .list li:last-child{border-bottom:none;}
.list-card ul{list-style:none;padding-left:0;margin:0;}
.allocation{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#defbff;}
.allocation-item{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(255,255,255,0.15);padding-bottom:6px;}
.ledger{font-size:13px;color:#7ec7d8;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;line-height:1.5;}
.subsection h4{margin-bottom:6px;color:#45e9ff;}
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px;}
th,td{padding:10px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.12);} 
th{color:#7ec7d8;font-weight:600;}
tr:last-child td{border-bottom:none;}
.green{color:#3dffb1;}
.red{color:#ff6b8b;}
.sparkline-row{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.sparkline-card{flex:1 1 140px;background:rgba(255,255,255,0.04);padding:8px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(69,233,255,0.18);}
.snapshot{background:rgba(255,255,255,0.04);padding:10px;border-radius:10px;font-size:14px;line-height:1.5;color:#aef5ff;}
.hint{color:#7ec7d8;font-size:12px;display:block;margin-top:6px;}
.pos-extra{display:none;background:rgba(0,0,0,0.25);}
.pos-extra td{padding:10px 12px !important;color:#d2f8ff;font-size:13px;}
.pos-extra.show{display:table-row;}
.nav-filters{display:flex;gap:8px;}
.nav-filters button{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(69,233,255,0.4);
  color:#e6fbff;
  border-radius:20px;
  padding:4px 12px;
  cursor:pointer;font-size:13px;
}
.nav-filters button.active{background:#45e9ff;border-color:#45e9ff;color:#021014;}
.gauge-number{margin-top:8px;font-size:13px;color:#aef5ff;}
@media(max-width:768px){
  .header{flex-direction:column;align-items:flex-start;gap:10px;}
  .meta{text-align:left;}
}
.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:6px;}
.heatmap-cell{height:46px;border-radius:10px;background:rgba(255,255,255,0.06);display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:11px;color:#cdefff;opacity:0.7;}
.heatmap-cell.low{background:#0b3b4c;opacity:0.8;}
.heatmap-cell.mid{background:#126377;color:#ffffff;}
.heatmap-cell.high{background:#f88b76;color:#021014;font-weight:600;opacity:1;}
.heatmap-note{margin-top:8px;font-size:12px;color:#7ec7d8;}
.risk-slider{display:flex;flex-direction:column;gap:10px;}
.risk-slider input[type=range]{width:100%;accent-color:#45e9ff;}
#risk_slider_label{font-size:14px;color:#aef5ff;}
#risk_slider_status{font-size:13px;padding:6px 10px;border-radius:8px;background:rgba(69,233,255,0.12);color:#cdefff;}
.ghost-btn{background:transparent;border:1px solid rgba(69,233,255,0.5);color:#aef5ff;padding:4px 12px;border-radius:999px;font-size:12px;cursor:pointer;}
.ghost-btn.active{background:#45e9ff;color:#021014;}
.ai-explain{background:rgba(255,255,255,0.04);padding:12px;border-radius:10px;color:#d2f8ff;font-size:14px;line-height:1.6;display:block;}
.ai-explain.show{display:block;}
.timeline{list-style:none;padding-left:0;margin:0;color:#d2f8ff;font-size:13px;line-height:1.6;}
.timeline li{border-left:2px solid rgba(69,233,255,0.3);margin-left:10px;padding-left:10px;position:relative;}
.timeline li::before{content:'';position:absolute;left:-6px;top:6px;width:8px;height:8px;border-radius:50%;background:#45e9ff;}
.benchmark-note{margin-top:10px;font-size:13px;color:#aef5ff;}
.digest-text{font-size:14px;line-height:1.6;color:#d2f8ff;white-space:pre-line;}
.alert-bar.ok{background:rgba(69,233,255,0.1);border-color:rgba(69,233,255,0.4);color:#aef5ff;}
.alert-bar.warn{background:rgba(255,188,66,0.12);border-color:rgba(255,188,66,0.5);color:#ffe3b3;}
.alert-bar.danger{background:rgba(255,99,132,0.18);border-color:rgba(255,99,132,0.6);color:#ffd6e5;}
.strategy-filter{background:rgba(255,255,255,0.08);border:1px solid rgba(69,233,255,0.4);color:#e6fbff;border-radius:20px;padding:4px 12px;font-size:13px;}
.macro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;}
.macro-grid div{background:rgba(255,255,255,0.04);padding:10px;border-radius:10px;font-size:13px;color:#cdefff;display:flex;flex-direction:column;gap:4px;}
.macro-grid strong{font-size:16px;color:#e6fbff;}
.macro-summary{grid-column:1/-1;font-size:13px;color:#aef5ff;}
.pnl-pos{color:#63f5c8 !important;}
.pnl-neg{color:#ff8195 !important;}
.pnl-flat{color:#e6fbff !important;}


.ai-panels {
  display: flex;
  gap: 16px;
  margin: 0 20px 20px;
}

.panel {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.panel h3 {
  margin: 0 0 8px;
}

.panel div {
  margin: 4px 0;
  color: #d9ebff;
}


.insight-panels {
  display: flex;
  gap: 16px;
  margin: 0 20px 20px;
}

.insight-panels .panel {
  flex: 1;
}

.sync-live { color: #4ade80; }
.sync-stale { color: #f59e0b; }
.sync-error { color: #ef4444; }