.xrc { --xrc-bg:#0b1513; --xrc-panel:#152a26; --xrc-line:#29423c; --xrc-text:#f1f6f4; --xrc-muted:#afc0ba; --xrc-gold:#f7c760; --xrc-aqua:#7ce0c0; color:var(--xrc-text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.xrc * { box-sizing:border-box; }
.xrc-shell { max-width:1120px; margin:0 auto; padding:clamp(20px,4vw,44px); border-radius:20px; background:radial-gradient(circle at 13% 0%,#1b3930 0,transparent 32rem),var(--xrc-bg); }
.xrc-header { margin-bottom:28px; }.xrc-eyebrow { color:var(--xrc-aqua); font-size:.73rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }.xrc h2 { margin:7px 0 6px; color:var(--xrc-text); font-size:clamp(2rem,5vw,3.5rem); line-height:1; letter-spacing:-.055em; }.xrc h3 { margin:0; color:var(--xrc-text); font-size:1.02rem; letter-spacing:-.015em; }.xrc-header p,.xrc-panel-label { margin:5px 0 0; color:var(--xrc-muted); line-height:1.5; }.xrc-panel-label { font-size:.82rem; margin-bottom:19px; }
.xrc-layout { display:grid; grid-template-columns:minmax(290px,.85fr) minmax(400px,1.15fr); gap:18px; align-items:start; }.xrc-panel { background:linear-gradient(145deg,rgba(24,47,42,.98),rgba(16,32,29,.98)); border:1px solid var(--xrc-line); border-radius:18px; box-shadow:0 16px 50px rgba(0,0,0,.16); }.xrc-inputs,.xrc-result { padding:22px; }
.xrc-mode-toggle { display:flex; gap:6px; margin:15px 0 19px; padding:4px; background:#0d1b18; border:1px solid #34544b; border-radius:10px; }.xrc button { border:0; border-radius:9px; padding:10px 13px; cursor:pointer; font:700 .82rem inherit; }.xrc-mode-toggle button { flex:1; padding:8px 10px; color:#a9beb7; background:transparent; border-radius:7px; font-size:.75rem; }.xrc-mode-toggle button.is-active { color:#0b1513; background:var(--xrc-aqua); }
.xrc-group-label { margin:22px 0 8px; color:#d9e6e0; font-size:.74rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.xrc-fields { display:grid; gap:10px; }.xrc-two { grid-template-columns:1fr 1fr; }.xrc label { display:block; color:var(--xrc-muted); font-size:.78rem; font-weight:650; }.xrc-input-wrap { position:relative; display:block; margin-top:6px; }.xrc input { width:100%; padding:11px 42px 11px 11px; color:var(--xrc-text); background:#0d1b18; border:1px solid #34544b; border-radius:9px; outline:none; font:inherit; font-variant-numeric:tabular-nums; }.xrc input:focus { border-color:var(--xrc-aqua); box-shadow:0 0 0 3px rgba(124,224,192,.13); }.xrc-unit { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#91aba2; font-size:.78rem; pointer-events:none; }.xrc-actions { display:flex; gap:8px; margin-top:20px; }.xrc-secondary { color:#d5e2dd; border:1px solid #36564e!important; background:transparent; }.xrc-secondary:hover { background:#1b342e; }
.xrc-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.xrc-metric { min-height:108px; padding:15px; background:rgba(8,20,17,.57); border:1px solid #29473e; border-radius:13px; }.xrc-metric.xrc-primary { background:linear-gradient(130deg,#2e2818,#1f2d25); border-color:#706038; }.xrc-name,.xrc-metric span:not(.xrc-name) { display:block; color:#91aaa2; font-size:.72rem; }.xrc-name { color:var(--xrc-muted)!important; font-weight:700; }.xrc-metric strong { display:block; margin-top:10px; color:var(--xrc-text); font-size:clamp(1.28rem,2.9vw,1.85rem); font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }.xrc-primary strong { color:var(--xrc-gold); }.xrc-direction { display:inline-flex; margin-top:20px; padding:7px 10px; border-radius:7px; background:#102821; color:var(--xrc-aqua); font-size:.78rem; font-weight:800; letter-spacing:.03em; }.xrc-direction.xrc-short { background:#31201e; color:#ffb4a6; }.xrc-warning { margin-top:14px; padding:11px 12px; border:1px solid #7e5048; border-radius:9px; color:#ffd3ca; background:#321f1e; font-size:.81rem; line-height:1.42; }.xrc-plan { margin-top:16px; padding:15px; background:linear-gradient(120deg,rgba(247,199,96,.12),rgba(124,224,192,.09)); border:1px solid #6a6541; border-radius:12px; }.xrc-plan>span { color:#dae9e3; font-size:.73rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.xrc-plan strong { display:block; margin-top:5px; color:var(--xrc-gold); font-size:1.43rem; font-weight:800; letter-spacing:-.03em; }.xrc-plan p { margin:4px 0 0; color:#b7c8c1; font-size:.78rem; line-height:1.42; }
.xrc-table-card { margin-top:18px; overflow:hidden; }.xrc-table-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:18px 18px 12px; }.xrc-table-head p { margin:0; color:var(--xrc-muted); font-size:.76rem; }.xrc table { width:100%; border-collapse:collapse; color:var(--xrc-text); font-variant-numeric:tabular-nums; }.xrc th,.xrc td { padding:12px 18px; text-align:right; border-top:1px solid var(--xrc-line); font-size:.83rem; }.xrc th { color:#9db1aa; font-size:.69rem; letter-spacing:.07em; text-transform:uppercase; font-weight:800; }.xrc th:first-child,.xrc td:first-child { text-align:left; }.xrc-lot { color:var(--xrc-gold); font-weight:800; }.xrc-fineprint { margin:18px 1px 0; color:#829a91; font-size:.72rem; line-height:1.45; }
@media (max-width:820px) { .xrc-layout { grid-template-columns:1fr; } } @media (max-width:440px) { .xrc-shell { padding:17px; }.xrc-inputs,.xrc-result { padding:17px; }.xrc-two,.xrc-metrics { grid-template-columns:1fr; }.xrc-table-wrap { overflow-x:auto; }.xrc th,.xrc td { padding:11px 10px; font-size:.76rem; } }