html,body{margin:0;background:#07101f;color:#e8f7ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh}
#options-dashboard-app{background:#07101f;color:#e8f7ff;padding:22px;min-height:100vh;position:relative;overflow:hidden}
#options-dashboard-app:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 12%,rgba(19,223,234,.10),transparent 27%),radial-gradient(circle at 83% 8%,rgba(31,255,137,.08),transparent 24%),linear-gradient(rgba(30,64,107,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(30,64,107,.05) 1px,transparent 1px);background-size:auto,auto,36px 36px,36px 36px;pointer-events:none}
*{box-sizing:border-box}.od-shell{max-width:1420px;margin:0 auto;position:relative;z-index:1}
.od-top{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-bottom:14px;background:linear-gradient(180deg,#0c1930,#091426);border:1px solid #172b4a;border-radius:10px;padding:14px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 14px 40px rgba(0,0,0,.20)}
.od-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#4f7eaa;font-weight:800}.od-title{font-size:clamp(24px,3vw,38px);line-height:1;margin:4px 0 5px;font-weight:800;letter-spacing:-.03em}.od-sub{color:#6783a0;font-size:12px}
.od-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:999px;background:#0b1830;border:1px solid #1d4168;box-shadow:0 0 18px rgba(22,224,238,.08);font-size:12px;color:#8ca7c0}.od-dot{width:8px;height:8px;border-radius:50%;background:#23ffc1;box-shadow:0 0 12px #23ffc1}
.od-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:6px;background:#091426;border:1px solid #152944;border-radius:9px}.od-tab{min-height:40px;border:1px solid transparent;background:transparent;color:#6f8eab;border-radius:7px;padding:9px 14px;font-weight:750;cursor:pointer}.od-tab[aria-selected="true"]{background:#0d1b33;color:#20f2f2;border-color:#1b4265;box-shadow:inset 0 -2px 0 #20f2f2,0 0 18px rgba(32,242,242,.06)}
.od-panel{display:none}.od-panel.active{display:block}.od-kpis{display:grid;grid-template-columns:repeat(7,minmax(138px,1fr));gap:10px;margin-bottom:12px}
.od-card{background:linear-gradient(180deg,#0c1930,#091426);border:1px solid #172b4a;border-radius:8px;padding:14px;min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}.od-card:hover{border-color:#23557b}
.od-kpi-label{font-size:10px;color:#5f7c9a;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.od-kpi-value{font-size:24px;font-weight:800;margin-top:7px;white-space:nowrap;color:#eefaff;text-shadow:0 0 14px rgba(53,219,255,.05)}.pos{color:#22f29d}.neg{color:#ff3a83}
.od-grid2{display:grid;grid-template-columns:1.45fr 1fr;gap:10px;margin-bottom:10px}.od-grid3{display:grid;grid-template-columns:1.15fr .9fr .95fr;gap:10px}
.od-section-title{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:#7291ad;font-weight:800;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #172b4a}
.od-chart{height:270px;display:flex;align-items:flex-end;gap:9px;padding:12px 6px 0}.od-bar-wrap{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:0;height:100%}.od-bar{width:100%;max-width:58px;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#22f2ff,#138eff);min-height:2px;box-shadow:0 0 16px rgba(34,242,255,.16)}.od-bar.negbar{background:linear-gradient(180deg,#ff2b82,#b41563);box-shadow:0 0 16px rgba(255,43,130,.12)}.od-bar-label{font-size:10px;color:#587793;text-align:center;overflow:hidden;text-overflow:ellipsis;width:100%;white-space:nowrap}.od-bar-value{font-size:10px;font-weight:800}
.od-line-wrap{height:270px;background:linear-gradient(180deg,rgba(20,39,70,.25),rgba(5,14,28,.05));border-radius:6px}.od-line-wrap svg{width:100%;height:100%;display:block}.od-line-wrap path{filter:drop-shadow(0 0 6px rgba(34,242,255,.4))}
.od-open-list{display:flex;flex-direction:column;gap:8px}.od-open-item{padding:11px;border-radius:6px;background:#09172a;border:1px solid #173456;box-shadow:inset 3px 0 0 #13dce9}.od-open-head{display:flex;justify-content:space-between;gap:10px;font-weight:800;color:#e9f8ff}.od-open-meta{margin-top:7px;font-size:10px;color:#5f7f9c;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.od-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.od-input,.od-select{min-height:42px;border-radius:6px;border:1px solid #173456;background:#081425;color:#dff7ff;padding:0 11px;font-size:14px;outline:none}.od-input:focus,.od-select:focus{border-color:#20e6ef;box-shadow:0 0 0 2px rgba(32,230,239,.10)}.od-input{min-width:240px;flex:1}.od-table-wrap{overflow:auto;border:1px solid #172b4a;border-radius:8px;background:#081323}
table{width:100%;border-collapse:collapse;min-width:1050px}th,td{padding:10px 11px;border-bottom:1px solid #142741;text-align:left;font-size:12px;white-space:nowrap}th{position:sticky;top:0;background:#0b1830;z-index:1;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#587c9d}tbody tr{cursor:pointer}tbody tr:hover{background:#0b1b32}.od-pill{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800}.open{background:#063327;color:#24f5a3;border:1px solid #0c6e50}.closed{background:#111e31;color:#6f8ca8;border:1px solid #223955}
.od-detail{margin-top:10px;padding:13px;border-radius:8px;background:#0a1629;border:1px solid #172b4a}.od-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.od-detail label{font-size:9px;color:#587b99;text-transform:uppercase;letter-spacing:.1em}.od-detail strong{display:block;margin-top:4px;font-size:14px}
.od-strategy-row{display:grid;grid-template-columns:160px 1fr 90px;gap:10px;align-items:center;margin:10px 0}.od-meter{height:9px;border-radius:999px;background:#0e2036;overflow:hidden}.od-meter>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#17e9f2,#2c8dff)}.od-meter>span.negative{background:linear-gradient(90deg,#ffbd1f,#ff397c)}.od-note{font-size:10px;color:#587793;margin-top:6px}
.od-setup{margin-bottom:14px;padding:14px;border:1px solid #755d18;background:#251f0a;color:#ffd966;border-radius:8px;font-size:13px}.hidden{display:none}
@media(max-width:1100px){.od-kpis{grid-template-columns:repeat(4,1fr)}.od-grid2,.od-grid3{grid-template-columns:1fr}}
@media(max-width:700px){#options-dashboard-app{padding:12px}.od-top{grid-template-columns:1fr}.od-kpis{grid-template-columns:repeat(2,1fr)}.od-detail-grid{grid-template-columns:repeat(2,1fr)}.od-strategy-row{grid-template-columns:110px 1fr 70px}}