/* BTC On Air Position Calculator: scoped component styles */
.btoa-layout {
display:grid;
grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);
gap:1rem;
align-items:start;
width:100vw;
box-sizing:border-box;
margin:.5rem 0 .5rem calc(50% - 50vw)
}

.btoa-calculator,.btoa-tp-panel,.btoa-lo-plan,.btoa-chart {
box-sizing:border-box;
border:1px solid #d7dee7;
border-radius:8px;
background:#fff;
color:#182230;
font-size:13px
}

.btoa-calculator {
min-width:0;
padding:1rem
}
.btoa-calculator h2 {
display:flex;
align-items:center;
gap:.45rem;
margin:0 0 .65rem;
font-size:19px
}
.btoa-version {
color:#8b949e;
font-size:11px;
font-weight:600;
white-space:nowrap
}

.btoa-reset,.btoa-collapse-toggle {
border:1px solid #9aa8b6;
border-radius:4px;
background:#fff;
color:#536579;
cursor:pointer;
font:inherit
}
.btoa-reset {
padding:.35rem .65rem;
font-size:11px
}
.btoa-collapse-toggle {
margin-left:auto;
padding:.2rem .5rem;
font-size:10px
}
.btoa-reset:hover,.btoa-collapse-toggle:hover {
border-color:#536579;
background:#f2f6fa
}

.btoa-strategy-status {
display:inline-block;
margin-left:.6rem;
color:#536579;
font-size:11px;
font-weight:600
}
.btoa-strategy-status-success {
color:#176b3a
}
.btoa-strategy-status-error {
color:#9b2525
}
.btoa-guide-link {
margin:-.25rem 0 .7rem;
color:#536579;
font-size:12px
}
.btoa-guide-link a {
color:inherit;
text-decoration:none
}
.btoa-guide-link a:hover {
text-decoration:underline
}

.btoa-settings-group {
margin-bottom:.65rem
}
.btoa-settings-group h3 {
margin:0 0 .35rem;
color:#536579;
font-size:12px;
letter-spacing:.04em;
text-transform:uppercase
}
.btoa-input-grid,.btoa-suggestions {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:.55rem
}
.btoa-input-grid label,.btoa-position-card label,.btoa-tp-column label {
display:block;
margin:0;
font-size:12px;
font-weight:400
}

.btoa-input-grid input,.btoa-position-card input,.btoa-tp-column input {
display:block;
width:100%;
height:32px;
box-sizing:border-box;
margin-top:.25rem;
padding:.42rem .5rem;
border:1px solid #9aa8b6;
border-radius:4px;
background:#fff;
color:#182230;
font:inherit
}
.btoa-input-grid small {
display:block;
margin-top:.2rem;
overflow:hidden;
color:#536579;
font-size:11px;
text-overflow:ellipsis;
white-space:nowrap
}
.btoa-price-control {
display:flex;
margin-top:.25rem
}
.btoa-price-control input {
flex:1;
min-width:0;
margin-top:0
}

.btoa-group-portfolio label {
color:#2563eb
}
.btoa-group-portfolio input {
border-color:#9bbcf0;
background:#f5f9ff
}
.btoa-group-portfolio input:focus {
border-color:#2563eb;
box-shadow:0 0 0 2px rgba(37,99,235,.14)
}
.btoa-balance-input input {
border-color:#2563eb;
background:#eff6ff
}

.btoa-group-long label,.btoa-group-long h3,.btoa-group-long h4 {
color:#198754
}
.btoa-group-long input {
border-color:#9bc9ad;
background:#f4fbf6
}
.btoa-group-long input:focus {
border-color:#198754;
box-shadow:0 0 0 2px rgba(25,135,84,.14)
}

.btoa-group-short label,.btoa-group-short h3,.btoa-group-short h4 {
color:#dc3545
}
.btoa-group-short input {
border-color:#e4a3aa;
background:#fff7f7
}
.btoa-group-short input:focus {
border-color:#dc3545;
box-shadow:0 0 0 2px rgba(220,53,69,.14)
}

.btoa-suggestions {
margin-top:.65rem
}
.btoa-suggestions>div {
padding:.55rem .7rem;
border-radius:5px;
background:#f2f6fa
}
.btoa-suggestion-long {
border-left:4px solid #198754;
background:#f4fbf6!important
}
.btoa-suggestion-short {
border-left:4px solid #dc3545;
background:#fff7f7!important
}
.btoa-suggestions span,.btoa-suggestions small {
display:block;
color:#536579;
font-size:11px
}
.btoa-suggestions strong {
display:block;
margin:.15rem 0;
font-size:18px
}

