:root{
  color-scheme:dark;
  --bg:#07101f;
  --panel:#0d1728;
  --panel2:#111d31;
  --line:#22314a;
  --text:#edf4ff;
  --muted:#8fa3bf;
  --accent:#63a7ff;
  --accent2:#7be0c3;
  --danger:#ff6f7d;
  --shadow:0 18px 50px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;
  background:
    radial-gradient(circle at 10% 0%,rgba(41,103,180,.18),transparent 28rem),
    radial-gradient(circle at 100% 20%,rgba(40,157,130,.12),transparent 26rem),
    var(--bg);
  color:var(--text);
}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{width:min(1500px,100%);margin:0 auto;padding:28px 22px 54px}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(350px,.65fr);
  gap:28px;
  align-items:end;
  padding:22px 2px 30px;
}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent2);font-weight:700}
h1{font-size:clamp(32px,5vw,62px);line-height:1.02;letter-spacing:-.04em;margin:10px 0 14px}
.hero p,.panel p{color:var(--muted);line-height:1.65;margin:0}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.status-card,.metrics>div,.forecast-summary>div{
  border:1px solid var(--line);
  background:rgba(17,29,49,.72);
  border-radius:14px;
  padding:14px;
}
.status-card span,.metrics span,.forecast-summary span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.status-card strong,.metrics strong,.forecast-summary strong{font-size:14px}
.panel{
  background:linear-gradient(180deg,rgba(18,31,52,.94),rgba(11,21,37,.96));
  border:1px solid rgba(73,96,128,.36);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:22px;
  margin-bottom:18px;
}
.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}
h2{font-size:20px;margin:0 0 4px}
.form-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px}
label>span{display:block;color:var(--muted);font-size:12px;margin-bottom:7px}
input,select{
  width:100%;
  color:var(--text);
  background:#081321;
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 12px;
  outline:none;
}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,167,255,.12)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
button{
  color:var(--text);
  background:#17253b;
  border:1px solid #2a3b55;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:linear-gradient(135deg,#2f75e6,#2764c7);border-color:#4b86e4}
button.ghost{background:transparent}
button.danger{color:#ffb4bc;border-color:rgba(255,111,125,.45)}
.badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  border:1px solid var(--line);
  background:#132137;
  color:#b9c9df;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
}
.badge.good{color:#aaf2df;border-color:rgba(123,224,195,.45)}
.badge.warn{color:#ffd999;border-color:rgba(255,201,107,.45)}
.badge.bad{color:#ffb4bc;border-color:rgba(255,111,125,.45)}
.progress-wrap{margin-top:16px}
.progress-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:7px}
.progress{height:8px;border-radius:999px;overflow:hidden;background:#07101c;border:1px solid #1f2b40}
.progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s ease}
.metrics,.forecast-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.chart{height:600px;margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#081321}
.switch-row{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;cursor:pointer}
.switch-row input{display:none}
.switch{width:42px;height:23px;border-radius:999px;background:#25344b;position:relative;transition:.2s}
.switch:after{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;border-radius:50%;background:#aab7c9;transition:.2s}
.switch-row input:checked+.switch{background:#2e78e8}
.switch-row input:checked+.switch:after{transform:translateX(19px);background:white}
.scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.scenario-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:#0b1627}
.scenario-card .top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.scenario-card h3{margin:0;font-size:16px}
.prob{font-size:20px;font-weight:800}
.scenario-card dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0}
.scenario-card dt{color:var(--muted);font-size:11px}
.scenario-card dd{margin:3px 0 0;font-weight:700}
.empty-state{grid-column:1/-1;border:1px dashed #334660;border-radius:14px;color:var(--muted);padding:22px;text-align:center}
.method{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted)}
.method summary{cursor:pointer;color:#cbd8ea;font-weight:700}
.method div{padding-top:10px;line-height:1.7}
.log{
  margin:0;
  min-height:170px;
  max-height:340px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  background:#07101c;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  color:#b8cae2;
  font-size:12px;
  line-height:1.55;
}
footer{text-align:center;color:#7186a3;padding:15px 0 0;font-size:12px}
@media(max-width:1050px){
  .hero{grid-template-columns:1fr}
  .form-grid{grid-template-columns:repeat(3,1fr)}
  .scenario-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .app-shell{padding:18px 12px 40px}
  .panel{padding:16px;border-radius:16px}
  .panel-head{display:block}
  .form-grid{grid-template-columns:1fr 1fr}
  .metrics,.forecast-summary{grid-template-columns:1fr 1fr}
  .chart{height:480px}
  .switch-row{margin-top:12px}
}
@media(max-width:480px){
  .form-grid,.metrics,.forecast-summary,.status-grid{grid-template-columns:1fr}
  .actions button{flex:1 1 100%}
}