/* ---------- Matrix theme (dark only). Status colors are FIXED from the validated dataviz palette: never tweak them. ---------- */
  :root {
    color-scheme: dark;
    --bg: #010503;
    --panel: rgba(4, 16, 8, .78);
    --panel-solid: #04100a;
    --line: rgba(0, 255, 65, .20);
    --line-strong: rgba(0, 255, 65, .42);
    --phos: #00ff41;            /* phosphor green: brand and "live" data */
    --phos-dim: #1f6b34;        /* dimmed phosphor: "inactive" segment */
    --ink: #c9f7d6;             /* primary text */
    --ink-2: #8fc9a3;           /* secondary text */
    --muted: #6da583;           /* labels / axes (>= 4.5:1 on the background) */
    --grid: rgba(0, 255, 65, .10);
    --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b;
    --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --glow: 0 0 6px rgba(0, 255, 65, .36), 0 0 16px rgba(0, 255, 65, .13);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--bg); }
  body {
    font-family: var(--mono); color: var(--ink); font-size: 16px; line-height: 1.45;
    min-height: 100vh; position: relative; overflow-x: hidden;
  }
  /* code rain: subtle, behind everything */
  #rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .13; pointer-events: none; }
  body.rain-off #rain { display: none; }
  /* CRT scanlines, barely noticeable */
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,.0) 0, rgba(0,0,0,.0) 2px, rgba(0,0,0,.16) 3px);
    opacity: .5;
  }
  body::before { /* vignette */
    content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  }
  main { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 22px 16px 60px; }

  /* ---------- header ---------- */
  header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
  h1 { margin: 0; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--phos); text-shadow: var(--glow); font-weight: 600; }
  h1 .caret { display: inline-block; width: .6em; height: 1em; background: var(--phos); margin-left: 6px; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; box-shadow: var(--glow); }
  @keyframes blink { 50% { opacity: 0; } }
  .meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 14px; letter-spacing: .06em; }
  .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 2px; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; background: var(--panel); }
  .pill.ok { color: var(--phos); } .pill.warning { color: var(--warning); border-color: var(--warning); } .pill.critical { color: var(--critical); border-color: var(--critical); }
  button.ghost { font: inherit; font-size: 14px; letter-spacing: .08em; color: var(--ink-2); background: transparent; border: 1px solid var(--line); padding: 5px 10px; cursor: pointer; text-transform: uppercase; }
  button.ghost:hover, button.ghost:focus-visible { color: var(--phos); border-color: var(--line-strong); outline: none; }

  /* ---------- grid and cards ---------- */
  .grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
  .card { grid-column: span 12; position: relative; background: var(--panel); border: 1px solid var(--line); padding: 16px 16px 14px; backdrop-filter: blur(2px); box-shadow: inset 0 0 30px rgba(0,255,65,.02); }
  .card::before, .card::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--phos); opacity: .8; }
  .card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
  .card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
  @media (min-width: 900px) { .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c3 { grid-column: span 3; } .c2 { grid-column: span 2; } }
  h2 { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
  h2::before { content: "> "; color: var(--phos); }

  /* ---------- alerts ---------- */
  #alerts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  #alerts li { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-left: 3px solid; background: rgba(255,255,255,.02); }
  #alerts li.critical { border-color: var(--critical); } #alerts li.warning { border-color: var(--warning); }
  .tag { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
  .tag.critical { color: #ff7b7b; } .tag.warning { color: var(--warning); } .tag.ok { color: var(--phos); }
  .allclear { color: var(--phos); }

  /* ---------- KPI ---------- */
  .kpi .label { color: var(--muted); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
  .kpi .value { font-size: 36px; line-height: 1.15; color: var(--phos); text-shadow: var(--glow); margin-top: 4px; font-weight: 500; }
  .kpi .value small { font-size: 16px; color: var(--ink-2); text-shadow: none; margin-left: 4px; }
  .kpi .sub { color: var(--ink-2); font-size: 14px; margin-top: 2px; }
  .kpi.warning .value { color: var(--warning); text-shadow: none; } .kpi.critical .value { color: #ff6b6b; text-shadow: none; }

  /* ---------- gauges (CPU / RAM / disk) ---------- */
  .gauge { margin: 0 0 14px; }
  .gauge .row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; letter-spacing: .04em; }
  .gauge .row b { font-weight: 500; color: var(--ink); }
  .track { height: 8px; background: var(--grid); position: relative; }
  .fill { height: 100%; background: var(--phos); box-shadow: 0 0 6px rgba(0,255,65,.32); transition: width .5s; }
  .fill.warning { background: var(--warning); box-shadow: none; } .fill.critical { background: var(--critical); box-shadow: none; }
  .foot { color: var(--muted); font-size: 14px; margin-top: 8px; }

  /* ---------- services ---------- */
  .svc { list-style: none; margin: 0; padding: 0; }
  .svc li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
  .svc li:last-child { border-bottom: 0; }
  .svc .name { flex: 1; } .svc .since { color: var(--muted); font-size: 13px; }
  svg.i { width: 16px; height: 16px; flex: none; }

  /* ---------- hotels ---------- */
  .seg { display: flex; gap: 2px; height: 26px; margin: 8px 0 8px; }
  .seg > div { min-width: 2px; position: relative; cursor: default; }
  .seg .a { background: var(--phos); box-shadow: 0 0 7px rgba(0,255,65,.3); } .seg .i { background: var(--phos-dim); }
  .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
  .legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
  table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  th { text-align: left; color: var(--muted); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
  td { padding: 5px 6px; border-bottom: 1px dashed rgba(0,255,65,.10); }
  td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
  .chip { font-size: 12.5px; padding: 1px 6px; border: 1px solid var(--line-strong); color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase; }
  .mini { height: 6px; background: var(--grid); display: flex; gap: 1px; min-width: 60px; }
  .mini .a { background: var(--phos); } .mini .i { background: var(--phos-dim); }
  .scroll { max-height: 250px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--phos-dim) transparent; }

  /* ---------- billing: reserved block ---------- */
  .todo { border: 1px dashed var(--line-strong); padding: 16px; color: var(--ink-2); }
  .todo b { color: var(--warning); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; }

  .err { color: #ff8d8d; font-size: 14px; }
  #tip { position: fixed; z-index: 20; pointer-events: none; background: #000; border: 1px solid var(--phos); color: var(--ink); padding: 6px 9px; font-size: 14px; display: none; box-shadow: var(--glow); max-width: 260px; }
  .sr { position: absolute; left: -9999px; }
  /* ---------- responsive ---------- */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100dvh; }
  main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(60px, env(safe-area-inset-bottom)); }
  .scroll { overflow-x: auto; }
  @media (min-width: 600px) and (max-width: 899px) { .c3 { grid-column: span 6; } }  /* tablet: 2 KPI cards per row */
  @media (max-width: 599px) {
    body { font-size: 16px; }
    main { padding-top: 14px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    header.top { gap: 10px; margin-bottom: 14px; }
    h1 { font-size: 18px; letter-spacing: .05em; width: 100%; }
    .meta { width: 100%; justify-content: space-between; gap: 8px; }
    #clock { display: none; }                       /* the phone already shows the time in its status bar */
    button.ghost { padding: 9px 12px; min-height: 40px; }   /* comfortable touch target */
    .pill { padding: 8px 10px; }
    .grid { gap: 10px; }
    .card { padding: 13px 12px 12px; }
    .c3 { grid-column: span 6; }                    /* KPIs: 2 per row */
    .kpi .value { font-size: 29px; }
    .kpi .label { letter-spacing: .1em; }
    #alerts li { flex-direction: column; gap: 2px; }
    .track { height: 10px; }                        /* thicker bars: easier to read at thumb size */
    .seg { height: 30px; }
    .legend { gap: 6px 14px; }
    td, th { padding: 7px 5px; }
    .scroll { max-height: 300px; }
    #countries th:last-child, #countries td:last-child { display: none; }   /* the proportion bar is unnecessary on small screens */
    #tip { max-width: 70vw; }
  }
  @media (max-width: 359px) { .c3 { grid-column: span 12; } }   /* very narrow screens: 1 KPI per row */

  @media (prefers-reduced-motion: reduce) { h1 .caret { animation: none; } .fill { transition: none; } }

  /* ---------- three-state hotel bar: in use (solid) / login only (hatched) / inactive (dim) ---------- */
  .seg .l { background: repeating-linear-gradient(135deg, var(--phos) 0 2px, transparent 2px 6px); border: 1px solid var(--phos); }
  .mini .l { background: repeating-linear-gradient(135deg, var(--phos) 0 2px, transparent 2px 5px); }
  .chip.on { border-color: var(--phos); color: var(--phos); }
  .chip.dim { color: var(--muted); border-color: var(--line); }
  td.name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- owner-only: access activity + control ---------- */
.who { color: var(--ink-2); font-size: 14px; letter-spacing: .06em; }
.who b { color: var(--phos); font-weight: 500; }
form.inline { margin: 0; display: inline; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--muted); }
.dot.on { background: var(--phos); box-shadow: 0 0 8px rgba(0,255,65,.6); }
.person { border: 1px solid var(--line); padding: 12px 14px; margin: 0 0 12px; background: rgba(0,255,65,.03); }
.person .who-line { font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.person .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 18px; font-size: 14.5px; color: var(--ink-2); }
.person .facts b { color: var(--ink); font-weight: 500; }
.chip.warn { border-color: var(--warning); color: var(--warning); }
.chip.bad { border-color: var(--critical); color: #ff8d8d; }
.ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cbtn { font: inherit; letter-spacing: .1em; text-transform: uppercase; padding: 13px 10px; min-height: 48px; cursor: pointer; background: transparent; border: 1px solid; }
.cbtn.stop, .cbtn.reboot { color: var(--warning); border-color: var(--warning); }
.cbtn.shutdown { color: #ff8d8d; border-color: var(--critical); background: rgba(208,59,59,.10); }
.cbtn.start { color: var(--phos); border-color: var(--phos); }
.cbtn:hover, .cbtn:focus-visible { filter: brightness(1.25); outline: none; }
.cbtn:disabled { opacity: .4; cursor: not-allowed; }
.banner { padding: 8px 12px; margin: 0 0 12px; border-left: 3px solid var(--warning); background: rgba(250,178,25,.07); color: var(--warning); font-size: 14px; }
.banner.live { border-color: var(--critical); background: rgba(208,59,59,.10); color: #ff9b9b; }
dialog#ctl { background: var(--panel-solid); color: var(--ink); border: 1px solid var(--line-strong); padding: 22px; width: min(480px, calc(100vw - 24px)); box-shadow: var(--glow); font-family: var(--mono); }
dialog#ctl::backdrop { background: rgba(0,0,0,.72); }
dialog#ctl h3 { margin: 0 0 8px; letter-spacing: .1em; text-transform: uppercase; }
dialog#ctl input { width: 100%; font: inherit; color: var(--ink); background: #000; border: 1px solid var(--line-strong); padding: 11px 12px; margin: 4px 0 12px; min-height: 44px; }
dialog#ctl .row2 { display: flex; gap: 10px; }
dialog#ctl .row2 button { flex: 1; }
.count { font-size: 35px; color: #ff8d8d; text-align: center; margin: 8px 0; }

/* ---------- health indicator (header) and section divider ---------- */
a.pill { text-decoration: none; max-width: 100%; }
a.pill:hover, a.pill:focus-visible { box-shadow: var(--glow); outline: none; }
.divider { grid-column: span 12; display: flex; align-items: center; gap: 14px; margin: 18px 0 2px; color: var(--muted); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; scroll-margin-top: 12px; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--line-strong); }
@media (max-width: 599px) { a.pill { white-space: normal; line-height: 1.3; } }