:root {
  --bg: #f4f7fb; --panel: #fff; --ink: #152233; --muted: #67758a;
  --line: #dfe6ef; --nav: #101b2b; --nav2: #182943; --accent: #ff9f1c;
  --blue: #2563eb; --green: #138a5b; --red: #d64545; --amber: #d07a00;
  --shadow: 0 8px 26px rgba(24, 43, 71, .08); --radius: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color: var(--ink); background: var(--bg); font-size: 14px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, var(--nav), var(--nav2)); color: white; padding: 24px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: #152233; font-size: 22px; font-weight: 900; }
.brand strong, .brand small { display: block; }.brand small { color: #aebbd0; margin-top: 2px; }
.product-label { color: #9fb0c8; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin: 0 8px 18px; }
.product-label select { width: 100%; margin-top: 7px; background: #243752; color: white; border: 1px solid #3b4e68; border-radius: 8px; padding: 9px; text-transform: none; letter-spacing: 0; font-size: 13px; }
nav { display: grid; gap: 5px; }
nav button { border: 0; background: transparent; color: #b8c4d6; text-align: left; padding: 11px 12px; border-radius: 9px; }
nav button:hover, nav button.active { background: rgba(255,255,255,.09); color: white; }
nav button.active { border-left: 3px solid var(--accent); }
.sidebar-footer { margin-top: auto; font-size: 11px; color: #9fb0c8; padding: 12px 8px 0; border-top: 1px solid #2d405c; }
.status-dot { display: inline-block; width: 7px; height: 7px; background: #45d48a; border-radius: 50%; margin-right: 6px; }
main { min-width: 0; }
.topbar { min-height: 94px; display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; background: rgba(255,255,255,.93); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(12px); }
.topbar h1 { margin: 3px 0 0; font-size: 24px; }.eyebrow { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .13em; margin: 0; }
.top-actions { display: flex; gap: 12px; align-items: center; }.top-actions span { color: var(--muted); font-size: 12px; }
.content { padding: 28px 32px 50px; max-width: 1600px; margin: 0 auto; }
.hero { background: linear-gradient(120deg, #172944, #223b60); color: white; border-radius: 18px; padding: 26px; display: flex; justify-content: space-between; gap: 24px; margin-bottom: 22px; box-shadow: var(--shadow); }
.hero h2 { font-size: 28px; margin: 7px 0; }.hero p { color: #c4d0df; margin: 0; }.decision { min-width: 180px; text-align: center; align-self: center; padding: 18px; border-radius: 14px; background: rgba(255,255,255,.08); }
.decision strong { font-size: 31px; display: block; }.decision.go strong { color: #55e3a1; }.decision.review strong { color: #ffc760; }.decision.nogo strong { color: #ff7b7b; }.decision small { color: #c4d0df; }
.grid { display: grid; gap: 18px; }.grid.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card, .section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card { padding: 18px; }.card .label { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }.card .value { font-size: 25px; font-weight: 750; margin: 7px 0 3px; }.card .hint { color: var(--muted); font-size: 12px; }
.section { padding: 21px; margin-bottom: 18px; overflow: hidden; }.section h2 { font-size: 17px; margin: 0 0 4px; }.section h3 { font-size: 14px; margin: 20px 0 10px; }.section > p.sub { color: var(--muted); margin: 0 0 18px; font-size: 12px; }
.section-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-head .sub { color: var(--muted); margin: 4px 0 0; font-size: 12px; line-height: 1.45; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 13px; }.form-grid.three { grid-template-columns: repeat(3, 1fr); }.form-grid.two { grid-template-columns: repeat(2, 1fr); }
.field { display: block; }.field span { display: block; color: var(--muted); font-size: 11px; font-weight: 650; margin: 0 0 6px; }.field input, .field select { width: 100%; border: 1px solid #cfd8e4; background: white; border-radius: 8px; padding: 9px 10px; color: var(--ink); }.field input:focus, .field select:focus { outline: 2px solid #a9c5ff; border-color: var(--blue); }
.field-source { display: inline-block; margin-top: 6px; color: var(--blue); font-size: 11px; font-weight: 650; text-decoration: none; }.field-source:hover { text-decoration: underline; }
.check-grid { display: flex; flex-wrap: wrap; gap: 9px; }.check { display: flex; gap: 7px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }th { text-align: right; padding: 10px 11px; background: #f5f8fc; color: #536176; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }th:first-child, td:first-child { text-align: left; }td { text-align: right; padding: 11px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }tr:hover td { background: #fbfcfe; }.total-row td { font-weight: 750; background: #f6f9fd; }
table input, table select { width: 86px; border: 1px solid #cfd8e4; border-radius: 6px; padding: 7px; text-align: right; background: white; }table select { width: 130px; text-align: left; }
.pill { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; }.pill.green { color: #087448; background: #dcf7ea; }.pill.red { color: #a42929; background: #fde5e5; }.pill.amber { color: #8b5700; background: #fff0d1; }.pill.blue { color: #174fa8; background: #e2edff; }
.alert { border-left: 4px solid var(--amber); background: #fff9ed; color: #78510c; padding: 12px 14px; margin: 10px 0; border-radius: 7px; }.alert.good { border-color: var(--green); background: #ecfbf4; color: #12603f; }.alert.bad { border-color: var(--red); background: #fff0f0; color: #8b2b2b; }
.score-row { display: grid; grid-template-columns: 110px 1fr 45px; gap: 10px; align-items: center; margin: 10px 0; }.bar { height: 9px; background: #e9eef5; border-radius: 10px; overflow: hidden; }.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #55a5ff); border-radius: inherit; }
.chart { height: 210px; padding: 14px 0 2px; }.chart svg { width: 100%; height: 100%; overflow: visible; }.axis { stroke: #d7e0eb; stroke-width: 1; }.line { fill: none; stroke: var(--blue); stroke-width: 3; }.line.negative { stroke: var(--red); }.area { fill: rgba(37,99,235,.10); }.zero { stroke: #9aa8ba; stroke-dasharray: 4 4; }
.btn, button.primary, button.secondary, button.danger { border-radius: 8px; padding: 9px 13px; font-weight: 650; border: 1px solid transparent; }.primary { background: var(--blue); color: white; }.secondary { background: white; color: var(--ink); border-color: #cfd8e4 !important; }.danger { background: #fff0f0; color: #a42929; border-color: #f1caca !important; }.actions { display: flex; gap: 9px; flex-wrap: wrap; }
.note { font-size: 12px; color: var(--muted); line-height: 1.55; }.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }.positive { color: var(--green); }.negative { color: var(--red); }.muted { color: var(--muted); }
#toast { position: fixed; right: 24px; bottom: 24px; background: #152233; color: white; padding: 11px 15px; border-radius: 9px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; z-index: 20; }#toast.show { opacity: 1; transform: none; }
.source-box { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #f8fafc; }.source-box a { color: var(--blue); }.source-box ul { margin: 8px 0 0; padding-left: 18px; }
.product-identity { display: grid; grid-template-columns: 160px 1fr; gap: 22px; align-items: center; background: linear-gradient(120deg, #172944, #223b60); color: white; border-radius: 18px; padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow); }
.product-identity.compact { grid-template-columns: 110px 1fr; }.product-identity h2 { margin: 0 0 7px; font-size: 26px; }.product-identity p { color: #c4d0df; }.product-identity .secondary { background: rgba(255,255,255,.94); text-decoration: none; display: inline-block; }
.product-image { width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #e8eef6; color: #66758b; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); }
.product-image.large { width: 190px; }.product-image img { width: 100%; height: 100%; object-fit: contain; background: white; }.image-error img { display: none; }
.identity-editor { display: flex; align-items: start; gap: 22px; }.identity-fields { flex: 1; }
.simulation-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; background: #eaf1ff; border: 1px solid #bfd2fa; color: #214577; padding: 12px 16px; border-radius: 11px; margin-bottom: 18px; }
.simulation-controls { display: grid; grid-template-columns: minmax(300px, 2fr) minmax(160px, 1fr); gap: 18px; margin-top: 18px; align-items: end; }.simulation-controls > div > span { display: block; color: var(--muted); font-size: 11px; font-weight: 650; margin-bottom: 6px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #cfd8e4; padding: 3px; border-radius: 10px; background: #f5f8fc; }.segmented button { border: 0; border-radius: 7px; padding: 9px 12px; background: transparent; color: var(--muted); font-weight: 750; }.segmented button.selected { background: var(--blue); color: white; box-shadow: 0 2px 8px rgba(37,99,235,.25); }
.percent-field > div { display: flex; align-items: center; border: 1px solid #cfd8e4; border-radius: 8px; overflow: hidden; background: white; }.percent-field input { border: 0; border-radius: 0; }.percent-field b { padding: 0 10px; color: var(--muted); }
.season-units { min-width: 980px; }.season-units td { text-align: center; background: #f8fbff; }.season-units th { text-align: center; }
.metric-signal { display: inline-flex; gap: 6px; align-items: center; padding: 5px 9px; border-radius: 999px; font-weight: 750; font-size: 12px; }.metric-signal .dot { width: 8px; height: 8px; border-radius: 50%; }.metric-signal.green { color: #087448; background: #dcf7ea; }.metric-signal.green .dot { background: #11a86a; }.metric-signal.amber { color: #8b5700; background: #fff0d1; }.metric-signal.amber .dot { background: #e99a10; }.metric-signal.red { color: #a42929; background: #fde5e5; }.metric-signal.red .dot { background: #de4141; }
.scenario-summary th:first-child { position: sticky; left: 0; z-index: 2; background: #edf3fb; }.scenario-summary tbody th { text-align: left; background: #f7f9fc; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink); }.scenario-summary td { min-width: 175px; font-size: 14px; }.scenario-summary tbody tr:last-child td { background: #f7f9fc; }
.indicator-label { display: inline-flex; align-items: center; gap: 8px; white-space: normal; }
.info-button { flex: 0 0 auto; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid #8ca8ce; border-radius: 50%; background: #fff; color: #275ea8; font-family: Georgia, serif; font-size: 13px; font-weight: 800; line-height: 1; text-transform: none; box-shadow: 0 1px 3px rgba(21,34,51,.08); }
.info-button:hover, .info-button:focus-visible { color: white; background: var(--blue); border-color: var(--blue); outline: 3px solid rgba(37,99,235,.18); }
body.modal-open { overflow: hidden; }
.info-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 22px; background: rgba(10,23,41,.68); backdrop-filter: blur(3px); }
.info-modal { width: min(720px, 100%); max-height: min(82vh, 760px); overflow: auto; background: white; border-radius: 16px; box-shadow: 0 24px 80px rgba(3,12,28,.35); }
.info-modal-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); background: white; }
.info-modal-header h2 { margin: 4px 0 0; font-size: 21px; color: var(--ink); }
.info-modal-kicker { color: var(--blue); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.info-modal-close { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: 1px solid #cfd8e4; border-radius: 9px; background: #f7f9fc; color: #34445a; font-size: 25px; line-height: 1; }
.info-modal-close:hover, .info-modal-close:focus-visible { color: white; background: var(--blue); border-color: var(--blue); outline: 3px solid rgba(37,99,235,.18); }
.info-modal-body { padding: 20px 24px 24px; color: #34445a; font-size: 14px; line-height: 1.65; }
.info-modal-body p { margin: 0 0 15px; }
.info-modal-body p:last-child { margin-bottom: 0; }
.info-modal-body strong { color: var(--ink); }
.info-investor { padding: 14px 16px; border-left: 4px solid var(--blue); border-radius: 8px; background: #eef4ff; }
.info-note { padding: 12px 14px; border-radius: 8px; background: #fff7e7; color: #6d4a0c; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; }
.detail-controls { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }.detail-controls label { color: var(--muted); font-size: 11px; font-weight: 650; }.detail-controls select { display: block; min-width: 170px; margin-top: 6px; padding: 9px; border: 1px solid #cfd8e4; border-radius: 8px; background: white; }.mode-tag { padding: 9px 12px; background: #eaf1ff; color: #214577; border-radius: 8px; font-weight: 750; }
.monthly-detail { min-width: 1350px; }.monthly-detail th:first-child, .monthly-detail td:first-child { position: sticky; left: 0; z-index: 2; min-width: 225px; }.monthly-detail thead th:first-child { z-index: 3; }.monthly-detail tbody th { text-align: left; background: white; border-top: 1px solid var(--line); color: var(--ink); font-size: 11px; text-transform: none; letter-spacing: 0; }.monthly-detail td { min-width: 92px; }.monthly-detail .subtotal-row th, .monthly-detail .subtotal-row td { font-weight: 800; background: #edf4ff; }.monthly-detail .total-row th, .monthly-detail .total-row td { font-weight: 850; background: #dfeeff; }.monthly-detail .warning-row td { color: var(--red); }
.wide-inputs { min-width: 2450px; }.wide-inputs td:first-child { min-width: 180px; }.wide-inputs .field { min-width: 110px; }.wide-inputs .field span:empty { display: none; }
@media (max-width: 760px) { .product-identity, .product-identity.compact { grid-template-columns: 90px 1fr; }.identity-editor { display: block; }.product-image.large { width: 150px; margin-bottom: 16px; }.simulation-controls { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .grid.cards { grid-template-columns: repeat(2, 1fr); }.form-grid { grid-template-columns: repeat(2, 1fr); }.grid.three { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .app-shell { display: block; }.sidebar { position: static; height: auto; }.sidebar nav { grid-template-columns: repeat(2, 1fr); }.sidebar-footer { display:none; }.topbar { position: static; padding: 16px 18px; }.content { padding: 18px; }.grid.cards, .grid.two, .form-grid, .form-grid.three, .form-grid.two { grid-template-columns: 1fr; }.hero { display: block; }.decision { margin-top: 18px; }.top-actions span { display: none; } }
@media print { .sidebar, .top-actions, nav, .actions, button, .info-modal-backdrop { display: none !important; }.app-shell { display:block; }.topbar { position: static; }.content { padding: 12px; }.section, .card, .hero { box-shadow: none; break-inside: avoid; } }