:root { color-scheme:dark; --bg:#06101b; --panel:#0d1b2d; --line:#203853; --text:#eff8ff; --muted:#8ba1b8; --green:#38df9b; --red:#ff7f8d; --blue:#4aa8ff; --gold:#f4c756; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 84% 0,#173f63 0,transparent 34%),radial-gradient(circle at 0 92%,#123524 0,transparent 28%),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.forward-shell { width:min(1180px,calc(100% - 32px)); margin:auto; padding:28px 0 52px; }
.forward-hero,.forward-summary,.forward-leg,.method-panel { border:1px solid var(--line); background:rgba(13,27,45,.94); box-shadow:0 18px 45px rgba(0,0,0,.22); }
.forward-hero { display:grid; grid-template-columns:1.35fr .8fr; gap:28px; align-items:end; padding:28px; border-radius:24px; }
.forward-hero a,.forward-leg a { color:#8bc8ff; font-weight:850; text-decoration:none; }
.forward-hero span,.method-panel>span,.forward-leg>div>span { display:block; margin-top:18px; color:var(--green); font-size:10px; font-weight:950; letter-spacing:.14em; }
.forward-hero h1 { margin:5px 0 8px; font-size:clamp(40px,7vw,72px); line-height:.95; }
.forward-hero p,.method-panel p { color:var(--muted); line-height:1.55; }
form label { display:block; margin-bottom:7px; color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; }
form>div { display:flex; gap:8px; }
.forward-test-link { display:grid; min-height:42px; margin-top:10px; place-items:center; border:1px solid #82691b; border-radius:11px; background:#4c3d11; color:#ffe28a!important; font-size:12px; }
input { min-width:0; flex:1; border:1px solid var(--line); border-radius:11px; padding:13px 14px; background:#071321; color:var(--text); font-size:18px; font-weight:900; text-transform:uppercase; outline:none; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,168,255,.14); }
button { border:0; border-radius:11px; padding:12px 15px; background:var(--green); color:#04130d; font-weight:900; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.forward-status { margin:18px 0; padding:12px 15px; border:1px solid var(--line); border-radius:12px; background:#091626; color:var(--muted); }
.forward-status.live { color:#9ff0c9; }
.forward-status.error { border-color:#713841; color:#ffc1c8; }
.forward-summary { display:grid; grid-template-columns:repeat(4,1fr); border-radius:20px; overflow:hidden; }
.forward-summary div { min-height:112px; padding:19px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.forward-summary span,.leg-grid b { display:block; color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.forward-summary strong { display:block; margin-top:8px; font-size:27px; }
.forward-summary small { display:block; margin-top:5px; color:var(--muted); }
.gain { color:var(--green)!important; }
.loss { color:var(--red)!important; }
.best { color:var(--gold)!important; }
.forward-legs { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.forward-leg { padding:0; border-radius:20px; color:var(--text)!important; overflow:hidden; }
.forward-leg-slim {
  display:grid;
  grid-template-columns:20px minmax(100px,.7fr) minmax(150px,1fr) minmax(180px,1.2fr) auto;
  gap:10px;
  align-items:center;
  min-height:50px;
  padding:11px 14px;
  cursor:pointer;
  list-style:none;
  font-weight:950;
}
.forward-leg-slim::-webkit-details-marker { display:none; }
.forward-leg-slim::before {
  content:"+";
  display:inline-grid;
  width:20px;
  height:20px;
  place-items:center;
  border-radius:999px;
  background:rgba(74,168,255,.15);
  color:#b9e8ff;
}
.forward-leg[open] > .forward-leg-slim::before { content:"-"; }
.forward-leg-slim span { color:var(--text); font-size:13px; }
.forward-leg-slim b { overflow:hidden; color:#b9e8ff; font:12px ui-monospace,Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }
.forward-leg-slim em { overflow:hidden; color:var(--muted); font-size:12px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.forward-leg-slim strong { font-size:18px; white-space:nowrap; }
.forward-leg > div,
.forward-leg > strong,
.forward-leg > .leg-grid,
.forward-leg > .forward-card-actions { margin-left:22px; margin-right:22px; }
.forward-leg > div { margin-top:18px; }
.forward-leg > .forward-card-actions { margin-bottom:22px; }
.forward-leg.call { border-color:#256c50; }
.forward-leg.put { border-color:#713841; }
.forward-leg.best { box-shadow:0 0 0 3px rgba(244,199,86,.18),0 18px 45px rgba(0,0,0,.22); }
.forward-leg h2 { margin:5px 0; }
.forward-leg p { color:var(--muted); font:12px ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
.forward-leg>strong { display:block; margin:14px 0; font-size:42px; }
.forward-card-actions { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.forward-card-actions a,.forward-test-button { min-height:42px; border-radius:11px; }
.forward-test-button { border:1px solid #82691b; background:#4c3d11; color:#ffe28a; }
.forward-test-button.selected { border-color:#62dca5; background:#1f6a4a; color:#d7ffed; }
.leg-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.leg-grid span { padding:11px; border:1px solid var(--line); border-radius:11px; }
.leg-grid b { margin-bottom:4px; }
.leg-grid em { font-style:normal; font-weight:900; }
.method-panel { padding:22px; border-radius:20px; }
.method-panel>span { margin:0; }
.method-panel h2 { margin:5px 0; }
@media (max-width:800px) { .forward-hero { grid-template-columns:1fr; }.forward-summary { grid-template-columns:1fr 1fr; }.forward-legs { grid-template-columns:1fr; } }
@media (max-width:800px) { .forward-leg-slim { grid-template-columns:20px 1fr auto; }.forward-leg-slim span,.forward-leg-slim b,.forward-leg-slim em { grid-column:2; }.forward-leg-slim em { white-space:normal; }.forward-leg-slim strong { grid-column:3; grid-row:1 / span 3; } }
@media (max-width:480px) { .forward-shell { width:calc(100% - 20px); }.forward-summary,.leg-grid { grid-template-columns:1fr; } form>div { flex-direction:column; } }