/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #070707;
  --card:    #0d0d0d;
  --border:  #380000;
  --red:     #cc1111;
  --red-hi:  #ff2233;
  --red-dim: #440000;
  --glow:    rgba(204,17,17,0.18);
  --text:    #e0e0e0;
  --muted:   #555;
  --green:   #00cc55;
  --yellow:  #ffaa00;
  --blue:    #2299ff;
  --font:    'SF Mono','Menlo','Fira Mono',monospace;
  --hdr:     46px;
  --act:     50px;
  --nav:     58px;
  --side:    198px;
}

html, body { width:100%; height:100%; background:var(--bg); color:var(--text);
  font-family:var(--font); overflow:hidden; -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%; touch-action:manipulation; user-select:none; }

body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px); }

/* ── Header ──────────────────────────────────────────────── */
#hdr { position:fixed; top:0; left:0; right:0;
  height:calc(var(--hdr) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  display:flex; align-items:center; justify-content:space-between;
  padding-left:14px; padding-right:14px;
  background:rgba(7,7,7,0.97);
  border-bottom:1px solid var(--border);
  box-shadow:0 3px 14px rgba(204,17,17,0.08); z-index:200; }

#logo { font-size:13px; font-weight:bold; letter-spacing:4px; flex-shrink:0;
  border-bottom:1px solid var(--border); padding-bottom:2px; }
.red { color:var(--red); text-shadow:0 0 10px var(--glow); }

#weather-chip { font-size:12px; color:var(--text); margin-left:14px;
  flex-shrink:0; white-space:nowrap; }
#weather-chip.hidden { display:none; }

#np-bar { flex:1; text-align:center; font-size:11px; color:var(--muted);
  padding:0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#np-bar.hidden { opacity:0; pointer-events:none; }
#np-icon { color:var(--red); margin-right:5px; }

#clock-block { flex-shrink:0; text-align:right; display:flex;
  flex-direction:column; align-items:flex-end; gap:1px; }
#clock   { font-size:19px; font-weight:bold; letter-spacing:2px; line-height:1; }
#dateline { font-size:9px; color:var(--muted); letter-spacing:2px; }

/* ── Shared sidebar pieces ───────────────────────────────── */
.mt2 { margin-top:2px; } .mt3 { margin-top:3px; }

.sh    { font-size:9px; letter-spacing:3px; color:var(--red);
  text-shadow:0 0 8px var(--glow);
  border-bottom:1px solid var(--red-dim); padding-bottom:4px; margin-bottom:7px; }
.sh-sm { font-size:8px; letter-spacing:2px; color:var(--muted); margin-bottom:4px; }
.sh.mt10, .sh-sm.mt10 { margin-top:10px; }
.mb6 { margin-bottom:6px; } .mt10 { margin-top:10px; } .mt4 { margin-top:4px; }
.ml8 { margin-left:8px; }

.sb-block { margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--red-dim); }
.sb-block:last-child { border-bottom:none; }

.sr-row { display:flex; justify-content:space-between; align-items:baseline; }
.sr-lbl { font-size:9px; letter-spacing:1px; color:var(--muted); }
.sr-val { font-size:13px; font-weight:bold; }
.sr-sub { font-size:9px; color:var(--muted); margin-top:2px; }

