.rodms-demo { font-family: var(--font-sans); }
.rodms-demo [hidden] { display: none !important; }
.rodms-demo button { font: inherit; cursor: pointer; }
.rodms-demo button:focus-visible { outline: 2px solid #267c68; outline-offset: 2px; }

.rodms-demo-topbar { height: 72px; gap: 22px; padding-right: 22px; }
.rodms-demo-topbar img { height: 72px; }
.rodms-demo-branch { min-width: 240px; }
.rodms-demo-body { grid-template-columns: 176px minmax(0, 1fr); min-height: 640px; }
.rodms-demo-sidebar { padding: 17px 11px; background: #fcfdfd; }
.rodms-demo-nav-item, .rodms-demo-nav-sub { width: 100%; border: 0; background: transparent; color: #536574; text-align: left; font-size: 12px; }
.rodms-demo-nav-item { border-radius: 4px; }
.rodms-demo-nav-sub { display: block; margin: 0 0 0 24px; width: calc(100% - 24px); }
.rodms-demo-nav-item:hover, .rodms-demo-nav-sub:hover { color: #20775f; background: #eef7f3; }
.rodms-demo-nav-item.is-current, .rodms-demo-nav-sub.is-current { color: #175f4d; background: #e8f3ee; font-weight: 700; }
.rodms-demo-nav-item.is-current { box-shadow: inset 3px 0 #3b9279; }
.rodms-demo-nav-group { display: block; margin: 13px 0 3px; padding: 13px 13px 7px; }
.rodms-demo-main { min-width: 0; padding: 20px 21px 26px; background: #f5f7fa; }
.rodms-demo-heading-row { align-items: center; margin-bottom: 14px; padding: 16px 18px; border: 1px solid #e1e7ec; border-radius: 5px; background: #fff; }
.rodms-demo-breadcrumb { margin-bottom: 7px; }
.rodms-demo-heading-row h3 { font-size: 23px; }
.rodms-demo-heading-row p { line-height: 1.35; }
.rodms-demo-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }
.rodms-demo-mode { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 6px 10px; border-radius: 30px; color: #24775e; background: #e7f4ec; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; }
.rodms-demo-mode::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rodms-demo-mode::after { content: ""; position: absolute; inset: -3px; border: 1px solid currentColor; border-radius: inherit; opacity: 0; pointer-events: none; }
.rodms-demo-mode.is-changing::before { animation: rodms-mode-dot .7s ease-out; }
.rodms-demo-mode.is-changing::after { animation: rodms-mode-ring .7s ease-out; }
@keyframes rodms-mode-dot { 35% { transform: scale(1.65); } }
@keyframes rodms-mode-ring { 0% { opacity: .45; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.14); } }
.rodms-demo-mode.is-process { color: #2b6093; background: #e7f0fa; }
.rodms-demo-mode.is-idle { color: #627182; background: #ecf0f4; }
.rodms-demo-mode.is-alert { color: #ad503f; background: #fbede9; }
.rodms-demo-live { background: #e8f5ee; }
.rodms-demo-device-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin: 0 0 16px; color: #5c6874; font-size: 11px; }
.rodms-demo-device-bar > div { display: flex; flex-direction: column; gap: 3px; min-width: 250px; padding: 8px 13px; border: 1px solid #bdcbd2; border-radius: 4px; background: #fff; }
.rodms-demo-device-bar > div strong { color: #263543; font-size: 12px; font-weight: 600; }
.rodms-demo-device-bar > div strong span { margin: 0 4px; color: #a7b1bb; }
.rodms-demo-device-model { padding: 11px 13px; border: 1px solid #e2e8ec; border-radius: 4px; background: #fff; white-space: nowrap; }
.rodms-demo-updated { margin-left: auto; white-space: nowrap; }
.rodms-demo-updated i { display: inline-block; width: 7px; height: 7px; margin: 0 5px 0 8px; border-radius: 50%; background: #43a87e; }
.rodms-demo-tabs { display: flex; gap: 0; margin: 0; padding: 0 11px; overflow-x: auto; border: 1px solid #e2e9ed; border-bottom: 0; border-radius: 5px 5px 0 0; background: #fff; scrollbar-width: thin; scrollbar-color: #b4c8c1 transparent; }
.rodms-demo-tabs button { flex: none; min-height: 53px; padding: 12px 11px 9px; border: 0; border-bottom: 2px solid transparent; color: #263342; background: transparent; font-size: 11px; font-weight: 600; white-space: nowrap; }
.rodms-demo-tabs button:hover { color: #168468; background: #f4faf7; }
.rodms-demo-tabs button.is-current { color: #168468; border-bottom-color: #168468; font-weight: 700; }
.rodms-demo-panel { min-height: 400px; padding: 16px; border: 1px solid #e2e9ed; border-radius: 0 0 5px 5px; background: #fff; }
.rodms-demo[data-page]:not([data-page="detail"]) .rodms-demo-panel { border-radius: 5px; }
.rodms-demo-loading { padding: 24px; color: #7b8994; font-size: 12px; }
.rodms-demo-section-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin: 0 0 15px; }
.rodms-demo-section-head h4 { margin: 0 0 4px; color: #243443; font-size: 15px; }
.rodms-demo-section-head p { margin: 0; color: #7e8a96; font-size: 11px; line-height: 1.4; }
.rodms-demo-section-head > span { flex: none; padding: 4px 7px; border: 1px solid #bcd8cd; border-radius: 3px; color: #24735e; font-size: 10px; font-weight: 700; }
.rodms-demo-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rodms-demo-kpis-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rodms-demo-kpis-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rodms-demo-metric { display: flex; flex-direction: column; min-width: 0; min-height: 112px; padding: 15px; border: 1px solid #e6ebef; border-radius: 5px; background: #f4f6f9; }
.rodms-demo-metric strong { color: #17283e; font-size: clamp(18px, 2vw, 25px); font-weight: 700; white-space: nowrap; }
.rodms-demo-metric span { margin-top: 5px; color: #3f5060; font-size: 11px; font-weight: 650; line-height: 1.3; }
.rodms-demo-metric small { margin-top: auto; padding-top: 8px; color: #91a0ab; font-size: 10px; }
.rodms-demo-service-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rodms-demo-service-row .rodms-demo-metric { min-height: 85px; background: #fcf7e9; }
.rodms-demo-service-row .rodms-demo-metric + .rodms-demo-metric { background: #edf5fa; }
.rodms-demo-secondary-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rodms-demo-secondary-row .rodms-demo-metric { min-height: 85px; background: #f2f8f6; }
.rodms-demo-info-grid, .rodms-demo-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 11px; margin-top: 11px; }
.rodms-demo-card { min-width: 0; margin-top: 11px; padding: 17px 18px; border: 1px solid #e2e8ed; border-radius: 5px; background: #f9fbfc; }
.rodms-demo-info-grid .rodms-demo-card, .rodms-demo-chart-grid .rodms-demo-card { margin-top: 0; }
.rodms-demo-card h4 { margin: 0 0 12px; color: #283b4a; font-size: 12px; font-weight: 750; }
.rodms-demo-field { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid #e5eaed; font-size: 11px; }
.rodms-demo-field span { color: #6b7985; }
.rodms-demo-field strong { color: #263a4a; font-size: 11px; font-weight: 700; text-align: right; }
.rodms-demo-field strong.is-good { color: #23785f; }
.rodms-demo-field strong.is-process { color: #2b6093; }
.rodms-demo-field strong.is-idle { color: #627182; }
.rodms-demo-field strong.is-alert { color: #ad503f; }
.rodms-demo-note { margin: 14px 2px 0; color: #788a97; font-size: 11px; line-height: 1.45; }
.rodms-demo-table-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #b4c8c1 transparent; }
.rodms-demo-table { width: 100%; min-width: 560px; border-collapse: collapse; color: #364755; font-size: 11px; text-align: left; }
.rodms-demo-table th { padding: 10px; border-bottom: 1px solid #d9e2e7; color: #7b8994; font-size: 10px; font-weight: 700; white-space: nowrap; }
.rodms-demo-table td { padding: 11px 10px; border-bottom: 1px solid #e6ecef; line-height: 1.35; }
.rodms-demo-table tr:last-child td { border-bottom: 0; }
.rodms-demo-table tbody tr:hover { background: #f4f9f6; }
.rodms-demo-table-hint { display: none; margin: 8px 0 0; color: #8795a0; font-size: 10px; }
.rodms-demo-link-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 11px; border: 1px solid #9ecab9; border-radius: 4px; color: #187056; background: #eff8f4; font-size: 11px; font-weight: 750; white-space: nowrap; }
.rodms-demo-link-button:hover { background: #e1f1e8; }
.rodms-demo-table .rodms-demo-link-button { margin: 0; }
.rodms-demo-empty { padding: 25px 12px 31px; color: #3f5361; text-align: center; }
.rodms-demo-empty strong { color: #26745c; font-size: 15px; }
.rodms-demo-empty p { max-width: 420px; margin: 9px auto 0; color: #71818f; font-size: 11px; line-height: 1.5; }
.rodms-demo-chart-card { background: #fff; }
.rodms-report-bar { display: grid; grid-template-columns: minmax(82px, 1fr) minmax(80px, 1.5fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #e5ecee; color: #536575; font-size: 11px; }
.rodms-report-bar > strong { color: #243a51; font-size: 11px; white-space: nowrap; }
.rodms-report-track { height: 9px; overflow: hidden; border-radius: 6px; background: #e7eef2; }
.rodms-report-track i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: #4f8dca; }
.rodms-report-track i.is-green { background: #36a081; }
.rodms-report-track i.is-amber { background: #c78e5e; }
.rodms-report-track i.is-purple { background: #9479b9; }
.rodms-demo-card-subtitle { margin: -7px 0 10px; color: #82909a; font-size: 10px; }
.rodms-demo-chart-large { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 5px; height: 166px; }
.rodms-demo-chart-axis { display: flex; flex-direction: column; justify-content: space-between; padding: 10px 0; color: #a0acb5; font-size: 9px; line-height: 1; }
.rodms-demo-chart-large svg { width: 100%; height: 100%; }
.rodms-demo-chart-large .chart-grid { fill: none; stroke: #e4ebef; stroke-width: 1; }
.rodms-demo-chart-large .chart-line { fill: none; stroke: #2877d4; stroke-width: 3; vector-effect: non-scaling-stroke; }
.rodms-demo-chart-large .chart-line.is-green { stroke: #2c9476; }
.rodms-demo-chart-card .rodms-demo-chart-times { margin-left: 47px; }
.rodms-demo-timeline { margin: 0; padding: 0; list-style: none; }
.rodms-demo-timeline li { display: grid; grid-template-columns: 42px 160px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid #e7edf0; color: #60717e; font-size: 11px; }
.rodms-demo-timeline time { color: #85949e; }
.rodms-demo-timeline strong { color: #2a4658; }
.rodms-demo-state-share { display: flex; gap: 5px; margin-top: 12px; overflow: hidden; border-radius: 4px; }
.rodms-demo-state-share span { display: flex; justify-content: space-between; gap: 7px; min-width: 0; padding: 10px 11px; color: #fff; background: #3b8e76; font-size: 10px; white-space: nowrap; }
.rodms-demo-state-share span:nth-child(2) { background: #7194b0; }
.rodms-demo-state-share span:nth-child(3) { background: #b98257; }
.rodms-demo-state-share span:first-child { flex: 68; }
.rodms-demo-state-share span:nth-child(2) { flex: 25; }
.rodms-demo-state-share span:nth-child(3) { flex: 7; }
.rodms-demo-io-row { display: grid; grid-template-columns: 165px minmax(0, 1fr) 75px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #e6ecef; color: #536575; font-size: 11px; }
.rodms-demo-io-track { height: 12px; overflow: hidden; border-radius: 2px; background: #e4e8ec; }
.rodms-demo-io-track i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #5d8fc6 0 24px, #8eb2dc 24px 29px); }
.rodms-demo-io-row strong { color: #8b98a2; font-size: 10px; text-align: right; }
.rodms-demo-io-row strong.is-on { color: #1d7b61; }
.rodms-calculator-link { display: grid; grid-template-columns: minmax(230px, 43%) minmax(0, 1fr); align-items: stretch; min-height: 370px; overflow: hidden; border: 1px solid #dce8e5; border-radius: 11px; color: inherit; background: linear-gradient(130deg, #f0f5f8 0%, #f8fbfc 52%, #e9f4ee 100%); box-shadow: 0 18px 45px rgba(23, 49, 62, .08); }
.rodms-calculator-visual { display: grid; place-items: center; min-width: 0; padding: 16px; background: radial-gradient(circle at 55% 45%, #fff 0%, #e9eef2 73%); }
.rodms-calculator-visual img { display: block; width: 100%; max-width: 375px; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 9px; }
.rodms-calculator-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: clamp(24px, 4vw, 50px); }
.rodms-calculator-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 17px; color: #2c806d; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rodms-calculator-eyebrow span { font-size: 15px; letter-spacing: 0; }
.rodms-calculator-copy > strong { color: #162b43; font-size: clamp(28px, 3.3vw, 45px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.rodms-calculator-description { max-width: 360px; margin-top: 16px; color: #526778; font-size: clamp(13px, 1.3vw, 16px); line-height: 1.55; }
.rodms-calculator-access { max-width: 360px; margin-top: 13px; color: #526778; font-size: 11px; line-height: 1.5; }
.rodms-calculator-cta { display: inline-flex; align-items: center; gap: 16px; margin-top: 31px; padding: 13px 17px; border-radius: 6px; color: #fff; background: #207e69; font-size: 12px; font-weight: 750; box-shadow: 0 8px 22px rgba(24, 110, 87, .18); transition: background .2s ease; }
.rodms-calculator-cta:hover { background: #145e4e; }
.rodms-calculator-cta:focus-visible, .rodms-calculator-alternative:focus-visible { outline: 3px solid #267c68; outline-offset: 3px; }
.rodms-calculator-cta span { font-size: 16px; }
.rodms-calculator-domain { margin-top: 13px; color: #7b8c96; font-size: 10px; }
.rodms-calculator-alternative { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; color: #207e69; font-size: 12px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.rodms-calculator-alternative:hover { color: #145e4e; }
.rodms-demo figcaption { font-size: 11px; }

@media (max-width: 1100px) {
  .rodms-demo-body { grid-template-columns: 150px minmax(0, 1fr); }
  .rodms-demo-main { padding-inline: 15px; }
  .rodms-demo-tabs button { padding-inline: 9px; }
  .rodms-demo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .rodms-demo-topbar { height: 62px; }
  .rodms-demo-topbar img { width: 129px; height: 62px; }
  .rodms-demo-body { display: block; }
  .rodms-demo-sidebar { display: flex; gap: 4px; align-items: stretch; padding: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #e1e8ec; white-space: nowrap; scrollbar-width: thin; }
  .rodms-demo-nav-group { display: none; }
  .rodms-demo-nav-item, .rodms-demo-nav-sub { flex: none; width: auto; margin: 0; padding: 10px 11px; border: 0; border-radius: 4px; font-size: 11px; }
  .rodms-demo-nav-sub.is-current { padding-left: 11px; border: 0; box-shadow: inset 0 -2px #3b9279; }
  .rodms-demo-nav-icon { display: none; }
  .rodms-demo-main { padding: 12px; }
  .rodms-demo-heading-row { padding: 14px; }
  .rodms-demo-heading-row h3 { font-size: 21px; }
  .rodms-demo-badges { justify-content: flex-start; }
  .rodms-demo-device-bar > div { min-width: 100%; }
  .rodms-demo-device-model { padding: 7px 10px; }
  .rodms-demo-updated { margin-left: 0; }
  .rodms-demo-panel { padding: 12px; }
  .rodms-demo-tabs { padding-inline: 5px; }
  .rodms-demo-tabs button { min-height: 47px; }
  .rodms-demo-info-grid, .rodms-demo-chart-grid { grid-template-columns: 1fr; }
  .rodms-demo-metric { min-height: 103px; padding: 12px; }
  .rodms-demo-service-row .rodms-demo-metric { min-height: 95px; }
  .rodms-demo-secondary-row .rodms-demo-metric { min-height: 95px; }
  .rodms-demo-state-share { flex-wrap: wrap; }
  .rodms-demo-state-share span { flex: 1 1 auto !important; }
  .rodms-demo-io-row { grid-template-columns: 120px minmax(60px, 1fr); }
  .rodms-demo-io-row strong { grid-column: 2; text-align: left; }
  .rodms-demo-timeline li { grid-template-columns: 42px minmax(0, 1fr); }
  .rodms-demo-timeline li span { grid-column: 2; }
  .rodms-demo-table-hint { display: block; }
  .rodms-calculator-link { grid-template-columns: 1fr; }
  .rodms-calculator-visual { padding: 10px 20px; }
  .rodms-calculator-visual img { max-width: 310px; }
  .rodms-calculator-copy { padding: 20px 24px 27px; }
  .rodms-calculator-copy > strong { font-size: 31px; }
  .rodms-calculator-cta { margin-top: 22px; }
}

@media (max-width: 380px) {
  .rodms-demo-kpis { gap: 6px; }
  .rodms-demo-metric strong { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .rodms-demo-mode.is-changing::before, .rodms-demo-mode.is-changing::after { animation: none; }
}