.xsc-calculator {
  --xsc-bg: #070c18;
  --xsc-card: #0d1628;
  --xsc-card-soft: #111d33;
  --xsc-line: #243552;
  --xsc-text: #f4f7fb;
  --xsc-muted: #93a4bd;
  --xsc-gold: #f6c85f;
  --xsc-cyan: #2dd4e8;
  --xsc-green: #2ed79b;
  --xsc-amber: #ffbc42;
  --xsc-red: #ff5d73;
  color: var(--xsc-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  margin: 24px auto;
  max-width: 1180px;
}

.xsc-calculator *, .xsc-calculator *::before, .xsc-calculator *::after { box-sizing: border-box; }
.xsc-calculator [hidden] { display: none !important; }

.xsc-shell {
  background:
    radial-gradient(circle at 90% 0%, rgba(45, 212, 232, .09), transparent 28%),
    radial-gradient(circle at 5% 10%, rgba(246, 200, 95, .08), transparent 24%),
    var(--xsc-bg);
  border: 1px solid #1d2c46;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
  padding: clamp(18px, 3vw, 38px);
}

.xsc-header { align-items: center; display: flex; gap: 28px; justify-content: space-between; margin-bottom: 26px; }
.xsc-header h2 { color: var(--xsc-text); font-size: clamp(28px, 4vw, 46px); letter-spacing: -.04em; line-height: 1.05; margin: 4px 0 10px; }
.xsc-header p { color: var(--xsc-muted); margin: 0; }
.xsc-header .xsc-eyebrow { color: var(--xsc-gold); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.xsc-model-badge { background: rgba(246, 200, 95, .09); border: 1px solid rgba(246, 200, 95, .34); border-radius: 14px; color: #c9b986; flex: 0 0 auto; font-size: 11px; letter-spacing: .08em; padding: 13px 16px; text-align: center; }
.xsc-model-badge strong { color: var(--xsc-gold); display: block; font-size: 17px; letter-spacing: 0; margin-top: 3px; }

.xsc-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); }
.xsc-card { background: linear-gradient(145deg, rgba(17, 29, 51, .94), rgba(10, 18, 33, .96)); border: 1px solid var(--xsc-line); border-radius: 18px; }
.xsc-input-card, .xsc-summary-card, .xsc-table-card { padding: clamp(17px, 2.2vw, 26px); }
.xsc-section-heading { align-items: center; display: flex; gap: 10px; margin-bottom: 18px; }
.xsc-section-heading > span { align-items: center; background: rgba(45, 212, 232, .1); border: 1px solid rgba(45, 212, 232, .28); border-radius: 7px; color: var(--xsc-cyan); display: inline-flex; font-size: 10px; font-weight: 800; height: 25px; justify-content: center; width: 30px; }
.xsc-section-heading h3 { color: var(--xsc-text); font-size: 16px; letter-spacing: .01em; margin: 0; }

.xsc-fields { display: grid; gap: 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xsc-field { color: var(--xsc-muted); display: flex; flex-direction: column; font-size: 12px; font-weight: 650; gap: 7px; margin: 0; }
.xsc-field-wide { grid-column: 1 / -1; }
.xsc-field input, .xsc-field select { appearance: none; background: #080f1e; border: 1px solid #2b3c58; border-radius: 10px; color: var(--xsc-text); font: inherit; font-size: 14px; font-weight: 600; height: 44px; outline: none; padding: 0 13px; transition: border-color .2s, box-shadow .2s; width: 100%; }
.xsc-field select { background-image: linear-gradient(45deg, transparent 50%, #7185a3 50%), linear-gradient(135deg, #7185a3 50%, transparent 50%); background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; padding-right: 34px; }
.xsc-field input:focus, .xsc-field select:focus { border-color: var(--xsc-cyan); box-shadow: 0 0 0 3px rgba(45, 212, 232, .11); }
.xsc-error { background: rgba(255, 93, 115, .1); border: 1px solid rgba(255, 93, 115, .38); border-radius: 10px; color: #ff9aa8; font-size: 13px; margin-top: 16px; padding: 11px 13px; }

.xsc-summary { margin: 0; }
.xsc-summary > div { align-items: center; border-bottom: 1px solid rgba(147, 164, 189, .13); display: flex; gap: 12px; justify-content: space-between; padding: 10px 0; }
.xsc-summary > div:last-child { border-bottom: 0; }
.xsc-summary dt { color: var(--xsc-muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.xsc-summary dd { color: var(--xsc-text); font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; font-weight: 700; margin: 0; text-align: right; }

.xsc-result-card { background: linear-gradient(120deg, #101d34, #0a1427 58%, #111b2f); border-color: rgba(45, 212, 232, .34); margin-top: 18px; overflow: hidden; padding: clamp(24px, 4vw, 42px); position: relative; text-align: center; }
.xsc-result-card::after { background: var(--xsc-cyan); border-radius: 50%; content: ""; filter: blur(90px); height: 120px; opacity: .11; position: absolute; right: -30px; top: -40px; width: 180px; }
.xsc-result-kicker { color: var(--xsc-gold); font-size: 11px; font-weight: 800; letter-spacing: .18em; position: relative; }
.xsc-main-result { color: var(--xsc-text); font-size: clamp(44px, 8vw, 82px); font-weight: 850; letter-spacing: -.055em; line-height: 1; margin: 14px 0 8px; position: relative; }
.xsc-main-caption { color: var(--xsc-muted); font-size: 13px; }
.xsc-survival-track { background: #07101f; border: 1px solid #233652; border-radius: 999px; height: 13px; margin: 25px auto 10px; max-width: 720px; overflow: hidden; }
.xsc-survival-track span { background: linear-gradient(90deg, var(--xsc-cyan), var(--xsc-green)); border-radius: inherit; display: block; height: 100%; min-width: 0; transition: width .25s ease; }
.xsc-status-line { align-items: center; display: flex; gap: 14px; justify-content: center; }
.xsc-status-line > span:first-child { color: var(--xsc-muted); font-size: 12px; }
.xsc-status { border: 1px solid currentColor; border-radius: 999px; color: var(--xsc-green); font-size: 10px; letter-spacing: .06em; padding: 4px 8px; }
.xsc-status--warning { color: var(--xsc-amber); }
.xsc-status--danger, .xsc-status--stop-out-risk { color: var(--xsc-red); }
.xsc-status--theoretical { color: var(--xsc-cyan); }
.xsc-metrics { display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 27px; overflow: hidden; }
.xsc-metric { background: rgba(5, 12, 24, .58); min-height: 78px; padding: 15px 10px; }
.xsc-metric span { color: var(--xsc-muted); display: block; font-size: 10px; letter-spacing: .04em; margin-bottom: 6px; text-transform: uppercase; }
.xsc-metric strong { color: var(--xsc-text); font-family: "SFMono-Regular", Consolas, monospace; font-size: 14px; }

.xsc-table-card { margin-top: 18px; }
.xsc-table-scroll { overflow-x: auto; scrollbar-color: #344766 #0a1221; }
.xsc-table-card table { border-collapse: collapse; color: var(--xsc-text); font-size: 12px; margin: 0; min-width: 940px; width: 100%; }
.xsc-table-card th, .xsc-table-card td { border: 0; border-bottom: 1px solid rgba(147, 164, 189, .13); padding: 11px 12px; text-align: right; white-space: nowrap; }
.xsc-table-card th { background: #091223; color: #8295b2; font-size: 10px; letter-spacing: .05em; position: sticky; text-transform: uppercase; top: 0; }
.xsc-table-card th:first-child, .xsc-table-card td:first-child { text-align: left; }
.xsc-table-card tbody tr:hover { background: rgba(45, 212, 232, .035); }
.xsc-table-status { border-radius: 999px; color: var(--xsc-green); font-size: 9px; font-weight: 800; padding: 4px 7px; }
.xsc-table-status--warning { background: rgba(255, 188, 66, .12); color: var(--xsc-amber); }
.xsc-table-status--danger, .xsc-table-status--stop-out-risk { background: rgba(255, 93, 115, .12); color: var(--xsc-red); }

.xsc-disclaimer { color: #7587a2; font-size: 11px; margin: 22px auto 0; max-width: 850px; text-align: center; }
.xsc-disclaimer strong { color: var(--xsc-gold); display: block; letter-spacing: .06em; margin-bottom: 9px; }
.xsc-disclaimer p { margin: 3px 0; }

@media (max-width: 820px) {
  .xsc-header { align-items: flex-start; flex-direction: column; }
  .xsc-layout { grid-template-columns: 1fr; }
  .xsc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .xsc-shell { border-radius: 14px; padding: 14px; }
  .xsc-header { margin-bottom: 18px; }
  .xsc-header h2 { font-size: 30px; }
  .xsc-model-badge { width: 100%; }
  .xsc-fields { grid-template-columns: 1fr; }
  .xsc-field-wide { grid-column: auto; }
  .xsc-result-card { padding: 25px 13px; }
  .xsc-main-result { font-size: 44px; }
  .xsc-status-line { align-items: flex-start; flex-direction: column; }
  .xsc-metrics { grid-template-columns: 1fr 1fr; }
  .xsc-metric { min-height: 72px; }
}