.bw  { height:3px; background:#1a0000; border-radius:2px; overflow:hidden; margin-top:3px; }
.bf  { height:100%; width:0%; background:var(--red); border-radius:2px;
  transition:width .6s ease; box-shadow:0 0 6px var(--glow); }
.bf.warn { background:var(--yellow); box-shadow:none; }
.bf.crit { background:var(--red-hi); box-shadow:0 0 12px rgba(255,34,51,.5); }

.net-row { display:flex; align-items:baseline; gap:6px; font-size:12px; margin-bottom:2px; }
.arr-u { color:var(--red); font-size:12px; }
.arr-d { color:var(--blue); font-size:12px; }

.disk-entry { margin-bottom:6px; }
.disk-entry:last-child { margin-bottom:0; }
.disk-mount { font-size:9px; color:var(--muted); margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.disk-meta  { display:flex; justify-content:space-between; font-size:10px; margin-bottom:2px; }

.temp-row { display:flex; justify-content:space-between; font-size:11px; margin-bottom:3px; }
.temp-row:last-child { margin-bottom:0; }
.td { color:var(--muted); }
.tv { font-weight:bold; }
.tv.ok   { color:var(--green); }
.tv.warm { color:var(--yellow); }
.tv.hot  { color:var(--red-hi); }

.uptime-val { font-size:13px; color:var(--text); }

/* ── Landscape layout ────────────────────────────────────── */
#land { display:none; position:fixed;
  top:calc(var(--hdr) + env(safe-area-inset-top, 0px));
  left:0; right:0; bottom:var(--act);
  flex-direction:row; }

#l-svr, #l-infra {
  width:var(--side); flex-shrink:0;
  overflow-y:auto; overflow-x:hidden;
  padding:10px 9px;
  background:var(--bg);
}
#l-svr   { border-right:1px solid var(--border); box-shadow:4px 0 12px rgba(204,17,17,0.05); }
#l-infra { border-left:1px solid var(--border);  box-shadow:-4px 0 12px rgba(204,17,17,0.05); }
#l-svr   { -webkit-overflow-scrolling:touch; }
#l-infra { -webkit-overflow-scrolling:touch; }
#l-svr::-webkit-scrollbar, #l-infra::-webkit-scrollbar { width:2px; }
#l-svr::-webkit-scrollbar-thumb, #l-infra::-webkit-scrollbar-thumb { background:var(--red-dim); }

#l-center { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* Center sections */
.c-section {
  padding:8px 10px;
  border-bottom:1px solid var(--red-dim);
  flex-shrink:0;
}
.c-section:last-child { border-bottom:none; flex:1; min-height:0; }
.c-sh { font-size:8px; letter-spacing:2.5px; color:var(--muted); margin-bottom:6px;
  display:flex; align-items:center; gap:8px; }
.c-sh-meta { font-size:11px; color:var(--text); letter-spacing:0; margin-left:8px; display:flex; align-items:center; gap:4px; }

/* Recently added posters */
#recent-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
  -webkit-overflow-scrolling:touch; touch-action:pan-x;
  scroll-snap-type:x proximity; overscroll-behavior-x:contain; }
#recent-row::-webkit-scrollbar { height:2px; }
#recent-row::-webkit-scrollbar-thumb { background:var(--red-dim); }
.poster { scroll-snap-align:start; }

.poster { flex-shrink:0; width:72px; cursor:pointer; }
.poster img { width:72px; height:108px; object-fit:cover; border-radius:3px;
  border:1px solid var(--border); display:block;
  transition:border-color .2s, box-shadow .2s; }
