.rx-calc {
--rx-hud-green: #40d98c;
--rx-hud-line: rgba(240, 133, 102, 0.22);
max-width: 1200px;
margin: 0 auto;
padding: var(--rx-s-5) var(--rx-s-3) var(--rx-s-6);
}
.rx-calc .rx-mono {
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
} .rx-calc .rx-cockpit-panel {
position: relative;
border: 1px solid var(--rx-line);
border-radius: var(--rx-r-md);
background:
linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
repeating-linear-gradient(0deg,  transparent 0 31px, rgba(255, 255, 255, 0.025) 31px 32px),
repeating-linear-gradient(90deg, transparent 0 31px, rgba(255, 255, 255, 0.025) 31px 32px),
var(--rx-surface-dark);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: var(--rx-s-3);
padding-top: calc(var(--rx-s-3) + 14px);
}
.rx-calc .rx-cockpit-panel::before,
.rx-calc .rx-cockpit-panel::after {
content: '';
position: absolute;
width: 22px;
height: 22px;
pointer-events: none;
}
.rx-calc .rx-cockpit-panel::before {
top: -1px;
left: -1px;
border-top: 2px solid var(--rx-orange);
border-left: 2px solid var(--rx-orange);
border-top-left-radius: var(--rx-r-md);
}
.rx-calc .rx-cockpit-panel::after {
bottom: -1px;
right: -1px;
border-bottom: 2px solid var(--rx-hud-line);
border-right: 2px solid var(--rx-hud-line);
border-bottom-right-radius: var(--rx-r-md);
}
.rx-calc .rx-cockpit-panel__tag {
position: absolute;
top: 0;
left: var(--rx-s-3);
transform: translateY(-50%);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rx-orange-300);
background: var(--rx-navy);
border: 1px solid var(--rx-hud-line);
border-radius: var(--rx-r-pill);
padding: 0.35em 1em;
white-space: nowrap;
max-width: calc(100% - 2 * var(--rx-s-3));
overflow: hidden;
text-overflow: ellipsis;
} .rx-calc__mast {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--rx-s-3);
flex-wrap: wrap;
margin-bottom: var(--rx-s-4);
}
.rx-calc__eyebrow {
margin: 0 0 var(--rx-s-1);
font-size: var(--rx-fs-xs);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rx-orange-300);
}
.rx-calc__headline {
margin: 0;
font-size: var(--rx-fs-2xl);
font-weight: 800;
line-height: 1.08;
color: #fff;
}
.rx-calc__subhead {
margin: var(--rx-s-2) 0 0;
max-width: 60ch;
font-size: var(--rx-fs-md);
color: rgba(255, 255, 255, 0.72);
}
.rx-calc__feed {
display: flex;
align-items: center;
gap: 0.55em;
padding: var(--rx-s-1) var(--rx-s-2);
border-radius: var(--rx-r-pill);
font-size: var(--rx-fs-xs);
}
.rx-calc__feed-label {
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
}
.rx-calc__feed [data-feed-state] { color: rgba(255, 255, 255, 0.5); }
.rx-calc__led {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--rx-mute);
}
.rx-calc__led.is-live {
background: var(--rx-hud-green);
box-shadow: 0 0 8px rgba(64, 217, 140, 0.8);
} .rx-calc__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rx-s-3);
}
.rx-calc-panel__title {
margin: 0 0 4px;
font-size: var(--rx-fs-lg);
font-weight: 800;
color: #fff;
}
.rx-calc-panel__desc {
margin: 0 0 var(--rx-s-2);
font-size: var(--rx-fs-sm);
color: rgba(255, 255, 255, 0.6);
} .rx-calc__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--rx-s-2);
}
.rx-calc__field {
display: block;
margin-bottom: var(--rx-s-2);
min-width: 0;
}
.rx-calc__field > span {
display: flex;
align-items: baseline;
gap: 0.6em;
margin-bottom: 5px;
font-size: var(--rx-fs-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.rx-calc__live {
font-style: normal;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: none;
color: var(--rx-hud-green);
}
.rx-calc__field input,
.rx-calc__field select {
width: 100%;
box-sizing: border-box;
appearance: none;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid var(--rx-line);
border-radius: var(--rx-r-sm);
color: #fff;
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
font-size: var(--rx-fs-sm);
font-variant-numeric: tabular-nums;
padding: 0.65em 0.85em;
transition: border-color var(--rx-dur-fast) var(--rx-ease-out),
background-color var(--rx-dur-fast) var(--rx-ease-out);
}
.rx-calc__field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23DC4F2C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85em center;
padding-right: 2.2em;
cursor: pointer;
}
.rx-calc__field select option { background: #0b1020; color: #fff; }
.rx-calc__field input:focus,
.rx-calc__field select:focus {
outline: none;
border-color: rgba(220, 79, 44, 0.55);
background-color: rgba(255, 255, 255, 0.08);
}  .rx-calc__out {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
margin: var(--rx-s-1) 0 0;
border: 1px solid var(--rx-line);
border-radius: var(--rx-r-sm);
overflow: hidden;
background: var(--rx-line);
}
.rx-calc__out > div {
background: rgba(10, 14, 28, 0.85);
padding: var(--rx-s-1) var(--rx-s-2);
}
.rx-calc__out dt {
margin: 0 0 2px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.rx-calc__out dd {
margin: 0;
font-size: var(--rx-fs-base);
color: #fff;
}
.rx-calc__out-main dd {
color: var(--rx-orange-300);
font-size: var(--rx-fs-lg);
font-weight: 700;
text-shadow: 0 0 18px rgba(220, 79, 44, 0.35);
}
.rx-calc__out dd.is-gain { color: var(--rx-hud-green); text-shadow: 0 0 18px rgba(64, 217, 140, 0.35); }
.rx-calc__out dd.is-loss { color: #f2685c; text-shadow: 0 0 18px rgba(242, 104, 92, 0.35); } .rx-calc-faq { margin-top: var(--rx-s-5); }
.rx-calc-faq__heading {
margin: 0 0 var(--rx-s-3);
font-size: var(--rx-fs-xl);
font-weight: 800;
color: #fff;
}  .rx-calc__disclaimer {
margin: var(--rx-s-4) 0 0;
font-size: var(--rx-fs-xs);
color: rgba(255, 255, 255, 0.4);
max-width: 80ch;
} @media (max-width: 900px) {
.rx-calc__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.rx-calc__headline { font-size: var(--rx-fs-xl); }
.rx-calc__row { grid-template-columns: 1fr; }
.rx-calc__feed { width: 100%; }
}