:root{--bg:#080d15;--card:#101925;--box:#162131;--line:#243349;--text:#f4f7fb;--muted:#8391a5;--green:#3ddc97;--red:#ff6678;--blue:#628fff;--yellow:#f5c451}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#070b12,#0b121d);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.app{max-width:720px;margin:auto;padding:22px 15px 45px}
header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.brand{font-size:36px;font-weight:900;letter-spacing:-1.4px}
.mode{margin-top:7px;color:var(--muted);font-size:12px}
.online{font-size:10px;font-weight:900;color:var(--green);background:#10231d;border:1px solid #204d3b;padding:7px 10px;border-radius:99px}
.portfolio,.history{background:linear-gradient(145deg,#111c2a,#0d151f);border:1px solid var(--line);border-radius:24px;padding:17px;margin-bottom:16px;box-shadow:0 14px 38px #0004}
.sectionhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.8px}
.sectionhead b{color:var(--green);font-size:9px}
.summary{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.summary>div{background:#131e2d;border:1px solid #213047;border-radius:15px;padding:12px}
small{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.5px;margin-bottom:5px}
.summary strong{font-size:18px}
.coins{display:grid;gap:14px}
.coin{background:linear-gradient(145deg,#111a27,#0d151f);border:1px solid var(--line);border-radius:25px;padding:16px;box-shadow:0 14px 38px #0004}
.coinhead{display:flex;justify-content:space-between;align-items:center}
.symbol{font-size:27px;font-weight:900}
.status{font-size:10px;font-weight:900;color:var(--yellow);background:#2b2515;border:1px solid #55471d;padding:7px 9px;border-radius:99px}
.pricebox{background:linear-gradient(135deg,#19263a,#141e2d);border:1px solid #22334b;border-radius:18px;padding:15px;margin-top:12px}
.pricebox strong{font-size:35px;font-weight:900}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}
.levels>div{background:var(--box);border:1px solid var(--line);border-radius:14px;padding:10px}
.levels b{font-size:16px}
.blue{color:var(--blue)}.red{color:var(--red)}.green{color:var(--green)}
.intel{background:#0a111b;border:1px solid var(--line);border-radius:15px;padding:11px;margin-top:9px}
.intel>div:not(.track){display:flex;justify-content:space-between;font-size:12px;margin:5px 0;color:var(--muted)}
.intel b{color:white}
.track{height:7px;border-radius:99px;background:#1c2939;overflow:hidden;margin-top:10px}
.track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:99px}
.history{margin-top:17px}
.history h3{margin:0 0 12px;font-size:17px}
.trade{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:7px;padding:11px 0;border-top:1px solid var(--line);font-size:12px}
.trade:first-of-type{border-top:0}
.trade small{margin-bottom:3px}
.empty{color:var(--muted);font-size:13px}
footer{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding:5px}
footer a{color:var(--muted);text-decoration:none}
.login{min-height:100vh;display:grid;place-items:center;padding:22px}
.loginbox{width:min(420px,100%)}
.login input{width:100%;margin-top:22px;padding:15px;border-radius:14px;border:1px solid var(--line);background:#111a27;color:white;font-size:16px}
.login button{width:100%;margin-top:10px;padding:15px;border:0;border-radius:14px;font-weight:900}
.error{color:var(--red);margin-top:10px}
@media(max-width:520px){.brand{font-size:32px}.pricebox strong{font-size:32px}.trade{grid-template-columns:1fr 1fr}.summary strong{font-size:16px}}

.openpositions{
  margin:0 0 28px;
  padding:26px;
  background:#0e1726;
  border:1px solid #243650;
  border-radius:28px;
}

.openpos{
  margin-top:18px;
  padding:20px;
  background:#111d2e;
  border:1px solid #253850;
  border-radius:22px;
}

.openposhead,
.openposfoot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}

.openposhead strong{
  font-size:28px;
}

.opgrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin:18px 0;
}

.opgrid div{
  padding:14px;
  background:#172338;
  border-radius:16px;
}

.opgrid small{
  display:block;
  opacity:.6;
  margin-bottom:6px;
}

.emptypos{
  margin-top:15px;
  padding:18px;
  text-align:center;
  opacity:.65;
  background:#111d2e;
  border-radius:18px;
}

.green{color:#38d996!important}
.red{color:#ff6478!important}

@media(max-width:600px){
  .openpositions{padding:18px}
  .openpos{padding:16px}
  .openposhead strong{font-size:24px}
}