:root{color-scheme:dark;--bg:#080f1d;--panel:#101c2e;--border:#23344a;--text:#f0f5ff;--muted:#91a3bc;--orange:#ff8c27;--green:#21c9ad;--red:#ef6384}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 60% 0%,#172337 0,transparent 55%),var(--bg);font:14px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;color:var(--text)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer;background:#15253a;color:var(--text);border:1px solid #30445f;border-radius:7px;padding:9px 15px}button:hover{border-color:var(--orange);background:#203149}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--orange);outline-offset:3px}header{min-height:76px;display:flex;align-items:center;gap:44px;padding:16px 30px;border-bottom:1px solid var(--border);background:#0b1423}.brand{font-size:21px;font-weight:800;letter-spacing:-.5px;white-space:nowrap}.brand>span{color:var(--orange);font-size:35px;vertical-align:middle;margin-right:8px}nav{display:flex;gap:30px}nav a{color:var(--muted);padding:10px 0}.active{color:var(--orange)!important}nav .active{border-bottom:2px solid var(--orange)}.badge{margin-left:auto;font-size:11px;letter-spacing:1px;color:var(--orange);padding:7px 10px;background:#34231a;border:1px solid #553923;border-radius:5px}main{max-width:1900px;margin:auto;padding:28px}.page-heading,.section-heading,.chart-heading,.chart-toolbar,.carousel,.chart-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.page-heading{margin-bottom:24px}h1,h2,h3,p{margin:0}h1{font-size:29px;letter-spacing:-1px}h1 span{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0;margin-left:18px}h2{font-size:20px}h3{font-size:14px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--orange);margin-bottom:5px}.muted{color:var(--muted);font-size:12px}.orange{color:var(--orange)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}.panel{background:linear-gradient(120deg,#111e30,#0d1929);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 35px #0002}.chart-panel{overflow:hidden}.chart-heading{padding:20px}.quote{display:flex;align-items:center;gap:15px}.ticker-icon{height:44px;width:44px;border-radius:11px;background:#253651;display:grid;place-items:center;font-size:25px;font-weight:700}.quote h2 span{font-weight:400;font-size:12px;color:var(--muted);margin-left:10px}.quote p{font-size:11px;color:var(--muted)}.quote strong{font-size:25px;margin-left:10px}.overlay-toggle{font-size:12px;color:var(--muted);white-space:nowrap}input[type=checkbox]{accent-color:var(--orange)}.chart-toolbar{padding:10px 20px;border-block:1px solid var(--border);font-size:11px;color:var(--muted)}.segmented{display:flex;gap:3px}.segmented button{border:0;background:none;padding:6px 12px;font-size:12px}.segmented .active{background:#3b2a20}.dot{margin:0 8px}.stock-chart{height:390px;padding:12px 12px 0}.stock-chart svg,.payoff-chart svg{width:100%;height:100%;display:block}.chart-footer{padding:13px 20px;border-top:1px solid var(--border);font-size:10px;color:var(--muted)}.library{padding:20px;grid-row:span 2}.library>.muted{margin:7px 0 20px}.section-heading>span{color:var(--muted);font-size:12px}.strategy-card{width:100%;display:flex;align-items:center;text-align:left;gap:14px;padding:17px 12px;margin-bottom:10px;border:1px solid var(--border);background:#122035;transition:transform .2s,border .2s}.strategy-card:hover{transform:translateY(-2px)}.strategy-card.selected{border-color:var(--orange);box-shadow:inset 3px 0 var(--orange);background:linear-gradient(100deg,#34251e,#132034)}.strategy-card svg{width:75px;height:45px;flex-shrink:0}.strategy-card b{font-size:14px;display:block}.strategy-card small{color:var(--muted);font-size:11px;display:block;margin-top:4px}.carousel{margin:18px 0;color:var(--muted);font-size:12px}.carousel button{border-radius:50%;padding:5px 12px}.library-note{margin-top:24px;padding-top:24px;border-top:1px solid var(--border);display:flex;gap:12px;font-size:12px}.library-note>.orange{font-size:28px}.library-note p{color:var(--muted);margin:7px 0 15px}.library-note a{color:var(--orange)}.position{padding:22px;min-width:0}.position h2{font-size:23px}.position-actions{display:flex;gap:8px}.primary{background:var(--orange);color:#1c130c;border-color:var(--orange);font-weight:700}.primary:hover{background:#ffa34f}.position-controls{display:flex;align-items:end;gap:15px;flex-wrap:wrap;padding:20px 0}.position-controls label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11px}input{background:#0b1524;border:1px solid #30435c;border-radius:5px;padding:8px;color:var(--text);min-width:0}.position-controls input{width:130px}.position-controls input[type=number]{width:80px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:8px;margin-bottom:24px}.metric{padding:15px;border-right:1px solid var(--border)}.metric:last-child{border:0}.metric small{font-size:11px;color:var(--muted);display:block}.metric strong{font-size:22px;display:block;margin-top:5px}.positive{color:var(--green)}.negative{color:var(--red)}.position-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:24px}.payoff-chart{height:200px;margin-top:12px}.leg{display:grid;grid-template-columns:42px 38px 1fr 1fr;gap:10px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:6px;margin-top:8px;background:#0d1828}.leg>b{font-size:10px}.leg label{font-size:10px;color:var(--muted)}.leg input{width:100%;margin-top:3px;padding:5px 7px}.validation{color:var(--red);font-size:12px;margin-top:12px}.chart-text{fill:#91a3bc;font:11px system-ui}.chart-grid{stroke:#203047;stroke-width:.7}footer{display:flex;gap:20px;color:var(--muted);font-size:10px;padding-top:22px}footer a{margin-left:auto;color:var(--orange)}dialog{width:min(560px,94vw);background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:24px}dialog::backdrop{background:#0009}.saved-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);gap:10px}.saved-row small{display:block;color:var(--muted)}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#24374f;color:white;border:1px solid #50627a;padding:12px 24px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}@media(min-width:1600px){.stock-chart{height:470px}.workspace{grid-template-columns:minmax(0,1fr) 340px}}@media(max-width:1100px){header{gap:22px;padding:14px 20px}nav{gap:16px}.brand{font-size:17px}main{padding:18px}.workspace{grid-template-columns:minmax(0,1fr) 270px}.quote{gap:8px}.quote strong{font-size:20px}.quote h2 span{display:none}.position-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}h1 span{display:none}.overlay-toggle{white-space:normal}.stock-chart{height:360px}}@media(max-width:760px){header{flex-wrap:wrap;gap:8px 18px}.brand{flex:1}.badge{font-size:9px}nav{order:3;width:100%;font-size:12px}.workspace{grid-template-columns:1fr}.library{grid-row:auto}.chart-panel{order:0}.library{order:1}.position{order:2}.stock-chart{height:330px;padding-left:0}.chart-heading{padding:14px;flex-wrap:wrap}.quote strong{margin-left:0}.chart-toolbar{padding:8px 12px}.chart-toolbar>span{display:none}.chart-footer{align-items:start;font-size:9px}.page-heading{gap:10px}h1{font-size:24px}.page-heading>button{font-size:10px;padding:8px}.position{padding:16px}.position>.section-heading{align-items:start;flex-wrap:wrap}.metric{padding:12px}.metric strong{font-size:19px}.position-actions{width:100%}.position-actions .primary{flex:1}.position-grid{gap:10px}.library-note{display:none}footer{flex-wrap:wrap}footer a{margin-left:0}.strategy-card{padding:12px}.position-controls{gap:10px}}
/* v0.2: a compact trading workspace, responsive charts and visible position controls. */
header{min-height:60px;padding:9px 22px;gap:38px}.brand{font-size:18px}.brand>span{font-size:29px}nav{gap:26px}main{padding:16px 20px;max-width:2200px}.page-heading{margin-bottom:16px}h1{font-size:26px}h1 span{font-size:12px}.page-heading .eyebrow{font-size:9px;letter-spacing:1.7px}.panel{border-color:#26384f;border-radius:10px;background:linear-gradient(135deg,#111e30 0%,#0b1626 100%)}.workspace{gap:14px;grid-template-columns:minmax(0,1fr) 290px}.chart-panel{display:flex;flex-direction:column;min-height:0}.chart-heading{padding:13px 18px}.ticker-icon{width:38px;height:38px;background:linear-gradient(145deg,#354763,#223047);border:1px solid #425775;border-radius:9px}.quote strong{font-size:24px;line-height:1.2;border-left:1px solid #2c3c52;padding-left:20px;margin-left:8px}.quote strong small{display:block;font-weight:400;color:#8da4c0;font-size:9px;margin-top:5px}.quote h2{font-size:19px}.chart-toolbar{padding:7px 15px;font-size:10px}.chart-legend{display:flex;align-items:center;gap:6px}.chart-legend i{width:6px;height:6px;border-radius:50%;display:inline-block;margin-left:9px}.legend-green{background:#21c9ad}.legend-red{background:#ef6384}.stock-chart{width:100%;padding:0 9px;flex:1;min-height:240px;height:360px}.stock-chart svg{overflow:visible}.chart-footer{padding:8px 18px;font-size:9px;background:#0b1623}.library{padding:17px;overflow:auto;scrollbar-width:thin;scrollbar-color:#334a66 transparent;position:relative}.library .section-heading h2{font-size:18px}.library .eyebrow{font-size:8px;letter-spacing:1.4px;color:#7f95af}.library-count{border:1px solid #34475e;background:#18273b;border-radius:6px;padding:4px 8px}.library>.muted{font-size:11px;margin:9px 0 20px}.strategy-card{min-height:86px;padding:15px 12px;margin-bottom:11px;border-color:#293c55;border-radius:8px;background:linear-gradient(120deg,#17263b,#111e31);position:relative}.strategy-card svg{width:66px;height:39px}.strategy-card b{font-size:13px}.strategy-card small{font-size:10px}.strategy-card.selected{background:radial-gradient(ellipse at top left,#68412666,transparent 90%),linear-gradient(120deg,#182638,#101f32);border-color:#ff9a35;box-shadow:inset 3px 0 #ff922d,0 5px 18px #0003;transform:translateX(-2px)}.strategy-card.selected::after{content:'ON CHART';position:absolute;right:8px;top:-7px;color:#1b120b;background:#ff9a35;font-size:7px;letter-spacing:.7px;font-weight:800;border-radius:3px;padding:2px 5px}.carousel{margin:17px 0}.library-note{margin-top:17px;padding-top:18px;font-size:11px}.library-note p{font-size:10px}.position{padding:14px 17px}.position>.section-heading{gap:12px;align-items:center}.position>.section-heading>div:first-child{min-width:130px}.position>.section-heading>.position-controls{flex:1;justify-content:flex-end}.position .eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:2px}.position h2{font-size:20px;line-height:1.3}#strategyDescription{display:none}.position-controls{padding:0;gap:10px;flex-wrap:nowrap}.position-controls label{font-size:9px;gap:2px}.position-controls input{padding:5px 7px;font-size:11px}.position-controls input[type=number]{width:62px}.position-actions{align-self:flex-end}.position-actions button{font-size:11px;padding:7px 12px}.metrics{margin:12px 0;border:0;border-block:1px solid #26374c;border-radius:0;background:#09142377}.metric{padding:8px 12px}.metric:first-child{padding-left:0}.metric small{font-size:9px}.metric strong{font-size:20px;margin-top:2px;line-height:1.3}.position-grid{grid-template-columns:minmax(180px,.7fr) minmax(0,1.8fr);gap:20px}.position-grid h3{font-size:10px;font-weight:500;color:#b1c3d9}.position-grid .section-heading>span{font-size:9px}.payoff-chart{height:106px;margin-top:2px}#legs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;align-items:start}.leg{grid-template-columns:1fr 1fr;gap:5px 7px;padding:8px;margin-top:5px;position:relative;border-color:#2b3e56;background:#122035}.leg>b{font-size:9px}.leg>b:nth-child(2){text-align:right;color:#c9d5e6}.leg label{font-size:8px}.leg input{font-size:11px;padding:5px;width:100%}.leg:has(.positive){border-top:2px solid #1baf98}.leg:has(.negative){border-top:2px solid #bd4969}#legs>p{grid-column:1/-1;margin-top:0!important;font-size:9px}.validation{margin-top:4px;font-size:10px}footer{padding-top:12px;font-size:9px;align-items:center}#savedCount{background:#283c55;border-radius:4px;padding:2px 6px;margin-left:6px}.chart-text{font-size:10px}
@media(min-width:1101px) and (min-height:720px){body{height:100dvh}main{height:calc(100dvh - 60px);display:flex;flex-direction:column;padding-block:12px;gap:12px}.page-heading{flex:none;margin:0;min-height:44px}.workspace{flex:1;min-height:0;grid-template-rows:minmax(260px,1fr) 280px}.library{height:100%}.chart-panel{height:100%}.stock-chart{height:auto}.position{height:280px;overflow:auto;scrollbar-width:thin;scrollbar-color:#334a66 transparent}footer{padding:0;flex:none;white-space:nowrap;font-size:8px}}
@media(min-width:1600px){.workspace{grid-template-columns:minmax(0,1fr) 310px}.stock-chart{height:auto}.strategy-card{min-height:92px}.position-grid{grid-template-columns:minmax(230px,.75fr) minmax(0,1.8fr)}}
@media(max-width:1100px){.stock-chart{height:350px;flex:none}.position>.section-heading{flex-wrap:wrap}.position>.section-heading>.position-controls{flex:0}.position-grid{grid-template-columns:1fr}.payoff-chart{height:140px}.workspace{grid-template-columns:minmax(0,1fr) 260px}.quote strong{font-size:21px;padding-left:12px}.chart-heading{gap:10px}.overlay-toggle{font-size:10px}.position-actions{margin-left:auto}.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.metric strong{font-size:16px}}
@media(max-width:760px){header{padding:10px 14px;gap:5px 15px}.brand{font-size:16px}nav{gap:22px}main{padding:16px 12px}.page-heading{margin-bottom:14px}h1{font-size:24px}.workspace{grid-template-columns:1fr}.chart-heading{flex-wrap:nowrap;padding:12px}.quote{gap:8px}.quote h2{font-size:17px}.quote p{font-size:8px}.quote strong{font-size:18px;padding-left:10px}.quote strong small{font-size:7px}.ticker-icon{display:none}.overlay-toggle{max-width:85px;line-height:1.3}.stock-chart{height:310px;padding:0 3px}.chart-toolbar .chart-legend{display:none}.chart-footer{padding:8px 12px;font-size:8px}.chart-footer span:last-child{max-width:65%}.library{padding:15px}.library>.muted{margin-bottom:15px}#strategyCards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:8px 2px;scrollbar-width:thin}.strategy-card{flex:0 0 230px;scroll-snap-align:start;margin:0;min-height:85px}.strategy-card.selected{transform:none}.carousel{margin:8px 0 0}.position{padding:14px}.position>.section-heading>.position-controls{flex:1}.position-actions{width:100%;margin-top:6px}.position-controls{gap:7px}.position-controls input[type=date]{width:120px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));margin:14px 0}.metric:nth-child(3){padding-left:0}.metric:nth-child(2){border-right:0}.metric strong{font-size:19px}.position-grid{grid-template-columns:1fr}.payoff-chart{height:140px}#legs{grid-template-columns:repeat(2,minmax(0,1fr))}.leg{padding:10px}.leg label{font-size:9px}.leg input{padding:7px;font-size:12px}footer{font-size:8px}.library-note{display:none}}

@media(min-width:1101px) and (min-height:720px){header{height:60px;flex-shrink:0}.strategy-card{min-height:78px;padding-block:13px}.library>.muted{margin-bottom:15px}.library-note{margin-top:12px;padding-top:12px}.library-note p{margin-block:4px 8px}.carousel{margin:12px 0}}
@media(min-width:1101px) and (min-height:720px){.position .payoff-chart{height:96px}.position .validation:empty{display:none}}
/* Reference palette and proportions */
:root{--bg:#030c16;--panel:#071726;--border:#17374d;--green:#00e3c0;--red:#ff4f78;--orange:#ff861d}body{background:radial-gradient(ellipse at 70% 10%,#0b2338 0,transparent 60%),#030c16}header{background:linear-gradient(100deg,#040d17,#081b2e);border-color:#15324b}.brand{font-size:22px;letter-spacing:-.6px}.brand>span{font-size:35px;color:#ff8c22}.panel{background:linear-gradient(125deg,#061321,#091b2b);border:1px solid #1a3a51;border-radius:7px;box-shadow:inset 0 1px #19364b44,0 6px 22px #0002}.page-heading{display:none!important}main{padding:10px 14px!important;gap:10px!important}.workspace{grid-template-columns:minmax(0,1fr) 340px;gap:12px}.chart-heading{padding:12px 20px;background:linear-gradient(90deg,#081b2c,#061421)}.quote h2{font-size:27px}.quote h2 span{display:block;margin:0;font-size:12px}.quote strong{font-size:27px}.ticker-icon{background:#eaf4ff;color:#071322;font-size:27px;border-radius:11px;border:0;width:44px;height:44px}.chart-toolbar{background:#071729;border-color:#17354e}.chart-footer{background:#061422;color:#9cb6d3}.stock-chart{background:radial-gradient(ellipse at 90% 45%,#10243766,transparent 65%),#061523}.chart-text{fill:#a7c1dd}.library{background:linear-gradient(150deg,#061421,#0a1c2f);padding:16px}.library .eyebrow,.library>.muted,.library-note{display:none}.library .section-heading{margin-bottom:18px}.library .section-heading h2{font-size:22px}.strategy-card{background:linear-gradient(115deg,#10283e,#0a1a2b);border-color:#244960;border-radius:7px;gap:14px;padding:14px 12px;min-height:104px}.strategy-card svg{width:104px;height:66px;border:1px solid #214459;border-radius:4px;background:linear-gradient(90deg,transparent 49%,#21445944 50%,transparent 51%),linear-gradient(0deg,transparent 49%,#21445944 50%,transparent 51%),#051422}.strategy-card b{font-size:16px}.strategy-card small{font-size:12px;line-height:1.6;color:#b1c9e4}.strategy-card.selected{border:2px solid #ff861d;box-shadow:0 0 13px #ff861d22,inset 0 0 20px #0a263b;background:linear-gradient(110deg,#102b3f,#0b1d30);transform:none}.strategy-card.selected::after{display:none}.strategy-card::after{content:'›';margin-left:auto;color:#c7def4;font-size:26px}.carousel button{border-color:#407092;background:radial-gradient(circle at top,#153859,#071526);height:40px;width:40px}.position{background:linear-gradient(110deg,#071828,#0a2032)}.position h2{font-size:24px}.position .eyebrow{display:none}.metric strong{font-size:23px}.metric small{font-size:11px;color:#a8c4e1}.positive{color:#00e3c0}.negative{color:#ff527a}.metrics{background:transparent;border-color:#204259}.leg{background:#092f35;border-color:#008f88!important;border-radius:6px}.leg:has(.negative){background:linear-gradient(110deg,#361c30,#162438);border:1px solid #9f3757!important}.leg:has(.positive){background:linear-gradient(110deg,#053d40,#0c2635);border:1px solid #008f88!important}.leg>b{font-size:12px}.leg input{font-size:15px;background:#06182780;border-color:#2c526a;padding:5px}.leg label{font-size:9px;color:#abc6dc}.primary{background:linear-gradient(120deg,#ff942e,#ff771b);box-shadow:0 3px 15px #ff841523}.position-actions button{font-size:12px}.position-grid h3{font-size:12px}footer{color:#6d8da8}.library-count{color:#65caff!important}
@media(min-width:1101px) and (min-height:720px){.workspace{grid-template-rows:minmax(280px,1fr) 245px}.position{height:245px;padding:11px 16px}.position .payoff-chart{height:92px}.position-grid{grid-template-columns:minmax(180px,.7fr) minmax(0,1.8fr)}.metrics{margin:7px 0}.metric{padding-block:6px}.strategy-card{min-height:100px;padding-block:12px}.library .section-heading{margin-bottom:18px}.library{display:flex;flex-direction:column}.carousel{margin-top:auto;padding-top:14px}.position-controls label{font-size:10px}}
@media(min-width:1600px){.workspace{grid-template-columns:minmax(0,1fr) 365px}.strategy-card{min-height:110px}.strategy-card svg{width:116px;height:70px}}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 280px}.strategy-card svg{width:75px}.strategy-card b{font-size:14px}.strategy-card small{font-size:10px}.brand{font-size:18px}.metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.workspace{grid-template-columns:1fr}.quote h2{font-size:23px}.quote h2 span{display:none}.quote strong{font-size:23px}.brand{font-size:17px}.strategy-card{flex-basis:280px}.strategy-card svg{width:90px}.stock-chart{height:360px}.position-grid{grid-template-columns:1fr}.metric strong{font-size:20px}}

header #savedButton{margin-left:auto;font-size:11px;padding:7px 12px}header .badge{margin-left:0}@media(min-width:1101px) and (min-height:720px){.workspace{grid-template-rows:minmax(280px,1fr) 275px}.position{height:275px}}@media(max-width:760px){header #savedButton{font-size:9px;padding:5px}.strategy-card svg{flex-shrink:0}}
/* v4 reference composition */
header{height:54px!important;min-height:54px;padding:7px 18px;gap:30px}.brand{font-size:20px}header nav{font-size:12px}.badge{font-size:9px}.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:9px}main{height:calc(100dvh - 54px)!important;padding:8px 10px!important;gap:5px!important}.chart-heading{padding:9px 14px}.quote h2{font-size:25px}.quote strong{font-size:26px}.quote p{font-size:9px}.quote strong small{font-size:9px}.ticker-icon{background:transparent;color:#f3f8ff;width:35px;height:35px;font-size:38px}.chart-toolbar{padding:4px 7px}.segmented button{padding:5px 10px;font-size:10px}.stock-chart{padding:0 4px}.chart-footer{display:none}.library{padding:12px 8px;gap:0;border:0;background:transparent;overflow:auto}.library .section-heading{margin-bottom:11px}.library .section-heading h2{font-size:18px}.strategy-card{padding:10px 8px;gap:11px;min-height:90px;margin-bottom:8px;flex-shrink:0}.strategy-card svg{width:88px;height:58px}.strategy-card b{font-size:14px}.strategy-card small{font-size:11px;line-height:1.5}.library-actions{display:grid;gap:9px;margin-top:12px}.library-actions button{height:43px;font-size:14px;font-weight:600;border-radius:6px}.library-actions #saveButton{background:linear-gradient(110deg,#10263b,#071625);border:1px solid #355c7d}.library-actions .primary{font-size:16px}.carousel{margin:8px 0 0!important;padding:0!important}.carousel button{height:34px;width:34px}.position{padding:10px 12px!important;overflow:hidden!important}.position>.section-heading{height:32px;margin-bottom:7px;justify-content:flex-start}.position h2{font-size:23px}.position>.section-heading>.position-controls{flex:0;justify-content:flex-start;margin-left:14px}.position-controls{gap:10px}.position-controls label{font-size:8px}.position-controls input{padding:3px 6px;font-size:10px}.position-actions{margin-left:auto}.position-actions button{padding:5px 10px;font-size:10px}.position-grid{grid-template-columns:minmax(170px,.75fr) minmax(0,1.65fr);gap:15px}.position-grid>div:first-child>.section-heading{display:none}.position .payoff-chart{height:145px!important;margin:0}.legs-and-metrics>.section-heading{display:none}.metrics{margin:0 0 9px!important;border-top:0;border-bottom:1px solid #244052;grid-template-columns:repeat(4,minmax(0,1fr))}.metric{padding:3px 10px 8px!important}.metric strong{font-size:19px}.metric small{font-size:10px}.leg{padding:7px!important;gap:4px;margin-top:0}.leg>b{font-size:10px}.leg label{font-size:8px}.leg input{font-size:14px;padding:4px;width:100%}footer{font-size:8px}.strategy-card.selected{border-width:2px}
@media(min-width:1101px) and (min-height:720px){.workspace{grid-template-rows:minmax(320px,1fr) 205px}.position{height:205px}.library{height:100%;display:flex;flex-direction:column}.library-actions{margin-top:auto;padding-top:10px}.strategy-card{min-height:91px}.library .section-heading{margin-bottom:12px}}
@media(min-width:1600px){.workspace{grid-template-columns:minmax(0,1fr) 340px}.strategy-card{min-height:108px}.strategy-card svg{width:108px;height:69px}.strategy-card b{font-size:17px}.strategy-card small{font-size:12px}}
@media(max-width:1100px){main{height:auto!important}.position{height:auto!important;overflow:visible!important}.position-grid{grid-template-columns:1fr}.position>.section-heading{height:auto;flex-wrap:wrap}.position .payoff-chart{height:165px!important}.workspace{grid-template-columns:minmax(0,1fr) 270px}.strategy-card svg{width:75px}.metric strong{font-size:16px}}
@media(max-width:760px){header{height:auto!important;flex-wrap:wrap}.brand{font-size:16px}.workspace{grid-template-columns:1fr}.library{padding:10px}.strategy-card{min-height:90px;flex-basis:255px}.library-actions{grid-template-columns:1fr 1fr}.position-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.position>.section-heading>.position-controls{margin-left:0}.stock-chart{height:380px}header #savedButton{font-size:9px}.position .payoff-chart{height:170px!important}}

/* Final fit and contrast */
.ticker-icon svg{width:33px;height:38px}.quote{align-items:center}.quote strong small{color:#00e3c0;font-size:14px;margin-top:2px}.quote h2{line-height:1.1}.quote p{margin-top:2px}.quote strong{line-height:1.15}.chart-heading{min-height:68px}.metric strong{white-space:nowrap;font-size:18px}.metric small{font-size:10px}.metrics{min-height:58px}.position{overflow:auto!important}.strategy-card{background:linear-gradient(115deg,#0c2034,#081726)}.chart-panel{background:#061422}.library-actions{padding-bottom:0}.strategy-card small{max-width:132px}.quote .ticker-icon{flex-shrink:0}
@media(min-width:1101px){.leg input{font-size:16px;padding:3px}.leg label{font-size:7px}.metric{padding-inline:7px!important}.position-grid{gap:10px;grid-template-columns:minmax(170px,.72fr) minmax(0,1.8fr)}.position .payoff-chart{height:130px!important}.position>.section-heading{margin-bottom:3px}.position{padding:8px 12px!important}}

@media(min-width:1101px) and (min-height:720px){#strategyCards{flex:1;display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:8px}.strategy-card{margin:0;min-height:0}.carousel{margin:12px 0!important}.library-actions{margin-top:0}}

/* v5: use the payoff panel's actual width instead of a fixed SVG ratio */
.position>.section-heading{height:auto;min-height:43px;gap:18px;margin-bottom:9px!important;align-items:center}
.position>.section-heading>.position-controls{margin-left:auto;flex:none;padding:0;gap:12px}
.position-controls label{font-size:10px;gap:3px}.position-controls input{font-size:12px;padding:5px 8px}
.position-actions{margin-left:0}.position-grid{grid-template-columns:minmax(260px,1.05fr) minmax(0,1.8fr);align-items:start;gap:18px}
.position .payoff-chart{height:155px!important;width:100%;max-width:none;padding:0}
.position-grid>div:first-child{min-width:0;padding-right:15px;border-right:1px solid #21384d}
@media(min-width:1101px) and (min-height:720px){.workspace{grid-template-rows:minmax(280px,1fr) 235px}.position{height:235px}}
@media(max-width:1100px){.position-grid{grid-template-columns:1fr}.position-grid>div:first-child{border-right:0;padding:0}.position .payoff-chart{height:210px!important}}
@media(max-width:600px){.position>.section-heading{gap:10px;flex-wrap:wrap}.position>.section-heading>.position-controls{margin-left:0;flex:1;justify-content:flex-end}.position h2{font-size:20px}.position-controls input{width:120px}.position-controls input[type=number]{width:58px}}

.chart-footer{display:flex;padding:4px 10px;min-height:27px;font-size:10px;gap:10px}.chart-footer button{padding:2px 8px;font-size:10px;white-space:nowrap}.option-demo{display:block;color:#ffb65d;font-size:9px;letter-spacing:.6px}.quote strong>span{display:block}.position>.section-heading{min-height:43px}.quote strong{white-space:nowrap}#marketStatus{line-height:1.3}@media(max-width:600px){.chart-footer{font-size:9px}.option-demo{font-size:8px}}

.asset-picker{display:flex;align-items:center;gap:8px;margin-left:auto;color:#9cb4cf;font-size:11px}.asset-picker select{max-width:210px;background:#0a1c30;border:1px solid #355877;border-radius:6px;padding:8px 10px;color:#f1f6ff;font:inherit;font-size:13px;cursor:pointer}.asset-picker select:focus-visible{outline:2px solid #ff8c27;outline-offset:2px}.asset-picker select:disabled{opacity:.6}.ticker-icon{font-size:19px;font-weight:800;border:1px solid #284660;border-radius:8px;color:#d9ebff}#quoteName{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chart-heading{gap:12px}@media(max-width:1000px){.chart-heading{flex-wrap:wrap}.asset-picker{margin-left:0}.overlay-toggle{margin-left:auto}.quote{width:100%}}
.asset-picker{gap:7px}.asset-picker input{width:112px;background:#0a1c30;border:1px solid #355877;color:#f1f6ff;font-size:14px;font-weight:600;padding:8px 10px;text-transform:uppercase}.asset-picker button{padding:8px 11px;color:#ffad58;border-color:#725030;background:#30251d;font-size:12px}.asset-picker button:disabled{opacity:.5}.asset-picker input:focus-visible{outline:2px solid #ff8c27;outline-offset:2px}

/* v9 tactile vertical strike controls */
#legs .leg-tunable{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px;grid-template-rows:auto auto auto;gap:3px 7px;min-height:124px}
.leg-tunable>label{grid-column:1 / 3;display:grid;grid-template-columns:1fr;gap:0}
.leg-tunable>label input{margin-top:1px;font-size:14px}
.strike-tuning{grid-column:3;grid-row:1 / 4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;align-self:stretch;background:#04111c;border:1px solid #385164;border-radius:6px;box-shadow:inset 0 2px 6px #0009}
.strike-tuning>span{font-size:12px;color:#8eaac0;line-height:13px;pointer-events:none}
#legs input.strike-slider{writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;display:block;width:26px;height:82px;min-height:82px;padding:0;margin:0;background:transparent;border:0;border-radius:0;cursor:ns-resize;touch-action:none}
.strike-slider::-webkit-slider-runnable-track{width:5px;height:100%;background:#172d40;border:1px solid #365065;border-radius:4px}
.strike-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:23px;height:22px;margin-left:-10px;border:1px solid #ffb255;border-radius:4px;background:repeating-linear-gradient(0deg,transparent 0 3px,#5b351b 3px 4px),linear-gradient(90deg,#b46020,#ffa646 45%,#db7828);box-shadow:0 2px 4px #000b}
.strike-slider::-moz-range-track{width:5px;background:#172d40;border:1px solid #365065;border-radius:4px}
.strike-slider::-moz-range-thumb{width:23px;height:22px;border:1px solid #ffb255;border-radius:4px;background:repeating-linear-gradient(0deg,#e18a35 0 3px,#75431d 3px 4px)}
@media(min-width:1101px) and (min-height:720px){.workspace{grid-template-rows:minmax(260px,1fr) 280px}.position{height:280px}.position .payoff-chart{height:190px!important}}
@media(max-width:1400px){#legs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1101px) and (max-width:1400px){.workspace{grid-template-rows:minmax(260px,1fr) 400px}.position{height:400px}}


.position-controls select,.leg select{background:#081b2c;color:#eaf4ff;border:1px solid #33516a;border-radius:5px;padding:5px;width:100%;font:inherit}.position-controls select{width:150px;font-size:12px}.leg select{margin-top:2px;font-size:14px}.leg-quote{font-size:8px;color:#a2b9d0;line-height:1.3}.option-status{font-size:9px;color:#ffb65d;margin-top:5px}.leg-tunable>label input[readonly]{opacity:.85}.position .option-demo{color:#60d8be}