@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

:root { color-scheme: light; --ink: #1c2924; --muted: #68746d; --paper: #edf1ec; --panel: #fff; --line: #dbe2dc; --green: #25654f; --green-dark: #183d30; --green-soft: #e8f1eb; --lime: #bfce69; --amber: #bc8440; --amber-soft: #faf1e1; --red: #a94442; --red-soft: #f8e9e5; --mono: 'DM Mono', 'Courier New', monospace; --sans: 'DM Sans', 'Segoe UI', sans-serif; --display: 'Playfair Display', Georgia, serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; margin: 0; color: var(--ink); font-family: var(--sans); background: var(--paper); }
button, input { font: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #be914d; outline-offset: 3px; }
.ops-shell { max-width: 1480px; min-height: 100vh; margin: 0 auto; padding: 0 5.6%; }
.ops-topbar { min-height: 65px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d4ddd5; }
.ops-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-decoration: none; }
.ops-brand > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.ops-brand b { color: #748178; font-size: 8px; font-weight: 400; }
.ops-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 3px; background: var(--green-dark); color: white; font-size: 10px; letter-spacing: -.4px; }
.topbar-status { display: flex; align-items: center; gap: 9px; color: #607168; font-family: var(--mono); font-size: 8px; letter-spacing: .65px; }
.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #5b9777; box-shadow: 0 0 0 3px #daeadd; }
.topbar-status a { margin-left: 13px; color: #61766a; text-decoration: none; }
.topbar-status a:hover { color: var(--green); text-decoration: underline; }
.ops-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; padding: 29px 0 22px; }
.ops-kicker, .section-kicker, .kpi-label, .allocation-summary span, .response-heading, .intel-block > span, .severity-pill, .company-status, .log-count, .runway > span, .runway b, .ops-footer, .summary-grid span, .after-action-note strong { font-family: var(--mono); font-size: 8px; letter-spacing: .8px; }
.ops-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 8px; color: #758178; }
.ops-kicker span:first-child { color: var(--green); }
.separator { width: 18px; height: 1px; background: #98a69a; }
.ops-hero h1 { margin: 0; font-family: var(--display); font-size: clamp(34px, 4vw, 47px); font-weight: 500; line-height: 1.05; }
.ops-hero h1 em { color: var(--green); font-weight: 500; }
.ops-hero p:last-child { max-width: 620px; margin: 8px 0 0; color: #69756e; font-size: 11px; line-height: 1.65; }
.company-id { display: flex; align-items: center; gap: 9px; min-width: 194px; padding: 9px 11px; border: 1px solid #d7dfd8; border-radius: 3px; background: rgba(255, 255, 255, .58); }
.company-symbol { width: 29px; height: 29px; display: grid; place-items: center; background: #dfe8da; color: #345944; font-family: var(--display); font-size: 16px; }
.company-id > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.company-id b { font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .35px; }
.company-id small { color: #748078; font-size: 8px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 11px; }
.kpi { min-height: 82px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, .8); }
.kpi-label { color: #78847b; font-size: 7px; }
.kpi > strong { font-family: var(--display); font-size: 23px; font-weight: 500; line-height: 1; }
.kpi > strong small { color: #718077; font-family: var(--mono); font-size: 8px; font-weight: 400; }
.kpi > small { color: #758179; font-size: 8px; }
.kpi-meter { height: 4px; overflow: hidden; border-radius: 5px; background: #e6ebe5; }
.kpi-meter span { width: 100%; height: 100%; display: block; background: #50866a; transition: width .3s ease; }
.posture-meter span { background: #bd9147; }
.simulation-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(265px, .75fr); align-items: start; gap: 11px; }
.primary-column { display: grid; gap: 11px; min-width: 0; }
.panel { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, .9); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.section-kicker { margin: 0 0 5px; color: #77837a; font-size: 7px; }
.panel-heading h2 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 500; }
.period-chip { flex: 0 0 auto; padding: 7px 8px; border: 1px solid #d5e0d7; border-radius: 2px; background: #f1f6f0; color: #3c7255; font-family: var(--mono); font-size: 8px; letter-spacing: .5px; }
.panel-intro { margin: 7px 0 12px; color: #707c74; font-size: 9px; line-height: 1.5; }
.allocation-summary { display: grid; grid-template-columns: auto minmax(30px, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #e4e9e3; border-radius: 2px; background: #f7f9f6; }
.allocation-summary > div:not(.summary-progress) { display: flex; flex-direction: column; gap: 3px; }
.allocation-summary span { color: #829087; font-size: 6px; }
.allocation-summary strong { font-family: var(--mono); font-size: 10px; font-weight: 500; }
.summary-progress { height: 4px; overflow: hidden; border-radius: 4px; background: #e3eae3; }
.summary-progress span { width: 0; height: 100%; display: block; border-radius: inherit; background: #4e8a69; transition: width .2s ease; }
.defense-list { margin-top: 7px; }
.defense-row { display: grid; grid-template-columns: 32px minmax(120px, 1fr) minmax(100px, 126px); align-items: center; gap: 10px; min-height: 65px; padding: 8px 2px; border-bottom: 1px solid #e8ece7; }
.defense-row:last-child { border-bottom: 0; }
.defense-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 3px; }
.defense-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.training-icon { background: #e9f1e4; color: #648149; }
.firewall-icon { background: #edf0e2; color: #787d42; }
.edr-icon { background: #e4eff0; color: #477d7f; }
.backup-icon { background: #f4ecdf; color: #9b7546; }
.defense-copy { min-width: 0; }
.defense-title { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.defense-title label { color: #27362e; font-size: 10px; font-weight: 700; }
.defense-title span { color: #64816d; font-family: var(--mono); font-size: 8px; }
.defense-copy p { margin: 3px 0 5px; color: #818c84; font-size: 8px; }
.layer-meter { height: 3px; overflow: hidden; border-radius: 4px; background: #e8ede8; }
.layer-meter span { width: 0; height: 100%; display: block; background: #568a68; transition: width .3s ease; }
.budget-input-wrap { height: 31px; display: flex; align-items: center; gap: 3px; padding: 0 7px; border: 1px solid #dbe3dc; border-radius: 2px; background: #fff; }
.budget-input-wrap:focus-within { border-color: #648b6f; box-shadow: 0 0 0 2px rgba(72, 123, 88, .1); }
.budget-input-wrap > span { color: #7b897f; font-family: var(--mono); font-size: 9px; }
.budget-input { width: 100%; min-width: 0; padding: 5px 0; border: 0; outline: 0; background: transparent; color: #26362c; font-family: var(--mono); font-size: 10px; text-align: right; }
.budget-input::-webkit-inner-spin-button, .budget-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.budget-input[type=number] { appearance: textfield; }
.allocation-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid #e7ece7; }
.allocation-footer p { margin: 0; color: #7c8980; font-size: 8px; line-height: 1.5; }
.allocation-footer p.is-warning { color: #a4483e; }
.primary-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 11px; border: 0; border-radius: 2px; background: var(--green-dark); color: #fff; cursor: pointer; font-size: 9px; font-weight: 700; transition: background .18s ease, transform .18s ease; }
.primary-button:hover:not(:disabled) { transform: translateY(-1px); background: #285a43; }
.primary-button:disabled { background: #aab7ad; cursor: not-allowed; }
.primary-button span { color: #c2d580; font-size: 14px; }
.architecture-panel { padding-bottom: 11px; }
.architecture-note { display: inline-flex; align-items: center; gap: 7px; color: #76837a; font-family: var(--mono); font-size: 7px; }
.architecture-note .status-dot { width: 5px; height: 5px; }
.architecture-map { margin-top: 12px; overflow: hidden; border: 1px solid #e4e9e4; border-radius: 2px; background: linear-gradient(90deg, #f8faf7, #f1f5ee); }
.architecture-map svg { width: 100%; height: auto; display: block; }
.network-line { fill: none; stroke: #92a59a; stroke-width: 2; stroke-dasharray: 4 4; }
.backup-line { stroke: #b99a67; }
.network-node { stroke-width: 1; }
.staff-node { fill: #345844; stroke: #345844; }
.control-node { fill: #e5ede3; stroke: #9ab29e; }
.backup-node { fill: #f3ead8; stroke: #c2a674; }
.small-node { fill: #f4f7f1; stroke: #acb9ac; }
.architecture-map text { fill: #354e3d; font-family: var(--mono); font-size: 9px; text-anchor: middle; }
.architecture-map .staff-node + text { fill: white; }
.architecture-caption { margin: 8px 0 0; color: #78847c; font-size: 8px; line-height: 1.5; }
.operations-panel { min-height: 100%; }
.log-count { color: #78877c; font-size: 7px; white-space: nowrap; }
.company-status { display: flex; align-items: center; gap: 8px; margin: 12px 0 9px; padding: 8px; border: 1px solid #dfe8df; background: #f4f8f2; color: #52715d; font-size: 7px; }
.company-status .status-dot { width: 5px; height: 5px; }
.company-status.is-alert { border-color: #ebd7c1; background: #fbf3e8; color: #996937; }
.event-log { max-height: 330px; display: flex; flex-direction: column; gap: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.event-log li { position: relative; padding: 9px 2px 9px 14px; border-bottom: 1px solid #edf0ec; color: #657269; font-size: 8px; line-height: 1.55; }
.event-log li::before { content: ''; position: absolute; top: 13px; left: 1px; width: 5px; height: 5px; border-radius: 50%; background: #88a08d; }
.event-log li.is-incident::before { background: #c8914f; }
.event-log li.is-critical::before { background: #bf5b4d; }
.event-log time { display: block; margin-bottom: 3px; color: #87948b; font-family: var(--mono); font-size: 7px; }
.event-log .log-empty { padding-left: 2px; color: #869289; }
.event-log .log-empty::before { display: none; }
.operations-note { margin-top: 16px; padding: 11px; border-left: 2px solid #799268; background: #f2f5eb; }
.operations-note .section-kicker { color: #758663; }
.operations-note p:last-child { margin: 0; color: #66705f; font-size: 9px; line-height: 1.6; }
.runway { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 18px; color: #829087; }
.runway > span, .runway b { font-size: 7px; font-weight: 400; }
.runway b { color: #526b5b; white-space: nowrap; }
.runway-track { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.runway-track i { height: 4px; border-radius: 3px; background: #e1e8e0; }
.runway-track i.is-current { background: #548365; }
.runway-track i.is-done { background: #a4bb87; }
.ops-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 15px 0; border-top: 1px solid #d4ddd5; color: #7b8980; font-size: 7px; }
.ops-footer i { width: 5px; height: 5px; display: inline-block; margin: 0 6px; border-radius: 50%; background: #779e7c; vertical-align: 1px; }
.dialog-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: rgba(21, 35, 29, .57); backdrop-filter: blur(4px); animation: backdrop-in .18s ease both; }
.incident-dialog { width: min(100%, 650px); max-height: calc(100vh - 40px); overflow-y: auto; padding: 23px; border: 1px solid #d1dcd2; border-radius: 3px; background: #f9fbf7; box-shadow: 0 20px 60px rgba(11, 28, 20, .22); animation: dialog-in .25s ease both; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dialog-head .section-kicker { color: #4f735c; }
.severity-pill { padding: 6px 8px; border: 1px solid #edd8bd; border-radius: 2px; background: var(--amber-soft); color: #986b35; font-size: 7px; }
.severity-pill.is-critical { border-color: #e9c6be; background: var(--red-soft); color: #a34d43; }
.incident-dialog h2 { margin: 10px 0 7px; font-family: var(--display); font-size: 28px; font-weight: 500; line-height: 1.15; }
.incident-summary { margin: 0; color: #647169; font-size: 10px; line-height: 1.65; }
.intel-block { margin-top: 14px; padding: 10px 12px; border-left: 2px solid #c49750; background: #f6f2e9; }
.intel-block > span { color: #957846; font-size: 7px; }
.intel-block p { margin: 4px 0 0; color: #655e4e; font-size: 9px; line-height: 1.55; }
.response-heading { display: flex; justify-content: space-between; margin: 16px 0 7px; color: #79867d; font-size: 7px; }
.response-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.protocol-option { min-height: 65px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 9px 10px; border: 1px solid #dfe6de; border-radius: 2px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; transition: border-color .16s ease, background .16s ease; }
.protocol-option:hover { border-color: #92aa94; }
.protocol-option[aria-pressed="true"] { border-color: #4c8060; background: #edf4ea; box-shadow: inset 3px 0 #4b805d; }
.protocol-option strong { font-size: 9px; }
.protocol-option span { color: #78847b; font-size: 8px; line-height: 1.45; }
.response-result { margin-top: 10px; padding: 10px; border-left: 2px solid #b88749; background: #f6f0e5; }
.response-result.is-success { border-color: #548461; background: #edf4ea; }
.response-result strong { color: #4f6b56; font-size: 9px; }
.response-result.is-warning strong { color: #966b35; }
.response-result p { margin: 4px 0 0; color: #69756c; font-size: 8px; line-height: 1.55; }
.dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.dialog-actions > span { color: #859087; font-size: 8px; }
.dialog-actions .primary-button { flex: 0 0 auto; }
.summary-dialog { width: min(100%, 560px); }
.summary-grade { display: inline-block; margin: 13px 0 2px; padding: 6px 8px; border: 1px solid #d5e1d1; background: #edf4e8; color: #4d7455; font-family: var(--mono); font-size: 8px; letter-spacing: .7px; }
.summary-grade.is-critical { border-color: #e7cec5; background: #fbefea; color: #a34d43; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; padding: 12px 0; border-top: 1px solid #dfe6de; border-bottom: 1px solid #dfe6de; }
.summary-grid div { display: flex; flex-direction: column; gap: 4px; }
.summary-grid b { font-family: var(--display); font-size: 19px; font-weight: 500; }
.summary-grid span { color: #7e8a80; font-size: 6px; }
.after-action-note { margin: 12px 0 15px; padding: 11px; background: #edf2e9; }
.after-action-note strong { color: #68805e; font-size: 7px; }
.after-action-note p { margin: 5px 0 0; color: #687265; font-size: 9px; line-height: 1.6; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 920px) { .ops-shell { padding: 0 3.4%; } .simulation-grid { grid-template-columns: minmax(0, 1.35fr) minmax(235px, .8fr); gap: 8px; } .panel { padding: 12px; } .defense-row { grid-template-columns: 28px minmax(100px, 1fr) minmax(88px, 112px); gap: 7px; } .company-id { min-width: 178px; } }
@media (max-width: 700px) { .ops-shell { padding: 0 15px; } .ops-topbar { min-height: 58px; } .topbar-status { max-width: 155px; flex-wrap: wrap; justify-content: flex-end; font-size: 6px; } .topbar-status a { margin-left: 0; } .ops-hero { align-items: flex-start; flex-direction: column; gap: 13px; padding: 24px 0 17px; } .ops-hero h1 { font-size: 37px; } .company-id { min-width: 0; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { min-height: 77px; padding: 9px; } .kpi > strong { font-size: 21px; } .simulation-grid { grid-template-columns: 1fr; } .allocation-summary { grid-template-columns: auto minmax(20px, 1fr) auto; gap: 7px; } .allocation-summary span { font-size: 5px; } .allocation-summary strong { font-size: 9px; } .defense-row { grid-template-columns: 28px minmax(0, 1fr) 95px; gap: 7px; } .defense-copy p { font-size: 7px; } .defense-title label { font-size: 9px; } .budget-input-wrap { height: 29px; padding: 0 5px; } .budget-input { font-size: 9px; } .allocation-footer { align-items: flex-start; } .allocation-footer p { max-width: 52%; } .architecture-map svg { min-width: 550px; } .architecture-map { overflow-x: auto; } .operations-panel { min-height: 0; } .event-log { max-height: 230px; } .dialog-backdrop { align-items: end; padding: 10px; } .incident-dialog { max-height: calc(100vh - 20px); padding: 17px; } .incident-dialog h2 { font-size: 24px; } .response-options { grid-template-columns: 1fr; } .protocol-option { min-height: 54px; } .dialog-actions { align-items: flex-start; flex-direction: column; } .dialog-actions .primary-button { width: 100%; } .summary-grid { grid-template-columns: repeat(2, 1fr); row-gap: 12px; } .ops-footer { flex-direction: column; gap: 7px; } }
@media (max-width: 380px) { .ops-shell { padding: 0 11px; } .defense-row { grid-template-columns: 26px minmax(0, 1fr) 82px; gap: 5px; } .defense-icon { width: 25px; height: 25px; } .defense-title label { font-size: 8px; } .defense-copy p { font-size: 6px; } .panel-heading h2 { font-size: 17px; } .period-chip { font-size: 7px; } .incident-dialog { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }