:root{
  --bg:#0f1419; --panel:#161d26; --panel2:#1c2630; --line:#283543;
  --txt:#e6edf3; --muted:#8b9aa9; --accent:#3da9fc; --pos:#46c98b; --neg:#e5635a;
  --deploy:#1f6f4a; --wait:#3a4250;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}

.topbar{display:flex;align-items:center;gap:20px;padding:12px 22px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:700;font-size:18px;letter-spacing:.5px;color:var(--txt);text-decoration:none;white-space:nowrap}
.brand span{color:var(--accent)}
.topbar nav{display:flex;gap:18px;flex-wrap:wrap}
.topbar nav a{color:var(--muted);padding:4px 2px;border-bottom:2px solid transparent;white-space:nowrap}
.topbar nav a.active{color:var(--txt);border-color:var(--accent)}
.topbar nav a .soon{font-size:10px;color:var(--muted);background:var(--panel2);padding:1px 5px;border-radius:8px;margin-left:4px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.navset{color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:7px;padding:4px 10px;white-space:nowrap}
.navset:hover{border-color:var(--accent);color:var(--txt)}
.navset.active{color:var(--txt);border-color:var(--accent)}
.tagline{color:var(--muted);font-size:12px}

main{max-width:1180px;margin:0 auto;padding:22px}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:24px}

.statusbar{display:flex;gap:10px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:18px}
.stat{display:flex;flex-direction:column;min-width:120px}
.stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.stat .v{font-weight:600}
.v.ok{color:var(--pos)}.v.bad{color:var(--neg)}
.pos{color:var(--pos)}.neg{color:var(--neg)}
.muted{color:var(--muted);font-weight:400;font-size:12px}

.section-head{display:flex;align-items:center;gap:12px;margin:10px 0;flex-wrap:wrap}
.section-head h2{margin:0}
.howto{margin-left:auto;font-size:13px}
.howto summary{cursor:pointer;color:var(--accent)}
.howto ul{margin:8px 0;padding-left:18px;color:var(--muted);max-width:640px}
.howto li{margin:4px 0}
.asof{margin:0 0 10px}
.stat[title]{cursor:help}
.reasons .tip{border-bottom:1px dotted var(--muted);cursor:help}
h2{font-size:18px;margin:18px 0 10px}

.btn{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:7px 12px;cursor:pointer;font-size:14px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--deploy);border-color:#2a8f63}
.btn.ghost{background:transparent}
.btn.small{padding:4px 9px;font-size:13px}
.htmx-indicator{opacity:0;transition:opacity .2s}
.htmx-request .htmx-indicator,.htmx-indicator.htmx-request{opacity:1}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.card.deploy{border-color:#2a8f63}
.card header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h3{margin:0;font-size:17px}
.card h3 .pair{color:var(--muted);font-size:12px;font-weight:400}
.badge{font-size:11px;padding:2px 8px;border-radius:10px;background:var(--panel2);text-transform:capitalize}
.badge.regime-ranging{background:#1f6f4a}.badge.regime-uptrend{background:#1d5a87}
.badge.regime-downtrend{background:#7a3530}.badge.regime-choppy{background:#5a4a1d}
.rec-deploy{background:var(--deploy)}.rec-wait{background:var(--wait)}
.badge.strat{background:#243b66;color:#cfe0ff;border:1px solid #335089}
.price{font-size:20px;font-weight:700;margin:10px 0 4px}
.price .src{font-size:10px;margin-left:6px}
.reasons{margin:8px 0;padding-left:18px;color:var(--muted);font-size:13px}
.reasons li{margin:2px 0}
.grid-box{background:var(--panel2);border-radius:8px;padding:10px;margin:8px 0}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:2px 0}
.kv span{color:var(--muted)}
.setup{margin:8px 0;font-size:13px}
.setup summary{cursor:pointer;color:var(--accent)}
.setup .path{color:var(--muted);font-size:12px}
.setup ul{padding-left:16px}
.setgrid{margin-top:8px}
.card-actions{margin-top:10px;display:flex;align-items:center;gap:8px}
.ai-why{background:var(--panel2);border-left:3px solid var(--accent);border-radius:6px;padding:8px 10px;margin-top:8px;font-size:13px}
.ai-tag{font-size:10px;font-weight:700;color:var(--accent);margin-right:6px}
.ai-why-slot:empty{display:none}

.guide{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:20px 0}
.guide summary{cursor:pointer;font-weight:600}
.guide ol{margin:10px 0;padding-left:20px}
.guide li{margin:4px 0}

.ledger-block{margin:16px 0}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
.tbl th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase}
.tbl td.lesson{max-width:220px}
.feecol{color:#f0b86a;font-weight:600}
td.feecol,th.feecol{text-align:right;white-space:nowrap}
.closeform,.tradeform{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.closeform input,.tradeform input,.closeform select,.tradeform select{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:5px 7px;font-size:13px}
.closeform input[name=realised_pnl]{width:100px}
.tradeform input{width:90px}

.pnl{margin-top:24px}
.pnl-totals{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}

/* Journal entries + AI post-mortem */
.jentry{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--wait);border-radius:8px;padding:10px 12px;margin:8px 0}
.jentry.win{border-left-color:var(--pos)}
.jentry.loss{border-left-color:var(--neg)}
.jhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.jpnl{font-weight:700}
.pm{margin-top:6px;font-size:13px}
.pmbadge{display:inline-block;background:#3a2a14;color:#f0b86a;border:1px solid #6a5a2a;border-radius:10px;padding:1px 8px;font-size:11px;text-transform:capitalize;margin-right:6px}
.pmfix{margin-top:5px;color:#cfe0ff}
.pmlesson{margin-top:3px;color:var(--muted)}

.error{color:var(--neg);background:#2a1614;border:1px solid #7a3530;border-radius:8px;padding:8px 12px}
.warn{color:#f0b86a;background:#2a2414;border:1px solid #6a5a2a;border-radius:6px;padding:6px 10px;font-size:13px;margin:8px 0}

.saved{color:var(--pos)}
.settings-form{max-width:560px}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.setk{font-size:14px}
.setrow input{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:6px 8px;min-width:220px}
.testbtns{display:flex;gap:8px;flex-wrap:wrap}
.testout{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px;margin-top:10px;white-space:pre-wrap;font-size:12px;overflow-x:auto}

.coming-soon{text-align:center;padding:60px 20px}
.coming-soon .soon-badge{display:inline-block;background:var(--panel2);color:var(--accent);padding:4px 12px;border-radius:12px;margin:10px 0}

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 820px){
  main{padding:14px}
  /* Topbar stacks: brand row, then a horizontally-scrollable nav, then settings */
  .topbar{gap:10px;padding:10px 14px;align-items:flex-start}
  .brand{order:1}
  .topbar-right{order:2;margin-left:auto}
  .tagline{display:none}
  .topbar nav{order:3;flex-basis:100%;gap:14px;font-size:14px;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;padding-bottom:4px}
  .topbar nav a{padding-bottom:4px}
  .topbar nav a .soon{display:none}        /* hide phase chips on small screens */
  .cards{grid-template-columns:1fr;gap:12px}
  .statusbar{gap:8px}
  .stat{min-width:46%;flex:1 1 46%}
  .section-head{gap:8px}
  .howto,.guide{margin-left:0;flex-basis:100%}
  .setrow{flex-direction:column;align-items:stretch;gap:6px}
  .setrow input{min-width:0;width:100%}
  .closeform,.tradeform{flex-direction:column;align-items:stretch}
  .closeform input,.tradeform input,.closeform select,.tradeform select{width:100%}
  .pnl-totals{gap:8px}
  .jhead{gap:6px}
}
@media (max-width: 420px){
  .brand{font-size:16px}
  .stat{min-width:100%}
  .btn{padding:6px 10px}
}