.poster img:hover { border-color:var(--red); box-shadow:0 0 10px var(--glow); }
.poster-title { font-size:9px; color:var(--muted); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.poster-badge { font-size:8px; color:var(--red); letter-spacing:.5px; }
.poster-no-img { width:72px; height:108px; background:var(--card);
  border:1px solid var(--border); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:var(--muted); text-align:center; padding:4px; }

/* Streams */
.stream-item { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.stream-item:last-child { margin-bottom:0; }
.stream-thumb { width:48px; height:28px; object-fit:cover; border-radius:2px;
  border:1px solid var(--border); flex-shrink:0; }
.stream-info { flex:1; min-width:0; }
.stream-title { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stream-meta  { font-size:9px; color:var(--muted); }
.stream-prog  { margin-top:3px; }

/* Torrents */
.torrent-item { margin-bottom:6px; }
.torrent-item:last-child { margin-bottom:0; }
.torrent-meta { display:flex; justify-content:space-between; font-size:10px;
  color:var(--muted); margin-bottom:2px; }
.torrent-name { font-size:11px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; margin-bottom:2px; }

/* ── Landscape action bar ─────────────────────────────────── */
#l-actions { display:none; position:fixed; bottom:0; left:0; right:0;
  height:var(--act); flex-direction:row; gap:8px; padding:0 10px;
  align-items:center; background:var(--bg);
  border-top:1px solid var(--border);
  box-shadow:0 -3px 14px rgba(204,17,17,0.07); }

.act { display:flex; align-items:center; justify-content:center; gap:5px;
  flex:1; height:34px; background:var(--card);
  border:1px solid var(--border); border-radius:2px;
  color:var(--muted); font-family:var(--font); font-size:11px;
  letter-spacing:.5px; text-decoration:none; cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:color .2s,border-color .2s; -webkit-tap-highlight-color:transparent; }
.act:active { color:var(--text); border-color:var(--red); }
.act.primary { flex:1.6; background:#130000; border-color:var(--red);
  color:var(--red-hi); font-weight:bold; letter-spacing:2px;
  animation:pulse-btn 2.5s ease-in-out infinite; }
.act-icon { font-size:12px; }

@keyframes pulse-btn {
  0%,100% { box-shadow:0 0 8px rgba(204,17,17,0.15); border-color:var(--red); }
  50%      { box-shadow:0 0 20px rgba(255,34,51,0.4); border-color:var(--red-hi); }
}

/* ── Right sidebar components ────────────────────────────── */
/* Pools */
.pool-entry { margin-bottom:8px; }
.pool-entry:last-child { margin-bottom:0; }
.pool-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.pool-name { font-size:11px; font-weight:bold; }
.pool-cap  { font-size:9px; color:var(--muted); margin-bottom:3px; }
.badge { font-size:8px; padding:1px 6px; border-radius:2px; font-weight:bold; letter-spacing:1px; }
.b-ok   { background:rgba(0,204,85,.1);  color:var(--green);  border:1px solid rgba(0,204,85,.2); }
.b-warn { background:rgba(255,170,0,.1); color:var(--yellow); border:1px solid rgba(255,170,0,.25); }
.b-crit { background:rgba(204,17,17,.12);color:var(--red-hi); border:1px solid rgba(204,17,17,.3); }

/* Docker health */
#l-docker, #p-docker { display:grid; grid-template-columns:1fr 1fr; gap:3px 6px; }
.dc-item { display:flex; align-items:center; gap:4px; font-size:10px; }
.dc-dot  { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dc-dot.up   { background:var(--green); box-shadow:0 0 4px rgba(0,204,85,.5); }
.dc-dot.down { background:var(--red); box-shadow:0 0 4px var(--glow); }

/* Queue items */
.q-item { margin-bottom:5px; }
.q-item:last-child { margin-bottom:0; }
.q-title  { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.q-status { font-size:9px; color:var(--muted); }

/* Requests */
.req-val { font-size:20px; font-weight:bold; color:var(--red); text-shadow:0 0 10px var(--glow); }
.req-lbl { font-size:9px; color:var(--muted); letter-spacing:1.5px; }

/* Nil state */
.nil { font-size:11px; color:var(--muted); }

/* ── Portrait layout ─────────────────────────────────────── */
#port { display:none; position:fixed;
  top:calc(var(--hdr) + env(safe-area-inset-top, 0px));
  left:0; right:0; bottom:0;
  flex-direction:column; }

#p-strip { display:flex; align-items:center; justify-content:space-around;
  height:36px; background:var(--card); border-bottom:1px solid var(--border);
  flex-shrink:0; }
.ps  { display:flex; flex-direction:column; align-items:center; gap:1px; }
.ps-l { font-size:8px; color:var(--muted); letter-spacing:1.5px; }
.ps-v { font-size:12px; font-weight:bold; }

#p-body { flex:1; position:relative; overflow:hidden; }
.ptab { display:none; position:absolute; inset:0; flex-direction:column; overflow:hidden; }
.ptab.active { display:flex; }

.p-scroll { flex:1; overflow-y:auto; padding:10px; -webkit-overflow-scrolling:touch; }
.p-scroll::-webkit-scrollbar { width:2px; }
.p-scroll::-webkit-scrollbar-thumb { background:var(--red-dim); }

.p-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pc { background:var(--card); border:1px solid var(--border);
  border-radius:2px; padding:10px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  box-shadow:0 0 8px var(--glow); }
.pc.wide { grid-column:1/-1; }

.big-n { font-size:28px; font-weight:bold; line-height:1; margin-bottom:4px; }
.unit  { font-size:13px; color:var(--muted); }

/* Recently added portrait (2-col grid) */
#p-recent { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }

/* Library counts */
.counts-row { display:flex; justify-content:space-around; padding:10px 0; }
.cnt    { display:flex; flex-direction:column; align-items:center; gap:4px; }
.cnt-n  { font-size:28px; font-weight:bold; color:var(--red); text-shadow:0 0 12px var(--glow); }
.cnt-l  { font-size:8px; color:var(--muted); letter-spacing:2px; }

/* Portrait nav */
#p-nav { display:flex; height:var(--nav); background:var(--card);
  border-top:1px solid var(--border); flex-shrink:0; align-items:center;
  padding:0 6px; gap:5px;
  padding-bottom:env(safe-area-inset-bottom,0); }
.pnb { flex:1; height:40px; background:none; border:none;
  border-top:2px solid transparent; color:var(--muted);
  font-family:var(--font); font-size:11px; letter-spacing:.5px; cursor:pointer;
  transition:color .15s,border-color .15s; -webkit-tap-highlight-color:transparent; }
.pnb.active { color:var(--red-hi); border-top-color:var(--red); text-shadow:0 0 8px var(--glow); }
.pwatch { flex:1.5; height:40px; font-size:11px; letter-spacing:1.5px; }

/* ── Player overlay ──────────────────────────────────────── */
#player { position:fixed; inset:0; z-index:500; background:#000;
  display:flex; flex-direction:column; }
