:root{color-scheme:dark;font-family:Inter,Arial,sans-serif;background:#07121c;color:#e6f5fa}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 85% 0,#12344a 0,#07121c 38%,#07121c 100%);min-height:100vh}
.topbar{height:72px;border-bottom:1px solid #254455;background:#081723db;display:flex;align-items:center;justify-content:space-between;padding:8px max(18px,calc((100vw - 1400px)/2));gap:18px}
.brand img{display:block;width:154px;max-height:54px;object-fit:contain}
.back{color:#a7dce9;text-decoration:none;font-size:14px}
.back:hover{text-decoration:underline}
main{max-width:1400px;margin:auto;padding:30px 24px 60px}
.intro{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.eyebrow{color:#44d2e9;font-size:11px;font-weight:800;letter-spacing:.17em}
h1{font-size:clamp(28px,4vw,42px);margin:10px 0 8px}
.intro p{color:#9eb9c7;margin:0;max-width:680px;line-height:1.5}
.source-badge{font-size:11px;font-weight:800;letter-spacing:.12em;color:#58d9ec;border:1px solid #2b7083;padding:9px 12px;border-radius:9px;white-space:nowrap}
.controls{display:flex;align-items:end;gap:14px;flex-wrap:wrap;background:#0d2331;border:1px solid #275064;border-radius:14px;padding:18px;margin:26px 0 10px}
.controls label{display:grid;gap:7px;min-width:150px;color:#9cb9c6;font-size:12px;font-weight:700}
.controls select,.controls button{min-height:43px;border:1px solid #32657a;border-radius:8px;background:#0a1a27;color:#e6f5fa;padding:9px 12px;font:inherit}
.controls button{cursor:pointer;background:#12526a;border-color:#3cb4d2;font-weight:800;padding:10px 22px}
.controls button:disabled{opacity:.55;cursor:wait}
.controls select:focus-visible,.controls button:focus-visible,.back:focus-visible{outline:2px solid #74ddec;outline-offset:2px}
.status{min-height:25px;color:#a7c8d4;font-size:13px;margin:9px 0 16px}
.status.error{color:#ffb5aa}
.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.summary>div{display:grid;gap:8px;background:#102635;border:1px solid #294b60;border-radius:12px;padding:16px}
.summary span{color:#95b8c9;font-size:12px}
.summary strong{font-size:19px;overflow-wrap:anywhere}
.price-note{border-left:3px solid #49aeca;background:#0b2532;color:#b2d3df;padding:11px 14px;font-size:13px;line-height:1.45;margin:18px 0 22px}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:16px}
.panel{background:#0b202e;border:1px solid #2d5368;border-radius:14px;padding:16px;min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:13px}
.panel h2{font-size:18px;margin:0}
.panel-head small{color:#8db7c7}
.levels{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;min-height:30px}
.level{font-size:11px;padding:6px 8px;background:#153445;border:1px solid #35718c;border-radius:7px;white-space:nowrap}
.level.gamma{border-color:#b58aec;color:#d5b7ff}
.level.call{border-color:#55bb8d;color:#9fe5bb}
.level.put{border-color:#e6a462;color:#ffc58d}
.profile{display:grid;gap:2px;max-height:660px;overflow:auto;padding-right:3px}
.profile-row{display:grid;grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);align-items:center;gap:5px;min-height:17px}
.bar-area{height:13px;display:flex;align-items:center}
.bar-area.put{justify-content:flex-end}
.bar{height:10px;min-width:2px;border-radius:2px}
.bar.put{background:linear-gradient(90deg,#f4bc7c,#d46b56)}
.bar.call{background:linear-gradient(90deg,#238b92,#5ce4a4)}
.strike{text-align:center;font-variant-numeric:tabular-nums;color:#d4e7ef;font-size:11px}
.profile-head{display:grid;grid-template-columns:1fr 68px 1fr;text-align:center;color:#96bac8;font-size:11px;margin-bottom:4px}
.profile-head span:first-child{text-align:right}.profile-head span:last-child{text-align:left}
.empty{color:#9eb9c7;background:#0d2331;border:1px dashed #32657a;border-radius:12px;padding:22px}
footer{margin-top:26px;color:#7899a9;font-size:12px}
@media(max-width:700px){main{padding:22px 14px 44px}.intro{display:block}.source-badge{display:inline-block;margin-top:15px}.summary{grid-template-columns:repeat(2,minmax(0,1fr))}.controls label{flex:1;min-width:120px}}
@media(max-width:620px){.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.controls label{min-width:0;width:100%}.controls select{width:100%;min-width:0}.controls button{grid-column:1/-1}.summary>div{min-width:0}}