.btoa-section-title {
margin:.8rem 0 .45rem;
font-size:15px
}
.btoa-position-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.55rem
}
.btoa-position-card {
display:grid;
grid-template-columns:44fr 44fr 12fr;
column-gap:.55rem;
padding:.55rem .7rem;
border:1px solid #d7dee7;
border-radius:5px
}
.btoa-position-card h4 {
grid-column:1/-1;
margin:0 0 .4rem;
font-size:13px
}
.btoa-position-card input,.btoa-tp-column input {
height:29px;
margin-top:.2rem;
padding:.35rem
}
.btoa-position-card small {
grid-column:1/-1;
margin-top:.45rem;
color:#536579;
font-size:11px;
white-space:nowrap
}

.btoa-margin-report {
margin-top:.65rem;
padding:.7rem .8rem;
border:1px solid #d7dee7;
border-radius:5px;
background:#f8fafc
}
.btoa-report-heading {
display:flex;
align-items:center;
justify-content:space-between;
gap:.6rem
}
.btoa-margin-report h3 {
margin:0 0 .35rem;
font-size:14px
}
.btoa-report-status {
padding:.2rem .4rem;
border-radius:4px;
background:#e8edf2;
color:#536579;
font-size:10px;
letter-spacing:.04em
}
.btoa-report-status-within-plan {
background:#edf8f1;
color:#176b3a
}
.btoa-report-status-allocation-exceeded,.btoa-report-status-long-ratio-above-reference {
background:#fff0f0;
color:#9b2525
}
.btoa-report-meters {
display:grid;
gap:.45rem;
margin:.3rem 0 .55rem
}
.btoa-report-meter>div:first-child {
display:flex;
justify-content:space-between;
gap:.5rem;
color:#536579;
font-size:11px
}
.btoa-meter-track {
height:7px;
margin-top:.2rem;
overflow:hidden;
border-radius:5px;
background:#e2e8f0
}
.btoa-meter-track>span {
display:block;
width:0;
height:100%;
border-radius:5px;
background:#198754;
transition:width .15s ease
}
.btoa-notional-mix {
display:flex;
gap:2px;
position:relative;
}
.btoa-notional-mix>[data-report-long-bar] {
background:#198754;
}
.btoa-notional-mix>[data-report-short-bar] {
background:#dc3545;
}
.btoa-report-meter small {
font-size:10px;
font-weight:400;
}
.btoa-notional-mix [data-report-ratio-marker] {
position:absolute;
top:-7px;
bottom:-7px;
left:0;
width:4px;
margin:0;
background:#111827;
border-radius:2px;
box-shadow:0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.55);
transform:translateX(-2px);
z-index:2;
}
.btoa-notional-mix [data-report-ratio-marker]::before,
.btoa-notional-mix [data-report-ratio-marker]::after {
content:"";
position:absolute;
left:50%;
width:0;
height:0;
transform:translateX(-50%);
border-left:5px solid transparent;
border-right:5px solid transparent;
}
.btoa-notional-mix [data-report-ratio-marker]::before {
top:-6px;
border-bottom:6px solid #111827;
}
.btoa-notional-mix [data-report-ratio-marker]::after {
bottom:-6px;
border-top:6px solid #111827;
}
.btoa-notional-target {
display:block;
margin-top:.2rem;
color:#536579;
font-size:10px;
line-height:1.2;
}
.btoa-lo-total {
display:flex;
justify-content:space-between;
align-items:center;
gap:.5rem;
margin-top:.55rem;
padding:.45rem .6rem;
border-top:1px solid #d9e1e8;
color:#536579;
font-size:12px;
}
.btoa-lo-total strong {
color:#182230;
font-size:14px;
}
[data-long-lo-plan] .btoa-lo-total {
background:#f1faf4;
}
[data-short-lo-plan] .btoa-lo-total {
background:#fff4f4;
}
.btoa-meter-track>span.is-warning {
background:#dc3545
}
.btoa-margin-report-body {
display:grid;
gap:.28rem;
color:#536579;
font-size:12px;
line-height:1.45
}
.btoa-report-line {
padding:.28rem .45rem;
border-radius:4px;
background:#eef3f7
}
.btoa-report-ok {
color:#176b3a;
background:#edf8f1
}
.btoa-report-info {
color:#315a7d;
background:#eef5fb
}
.btoa-report-warning {
border:1px solid #f2c5c5;
color:#9b2525;
background:#fff0f0
}

