:root{
  --bg:#0a0e14; --panel:#11161f; --panel2:#161c28; --border:#232b3a;
  --text:#e7ecf5; --muted:#8a93a6; --accent:#22d3a8; --accent2:#3b82f6;
  --pos:#22d37a; --neg:#f0475d; --warn:#f5b942; --neu:#8a93a6;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 10% -10%, #101a2b 0%, var(--bg) 55%), var(--bg);
  color:var(--text); font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  min-height:100vh;
}
a{color:var(--accent); text-decoration:none}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--border);
  background:rgba(17,22,31,.7); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px}
.brand .logo{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center; color:#04140f; font-weight:900;
}
.brand small{display:block; color:var(--muted); font-weight:500; font-size:11px; letter-spacing:.3px}
.nav{display:flex; gap:6px}
.nav a{
  padding:8px 14px; border-radius:10px; color:var(--muted); font-weight:600; font-size:14px;
}
.nav a.active,.nav a:hover{background:var(--panel2); color:var(--text)}
.controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
select,input[type=text],input[type=number]{
  background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:9px; padding:9px 12px; font-size:13px; outline:none;
}
select:focus,input:focus{border-color:var(--accent)}
button{
  background:var(--accent); color:#04140f; border:none; border-radius:9px;
  padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer;
}
button.secondary{background:var(--panel2); color:var(--text); border:1px solid var(--border)}
button.danger{background:var(--neg); color:#fff}
button:hover{filter:brightness(1.08)}
.wrap{max-width:1500px; margin:0 auto; padding:18px 22px 60px}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:2fr 1fr 1fr}
.grid.cols-2{grid-template-columns:1.4fr 1fr}
.grid.auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
}
.card h3{margin:0 0 12px; font-size:13px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted)}
.chart-card{padding:0; overflow:hidden}
#tv_chart{height:520px; width:100%}
.action-hero{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.action-badge{
  font-size:26px; font-weight:900; padding:14px 26px; border-radius:14px; letter-spacing:.5px;
  text-align:center; min-width:180px;
}
.action-badge.buy{background:rgba(34,211,122,.15); color:var(--pos); border:1px solid rgba(34,211,122,.4)}
.action-badge.strongbuy{background:rgba(34,211,122,.25); color:#5ef7ae; border:1px solid rgba(34,211,122,.6)}
.action-badge.sell{background:rgba(240,71,93,.15); color:var(--neg); border:1px solid rgba(240,71,93,.4)}
.action-badge.strongsell{background:rgba(240,71,93,.25); color:#ff7d8c; border:1px solid rgba(240,71,93,.6)}
.action-badge.wait{background:rgba(138,147,166,.12); color:var(--neu); border:1px solid var(--border)}
.stat-row{display:flex; gap:22px; flex-wrap:wrap}
.stat{min-width:110px}
.stat .v{font-size:20px; font-weight:800}
.stat .l{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
.pos{color:var(--pos)!important} .neg{color:var(--neg)!important} .warn{color:var(--warn)!important} .neu{color:var(--neu)!important}
.kv{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--border); font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.badge{display:inline-block; padding:3px 9px; border-radius:7px; font-size:11px; font-weight:700}
.badge.gray{background:var(--panel2); color:var(--muted)}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:9px 8px; text-align:left; border-bottom:1px solid var(--border)}
th{color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase}
tr:hover td{background:rgba(255,255,255,.02)}
.why-box{
  background:var(--panel2); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; font-size:13.5px; line-height:1.5; color:#cfd6e4;
}
.levels{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.level-cell{background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px; text-align:center}
.level-cell .l{font-size:11px; color:var(--muted); text-transform:uppercase}
.level-cell .v{font-size:16px; font-weight:800; margin-top:3px}
.progress{height:8px; border-radius:5px; background:var(--panel2); overflow:hidden; margin-top:6px}
.progress > div{height:100%; background:linear-gradient(90deg,var(--accent2),var(--accent))}
.footer-note{color:var(--muted); font-size:12px; text-align:center; margin-top:26px; line-height:1.6}
.pill-group{display:flex; gap:6px; flex-wrap:wrap}
.pill{padding:6px 12px; border-radius:20px; background:var(--panel2); border:1px solid var(--border); font-size:12px; color:var(--muted)}
.pill.on{color:#04140f; background:var(--accent); border-color:var(--accent); font-weight:700}
.copybox{
  display:flex; gap:8px; align-items:center; background:var(--panel2); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; font-family:ui-monospace,Consolas,monospace; font-size:12.5px;
  overflow-x:auto; white-space:nowrap;
}
form .field{margin-bottom:14px}
form label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px}
form select, form input{width:100%}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.save-status{font-size:13px; color:var(--pos); opacity:0; transition:opacity .3s}
.save-status.show{opacity:1}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px}
.dot.live{background:var(--pos); box-shadow:0 0 8px var(--pos)}
@media (max-width:980px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .levels{grid-template-columns:repeat(2,1fr)}
  #tv_chart{height:360px}
  .topbar{flex-direction:column; align-items:flex-start; gap:10px}
}