:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c232d; --line:#2a323d;
  --txt:#e6edf3; --muted:#8b97a6; --up:#26a69a; --down:#ef5350;
  --accent:#f0b429; --buy:#1f7a5a; --sell:#9b2f30;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
}
header{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel);
}
header h1{font-size:18px;margin:0;font-weight:700}
.tag{font-size:11px;color:var(--accent);border:1px solid var(--accent);
  border-radius:4px;padding:1px 6px;margin-left:6px;font-weight:400}
.src{font-size:12px;color:var(--muted)}

main{display:flex;gap:14px;padding:14px;align-items:flex-start}
.left-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.chart-panel{background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:10px}

/* 圖表下方：交易設定橫向排列 */
.settings-row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.settings-row label{margin-bottom:0;flex:1;min-width:140px}
.settings-row .btn{flex:0 0 auto;padding:8px 18px}
.chart-head{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:6px;flex-wrap:wrap;gap:8px}
.ohlc{font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.ohlc b{color:var(--txt)}
.legend{font-size:11px;color:var(--muted);display:flex;gap:12px}
.legend .up{color:var(--up)} .legend .down{color:var(--down)}
.legend .entry-legend{color:var(--accent)}
#chart{width:100%;height:460px;display:block}
.progress{font-size:12px;color:var(--muted);text-align:right;margin-top:6px;
  font-variant-numeric:tabular-nums}

.side-panel{width:330px;display:flex;flex-direction:column;gap:12px;flex-shrink:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.card h2{font-size:13px;margin:0 0 10px;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.5px}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}
select,input{width:100%;margin-top:4px;background:var(--panel2);color:var(--txt);
  border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:14px}

.kv{display:flex;justify-content:space-between;align-items:center;
  font-size:13px;padding:4px 0;font-variant-numeric:tabular-nums}
.kv span{color:var(--muted)}
.kv b{font-weight:600}
.kv.big b{font-size:22px}
.account .kv.big{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:4px}

.btn{cursor:pointer;border:none;border-radius:6px;padding:10px;font-size:14px;
  font-weight:600;color:#fff;transition:filter .12s}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn-row{display:flex;gap:8px;margin-bottom:8px}
.btn-row .btn{flex:1}
.btn.buy{background:var(--buy)} .btn.sell{background:var(--sell)}
.btn.next{background:var(--accent);color:#1a1a1a;margin-top:4px}
.btn.auto{background:#2f6f8f;flex:1}
.btn.auto.paused{background:transparent;border:1px solid var(--line);color:var(--txt)}
.auto-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.auto-speed{margin:0;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:4px}
.auto-speed input{width:52px;margin:0;padding:6px 8px;text-align:center}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn.full{width:100%}

.log ul{list-style:none;margin:0;padding:0;max-height:180px;overflow:auto;font-size:12px}
.log li{padding:5px 0;border-bottom:1px solid var(--line);color:var(--muted);
  font-variant-numeric:tabular-nums}
.log li b{color:var(--txt)}
.pl-pos{color:var(--up)} .pl-neg{color:var(--down)}

@media(max-width:880px){
  main{flex-direction:column}
  .side-panel{width:100%}
  #chart{height:340px}
}