.btoa-side-column {
grid-column:2;
display:flex;
flex-direction:column;
gap:1rem;
align-self:start
}
.btoa-tp-panel {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 1rem;
padding:1rem
}
.btoa-tp-panel h2,.btoa-tp-panel .btoa-panel-note {
grid-column:1/-1
}
.btoa-tp-panel h2,.btoa-lo-plan h2 {
display:flex;
align-items:center;
margin:0 0 .35rem;
font-size:17px
}
.btoa-panel-note {
margin:0 0 .7rem;
color:#536579;
font-size:11px;
line-height:1.35
}
.btoa-tp-column {
padding:.6rem 0;
border-top:1px solid #e1e7ed
}
.btoa-tp-column h3 {
margin:0 0 .4rem;
font-size:12px;
letter-spacing:.04em
}
.btoa-tp-column label {
margin-bottom:.4rem;
font-size:11px
}
.btoa-tp-first-row {
display:grid;
grid-template-columns:1.45fr .7fr .7fr;
gap:.45rem;
align-items:start
}
.btoa-tp-size span {
display:block;
height:13px;
margin:0 0 4px;
color:#536579;
font-size:11px;
line-height:13px
}
.btoa-tp-size strong {
display:block;
height:29px;
box-sizing:border-box;
padding:.35rem;
border:1px solid #d7dee7;
border-radius:4px;
background:#f2f6fa;
color:#182230;
font-size:12px;
font-weight:400;
white-space:nowrap
}
.btoa-tp-step-row,.btoa-tp-level-row {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.45rem
}
.btoa-tp-column ol {
margin:.55rem 0 0;
padding-left:1.5rem;
line-height:1.55
}
.btoa-tp-percent {
color:#536579;
font-size:.9em;
white-space:nowrap
}
.btoa-tp-pnl,.btoa-tp-total-pnl strong {
color:#176b3a;
font-size:.9em;
white-space:nowrap
}
.btoa-tp-total-pnl {
display:flex;
justify-content:space-between;
gap:.5rem;
margin-top:.55rem;
padding:.4rem .5rem;
border-top:1px solid #d7dee7;
color:#536579;
font-size:11px;
font-weight:600
}

.btoa-lo-plan {
padding:1rem
}
[data-long-lo-plan] {
border-top:3px solid #198754
}
[data-long-lo-plan] h2 {
color:#198754
}
[data-long-lo-plan] .btoa-collapse-toggle {
border-color:#9bc9ad;
color:#198754
}
[data-long-lo-plan] .btoa-lo-summary>div {
background:#f4fbf6
}
[data-long-lo-plan] input {
border-color:#9bc9ad
}
[data-long-lo-plan] input:focus {
border-color:#198754;
box-shadow:0 0 0 2px rgba(25,135,84,.14)
}
[data-short-lo-plan] {
border-top:3px solid #dc3545
}
[data-short-lo-plan] h2 {
color:#dc3545
}
[data-short-lo-plan] .btoa-collapse-toggle {
border-color:#e4a3aa;
color:#dc3545
}
[data-short-lo-plan] .btoa-lo-summary>div {
background:#fff7f7
}
[data-short-lo-plan] input {
border-color:#e4a3aa
}
[data-short-lo-plan] input:focus {
border-color:#dc3545;
box-shadow:0 0 0 2px rgba(220,53,69,.14)
}
.btoa-lo-summary {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:.45rem;
margin:.7rem 0
}
.btoa-lo-summary>div {
padding:.45rem;
border-radius:4px;
background:#f2f6fa
}
.btoa-short-lo-max-field {
grid-column:span 2
}
.btoa-short-lo-max-field .btoa-lo-inline-input {
white-space:nowrap
}
.btoa-short-lo-max-control {
display:flex;
align-items:center;
gap:.35rem
}
.btoa-short-lo-max-control input {
flex:1 1 auto;
min-width:0
}
.btoa-short-lo-use-suggested {
flex:0 0 auto;
height:24px;
padding:.2rem .45rem;
border:1px solid #e4a3aa;
border-radius:4px;
background:#fff;
color:#dc3545;
cursor:pointer;
font:inherit;
font-size:10px;
white-space:nowrap
}
.btoa-short-lo-use-suggested:hover {
background:#fff7f7;
border-color:#dc3545
}
.btoa-lo-summary span,.btoa-lo-inline-input {
display:block;
height:26px;
margin:0 0 .15rem;
color:#536579;
font-size:10px;
line-height:13px;
font-weight:400
}
.btoa-lo-summary strong {
display:block;
margin-top:.15rem;
font-size:14px
}
.btoa-lo-summary input {
width:100%;
height:24px;
box-sizing:border-box;
padding:.2rem .3rem;
border:1px solid #9aa8b6;
border-radius:4px;
background:#fff;
font:inherit;
font-size:12px
}
.btoa-lo-orders-scroll {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1rem
}
.btoa-lo-zone h3,.btoa-lo-subzone h3 {
margin:0 0 .2rem;
font-size:12px
}
.btoa-lo-zone p,.btoa-lo-subzone p {
margin:0;
color:#536579;
font-size:11px;
line-height:1.35
}
.btoa-lo-zone ol,.btoa-lo-subzone ol {
margin:.45rem 0 0;
padding-left:1.35rem;
line-height:1.5
}
.btoa-lo-zone li,.btoa-lo-subzone li {
padding-left:.15rem;
font-size:11px;
font-weight:600
}
.btoa-lo-zone li::marker,.btoa-lo-subzone li::marker {
color:#198754
}
.btoa-tp-panel.is-collapsed .btoa-panel-note,.btoa-tp-panel.is-collapsed .btoa-tp-column,.btoa-lo-plan.is-collapsed .btoa-panel-note,.btoa-lo-plan.is-collapsed .btoa-lo-summary,.btoa-lo-plan.is-collapsed .btoa-lo-orders-scroll {
display:none
}

