:root{
  --bg:#0e0f10;
  --card:#16181a;
  --text:#e6e6e6;
  --muted:#9aa0a6;
  --accent:#2ecc71; /* green */
  --accent-red:#ff4d4f;
  --input:#101214;
  --stroke:#22262a;
  --radius:16px;
  --field-h:56px;
  --switch-w:140px;
  --gap:14px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 16px -apple-system, BlinkMacSystemFont, "SF Pro Text", Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.25;
}
.appbar{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(14,15,16,0.95), rgba(14,15,16,0.75) 60%, rgba(14,15,16,0));
  backdrop-filter:saturate(180%) blur(8px);
  z-index:10;
}
.appbar h1{margin:0;font-size:22px;font-weight:700}
.btn.reset{
  background:#2a2d31; color:#fff; border:1px solid #3a3f44;
  border-radius:12px; padding:10px 14px; font-weight:600;
}
.container{padding:8px 12px 40px 12px}
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:16px;
  margin:14px 0;
  box-shadow:var(--shadow);
}
.card h2{margin:0 0 12px 0; font-size:18px}
.row{margin-top:8px}
.label-top{display:block;color:var(--muted);margin-bottom:6px}
.field-row{display:flex; align-items:center; gap:var(--gap)}
.input-wrap{position:relative; flex:1; height:var(--field-h)}
.input-wrap.full{flex:1 0 100%}
.input-wrap input{
  width:100%;
  height:100%;
  border-radius:14px;
  background:var(--input);
  border:1px solid var(--stroke);
  color:var(--text);
  padding:0 14px;
  font-weight:600;
  font-size:18px;
  outline:none;
}
.input-mirror{
  position:absolute; top:50%; transform:translateY(-50%);
  left:14px; visibility:hidden; white-space:pre; pointer-events:none;
  font:inherit; letter-spacing:inherit;
}
.input-suffix{
  position:absolute; top:50%; transform:translateY(-50%);
  left:auto; right:14px; opacity:.9; font-weight:700;
}
.echo-badge{
  height:var(--field-h);
  min-width:160px;
  display:flex; align-items:center; justify-content:center;
  background:#0f1113; border:1px solid var(--stroke);
  border-radius:14px; padding:0 16px; font-weight:700;
}
.switch{display:flex; gap:8px; height:var(--field-h); flex-shrink:0}
.switch .opt{
  width:calc(var(--switch-w)/2); height:100%;
  border-radius:14px; border:1px solid var(--stroke);
  background:#0f1113; color:#c6cbd0; font-weight:700;
}
.switch .opt.active{background:var(--accent); color:#0b1a0f}
.switch .opt.active[data-v="USD"].red{background:var(--accent-red); color:#fff}
.segmented{display:flex; background:#0f1113; border:1px solid var(--stroke); border-radius:18px; padding:4px}
.segmented .seg{
  flex:1; height:40px; border-radius:14px; font-weight:800; border:0; color:#c6cbd0; background:transparent;
}
.segmented .seg.active.long{background:var(--accent); color:#0b1a0f}
.segmented .seg.active.short{background:var(--accent-red); color:#fff}
.grid2{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:520px){ .grid2{ grid-template-columns:1fr 1fr } }

.results-tiles{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:520px){ .results-tiles{ grid-template-columns:1fr 1fr } }
.tile{
  border-radius:16px; padding:16px; text-align:center;
  border:1px solid var(--stroke); background:#0f1113;
  box-shadow: var(--shadow);
}
.tile.ok{ box-shadow:0 0 24px rgba(46,204,113,.15) inset, var(--shadow) }
.tile.bad{ box-shadow:0 0 24px rgba(255,77,79,.15) inset, var(--shadow) }
.tile .caption{color:var(--muted); margin-bottom:8px}
.tile .value{font-size:28px; font-weight:800}

.calc-list{display:grid; gap:10px; font-size:16px}
.calc-list div{display:flex; justify-content:space-between}
.calc-list hr{border:0;border-top:1px solid var(--stroke); margin:6px 0}

.oknum{color:#7CFF94} .badnum{color:#ff7676}
.hidden{display:none}