:root{
  --bg:#0c0c0d; --surf:#17171a; --border:#2d2d31;
  --text:#f2efe9; --sub:#a9a6a0; --muted:#716e68;
  --gold:#FFB81C; --bronze:#C8A951;
  --ok:#3ecf8e; --down:#ff5a5a; --unknown:#6f6d68;
  --font:'Oswald','Public Sans',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;margin:0;min-height:100vh}
a{color:inherit;text-decoration:none}

.shell{display:flex;min-height:100vh}
.content-col{display:flex;flex-direction:column;flex:1;min-width:0}

/* ── RAIL ─────────────────────────────────────────────────────────────
   Home plus the two host-group categories (CasaOS, NAS) — runs the page's
   full height on the far left, same footprint as the Fernstone Portal's
   own rail, just far fewer items. */
.rail{width:96px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;padding:18px 8px;border-right:1px solid var(--border)}
.rail-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:9px;color:var(--sub);border:1px solid transparent;text-align:center}
.rail-item.active{color:var(--gold);border-color:var(--gold);background:var(--surf)}
.rail-item:hover{background:var(--surf);color:var(--text)}
.rail-icon{display:flex;color:inherit}
.rail-icon svg{width:24px;height:24px}
.rail-label{font-family:var(--font);font-size:.72rem;font-weight:600;letter-spacing:.02em}

/* ── TOP ROW (per-category app buttons) ──────────────────────────────
   Visible only once a category is selected — shows that group's services
   as compact buttons. Addresses live in each button's title tooltip only,
   to keep this row dense; the full detail used to live on a hero-card
   grid, now replaced by this row + the pane on the right. */
.top-row{display:flex;gap:8px;flex-wrap:wrap;padding:14px 24px;border-bottom:1px solid var(--border);background:var(--surf)}
.toprow-item{position:relative;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:9px;border:1px solid var(--border);background:var(--bg);transition:border-color .15s,transform .15s}
.toprow-item:hover{border-color:var(--gold);transform:translateY(-1px)}
.toprow-item.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.toprow-icon{width:20px;height:20px;border-radius:5px;background-color:#000;background-size:contain;background-position:center;background-repeat:no-repeat;flex-shrink:0}
.toprow-name{font-family:var(--font);font-size:.78rem;font-weight:600}

.main{flex:1;min-width:0;padding:28px}

/* ── HOME ─────────────────────────────────────────────────────────────
   Default view on load and via the rail's Home item: category health at
   a glance, plus a small hand-authored news board. */
#home-view[hidden]{display:none}
.home-title{font-family:var(--font);font-weight:700;letter-spacing:.01em;margin:0 0 20px}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.badge{font-family:var(--font);font-size:.72rem;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surf)}
.badge.down{border-color:var(--down);color:var(--down)}

.news-board{background:var(--surf);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.news-item{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.news-item:last-child{border-bottom:none}
.news-dot{flex-shrink:0;width:9px;height:9px;border-radius:50%;margin-top:5px}
.news-dot-info{background:var(--ok)}
.news-dot-warning{background:var(--gold);box-shadow:0 0 5px rgba(255,184,28,.5)}
.news-dot-critical{background:var(--down);box-shadow:0 0 5px rgba(255,90,90,.5)}
.news-item-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.news-date{font-family:var(--font);font-size:.62rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.news-text{font-size:.8rem;color:var(--text);line-height:1.5}

/* ── PLACEHOLDER (category selected, nothing opened yet) ─────────────── */
.placeholder{color:var(--sub);font-family:var(--font);font-size:.95rem;padding:40px 0;text-align:center}
.placeholder[hidden]{display:none}

/* ── STATUS DOT (inline in a top-row button, not absolutely positioned —
   the old full hero-card tile pinned this to a corner; the compact button
   just flows it inline before the icon) ── */
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.status-dot.ok{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.status-dot.down{background:var(--down)}
.status-dot.unknown{background:var(--unknown)}

/* ── PANE ─────────────────────────────────────────────────────────────
   No dedicated close control — closing a pane is a side effect of rail
   navigation (Home or a category), since the top row is always present
   and already shows what to click next. Overhead above the pane: .main's
   own padding (28+28) and the top-row (~64px, always present) —
   approximate, may need a follow-up tweak once seen live, same as every
   pane-height calc elsewhere in this codebase. */
#pane-frame{width:100%;height:calc(100vh - 128px);border:none;border-radius:10px;display:block}
#pane-frame[hidden]{display:none}