.btoa-chart {
width:100%;
margin:1rem 0;
padding:1rem
}
.btoa-chart-toolbar {
display:flex;
align-items:center;
gap:.35rem;
width:100%;
box-sizing:border-box;
padding:.45rem .6rem;
border-bottom:1px solid #20252b;
background:#101820
}
.btoa-chart-intervals {
display:flex;
flex:0 0 auto;
gap:.25rem
}
.btoa-chart-intervals button,.btoa-chart-fullscreen {
display:inline-flex;
align-items:center;
justify-content:center;
height:24px;
margin:0;
padding:2px 8px;
border:1px solid #9aa8b6;
border-radius:4px;
background:#fff;
color:#536579;
font-size:11px;
font-weight:600;
white-space:nowrap
}
.btoa-chart-fullscreen {
margin-left:auto
}
.btoa-chart-intervals button:hover,.btoa-chart-intervals button.is-active,.btoa-chart-fullscreen:hover {
border-color:#536579;
background:#f2f6fa;
color:#182230
}
.btoa-chart-canvas-wrap {
width:100%;
height:480px;
margin-top:1rem;
overflow:hidden;
border:1px solid #d7dee7;
border-radius:5px;
background:#101820
}
.btoa-chart canvas {
display:block;
width:100%;
height:100%
}
.btoa-chart-status,.btoa-chart-source {
display:block;
margin:.55rem 0 0;
color:#536579;
font-size:12px
}
.btoa-chart-source {
color:#8b949e
}
.btoa-chart:fullscreen {
width:100vw;
height:100vh;
margin:0;
padding:0;
border:0;
border-radius:0;
overflow:hidden;
background:#101820
}
.btoa-chart:fullscreen .btoa-chart-toolbar {
position:absolute;
z-index:5;
top:0;
right:0;
left:0;
opacity:.55
}
.btoa-chart:fullscreen .btoa-chart-toolbar:hover {
opacity:1
}
.btoa-chart:fullscreen .btoa-chart-canvas-wrap {
position:absolute;
inset:0;
width:100%;
height:100%!important;
margin:0;
border:0;
border-radius:0
}
.btoa-chart:fullscreen .btoa-chart-status,.btoa-chart:fullscreen .btoa-chart-source,.btoa-chart:fullscreen .btoa-chart-legend {
display:none!important
}

@media (max-width:700px) {
.btoa-layout {
width:100%;
margin:0;
grid-template-columns:1fr
}
.btoa-side-column {
grid-column:1
}
.btoa-position-grid,.btoa-tp-panel,.btoa-lo-orders-scroll {
grid-template-columns:1fr
}
.btoa-lo-summary {
grid-template-columns:repeat(2,minmax(0,1fr)
}
.btoa-chart {
padding:.75rem
}
.btoa-chart-canvas-wrap {
height:420px
}

}