#player.hidden { display:none; }

#player-close { position:absolute;
  top:max(18px,env(safe-area-inset-top,18px));
  left:max(12px,env(safe-area-inset-left,12px));
  z-index:10; background:rgba(0,0,0,0.8);
  border:1px solid var(--border); color:var(--muted);
  font-family:var(--font); font-size:11px; letter-spacing:1px;
  padding:7px 14px; border-radius:3px; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-tap-highlight-color:transparent; }
#player-close:active { color:var(--text); border-color:var(--red); }
#jf-frame { flex:1; border:none; width:100%; }

/* Landscape counts in right sidebar */
.counts-row-sm { display:flex; justify-content:space-around; margin-top:4px; }
.cnt-sm   { display:flex; flex-direction:column; align-items:center; gap:2px; }
.cnt-sm-n { font-size:18px; font-weight:bold; color:var(--red); text-shadow:0 0 8px var(--glow); }
.cnt-sm-l { font-size:8px; color:var(--muted); letter-spacing:1px; }

/* ── Orientation ─────────────────────────────────────────── */
@media (orientation:landscape) {
  #land      { display:flex; }
  #l-actions { display:flex; }
  #port      { display:none; }
}
@media (orientation:portrait) {
  #land      { display:none; }
  #l-actions { display:none; }
  #port      { display:flex; }
}

/* Safe areas */
@supports (padding:env(safe-area-inset-left)) {
  #hdr       { padding-left:max(14px,env(safe-area-inset-left));
               padding-right:max(14px,env(safe-area-inset-right)); }
  #l-actions { padding-left:max(10px,env(safe-area-inset-left));
               padding-right:max(10px,env(safe-area-inset-right)); }
  #p-nav     { padding-left:max(6px,env(safe-area-inset-left));
               padding-right:max(6px,env(safe-area-inset-right)); }
}