:root{
color-scheme:dark;
--bg:#0c141b;
--panel:#111b23;
--panel-hover:#17232d;
--border:#26323d;
--text:#e8eef2;
--muted:#80909f;
--lime:#c5f66a;
--green:#6ed5ad;
--red:#ec8392;
--radius:12px;
font-family:Inter,'Segoe UI',Arial,sans-serif;
font-synthesis:none;
font-size:13px}
*{
box-sizing:border-box}
body{
margin:0;
background:var(--bg);
color:var(--text)}
button,input,select{
font:inherit}
button,a,input{
outline-offset:4px}
button{
cursor:pointer}
button:disabled{
cursor:not-allowed;
opacity:.45}
a{
color:inherit;
text-decoration:none}
button{
color:inherit;
border:0;
background:transparent}
h1,h2,p{
margin:0}
h1{
font-size:32px;
letter-spacing:-1.1px;
line-height:1.25;
font-weight:600}
h1>span{
color:var(--lime)}
h2{
font-size:15px;
font-weight:600}
.muted{
color:var(--muted)}
.positive{
color:var(--green)!important}
.negative{
color:var(--red)!important}
.app-shell{
display:flex;
min-height:100vh}
.sidebar{
width:224px;
flex-shrink:0;
background:#0e1820;
border-right:1px solid var(--border);
position:fixed;
inset:0 auto 0 0;
display:flex;
flex-direction:column;
padding:28px 15px 16px;
z-index:5}
.brand{
display:flex;
gap:11px;
align-items:center;
font-size:21px;
font-weight:650;
letter-spacing:-.5px;
margin:0 8px 46px}
.brand-mark{
display:grid;
place-items:center;
flex-shrink:0;
width:37px;
height:37px;
border-radius:11px;
color:#17201c;
background:var(--lime);
font-size:27px;
font-weight:500}
.brand small{
display:block;
font-size:8px;
letter-spacing:2px;
color:var(--muted);
margin-top:5px;
font-weight:500}
.nav-label{
color:#627583;
font-size:9px;
letter-spacing:1.2px;
margin:0 13px 14px}
.nav-item{
display:flex;
align-items:center;
gap:12px;
width:100%;
border-radius:7px;
padding:12px 13px;
color:#98a7b3;
text-align:left;
margin-bottom:6px;
font-size:12px}
.nav-item>span{
font-size:20px;
width:20px;
line-height:1}
.nav-item.active{
color:var(--lime);
background:#c5f66a0d;
box-shadow:inset 2px 0 var(--lime)}
.nav-item:hover{
background:var(--panel-hover)}
.nav-item b{
margin-left:auto;
color:var(--muted);
font-size:10px}
.sidebar-note{
border:1px solid var(--border);
padding:14px 11px;
margin:36px 0 20px;
border-radius:8px;
color:#9bacb8;
font-size:8px;
letter-spacing:.9px}
.sidebar-note p{
font-size:11px;
line-height:1.9;
letter-spacing:0;
color:#6c8090;
margin-top:9px}
.small-dot,.online-dot{
display:inline-block;
width:5px;
height:5px;
border-radius:50%;
background:var(--lime);
margin-right:5px}
.sidebar-bottom{
display:flex;
gap:9px;
align-items:center;
margin-top:auto;
border-top:1px solid var(--border);
padding-top:18px;
font-size:11px}
.sidebar-bottom small{
display:block;
font-size:7px;
color:var(--muted);
letter-spacing:.6px;
margin-top:5px}
.sidebar-bottom form{
margin-left:auto}
.avatar{
width:30px;
height:30px;
border:1px solid #3d4c58;
display:grid;
place-items:center;
border-radius:50%;
font-size:11px;
color:#b1c2d0}
.workspace{
margin-left:224px;
width:calc(100% - 224px);
min-width:0}
.topbar{
height:62px;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid var(--border);
padding:0 30px;
font-size:11px}
.breadcrumb{
color:var(--muted)}
.slash{
color:#465761;
margin:0 13px}
.topbar-right{
display:flex;
align-items:center;
gap:5px;
color:#91a199;
font-size:10px}
.version{
border:1px solid var(--border);
padding:4px 7px;
border-radius:4px;
color:var(--muted);
margin-left:14px}
.page-content{
max-width:1900px;
padding:29px 30px 16px;
margin:auto}
.page-heading{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:26px}
.eyebrow{
font-size:9px;
color:#92a07e;
letter-spacing:1.8px;
margin-bottom:11px}
.page-heading p{
font-size:12px;
color:var(--muted);
margin-top:11px;
line-height:1.6}
.outline-badge{
white-space:nowrap;
border:1px solid #354532;
color:#b8d396;
padding:9px 11px;
font-size:8px;
letter-spacing:1px;
border-radius:5px}
.outline-badge i{
display:inline-block;
width:5px;
height:5px;
border-radius:50%;
background:var(--lime);
margin-right:6px}
.panel{
border:1px solid var(--border);
border-radius:var(--radius);
background:var(--panel)}
.research-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 300px;
gap:18px;
align-items:stretch}
.chart-card{
min-width:0;
display:flex;
flex-direction:column;
overflow:hidden}
.chart-toolbar{
min-height:56px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:10px 15px;
border-bottom:1px solid var(--border)}
.instrument-picker{
display:flex;
gap:7px;
align-items:center;
white-space:nowrap;
font-size:10px}
.instrument-picker input{
width:93px;
border:0;
background:transparent;
color:var(--text);
font-weight:650;
font-size:13px;
padding:0}
.coin-icon{
background:#f4b75f;
color:#402e12;
border-radius:50%;
font-size:15px;
width:23px;
height:23px;
display:grid;
place-items:center}
.timeframes{
display:flex;
gap:3px}
.timeframes button,.chart-tools button,.scenario-switch button{
padding:6px 8px;
color:var(--muted);
font-size:10px;
border:1px solid transparent;
border-radius:5px}
.timeframes button.selected,.chart-tools button.selected,.scenario-switch button.selected{
background:#26322d;
color:var(--lime);
border-color:#465a36}
.icon-button{
font-size:20px;
color:var(--muted);
padding:3px 7px}
.icon-button:hover{
color:var(--lime)}
.chart-subbar{
display:flex;
justify-content:space-between;
gap:8px;
padding:13px 16px 0;
font-size:10px}
.chart-subbar .muted{
margin-left:7px}
.chart-stage{
position:relative;
min-height:360px;
flex:1;
height:430px}
#price-chart{
position:absolute;
inset:0}
#price-overlay{
position:absolute;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:2}
.select-mode{
cursor:crosshair}
.chart-empty{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
pointer-events:none;
z-index:3;
background:#111b23bb}
.chart-empty>span{
font-size:70px;
color:#52644d;
margin-bottom:8px}
.chart-empty strong{
font-size:14px}
.chart-empty p{
font-size:11px;
color:var(--muted);
margin-top:8px}
.chart-tools{
display:flex;
align-items:center;
gap:5px;
flex-wrap:wrap;
padding:12px 14px;
border-top:1px solid var(--border);
font-size:9px}
.chart-tools>.muted{
margin-right:6px}
.tool-hint{
margin-left:auto;
color:#637886;
font-size:9px}
.chart-footer{
display:flex;
justify-content:space-between;
align-items:center;
padding:9px 16px;
font-size:9px;
color:#657b8c;
border-top:1px solid #1b2932}
.chart-footer a{
color:#8f9f92}
.legend-line{
display:inline-block;
width:14px;
border-top:1px solid var(--green);
margin-right:4px;
vertical-align:middle}
.muted-line{
border-color:#ad9a70;
border-top-style:dashed;
margin-left:12px}
.settings-card{
padding:18px 18px 15px}
.panel-heading{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:18px}
.panel-heading h2 small{
font-size:9px;
color:var(--muted);
font-weight:400;
margin-left:7px}
.panel-heading>.muted{
font-size:9px}
.mini-badge{
font-size:8px;
letter-spacing:1px;
color:#a3b0a5;
padding:4px 6px;
border:1px solid #334033;
border-radius:4px}
label{
font-size:10px;
color:#a3b2bd;
display:block;
margin-bottom:12px}
label>span{
float:right;
color:#607888;
font-size:8px}
input:not([type=checkbox]){
display:block;
width:100%;
min-width:0;
background:#0d171f;
border:1px solid #2a3945;
border-radius:6px;
color:#dbe5ec;
padding:10px 11px;
margin-top:7px;
font-size:12px;
transition:border .2s}
input:focus{
border-color:#7b9a50;
outline:none;
box-shadow:0 0 0 2px #c5f66a10}
input::-webkit-calendar-picker-indicator{
opacity:.4}
input::-webkit-inner-spin-button{
opacity:.3}
.field-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px}
.grid-facts{
display:flex;
justify-content:space-between;
padding:9px 0;
color:var(--muted);
font-size:9px}
.grid-facts b{
color:#c5d0c2;
font-size:10px;
font-weight:500}
.section-divider{
border-top:1px solid var(--border);
padding-top:15px;
margin:11px 0 12px;
font-size:8px;
letter-spacing:1.1px;
color:#6f8793}
.input-help{
font-size:9px;
line-height:1.6;
color:#6e8492;
margin:0 0 10px}
details{
margin-top:9px}
summary{
cursor:pointer;
color:#a9b7c0;
font-size:10px;
padding:10px 0;
list-style:none}
summary>span{
float:right}
details[open]>summary{
margin-bottom:8px}
details .field-row{
margin-top:5px}
.switch-label{
display:flex;
align-items:center;
gap:8px}
.switch-label input{
accent-color:var(--lime)}
.primary{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
background:var(--lime);
color:#192415;
border:1px solid var(--lime);
font-weight:650;
border-radius:6px;
padding:12px 16px;
transition:background .2s}
.primary:hover{
background:#d6ff8a}
.run-button{
width:100%;
margin-top:14px;
font-size:12px}
.run-button>span:last-child{
margin-left:auto}
.run-caption{
font-size:8px;
color:#607785;
text-align:center;
margin-top:9px}
.secondary{
border:1px solid #344551;
border-radius:5px;
padding:8px 12px;
color:#b7c6ce;
font-size:10px;
white-space:nowrap}
.secondary:hover{
background:var(--panel-hover);
border-color:#748660}
.notice{
display:flex;
gap:8px;
align-items:center;
padding:13px 16px;
border-radius:8px;
border:1px solid #334855;
background:#182833;
color:#a9c2d0;
font-size:11px;
line-height:1.6;
margin-bottom:18px;
flex-wrap:wrap}
.notice .icon-button{
margin-left:auto}
.notice.warning{
border-color:#574b2d;
background:#2c281c;
color:#d2bd83}
.notice.error{
border-color:#603b45;
background:#301e27;
color:#f0a2ad}
.research-grid+.notice{
margin-top:15px}
.validation-errors{
background:#301e27;
color:#eca3ac;
padding:9px;
border-radius:5px;
font-size:9px;
line-height:1.6}
.validation-errors p+p{
margin-top:5px}
.validation-errors button{
color:var(--lime);
text-decoration:underline;
padding:7px 0 0}
.empty-results{
display:flex;
align-items:center;
gap:20px;
padding:26px;
margin-top:20px;
min-height:110px}
.empty-results h2{
font-size:14px;
margin-bottom:8px}
.empty-results p{
color:var(--muted);
font-size:11px;
line-height:1.6}
.empty-results .outline-badge{
margin-left:auto;
font-size:7px;
color:#7f9570;
border-color:#303d33}
.empty-icon{
display:grid;
place-items:center;
border:1px solid #3a4a38;
color:var(--lime);
font-size:25px;
width:46px;
height:46px;
border-radius:12px}
.progress-panel{
display:flex;
align-items:center;
gap:18px;
padding:20px;
margin-top:20px}
.progress-panel .secondary{
margin-left:auto}
.progress-panel strong{
font-size:12px}
.progress-panel p{
font-size:10px;
color:var(--muted);
margin-top:7px}
.spinner{
width:22px;
height:22px;
border:2px solid #3e5140;
border-top-color:var(--lime);
border-radius:50%;
animation:spin 1s linear infinite}
@keyframes spin{
to{
transform:rotate(360deg)}
}
.results-heading{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
margin:30px 0 18px}
.results-heading .eyebrow{
margin-bottom:8px}
.results-heading h2{
font-size:19px}
.results-heading h2 span{
font-size:13px;
font-weight:400}
.scenario-switch{
display:flex;
gap:5px}
.metrics-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
margin-bottom:18px}
.metric{
padding:18px;
min-height:127px}
.metric label{
font-size:8px;
letter-spacing:1.1px;
color:#83969f;
margin-bottom:16px}
.metric strong{
font-size:25px;
letter-spacing:-.5px;
font-weight:500;
white-space:nowrap}
.metric strong small{
font-size:9px;
letter-spacing:0;
color:var(--muted);
font-weight:400;
margin-left:7px}
.metric>span{
display:block;
margin-top:10px;
font-size:9px;
color:#7a909e}
.metric>span>b{
font-weight:500}
.main-metric{
border-color:#4c6239;
background:linear-gradient(120deg,#1b291c,#111b23)}
.equity-panel{
padding:17px 18px 8px;
margin-bottom:15px}
#equity-chart{
height:170px}
.scenario-note{
font-size:10px;
color:#7c8f9a;
line-height:1.7;
margin:14px 0}
.trades-panel{
overflow:hidden}
.trade-tabs{
display:flex;
gap:20px;
padding:0 18px;
border-bottom:1px solid var(--border);
overflow:auto}
.trade-tabs button{
font-size:11px;
white-space:nowrap;
color:#7e939f;
padding:16px 0;
border-bottom:2px solid transparent}
.trade-tabs button.selected{
color:#d4e1d0;
border-color:var(--lime)}
.trade-tabs b{
font-weight:400;
font-size:9px;
background:#26352c;
color:#b7cc9c;
margin-left:5px;
padding:2px 5px;
border-radius:3px}
.table-scroll{
overflow:auto}
table{
width:100%;
border-collapse:collapse;
white-space:nowrap;
font-size:11px;
text-align:left}
th{
color:#718895;
font-weight:400;
font-size:9px;
padding:14px 17px;
border-bottom:1px solid var(--border)}
td{
padding:14px 17px;
border-bottom:1px solid #1e2d38;
color:#bccbd5}
td strong{
color:#d2dee5;
font-weight:500}
td small{
display:block;
font-size:9px;
color:#6a8392;
margin-top:5px;
max-width:360px;
overflow:hidden;
text-overflow:ellipsis}
.clickable{
cursor:pointer}
.clickable:hover,.clickable.highlighted{
background:#c5f66a07}
.direction{
font-size:9px;
padding:5px 6px;
border-radius:4px}
.direction.long{
color:var(--green);
background:#6ed5ad10}
.direction.short{
color:var(--red);
background:#ec839210}
.table-footer{
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
padding:12px 17px;
color:#718795;
font-size:9px}
.table-footer>div{
display:flex;
align-items:center;
gap:10px}
.table-footer button{
color:#a1b58d;
border:1px solid #344531;
border-radius:4px;
padding:4px 8px}
.provenance{
padding:5px 17px;
margin-top:15px}
.provenance p{
font-size:10px;
color:var(--muted);
line-height:1.8;
margin-bottom:10px;
overflow-wrap:anywhere}
.provenance code{
font-size:9px;
color:#a4b395;
word-break:break-all}
.status{
display:inline-flex;
padding:5px 7px;
border-radius:4px;
font-size:9px;
background:#243540;
color:#91aec0}
.status.completed{
color:var(--green);
background:#6ed5ad10}
.status.running{
color:var(--lime);
background:#c5f66a10}
.status.failed{
color:var(--red);
background:#ec839210}
.status.cancelled{
color:#9b99b2;
background:#9b99b210}
.background-jobs{
padding:18px;
margin-top:18px}
.background-row{
padding:13px 0;
border-top:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
gap:15px}
.background-row p{
font-size:11px;
color:var(--muted);
margin-top:7px}
.background-row small{
display:block;
margin-top:8px}
.page-footer{
display:flex;
justify-content:space-between;
font-size:8px;
letter-spacing:.7px;
color:#627b87;
padding:28px 0 5px}
.page-footer .muted{
letter-spacing:0;
margin-left:8px}
.login-page{
min-height:100vh;
display:grid;
place-items:center;
background:radial-gradient(ellipse at 50% 20%,#22332288,transparent 60%),var(--bg);
padding:24px}
.login-card{
width:410px;
max-width:100%;
padding:36px;
border:1px solid var(--border);
border-radius:18px;
background:#111b23;
box-shadow:0 40px 100px #0005}
.login-card .brand-mark{
margin-bottom:28px}
.login-card h1{
font-size:29px;
line-height:1.3}
.login-card>p{
margin:16px 0 25px;
font-size:12px;
line-height:1.6}
.login-card label{
margin-bottom:17px}
.login-card .primary{
width:100%;
margin-top:22px}
.login-card .primary span{
margin-left:auto}
.login-error{
color:var(--red)}
.not-found{
padding:60px}
.not-found a{
display:block;
color:var(--lime);
margin-top:20px}
#blazor-error-ui{
display:none;
position:fixed;
bottom:0;
left:0;
right:0;
background:#4c2d24;
color:#ffd3b5;
padding:14px;
z-index:100}
#blazor-error-ui a{
text-decoration:underline}
#blazor-error-ui .dismiss{
float:right}

@media(min-width:1600px){
.research-grid{
grid-template-columns:minmax(0,1fr) 325px}
.chart-stage{
min-height:470px}
.settings-card{
padding:22px}
.page-content{
padding:36px 40px 20px}
.page-heading{
margin-bottom:30px}
}

@media(max-width:1200px){
.sidebar{
width:188px;
padding-left:10px;
padding-right:10px}
.brand{
font-size:18px}
.brand small{
font-size:7px}
.workspace{
margin-left:188px;
width:calc(100% - 188px)}
.page-content{
padding:24px 20px}
.topbar{
padding:0 20px}
.research-grid{
grid-template-columns:minmax(0,1fr) 275px;
gap:12px}
.settings-card{
padding:15px}
.chart-toolbar{
flex-wrap:wrap;
justify-content:flex-start}
.chart-toolbar>.icon-button{
margin-left:auto}
.timeframes{
order:3;
width:100%}
.chart-stage{
min-height:420px}
.tool-hint{
display:none}
h1{
font-size:27px}
.page-heading>.outline-badge{
display:none}
.metric{
padding:14px}
.metric strong{
font-size:20px}
.metrics-grid{
gap:9px}
.empty-results .outline-badge{
display:none}
}

@media(max-width:980px) and (min-width:761px){
.sidebar{
width:68px;
padding:20px 10px}
.brand{
margin:0 5px 35px}
.brand>span:last-child,.nav-label,.nav-item b,.sidebar-note,.sidebar-bottom>div:not(.avatar){
display:none}
.nav-item{
font-size:0;
padding:12px;
gap:0}
.nav-item>span{
font-size:24px}
.sidebar-bottom{
flex-direction:column}
.sidebar-bottom form{
margin:0}
.workspace{
margin-left:68px;
width:calc(100% - 68px)}
.sidebar .brand-mark{
width:34px;
height:34px}
.research-grid{
grid-template-columns:minmax(0,1fr) 270px}
.chart-subbar{
flex-wrap:wrap}
.metric strong{
font-size:19px}
.metric label{
font-size:7px}
.metric strong small{
font-size:7px}
}

@media(max-width:760px){
.sidebar{
width:100%;
height:60px;
inset:0 0 auto;
padding:10px 14px;
flex-direction:row;
align-items:center;
gap:10px}
.brand{
margin:0 auto 0 0;
font-size:16px;
gap:8px}
.brand small{
display:none}
.brand-mark{
width:30px;
height:30px;
font-size:24px;
border-radius:8px}
.nav-label,.sidebar-note,.sidebar-bottom{
display:none}
.nav-item{
width:auto;
margin:0;
font-size:0;
padding:8px;
gap:0}
.nav-item>span{
font-size:22px}
.nav-item b{
display:none}
.nav-item.active{
box-shadow:inset 0 -2px var(--lime)}
.workspace{
margin:60px 0 0;
width:100%}
.topbar{
height:44px;
padding:0 16px;
font-size:9px}
.breadcrumb,.slash{
display:none}
.topbar-right{
font-size:8px}
.page-content{
padding:22px 14px}
.page-heading{
margin-bottom:20px}
.eyebrow{
font-size:7px;
letter-spacing:1.4px}
h1{
font-size:25px;
letter-spacing:-.7px}
.page-heading p{
font-size:11px}
.editor-only{
display:none!important}
.research-grid{
display:block}
.chart-toolbar{
flex-wrap:wrap}
.instrument-picker input{
pointer-events:none}
.chart-stage{
height:340px;
min-height:340px}
.chart-subbar{
font-size:8px}
.chart-subbar>.muted{
display:none}
.empty-results{
padding:20px;
gap:14px}
.empty-icon{
flex-shrink:0;
width:38px;
height:38px}
.empty-results h2{
font-size:12px}
.empty-results p{
font-size:10px}
.results-heading{
align-items:flex-start;
flex-direction:column;
margin-top:24px}
.scenario-switch{
align-self:stretch}
.scenario-switch button{
flex:1;
font-size:9px}
.metrics-grid{
grid-template-columns:1fr 1fr;
gap:9px}
.metric{
min-height:112px;
padding:14px}
.metric label{
font-size:7px;
margin-bottom:13px}
.metric strong{
font-size:23px}
.metric strong small{
font-size:8px}
.metric>span{
font-size:8px}
.trade-tabs{
gap:17px;
padding:0 13px}
.trade-tabs button{
font-size:10px}
td,th{
padding:12px;
font-size:10px}
th{
font-size:8px}
.table-footer{
flex-wrap:wrap;
font-size:8px}
.equity-panel{
padding:14px 8px}
.equity-panel .panel-heading{
padding:0 5px}
.equity-panel .muted{
font-size:8px}
.page-footer{
font-size:7px;
gap:12px;
line-height:1.7}
.page-footer>span:last-child{
display:none}
.notice{
font-size:10px;
padding:11px}
.progress-panel{
padding:15px;
gap:12px}
.progress-panel p{
font-size:9px}
.background-jobs{
padding:14px}
.provenance{
padding:4px 13px}
}

@media(prefers-reduced-motion:reduce){
*{
scroll-behavior:auto!important;
animation:none!important;
transition:none!important}
}


.chart-toolbar .instrument-picker input{
display:inline-block;
width:94px;
padding:0;
margin:0;
border:0;
border-radius:0;
background:transparent;
font-size:13px}
.page-heading h1:focus{
outline:none}



#components-reconnect-modal{
display:none;
position:fixed;
inset:0;
z-index:200;
background:#0c141bee;
padding:35vh 24px 0;
text-align:center}
#components-reconnect-modal.components-reconnect-show,#components-reconnect-modal.components-reconnect-failed,#components-reconnect-modal.components-reconnect-rejected{
display:block}
#components-reconnect-modal strong{
font-size:20px}
#components-reconnect-modal p{
margin:15px 0;
color:var(--muted)}
#components-reconnect-modal a{
color:var(--lime)}