.demo-page { background: #f3f7fa; padding: 48px 0 90px; }
.demo-intro { max-width: 900px; }
.demo-intro h1 { color: #0a1d2f; font-size: clamp(2.2rem, 4.3vw, 3.8rem); line-height: 1.08; letter-spacing: -.04em; margin: 10px 0 14px; }
.demo-intro .lead { max-width: 800px; margin-bottom: 0; }
.demo-notice { display: inline-flex; align-items: center; gap: 10px; margin: 17px 0 24px; padding: 9px 14px; border: 1px solid #b7d4ea; border-radius: 999px; background: #e7f3fb; color: #174464; font-size: .88rem; font-weight: 650; }
.demo-notice::before { content: "●"; color: #1769e0; font-size: .75rem; }
.demo-picker { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.demo-choice { text-align: left; font: inherit; background: white; color: #102238; border: 1px solid #d6e2ea; border-radius: 13px; padding: 15px 18px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.demo-choice:hover, .demo-choice[aria-pressed="true"] { border-color: #1769e0; box-shadow: 0 8px 25px rgba(23,105,224,.11); }
.demo-choice[aria-pressed="true"] { border-width: 2px; padding: 14px 17px; }
.demo-choice:focus-visible, .scenario-button:focus-visible, .report-button:focus-visible { outline: 3px solid #2b7fff; outline-offset: 3px; }
.demo-choice small { display: block; color: #1769e0; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; font-size: .75rem; }
.demo-choice strong { display: block; font-size: 1.12rem; line-height: 1.3; margin: 4px 0; }
.demo-choice span { display: block; color: #536579; font-size: .86rem; line-height: 1.45; }
.demo-workspace { overflow: hidden; border: 1px solid #dbe5ec; border-radius: 20px; background: white; box-shadow: 0 24px 70px rgba(6,21,34,.08); }
.demo-workspace-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 26px; background: #0a1d2f; color: white; }
.demo-kicker { color: #53d4c6; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
.demo-workspace h2 { margin: 3px 0 2px; color: white; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.demo-workspace-head p { margin: 0; color: #c3d2df; font-size: .91rem; }
.demo-badge { flex: none; border: 1px solid #4b6680; border-radius: 99px; padding: 7px 12px; color: #dcecf5; font-size: .8rem; }
.scenario-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 26px; border-bottom: 1px solid #e2eaf0; background: #fafdff; }
.scenario-bar strong { margin-right: 8px; color: #2e4458; }
.scenario-bar > div { display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-button, .report-button { border: 1px solid #bfd2e0; border-radius: 8px; background: white; padding: 8px 13px; color: #18324b; font: inherit; font-size: .9rem; font-weight: 680; cursor: pointer; }
.scenario-button:hover, .report-button:hover { border-color: #1769e0; color: #1769e0; }
.scenario-button:disabled { cursor: not-allowed; opacity: .5; }
.scenario-button.primary { background: #1769e0; border-color: #1769e0; color: white; }
.scenario-button.primary:hover { background: #0e5dcc; }
.demo-body { padding: 24px 26px 28px; }
.monitor-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 19px; }
.metric { padding: 15px; border: 1px solid #dfe8ee; border-radius: 11px; background: #f8fafc; }
.metric span { display: block; color: #536579; font-size: .82rem; font-weight: 640; }
.metric strong { display: block; margin: 4px 0 1px; color: #0a1d2f; font-size: clamp(1.25rem,2.2vw,1.85rem); line-height: 1.2; }
.metric small { display: block; color: #66788a; font-size: .76rem; }
.workspace-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.85fr); gap: 17px; }
.workspace-stack { display: grid; gap: 16px; align-content: start; }
.dashboard-card { border: 1px solid #dfe8ee; border-radius: 13px; padding: 19px; min-width: 0; background: #fff; }
.dashboard-card h3 { margin: 0 0 14px; color: #102238; font-size: 1.08rem; }
.card-kicker { color: #1769e0; font-size: .75rem; font-weight: 780; text-transform: uppercase; letter-spacing: .1em; }
.station-list { display: grid; gap: 9px; }
.station { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e2ebf0; border-radius: 9px; }
.station strong, .station small { display: block; }
.station strong { color: #132b40; }
.station small { color: #63778a; font-size: .79rem; }
.state-pill { padding: 5px 9px; border-radius: 99px; font-size: .77rem; font-weight: 750; white-space: nowrap; }
.state-pill.running, .state-pill.approved { color: #176347; background: #e3f5ec; }
.state-pill.attention, .state-pill.pending { color: #8a540a; background: #fff2d9; }
.state-pill.stopped, .state-pill.duplicate { color: #a02932; background: #ffe7e7; }
.signal-bars { display: flex; align-items: end; gap: 5px; height: 69px; padding-top: 8px; border-bottom: 1px solid #bdd0dc; }
.signal-bars i { flex: 1; height: var(--bar-height); min-width: 4px; border-radius: 3px 3px 0 0; background: #87baf5; }
.signal-bars i.hot { background: #ef9a61; }
.signal-key { display: flex; justify-content: space-between; color: #6a7d8d; font-size: .75rem; margin-top: 5px; }
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.event-list li { padding-left: 13px; border-left: 3px solid #aac7dc; }
.event-list li.warn { border-color: #e78948; }
.event-list strong { color: #17324a; display: block; font-size: .89rem; }
.event-list span { color: #617589; display: block; font-size: .82rem; }
.alert-card { background: #f2f8fc; border-color: #bdd9e9; }
.alert-card.warning { background: #fff8ee; border-color: #edc898; }
.alert-card.critical { background: #fff1f1; border-color: #efb0b2; }
.alert-card p { color: #28465a; margin: 6px 0 12px; line-height: 1.5; }
.alert-card small, .detail-note { color: #617589; font-size: .81rem; line-height: 1.45; }
.trace { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 14px 0 0; }
.trace span { background: #e8f2fa; border: 1px solid #d5e6f1; color: #214866; border-radius: 99px; padding: 5px 9px; font-size: .76rem; font-weight: 650; }
.trace b { color: #7d99ad; font-size: .85rem; }
.record-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 16px; margin: 0; }
.record-grid div { padding-bottom: 9px; border-bottom: 1px solid #edf1f4; }
.record-grid dt { color: #6b7d8d; font-size: .78rem; }
.record-grid dd { margin: 1px 0 0; color: #163049; font-weight: 720; overflow-wrap: anywhere; }
.report-button { margin-top: 15px; }
.report-button:disabled { opacity: .5; cursor: not-allowed; }
.demo-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 23px 26px; border-top: 1px solid #e0e8ee; }
.demo-cta p { max-width: 640px; margin: 0; color: #536579; }
.demo-cta strong { color: #102238; }
@media (max-width: 900px) { .workspace-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .demo-picker { grid-template-columns: 1fr; } .demo-workspace-head, .demo-cta { flex-direction: column; align-items: flex-start; } .monitor-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .demo-page { padding: 38px 0 65px; } .demo-notice { border-radius: 12px; } .demo-workspace-head, .demo-body, .scenario-bar, .demo-cta { padding: 18px; } .dashboard-card { padding: 16px; } .record-grid { grid-template-columns: 1fr; } }
.app-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: end; gap: 13px; }
.app-form label { display: grid; gap: 5px; color: #385268; font-size: .86rem; font-weight: 680; }
.app-form input:not([type="checkbox"]), .app-form select, .inline-form select { width: 100%; min-height: 43px; border: 1px solid #bfcfdb; border-radius: 7px; padding: 8px 10px; background: #fff; color: #18324b; font: inherit; font-size: .95rem; }
.app-form input:focus-visible, .app-form select:focus-visible, .inline-form select:focus-visible { outline: 3px solid #8abcf7; outline-offset: 1px; }
.app-form button { min-height: 43px; }
.app-form .check-label { display: flex; align-items: center; gap: 8px; min-height: 43px; }
.app-form .check-label input { width: 19px; height: 19px; accent-color: #1769e0; }
.compact-form { grid-template-columns: repeat(2,minmax(0,1fr)) auto; }
.inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; margin-top: 15px; border-top: 1px solid #e2ebf0; padding-top: 15px; }
.inline-form label { width: 100%; color: #536579; font-size: .82rem; font-weight: 700; }
.inline-form select { width: auto; flex: 1; min-width: 160px; }
.incident-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 10px 0; border-top: 1px solid #e7edf2; }
.incident-row:first-child { border: 0; padding-top: 0; }
.incident-row strong { color: #17324a; }
.incident-row small { grid-column: 1 / -1; color: #65788a; line-height: 1.5; }
.roadmap { margin: 0; padding-left: 20px; color: #27445c; }
.roadmap li { padding: 5px 0; }
.estimate { margin: 17px 0 10px; padding: 14px; background: #fff; border: 1px solid #c9dfeb; border-radius: 9px; }
.estimate strong { display: block; color: #0b446b; font-size: 1.3rem; }
.estimate span { color: #536579; font-size: .83rem; }
.form-error { padding: 12px 15px; margin-bottom: 16px; border: 1px solid #e6adb0; border-radius: 8px; background: #fff0f1; color: #922630; font-weight: 650; }
@media (max-width: 760px) { .compact-form { grid-template-columns: 1fr 1fr; } .compact-form button { grid-column: 1 / -1; } }
@media (max-width: 600px) { .app-form, .compact-form { grid-template-columns: 1fr; } .compact-form button { grid-column: auto; } }