:root{
  --ink: #0a0b0a;
  --ink-2: #101210;
  --card: #131513;
  --card-line: #23261f;
  --paper: #f6f5f1;
  --green: #5eeb78;
  --green-dim: #2c5c37;
  --gold: #ffc94d;
  --red: #ff5a5a;
  --ash: #8d938c;
  --ash-dim: #565b56;
  --white: #f4f4f0;

  --display: 'Space Grotesk', ui-sans-serif, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --body: 'Inter', ui-sans-serif, sans-serif;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow-x:hidden;
  padding: 24px 16px 64px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.rings{ position:fixed; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.ring{ position:absolute; border-radius:50%; border:1px solid rgba(94,235,120,0.07); }
.r1{ width:360px; height:360px; animation: breathe 7s ease-in-out infinite; }
.r2{ width:620px; height:620px; animation: breathe 7s ease-in-out infinite 0.6s; }
.r3{ width:900px; height:900px; animation: breathe 7s ease-in-out infinite 1.2s; }
.r4{ width:1220px; height:1220px; animation: breathe 7s ease-in-out infinite 1.8s; }
@keyframes breathe{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.02); } }

.foot{ position:relative; z-index:1; margin-top:22px; font-family: var(--mono); font-size:11px; letter-spacing:.03em; color: var(--ash-dim); display:flex; gap:8px; align-items:center; }
.foot a{ color:var(--ash); text-decoration:none; }
.foot a:hover{ color:var(--green); }
.foot .dot{ color:var(--ash-dim); }

.app{ position:relative; z-index:1; width:100%; max-width:460px; }

.card{
  background: var(--card); border:1px solid var(--card-line); border-radius:18px;
  padding:26px 22px 22px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  animation: rise .4s cubic-bezier(.16,1,.3,1);
}
@keyframes rise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }

.head-row{ display:flex; justify-content:space-between; align-items:center; font-family: var(--mono); font-size:11px; color: var(--ash); letter-spacing:.04em; margin-bottom:16px; }
.head-row .live{ display:inline-flex; align-items:center; gap:6px; color: var(--green); }
.pulse{ width:6px; height:6px; border-radius:50%; background: var(--green); animation: pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(94,235,120,.55); } 70%{ box-shadow:0 0 0 8px rgba(94,235,120,0); } 100%{ box-shadow:0 0 0 0 rgba(94,235,120,0); } }

.logo-wrap{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px; }
.logo-wrap img.logo-img{ max-width:190px; border-radius:12px; }
.logo-wrap img.mascot-img{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--green); }
.title{ font-family: var(--display); font-weight:700; text-align:center; font-size:21px; margin: 14px 0 4px; }
.sub{ text-align:center; color: var(--ash); font-size:13.5px; line-height:1.55; margin: 0 0 22px; }
.sub b{ color: var(--white); font-weight:600; }

label.field-label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ash); margin-bottom:8px; font-family: var(--mono); }

/* side toggle */
.side-toggle{ display:flex; gap:8px; margin-bottom:18px; background:var(--ink-2); border:1px solid var(--card-line); border-radius:12px; padding:4px; }
.side-btn{ flex:1; border:0; background:transparent; color:var(--ash); font-family:var(--display); font-weight:700; font-size:13.5px; padding:11px 10px; border-radius:9px; cursor:pointer; transition: background .15s ease, color .15s ease; }
.side-btn.long.active{ background: var(--green); color:#06210c; }
.side-btn.short.active{ background: var(--red); color:#2a0808; }

/* sliders */
.slider-row{ margin-bottom:18px; }
.slider-row .slider-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.slider-row .slider-val{ font-family: var(--display); font-weight:700; font-size:16px; color: var(--green); }
input[type=range]{ width:100%; accent-color: var(--green); }

.input-row{ display:flex; align-items:center; background: var(--ink-2); border:1px solid var(--card-line); border-radius:12px; padding:0 14px; margin-bottom:18px; }
.input-row .cur{ color:var(--ash); font-family:var(--mono); font-size:15px; }
.input-row input{ flex:1; background:transparent; border:0; outline:0; color:var(--white); font-size:16px; font-family:var(--display); font-weight:700; padding:13px 8px; }

.preview-box{
  background: var(--ink-2); border:1px solid var(--card-line); border-radius:14px; padding:14px 16px; margin-bottom:20px;
}
.preview-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:12.5px; border-bottom:1px dashed var(--card-line); }
.preview-row:last-child{ border-bottom:0; }
.preview-row .pl{ color:var(--ash); font-family:var(--mono); }
.preview-row .pv{ color:var(--white); font-weight:600; }
.preview-row .pv.danger{ color: var(--red); }

.btn{ width:100%; border:0; border-radius:12px; padding:14px 18px; font-family: var(--display); font-weight:600; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition: transform .12s ease, filter .15s ease; text-decoration:none; }
.btn:active{ transform: scale(.98); }
.btn-primary{ background: var(--green); color: #06210c; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background: transparent; border:1px solid var(--card-line); color: var(--white); }
.btn-ghost:hover{ border-color: var(--ash); }
.btn-row{ display:flex; gap:10px; }
.btn-row .btn-ghost{ flex:0 0 96px; }
.btn-row .btn-primary{ flex:1; }

.disclaimer{ font-size:11px; color:var(--ash-dim); line-height:1.6; margin: -8px 0 18px; padding:10px 12px; background:var(--ink-2); border-radius:10px; border:1px solid var(--card-line); }

/* ---- simulation screen ---- */
.sim-topstats{ display:flex; gap:10px; margin-bottom:16px; }
.sim-stat{ flex:1; background: var(--ink-2); border:1px solid var(--card-line); border-radius:12px; padding:10px 12px; text-align:center; }
.sim-stat-label{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ash); font-family:var(--mono); margin-bottom:4px; }
.sim-stat-value{ font-family:var(--display); font-weight:700; font-size:15px; }
.sim-stat-value.pos{ color: var(--green); }
.sim-stat-value.neg{ color: var(--red); }

.chart-wrap{ background: var(--ink-2); border:1px solid var(--card-line); border-radius:14px; padding:10px; margin-bottom:14px; position:relative; overflow:hidden; }
.chart-wrap svg{ display:block; width:100%; height:120px; }

.gauge-wrap{ margin-bottom:18px; }
.gauge-labels{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--ash); margin-bottom:6px; }
.gauge-track{ position:relative; height:14px; border-radius:8px; overflow:hidden; background: var(--ink-2); border:1px solid var(--card-line); }
.gauge-zone-red{ position:absolute; top:0; bottom:0; left:0; background: linear-gradient(90deg, #ff5a5a, #ff9a5a); }
.gauge-marker{
  position:absolute; top:-4px; width:4px; height:22px; border-radius:3px;
  background: var(--white); box-shadow: 0 0 8px rgba(244,244,240,.7);
  transition: left .12s linear;
}
.gauge-entry-mark{ position:absolute; top:0; bottom:0; width:2px; background: rgba(255,255,255,0.4); }

.sim-controls{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.play-row{ display:flex; gap:10px; }
.play-row .btn{ flex:1; }

.liq-banner{
  text-align:center; padding:18px 14px; border-radius:14px;
  background: rgba(255,90,90,0.1); border:1px solid rgba(255,90,90,0.4);
  margin-bottom:16px; animation: shake .4s ease;
}
@keyframes shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } }
.liq-banner .lt{ font-family:var(--display); font-weight:700; font-size:20px; color: var(--red); margin-bottom:6px; }
.liq-banner .ls{ font-size:12.5px; color: var(--ash); line-height:1.6; }

.fact-box{
  background: var(--ink-2); border:1px solid var(--card-line); border-radius:14px;
  padding:13px 15px; display:flex; gap:10px; align-items:flex-start; margin-bottom:16px;
}
.fact-box .fi{ font-size:16px; flex-shrink:0; }
.fact-box .ft{ font-size:12px; color:var(--ash); line-height:1.55; }
.fact-box .ft b{ color:var(--white); }

@media (max-width:380px){
  .card{ padding:20px 16px 18px; }
}