:root{
  /* Aqua-blue theme */
  --bg:#061a20; --panel:#0b2730; --panel2:#103642; --line:#1b4653;
  --fg:#e4f6f9; --muted:#84b3bd;
  --blue:#22d3ee; --green:#34e0bf; --amber:#ffc65c; --red:#ff6b81; --purple:#9bd7e6;
  --aqua-deep:#0aa5bd; --aqua-soft:rgba(34,211,238,.14);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
h1,h3,h4{margin:0}
.muted{color:var(--muted)}
.small{font-size:12px}
.hidden{display:none !important}
.pad{padding:10px 14px}

/* ------------------------------------------------------------- login */
.login-body{display:grid; place-items:center; min-height:100vh;
  background:radial-gradient(1000px 600px at 50% -10%,#0c3540,#061a20);}
.login-card{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:34px 32px; width:340px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.login-mark{font-size:34px; color:var(--amber); text-align:center; line-height:1}
.login-card h1{font-size:20px; text-align:center; margin-top:10px}
.login-sub{color:var(--muted); font-size:12px; text-align:center; margin:4px 0 22px}
.login-card label{display:block; font-size:12px; color:var(--muted); margin:14px 0 6px}
.login-card input{width:100%; padding:10px 12px; border-radius:8px;
  border:1px solid var(--line); background:#08222a; color:var(--fg); font-size:14px}
.login-card input:focus{outline:none; border-color:var(--blue)}
.login-card button{width:100%; margin-top:22px; padding:11px; border:0; border-radius:8px;
  background:var(--blue); color:#06101d; font-weight:700; font-size:14px; cursor:pointer}
.login-card button:hover{filter:brightness(1.1)}
.login-error{background:rgba(255,107,129,.12); border:1px solid rgba(255,107,129,.4);
  color:var(--red); padding:9px 11px; border-radius:8px; font-size:12px; text-align:center}

/* ------------------------------------------------------------ topbar */
.topbar{display:flex; align-items:center; gap:16px; padding:12px 20px;
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20; flex-wrap:wrap}
.brand{font-weight:700; font-size:16px; letter-spacing:.2px}
.brand .mark{color:var(--amber); margin-right:6px}
.topbar-mid{display:flex; align-items:center; gap:10px; flex:1}
.topbar-right{display:flex; align-items:center; gap:10px}
.badge{font-size:11px; font-weight:700; letter-spacing:.6px; padding:4px 10px;
  border-radius:999px; border:1px solid transparent}
.badge-paper{background:rgba(34,211,238,.14); color:var(--blue); border-color:rgba(34,211,238,.4)}
.badge-live{background:rgba(255,107,129,.16); color:var(--red); border-color:rgba(255,107,129,.5)}
.badge-running{background:rgba(52,224,191,.15); color:var(--green); border-color:rgba(52,224,191,.45)}
.badge-stopped{background:rgba(139,151,171,.12); color:var(--muted); border-color:rgba(139,151,171,.35)}
.badge-hold{background:rgba(139,151,171,.12); color:var(--muted); border-color:rgba(139,151,171,.35)}
.badge-buy{background:rgba(52,224,191,.15); color:var(--green); border-color:rgba(52,224,191,.45)}
.badge-sell{background:rgba(255,107,129,.16); color:var(--red); border-color:rgba(255,107,129,.5)}

.btn{border:1px solid var(--line); background:var(--panel2); color:var(--fg);
  padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600;
  cursor:pointer; text-decoration:none; display:inline-block}
.btn:hover{filter:brightness(1.18)}
.btn:disabled{opacity:.4; cursor:not-allowed; filter:none}
.btn.small{padding:6px 10px; font-size:12px}
.btn-go{background:var(--green); color:#052b26; border-color:transparent}
.btn-stop{background:var(--red); color:#2a0710; border-color:transparent}
.btn-danger{background:rgba(255,107,129,.16); color:var(--red); border-color:rgba(255,107,129,.5)}
.btn-ghost{background:transparent}

.banner{margin:0; padding:10px 20px; font-size:13px; font-weight:600}
.banner.ok{background:rgba(52,224,191,.14); color:var(--green)}
.banner.err{background:rgba(255,107,129,.14); color:var(--red)}

main{padding:18px 20px 60px; max-width:1500px; margin:0 auto}

/* ------------------------------------------------------------- tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.tile h4{font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase;
  letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile .v{font-family:var(--mono); font-size:20px; font-weight:700; margin:6px 0 2px}
.tile .sub{font-size:11px; color:var(--muted)}
.tile.accent-sell{border-color:rgba(255,107,129,.4)}
.tile.accent-sell .v{color:var(--red)}
.tile.accent-buy{border-color:rgba(52,224,191,.45)}
.tile.accent-buy .v{color:var(--green)}

/* ------------------------------------------------------------ panels */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  margin-top:14px; overflow:hidden}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border-bottom:1px solid var(--line)}
.panel-head h3{font-size:13px; font-weight:700; letter-spacing:.3px}
.sub-head{border-top:1px solid var(--line)}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--muted)}
.legend .sw{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px}
#chart{display:block; width:100%; padding:6px}
.two-col{display:grid; grid-template-columns:1.35fr 1fr; gap:14px; align-items:start}
@media (max-width:1050px){.two-col{grid-template-columns:1fr}}

/* ------------------------------------------------------------- forms */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px; padding:14px}
.field label{display:block; font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px}
.field .hint{display:block; font-size:11px; color:#6c778a; margin-top:5px}
.combo{display:flex; gap:6px}
select,input[type=number],input[type=text]{
  background:#08222a; color:var(--fg); border:1px solid var(--line);
  border-radius:8px; padding:8px 9px; font-size:13px; font-family:var(--mono); width:100%}
select:focus,input:focus{outline:none; border-color:var(--blue)}
.combo select{flex:1; min-width:0}
.combo input{flex:1; min-width:0}
.row-inline{display:flex; gap:6px; align-items:center}
.mode-box{padding:12px 14px; display:flex; gap:8px; flex-wrap:wrap}
.mode-box .hint{width:100%; font-size:11px; color:#6c778a; margin:2px 0 0}

/* -------------------------------------------------------- inspector */
.reason{margin:0; padding:12px 14px; font-family:var(--mono); font-size:12px;
  color:var(--fg); border-bottom:1px solid var(--line); line-height:1.6}
.checks{width:100%; border-collapse:collapse; font-size:12px}
.checks td{padding:7px 14px; border-bottom:1px solid var(--line)}
.checks td:first-child{color:var(--muted); width:70px}
.checks td:nth-child(2){font-family:var(--mono)}
.ck{text-align:right; font-weight:700; width:60px}
.ck.yes{color:var(--green)}
.ck.no{color:#5c6678}
.kv-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.kv-grid div{background:var(--panel); padding:9px 12px}
.kv-grid span{display:block; font-size:10px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.4px}
.kv-grid b{font-family:var(--mono); font-size:13px}
.influx-box{padding:12px 14px; font-family:var(--mono); line-height:1.7}

/* ------------------------------------------------------------ tables */
.table-wrap{overflow-x:auto}
table.data{width:100%; border-collapse:collapse; font-size:12px; min-width:900px}
table.data th{text-align:left; padding:9px 12px; color:var(--muted); font-weight:600;
  font-size:11px; text-transform:uppercase; letter-spacing:.4px;
  border-bottom:1px solid var(--line); white-space:nowrap}
table.data td{padding:8px 12px; border-bottom:1px solid var(--line); font-family:var(--mono)}
table.data td.reason-cell{font-family:inherit; color:var(--muted); max-width:420px}
.side-buy{color:var(--green); font-weight:700}
.side-sell{color:var(--red); font-weight:700}

/* --------------------------------------------------------------- log */
.log{max-height:280px; overflow-y:auto; font-family:var(--mono); font-size:12px}
.log-row{display:flex; gap:10px; padding:5px 14px; border-bottom:1px solid #1d2330}
.log-row time{color:#5c6678; white-space:nowrap}
.log-row .lv{width:52px; font-weight:700; flex-shrink:0}
.lv-info{color:var(--blue)} .lv-warn{color:var(--amber)}
.lv-error{color:var(--red)} .lv-trade{color:var(--green)} .lv-signal{color:var(--purple)}
.log-row .msg{color:var(--fg); word-break:break-word}

/* ==================================================================== */
/* Tabs                                                                 */
/* ==================================================================== */
.tabs{display:flex; gap:2px; padding:0 20px; background:var(--panel);
  border-bottom:1px solid var(--line); position:sticky; top:53px; z-index:15}
.tab{background:transparent; border:0; color:var(--muted); font-size:13px;
  font-weight:600; padding:12px 20px; cursor:pointer; border-bottom:2px solid transparent}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--blue); border-bottom-color:var(--blue)}
.tab-panel{display:none}
.tab-panel.active{display:block}

.form-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:0 14px 14px}
.switch{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:12px; color:var(--muted); text-transform:none; letter-spacing:0}
.switch input{width:auto; margin:0; accent-color:var(--green); width:16px; height:16px}
code{background:#08222a; padding:1px 5px; border-radius:4px; font-size:12px; color:var(--amber)}

/* ==================================================================== */
/* Login redesign                                                       */
/* ==================================================================== */
.login-body{display:grid; place-items:center; min-height:100vh; padding:20px;
  background:radial-gradient(1200px 700px at 15% -10%,#0c3a44,#05161b 55%);}
.login-wrap{display:grid; grid-template-columns:1.05fr 1fr; width:min(940px,100%);
  min-height:540px; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.55)}
.login-aside{position:relative;
  background:linear-gradient(150deg,#0d4b57 0%,#0a3540 60%,#062028 100%); color:#eaf2fb}
.login-aside::after{content:""; position:absolute; inset:0;
  background:radial-gradient(500px 400px at 80% 20%,rgba(34,211,238,.22),transparent 60%);}
.login-aside-inner{position:relative; z-index:1; padding:44px 40px;
  display:flex; flex-direction:column; height:100%}
.login-logo-mark{font-size:40px; color:var(--amber);
  display:inline-grid; place-items:center; width:64px; height:64px; border-radius:16px;
  background:rgba(255,198,92,.12); border:1px solid rgba(255,198,92,.35)}
.login-aside h2{font-size:24px; line-height:1.25; margin:26px 0 14px; font-weight:700}
.login-aside p{color:#a6d4dd; font-size:13.5px; line-height:1.6; margin:0 0 22px; max-width:340px}
.login-feats{list-style:none; padding:0; margin:0 0 auto; display:grid; gap:11px}
.login-feats li{position:relative; padding-left:26px; font-size:13px; color:#c4e8ef}
.login-feats li::before{content:"\2713"; position:absolute; left:0; top:-1px;
  color:var(--green); font-weight:800}
.login-brandline{margin-top:28px; font-size:11px; letter-spacing:.5px;
  text-transform:uppercase; color:#78b3c0}
.login-main{display:grid; place-items:center; padding:40px 42px}
.login-form{width:100%; max-width:330px}
.login-badge{width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-size:26px; color:var(--amber); background:rgba(255,198,92,.1);
  border:1px solid rgba(255,198,92,.3); margin-bottom:18px}
.login-form h1{font-size:23px; font-weight:700}
.login-sub{color:var(--muted); font-size:13px; margin:5px 0 24px}
.login-form label{display:block; font-size:12px; font-weight:600; color:var(--muted);
  margin:16px 0 7px; text-transform:uppercase; letter-spacing:.4px}
.input-icon{position:relative}
.input-icon svg{position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; fill:var(--muted); pointer-events:none}
.input-icon input{width:100%; padding:11px 12px 11px 38px; border-radius:10px;
  border:1px solid var(--line); background:#08222a; color:var(--fg); font-size:14px}
.input-icon input:focus{outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(34,211,238,.15)}
.login-form button{width:100%; margin-top:26px; padding:12px; border:0; border-radius:10px;
  background:linear-gradient(135deg,#22d3ee,#0aa5bd); color:#06101d; font-weight:700;
  font-size:14.5px; cursor:pointer; transition:filter .15s}
.login-form button:hover{filter:brightness(1.08)}
.login-error{background:rgba(255,107,129,.12); border:1px solid rgba(255,107,129,.4);
  color:var(--red); padding:10px 12px; border-radius:9px; font-size:12.5px; margin-bottom:4px}
.login-foot{margin-top:22px; text-align:center; font-size:11px; color:#5c6678}
@media (max-width:760px){.login-aside{display:none} .login-wrap{grid-template-columns:1fr}}

/* ==================================================================== */
/* About                                                                */
/* ==================================================================== */
.about-card{max-width:680px; margin:36px auto; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:44px 40px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.about-mark{font-size:46px; color:var(--amber); line-height:1; margin-bottom:18px}
.about-lab{font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted)}
.about-org{font-size:19px; font-weight:700; margin:8px 0 0; line-height:1.4; color:var(--fg)}
.about-divider{width:60px; height:3px; border-radius:2px; margin:26px auto;
  background:linear-gradient(90deg,var(--blue),var(--aqua-deep))}
.about-title{font-size:26px; font-weight:800; margin:0;
  background:linear-gradient(90deg,#22d3ee,#7bedff); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent}
.about-version{margin-top:8px; font-size:13px; color:var(--muted); font-family:var(--mono)}
.about-by{margin:30px 0 16px; font-size:13px; color:var(--muted); letter-spacing:2px;
  text-transform:uppercase}
.about-authors{display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap}
.about-author .th{font-size:19px; font-weight:700; color:var(--fg)}
.about-author .en{font-size:14px; color:var(--muted); margin-top:4px}
.about-amp{font-size:22px; color:var(--amber); font-weight:300}
.about-date{margin-top:32px; font-size:13px; color:var(--muted)}

/* Slow flash on the mode badge while trading is running */
@keyframes modeFlash{0%,100%{opacity:1}50%{opacity:.30}}
.badge.flashing{animation:modeFlash 1.8s ease-in-out infinite}

/* Version chip in the header */
.ver-chip{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.3px; vertical-align:middle;
  color:var(--blue); background:var(--aqua-soft); border:1px solid rgba(34,211,238,.4)}

/* ==================================================================== */
/* Large trading-mode switch in the top bar                             */
/* ==================================================================== */
.mode-switch{display:inline-flex; border:1px solid var(--line); border-radius:11px;
  overflow:hidden; background:#08222a}
.mseg{border:0; background:transparent; color:var(--muted); cursor:pointer;
  font-size:14px; font-weight:800; letter-spacing:.5px; padding:10px 18px;
  display:inline-flex; align-items:center; gap:7px; transition:background .15s,color .15s}
.mseg + .mseg{border-left:1px solid var(--line)}
.mseg:hover{color:var(--fg)}
/* Active SIMULATION segment: aqua */
#btnPaper.active{background:var(--blue); color:#04222a; text-shadow:none}
/* Active LIVE segment: red */
#btnLive.mseg-live.active{background:var(--red); color:#2a0710}
/* Inactive LIVE keeps a red hint so it reads as the dangerous option */
.mseg-live{color:#c76a78}
/* The active running segment flashes slowly (reuses the modeFlash keyframe) */
.mseg.flashing{animation:modeFlash 1.8s ease-in-out infinite}
@media (max-width:640px){.mseg{padding:9px 12px; font-size:12.5px}}

/* ==================================================================== */
/* My Balance card                                                      */
/* ==================================================================== */
.balance-card{margin-bottom:14px; border-radius:16px; padding:20px 22px;
  background:linear-gradient(135deg,#0c3a44 0%,#0b2730 60%,#0a222b 100%);
  border:1px solid rgba(34,211,238,.35); box-shadow:0 12px 40px rgba(0,0,0,.35)}
.balance-head{display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap}
.balance-title{display:flex; align-items:center; gap:14px}
.balance-mark{width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  font-size:24px; color:var(--amber); background:rgba(255,198,92,.12);
  border:1px solid rgba(255,198,92,.35)}
.balance-title h3{font-size:17px; font-weight:800; letter-spacing:.2px}
.balance-sub{font-size:12px; color:var(--muted)}
.balance-total{text-align:right}
.balance-total-label{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted)}
.balance-total-v{font-family:var(--mono); font-size:26px; font-weight:800; color:var(--blue);
  line-height:1.15}
.balance-total-sub{font-size:11px; color:var(--muted)}
.balance-assets{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px; margin-top:18px}
.balance-asset{background:rgba(6,26,32,.55); border:1px solid var(--line);
  border-radius:11px; padding:12px 14px}
.balance-asset-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.ba-sym{font-size:12px; font-weight:800; letter-spacing:.5px; color:var(--muted)}
.ba-amt{font-family:var(--mono); font-size:18px; font-weight:700; color:var(--fg)}
.ba-val{font-size:11px; color:var(--muted); margin-top:4px; font-family:var(--mono)}
.balance-note{margin-top:12px}

/* ==================================================================== */
/* Radio groups and policy rows in Settings                             */
/* ==================================================================== */
.policy-row{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 14px; border-top:1px solid var(--line); flex-wrap:wrap}
.policy-label{font-size:13px; font-weight:600; color:var(--fg)}
.radio-group{display:inline-flex; gap:14px}
.radio{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:13px; color:var(--muted)}
.radio input{width:16px; height:16px; accent-color:var(--blue); margin:0}
.radio input:checked + span{color:var(--blue); font-weight:700}

/* Waiting-to-buy / waiting-to-sell indicator */
.badge-wait{background:rgba(139,151,171,.12); color:var(--muted); border-color:rgba(139,151,171,.35)}
.badge-wait-buy{background:rgba(52,224,191,.15); color:var(--green); border-color:rgba(52,224,191,.45)}
.badge-wait-sell{background:rgba(255,180,84,.15); color:var(--amber); border-color:rgba(255,180,84,.45)}

/* Balance card: Today gain + Success transactions */
.balance-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px; margin-top:12px}
.balance-stat{background:rgba(6,26,32,.55); border:1px solid var(--line);
  border-radius:11px; padding:12px 14px}
.bstat-label{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}
.bstat-v{font-family:var(--mono); font-size:20px; font-weight:800; margin-top:5px; color:var(--fg)}
.bstat-v.pos{color:var(--green)} .bstat-v.neg{color:var(--red)}
.bstat-sub{font-size:11px; color:var(--muted); margin-top:4px; font-family:var(--mono)}
.bstat-txn{display:flex; gap:16px; margin-top:6px; font-family:var(--mono); font-size:15px; font-weight:700}
.txn-sell{color:var(--amber)} .txn-buy{color:var(--green)}
.bstat-txn b{font-size:19px; margin-left:4px}

/* ==================================================================== */
/* Light (bright) theme — applied when <html> has class "light"          */
/* ==================================================================== */
:root.light{
  --bg:#eef5f7; --panel:#ffffff; --panel2:#e7f0f2; --line:#cfe0e4;
  --fg:#0c2730; --muted:#5a7883;
  --blue:#0b93a8; --green:#0e9a7c; --amber:#b9790a; --red:#d6485f; --purple:#4a7d8c;
  --aqua-deep:#0b93a8; --aqua-soft:rgba(11,147,168,.12);
}
:root.light body{background:var(--bg)}
:root.light select,
:root.light input[type=number],
:root.light input[type=text],
:root.light input[type=password],
:root.light input[type=email],
:root.light .mode-switch,
:root.light .input-icon input,
:root.light .login-card input{background:#f4fafb; color:var(--fg)}
:root.light code{background:#e7f0f2; color:#0b6b7a}
:root.light .field .hint,
:root.light .mode-box .hint,
:root.light .ck.no{color:#6a8791}
:root.light .balance-card{
  background:linear-gradient(135deg,#dff1f4 0%,#eaf6f8 60%,#f3fbfc 100%);
  border-color:rgba(11,147,168,.35); box-shadow:0 12px 34px rgba(11,147,168,.12)}
:root.light .balance-asset,
:root.light .balance-stat{background:#f4fafb}
:root.light .balance-mark{background:rgba(185,121,10,.12); border-color:rgba(185,121,10,.3)}
:root.light .login-body{background:radial-gradient(1000px 600px at 50% -10%,#cfe9ee,#eef5f7)}
:root.light .login-wrap{box-shadow:0 24px 60px rgba(11,64,74,.18)}
/* keep the login brand panel dark — it carries light text */
:root.light .log-row{border-color:#e4eef0}
:root.light #btnPaper.active{color:#04222a}
:root.light .btn-go{color:#fff}
:root.light .btn-stop{color:#fff}

/* Event log expand/shrink */
.log.expanded{max-height:75vh}