/* ============================================================
   Nyx - operator panel
   monochrome - hard edges - spacing scale 4/8/12/16/24/32
   ============================================================ */

:root {
  --bg: #0a0a0a;
  --panel: #121212;
  --panel2: #171717;
  --hover: #1e1e1e;
  --line: #242424;
  --line2: #303030;
  --txt: #e6e6e6;
  --dim: #9a9a9a;
  --faint: #606060;
  --ok: #f0f0f0;
  --err: #f0f0f0;
  --warn: #b0b0b0;
  --head-h: 56px;   /* header height */
  --pad: 32px;      /* page gutter */
  /* the dock floats over the page. it is 60px deep and parks 14px off the edge,
     so 74px is the real footprint - the content area is inset past that on all
     four sides at once, which is why moving the dock never shifts anything */
  --dock-clear: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a transparent;
}

/* hard edges only - no rounded corners anywhere, ever */
*, *::before, *::after { border-radius: 0 !important; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #3a3a3a; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
*::-webkit-scrollbar-corner { background: transparent; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--txt);
  overflow: hidden;
}

.app {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100vh;
}

/* ================= dock ================= */
/* floating taskbar-style dock - centered, draggable to any edge */

.dock {
  position: fixed;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px;
  background: rgba(18, 18, 18, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line2);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  user-select: none;
  touch-action: none;
  cursor: grab;
}
.dock.dragging {
  cursor: grabbing;
  opacity: 0.92;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.68);
  will-change: left, top, transform;
}
/* springy settle when the dock snaps to an edge */
.dock.snapping {
  transition:
    left 0.42s cubic-bezier(0.2, 1.12, 0.3, 1.05),
    top 0.42s cubic-bezier(0.2, 1.12, 0.3, 1.05),
    right 0.42s cubic-bezier(0.2, 1.12, 0.3, 1.05),
    bottom 0.42s cubic-bezier(0.2, 1.12, 0.3, 1.05),
    transform 0.42s cubic-bezier(0.2, 1.12, 0.3, 1.05),
    opacity 0.25s, box-shadow 0.3s;
}

.dock[data-pos="bottom"] { bottom: 14px; left: 50%; transform: translateX(-50%); flex-direction: row; }
.dock[data-pos="top"]    { top: 14px; left: 50%; transform: translateX(-50%); flex-direction: row; }
.dock[data-pos="left"]   { left: 14px; top: 50%; transform: translateY(-50%); flex-direction: column; }
.dock[data-pos="right"]  { right: 14px; top: 50%; transform: translateY(-50%); flex-direction: column; }

/* the dock floats - it never pushes the UI around, it just overlays */

.dock-brand {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dock-brand img { width: 30px; height: 30px; object-fit: cover; pointer-events: none; }

.dock-sep { background: var(--line); flex-shrink: 0; }
.dock[data-pos="bottom"] .dock-sep,
.dock[data-pos="top"] .dock-sep { width: 1px; height: 26px; margin: 0 4px; }
.dock[data-pos="left"] .dock-sep,
.dock[data-pos="right"] .dock-sep { height: 1px; width: 26px; margin: 4px 0; }

.dock-item {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dock-item:hover { background: var(--hover); color: var(--txt); }
.dock-item.active { background: #2a2a2a; color: #ffffff; border-color: #3a3a3a; }
.dock-item.danger:hover { color: var(--err); }

/* active indicator - small square like the win11 taskbar dot, but hard */
.dock-item.active::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffffff;
}
.dock[data-pos="bottom"] .dock-item.active::after { bottom: 3px; left: 50%; transform: translateX(-50%); }
.dock[data-pos="top"] .dock-item.active::after    { top: 3px; left: 50%; transform: translateX(-50%); }
.dock[data-pos="left"] .dock-item.active::after   { left: 3px; top: 50%; transform: translateY(-50%); }
.dock[data-pos="right"] .dock-item.active::after  { right: 3px; top: 50%; transform: translateY(-50%); }

/* hover label */
.dock-item::before {
  content: attr(data-label);
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--line2);
  padding: 5px 10px;
  font-family: inherit;
  font-size: 12px;
  color: var(--txt);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 20;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.dock-item:hover::before { opacity: 1; }
.dock[data-pos="bottom"] .dock-item::before { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
.dock[data-pos="top"] .dock-item::before    { top: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
.dock[data-pos="left"] .dock-item::before   { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
.dock[data-pos="right"] .dock-item::before  { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }

/* count badges (hidden until non-zero) - solid white chip, black number */
.dock-badge {
  display: none;
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  color: #0a0a0a;
  background: #f0f0f0;
  box-shadow: 0 0 0 1px #0a0a0a;
}
.dock-badge.on { display: flex; }

/* grab-collapse: holding the dock folds every icon away but the logo;
   releasing pops them back in one by one behind the spring settle */
.dock { transition: gap 0.3s ease; }
/* expand: springy pop back out */
.dock .dock-item, .dock .dock-sep {
  transition:
    width 0.34s cubic-bezier(0.2, 1.35, 0.3, 1.05),
    height 0.34s cubic-bezier(0.2, 1.35, 0.3, 1.05),
    margin 0.34s cubic-bezier(0.2, 1.35, 0.3, 1.05),
    opacity 0.24s ease-out,
    border-width 0.34s;
}
/* collapse: one fast accelerating motion - icons, space, gaps all close together */
.dock.collapsed { gap: 0; transition: gap 0.22s cubic-bezier(0.5, 0, 0.8, 0.4); }
.dock.collapsed .dock-item, .dock.collapsed .dock-sep {
  transition:
    width 0.24s cubic-bezier(0.5, 0, 0.8, 0.4),
    height 0.24s cubic-bezier(0.5, 0, 0.8, 0.4),
    margin 0.24s cubic-bezier(0.5, 0, 0.8, 0.4),
    opacity 0.18s ease-in,
    border-width 0.24s;
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
  border-width: 0;
  overflow: hidden;
  pointer-events: none;
}
.dock-brand img { transition: transform 0.3s cubic-bezier(0.2, 1.35, 0.3, 1.05); }
.dock.collapsed .dock-brand img { transform: scale(1.18); }

/* edge drop zones - only the hovered one ever becomes visible, fading in/out */
.dock-zone {
  position: fixed;
  z-index: 790;
  display: none;
  border: 2px dashed var(--line2);
  background: rgba(255, 255, 255, 0.02);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
}
.dock-zone.t { top: 12px; left: 12px; right: 12px; height: 68px; }
.dock-zone.b { bottom: 12px; left: 12px; right: 12px; height: 68px; }
.dock-zone.l { left: 12px; top: 12px; bottom: 12px; width: 68px; }
.dock-zone.r { right: 12px; top: 12px; bottom: 12px; width: 68px; }
.dock-zone.hot { opacity: 1; border-color: var(--txt); background: rgba(255, 255, 255, 0.06); }

/* social links - top-right of the header, logos forced monochrome */
.head-social {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.social-link {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.social-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  /* strip the brand colors - flat gray to sit with the theme */
  filter: grayscale(1) brightness(1.05) contrast(0.9);
  opacity: 0.45;
  transition: opacity 0.12s;
}
.social-link:hover { background: var(--hover); }
.social-link:hover img { opacity: 1; }

/* ================= main ================= */

/* faint centered logo watermark - sits behind everything, never intercepts input */
.bg-logo {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.bg-logo::before {
  content: '';
  width: 52vmin;
  height: 52vmin;
  background: url(/logo.png) center / contain no-repeat;
  filter: grayscale(1);
  opacity: 0.055;
}

/* the dock floats over the page but never overlaps it. the clearance lives on the
   views rather than on this column, so the header above them can still run
   full-bleed and carry its rule all the way across the window.
   top is not inset at all: the dock's lower edge lands at 74px and content starts
   at 84px, so a dock parked up top sits over the header's empty middle (title is
   left, socials are right, the dock is centred) instead of pushing anything down */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* full-bleed: the rule reaches both window edges. the contents keep the same inset
   the content below them uses, so nothing about the header moved - only the line
   got longer. a left/right dock is vertically centred and never reaches this band,
   so there is nothing up here for it to collide with either */
.main-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--head-h);
  padding: 0 calc(var(--dock-clear) + var(--pad));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
}

.view-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt);
  line-height: 1;
}

/* the dock floats over the page, so the content is inset past its footprint on
   every edge at once. the dock can then be dragged anywhere without anything under
   it moving - the inset is a constant, not a reaction to position.
   the clearance sits on the views rather than on .main so the header above them
   stays full-bleed: its rule reaches both window edges, while the views still keep
   out from under the dock */
.view {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 28px calc(var(--dock-clear) + var(--pad)) calc(var(--dock-clear) + 28px);
}
.view.active { display: block; }

/* generic empty view body */
.view-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ================= toolbar (clients) ================= */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.seg-toggle {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 4px;
  gap: 4px;
}

.seg-btn {
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  padding: 8px 24px;
  background: transparent;
  border: none;
  color: var(--dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.seg-btn:hover { color: var(--txt); }
.seg-btn.active { background: var(--hover); color: var(--txt); font-weight: 600; }

.icon-btn.toggle-hidden {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  cursor: pointer;
  color: var(--faint);
  transition: color 0.12s, border-color 0.12s;
  padding: 0;
}
.icon-btn.toggle-hidden:hover { color: var(--txt); border-color: var(--line2); }

/* ================= client tiles ================= */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  width: 100%;
}

.card-tile {
  aspect-ratio: 1.6 / 1;
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 16px 16px 46px;
  position: relative;
}

.tile-name { font-size: 13.5px; color: var(--txt); font-weight: 600; }
.tile-user { flex: 1 1 100%; font-size: 12px; color: var(--dim); margin-top: 4px; }
.tile-geo, .tile-ip, .tile-tag, .tile-client {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--faint);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tile-ip { cursor: pointer; }

.tile-ip .ip-val {
  filter: blur(5px);
  transition: filter 0.18s;
  user-select: none;
}
.tile-ip:hover .ip-val,
.tile-ip.revealed .ip-val { filter: blur(0); }

.ip-type { font-weight: 600; }
.ip-type.type-res { color: var(--txt); }
.ip-type.type-vpn { color: var(--dim); }

.tile-geo .flag { font-size: 13px; }

.tile-elev, .tile-root {
  flex: 1 1 100%;
  display: flex;
  gap: 6px;
  font-size: 11.5px;
  color: var(--faint);
}
.tile-elev { margin-top: auto; }
.tile-elev-val { color: var(--txt); font-weight: 500; }
.tile-elev-val.elev-yes { color: var(--ok); }
.tile-elev-val.elev-sys { color: #6fb3ff; font-weight: 600; }

.tile-age {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  color: var(--faint);
}

.tile-star, .tile-eye {
  position: absolute;
  bottom: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--faint);
  transition: color 0.12s, background 0.12s;
}
.tile-star { left: 10px; }
.tile-eye { right: 10px; }
.tile-rm {
  position: absolute;
  bottom: 10px;
  left: 42px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--faint);
  transition: color 0.12s, background 0.12s;
}
.tile-rm:hover { color: var(--err); background: var(--hover); }
.tile-star:hover, .tile-eye:hover { color: var(--txt); background: var(--hover); }
.tile-star.pinned { color: var(--txt); }
.tile-eye.hidden-state { color: var(--warn); }

.card-tile.hidden-card { opacity: 0.45; }
/* offline clients: dimmed and not interactive - nothing is listening on the far
   end, so there is no command to send. the pin/eye controls stay live. */
.card-tile.offline-tile { opacity: 0.5; }
.card-tile.offline-tile .tile-name,
.card-tile.offline-tile .tile-user { color: var(--faint); }
.card-tile.offline-tile:hover { cursor: default; }
.card-tile.pinned { border-color: rgba(255, 255, 255, 0.3); }
.card-tile[draggable] { cursor: grab; }
.card-tile[draggable]:active { cursor: grabbing; }
.card-tile.dragging { opacity: 0.35; transform: scale(0.97); transition: opacity 0.15s, transform 0.15s; }

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 0;
  color: var(--faint);
  font-size: 13px;
}
.blink { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }

/* ================= panels ================= */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2 {
  font-size: 11px;
  font-weight: 600;
  color: var(--txt);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.hint { font-size: 12px; color: var(--faint); }

/* ================= dashboard ================= */

.dash-col {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.chip {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.chip-num { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.chip.accent .chip-num { color: var(--ok); }
.chip-lbl {
  font-size: 10.5px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ================= dev log + announcements ================= */

.dash-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 980px) { .dash-panels { grid-template-columns: 1fr; } }

.post-list { display: flex; flex-direction: column; }
.post-empty { color: var(--faint); padding: 26px 20px; text-align: center; font-size: 13px; }

.post-item {
  display: flex;
  flex-direction: column;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
}
.post-item:last-child { border-bottom: none; }

.post-head { display: flex; align-items: baseline; gap: 10px; }
.post-kind {
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.post-title { font-size: 13px; font-weight: 600; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-date { margin-left: auto; flex-shrink: 0; font-size: 11px; color: var(--faint); }
.post-del {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--faint);
  font-family: inherit;
  font-size: 11px;
  padding: 0 0 0 4px;
  transition: color 0.12s;
}
.post-del:hover { color: var(--err); }

.post-body {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dim);
  white-space: pre-wrap;
  word-break: break-word;
}

/* admin-only composer at the top of each list */
.post-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.post-form input, .post-form textarea {
  background: var(--bg);
  border: 1px solid var(--line2);
  color: var(--txt);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s;
}
.post-form input:focus, .post-form textarea:focus { border-color: var(--dim); }
.post-form textarea { resize: vertical; min-height: 56px; }
.post-form .btn { align-self: flex-end; }

/* ================= logs ================= */

#log-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.log-card {
  position: relative;   /* anchors the delete × */
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 128px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 16px;
}

.log-pc {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 22px;   /* keeps the name clear of the delete × */
}
.log-user {
  font-size: 12px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* footer strip: labeled gofile link left, labeled zip password right */
.log-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.log-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.log-side:last-child { align-items: flex-end; flex-shrink: 0; }
.log-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
}
.log-link {
  font-size: 12px;
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px dashed var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
  transition: color 0.12s, border-color 0.12s;
}
.log-link:hover { color: var(--txt); border-color: var(--dim); }
/* plain clickable password - click copies it, no box */
.log-pass {
  appearance: none;
  font: inherit;
  font-size: 12px;
  color: var(--txt);
  letter-spacing: 0.06em;
  background: none;
  border: none;
  border-bottom: 1px dashed var(--faint);
  padding: 0 0 1px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.log-pass:hover { color: var(--dim); border-color: var(--dim); }
.log-pass:active { color: var(--txt); }
.log-wait {
  margin-left: auto;
  font-size: 11px;
  color: var(--faint);
}

/* delete × - sits top-right, fades in on card hover */
.log-del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--faint);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: color 0.12s, background 0.12s, opacity 0.12s;
}
.log-card:hover .log-del { opacity: 1; }
.log-del:hover { color: var(--txt); background: var(--hover); }

/* ================= accounts ================= */

#view-accounts .panel { max-width: 1080px; margin: 0 auto; }

/* platform type picker - big logo cards for discord / roblox / minecraft */
.acc-types {
  display: flex;
  gap: 16px;
  padding: 28px;
}
.acc-type {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 16px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.acc-type img { width: 56px; height: 56px; object-fit: contain; }
.acc-type:hover { border-color: var(--line2); color: var(--txt); background: var(--hover); }
.acc-type.active { border-color: var(--txt); color: var(--txt); background: var(--panel2); }

/* ================= platform account cards ================= */
/* compact tiles - full info lives in the detail popup */

.acc-cards { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 12px; }

.acc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.acc-card:hover { border-color: var(--line2); background: var(--panel2); }

.acc-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acc-pfp {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--bg);
  border: 1px solid var(--line);
}
.acc-pfp-none::after { content: '?'; }
.acc-idblock { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acc-user {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-uid { font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* nitro badge next to the username */
.acc-nitro { width: 13px; height: 13px; vertical-align: -2px; margin-left: 3px; object-fit: contain; }
.modal .acc-nitro { width: 16px; height: 16px; vertical-align: -3px; }

/* quick info under the head - server count + biggest server they moderate */
.acc-sub { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acc-srv, .acc-big {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-srv { color: var(--faint); }
.acc-big { color: var(--txt); font-weight: 500; }

/* plain flag line - nitro / 2fa, no boxes */
.acc-flags { font-size: 11.5px; color: var(--faint); }
.acc-detail-head .acc-flags { margin-top: 3px; }

/* two fields on one line */
.acc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; min-width: 0; }
.acc-pair .acc-row { min-width: 0; }

/* server list - scrollable box: role + name + member count */
.acc-srvbox-wrap { margin-top: 18px; }
.acc-srvbox-title {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
  margin-bottom: 8px;
}
.acc-srvbox {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--line);
  background: var(--bg);
}
.acc-srvrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.acc-srvrow:last-child { border-bottom: none; }
.acc-srvrole {
  flex-shrink: 0;
  width: 42px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.acc-srvrole.owner { color: var(--txt); }
.acc-srvname {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-srvn {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}

.acc-rows { display: flex; flex-direction: column; gap: 7px; }
.acc-row { display: flex; gap: 10px; font-size: 12px; min-width: 0; }
.acc-k {
  flex-shrink: 0;
  width: 52px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  padding-top: 2px;
}
.acc-v { color: var(--dim); word-break: break-word; min-width: 0; }

/* token footer - click to copy, same vibe as the log passwords */
.acc-token {
  appearance: none;
  font: inherit;
  font-family: Consolas, monospace;
  font-size: 11.5px;
  color: var(--dim);
  letter-spacing: 0.03em;
  background: none;
  border: none;
  border-bottom: 1px dashed var(--faint);
  padding: 0 0 1px;
  cursor: pointer;
  margin-top: auto;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.acc-token:hover { color: var(--txt); border-color: var(--dim); }

/* detail popup (modal) - the full-info view a compact card opens */
.acc-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.acc-detail-head .acc-idblock { gap: 5px; }
.acc-detail-head .acc-user { font-size: 15px; white-space: normal; }
.acc-detail-head .acc-uid { font-size: 11.5px; white-space: normal; }
.acc-detail-head .acc-chips { margin-top: 4px; }
.acc-pfp-lg { width: 64px; height: 64px; }
.modal .acc-rows { gap: 10px; }
.modal .acc-k { width: 62px; padding-top: 1px; }
.modal .acc-v { font-size: 12.5px; }
.acc-copy-token { margin-top: 18px; }

.acc-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.acc-table th {
  text-align: left;
  color: var(--faint);
  font-weight: 500;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 12px 9px;
  border-bottom: 1px solid var(--line);
}
.acc-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-table td.actions { width: 90px; text-align: right; padding-right: 0; }

.acc-del {
  color: var(--faint);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  padding: 4px 8px;
  transition: color 0.12s, background 0.12s;
}
.acc-del:hover { color: var(--err); background: var(--hover); }

.acc-new { display: flex; gap: 10px; padding: 16px 20px 20px; }
.acc-new input {
  flex: 1;
  height: 36px;
  background: var(--bg);
  border: 1px solid var(--line2);
  color: var(--txt);
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s;
}
.acc-new input:focus { border-color: var(--dim); }
.acc-new .btn { flex-shrink: 0; }

.admin-note { color: var(--faint); padding: 40px; text-align: center; }

/* ================= admin (server) ================= */

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.admin-row:last-child { border-bottom: none; }
.admin-key {
  font-size: 10.5px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.admin-val { font-size: 13px; color: var(--dim); }
.admin-list { padding: 6px 20px 14px; }

/* ================= builder ================= */

#view-builder.active { display: flex; align-items: center; justify-content: center; }

.builder-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 380px;
  padding: 26px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.builder-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.builder-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--dim);
}
.builder-field input {
  width: 100%;
  height: 36px;
  background: var(--bg);
  border: 1px solid var(--line2);
  color: var(--txt);
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s;
}
.builder-field input:focus { border-color: var(--dim); }

#btn-build { width: 100%; }

.build-out { border: 1px solid var(--line); padding: 12px 14px; }
.build-link {
  color: var(--txt);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px dashed var(--dim);
}
.build-status { font-size: 12px; color: var(--dim); min-height: 16px; }

/* ================= buttons ================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 13px;
  color: var(--txt);
  background: var(--panel2);
  border: 1px solid var(--line2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--hover); border-color: var(--dim); }
.btn.tiny { height: 26px; padding: 0 12px; font-size: 11.5px; }
.btn.wide { width: 100%; }
.btn.danger { color: var(--err); border-color: rgba(224,88,88,0.4); }
.btn.danger:hover { background: rgba(224,88,88,0.12); border-color: var(--err); }

.modal-note { color: var(--dim); margin: 0 0 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.faint { color: var(--faint); }
.dim { color: var(--faint); }

/* ================= context menu ================= */

.card-ctx {
  position: fixed;
  z-index: 1000;
  display: none;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line2);
  box-shadow: 0 12px 34px rgba(0,0,0,0.55);
  padding: 6px;
  min-width: 180px;
}
.card-ctx.open { display: flex; }

.card-ctx-cat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  cursor: pointer;
  color: var(--dim);
  transition: background 0.1s, color 0.1s;
}
.card-ctx-cat:hover { background: var(--hover); color: var(--txt); }
.card-ctx-label { font-size: 13px; }

.card-ctx-sub {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 4px;
  background: var(--panel);
  border: 1px solid var(--line2);
  box-shadow: 0 12px 34px rgba(0,0,0,0.55);
  padding: 6px;
  min-width: 160px;
}
.card-ctx-cat > .card-ctx-sub::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 8px;
}
.card-ctx-cat:hover > .card-ctx-sub { display: flex; flex-direction: column; }

.card-ctx-sub-cat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--dim);
  transition: background 0.1s, color 0.1s;
}
.card-ctx-sub-cat:hover { background: var(--hover); color: var(--txt); }
.card-ctx-sub-cat > .card-ctx-sub::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 8px;
}
.card-ctx-sub-cat:hover > .card-ctx-sub { display: flex; flex-direction: column; }

.card-ctx-sub-btn {
  font-family: inherit;
  font-size: 13px;
  background: transparent;
  border: none;
  color: var(--dim);
  padding: 8px 14px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.1s, color 0.1s;
}
.card-ctx-sub-btn:hover { background: var(--hover); color: var(--txt); }

/* row of square tool buttons at the top of the card menu (cmd / powershell / files) */
.card-ctx-tools {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.card-ctx-tool {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.card-ctx-tool:hover { background: var(--hover); border-color: var(--line2); }
.card-ctx-tool img { width: 22px; height: 22px; object-fit: contain; display: block; }

.card-ctx-sub-btn.icon-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-ctx-sub-btn.icon-btn img { width: 24px; height: 24px; object-fit: contain; }

.grab-all {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

/* last item in the menu - the one that takes the implant off the box for good */
.card-ctx-danger {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  color: var(--faint);
}
.card-ctx-danger:hover { background: rgba(224,88,88,0.12); color: var(--err); }

/* ================= screen view popup ================= */
/* just the feed - controls float over the image, no chrome */

.screen-view-wrap {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
}
.screen-view-wrap.open { display: flex; }

.screen-view {
  background: #000;
  border: 1px solid var(--line2);
  overflow: hidden;
  width: min(1560px, 96vw);
  height: min(920px, 92vh);
  min-width: 420px;
  min-height: 300px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.65);
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.18s, opacity 0.18s;
}
.screen-view-wrap.open .screen-view { transform: scale(1); opacity: 1; }
.screen-view.paused .sv-img { opacity: 0.5; }

/* while the feed lives in the pop-out window, the in-panel body says so */
.sv-popped {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 12.5px;
  background: #000;
}
.screen-view.popped .sv-popped { display: flex; }
.screen-view.popped .sv-loading { display: none; }

.screen-view-body { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; }

.sv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  transition: opacity 0.2s;
}

/* floating control pill, top-right over the image */
.sv-bar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  padding: 5px;
  background: rgba(18,18,18,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.35;
  transition: opacity 0.15s;
  z-index: 5;
}
.screen-view:hover .sv-bar, .sv-bar:hover { opacity: 1; }

/* monitor picker - same box as the control buttons, just a long one */
.sv-mon {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 11.5px;
  height: 32px;
  max-width: 240px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.08);
  color: var(--dim);
  cursor: pointer;
  outline: none;
  text-overflow: ellipsis;
  transition: color 0.12s, background 0.12s;
}
.sv-mon:hover { color: var(--txt); background: var(--hover); }
.sv-mon option { background: var(--panel); color: var(--txt); }

.sv-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.sv-btn:hover { color: var(--txt); background: var(--hover); }
.sv-btn.sv-close:hover { color: var(--err); }

/* desktop audio - mirrors .sv-bar, parked on the other corner */
.sv-audio {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: rgba(18,18,18,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.35;
  transition: opacity 0.15s;
  z-index: 5;
}
.screen-view:hover .sv-audio, .sv-audio:hover, .sv-audio.pop { opacity: 1; }

/* HVNC launcher - sits in the same corner .sv-audio would, and runs across like it
   too, one button per app the hidden desktop can be started with */
.hvnc-apps {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: rgba(18,18,18,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.35;
  transition: opacity 0.15s;
  z-index: 5;
}
.screen-view:hover .hvnc-apps, .hvnc-apps:hover { opacity: 1; }
.hvnc-app img { width: 18px; height: 18px; display: block; object-fit: contain; }
.hvnc-app.active { color: var(--txt); background: var(--hover); }
.hvnc-slot { position: relative; display: flex; }
.hvnc-drop { position: relative; }
.hvnc-drop::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-bottom: 4px solid var(--dim);
}
.hvnc-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 96px;
  background: rgba(20,20,20,0.97);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line2);
  box-shadow: 0 12px 34px rgba(0,0,0,0.6);
  padding: 4px;
  z-index: 20;
}
.hvnc-sub.open { display: block; }
.hvnc-sub-item {
  display: block;
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  border: none;
  color: var(--dim);
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.hvnc-sub-item:hover { background: var(--hover); color: var(--txt); }
.hvnc-more, .hvnc-procs, .hvnc-killall { color: var(--dim); font-size: 13px; }
.hvnc-more:hover, .hvnc-procs:hover { color: var(--txt); background: var(--hover); }
.hvnc-killall:hover { color: var(--err); background: var(--hover); }

.hvnc-menu {
  display: none;
  position: absolute;
  top: 46px;
  left: 0;
  width: 210px;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(20,20,20,0.97);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line2);
  box-shadow: 0 12px 34px rgba(0,0,0,0.6);
  padding: 4px;
  z-index: 20;
}
.hvnc-menu.open { display: block; }
.hvnc-menu-group {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 10px 4px;
}
.hvnc-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  color: var(--dim);
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.hvnc-menu-item:hover { background: var(--hover); color: var(--txt); }
.hvnc-menu-item img { width: 16px; height: 16px; object-fit: contain; }

.hvnc-proc-list, .hvnc-app-list { max-height: 60vh; overflow-y: auto; }
.hvnc-proc, .hvnc-app-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.hvnc-proc-name { flex: 0 0 140px; color: var(--txt); font-weight: 600; }
.hvnc-proc-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.hvnc-proc-pid { flex: 0 0 60px; text-align: right; color: var(--faint); }
.hvnc-app-name { flex: 0 0 200px; color: var(--txt); }
.hvnc-app-ver { flex: 0 0 80px; color: var(--faint); }
.hvnc-app-path { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); }
.hvnc-real {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--faint);
  padding: 0 10px;
  width: auto;
  height: 32px;
}
.hvnc-real.active { color: var(--ok); background: var(--hover); }
.sv-mute.off { color: var(--faint); }
.sv-mute.off:hover { color: var(--txt); }
.sv-vol {
  appearance: none;
  -webkit-appearance: none;
  width: 76px;
  height: 32px;
  margin: 0;
  padding: 0 10px 0 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}
.sv-vol::-webkit-slider-runnable-track { height: 3px; background: var(--line2); }
.sv-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 14px;
  margin-top: -5.5px;
  background: var(--dim);
  border: none;
  border-radius: 0;
  transition: background 0.12s;
}
.sv-vol:hover::-webkit-slider-thumb { background: var(--txt); }
.sv-vol::-moz-range-track { height: 3px; background: var(--line2); }
.sv-vol::-moz-range-thumb { width: 9px; height: 14px; background: var(--dim); border: none; border-radius: 0; }
.sv-vol:hover::-moz-range-thumb { background: var(--txt); }

.sv-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  color: var(--faint); font-size: 12.5px;
  background: #000;
}
.sv-spinner {
  width: 26px; height: 26px;
  border: 2px solid var(--line2); border-top-color: var(--dim);
  animation: svspin 0.9s linear infinite;
}
@keyframes svspin { to { transform: rotate(360deg); } }

/* ================= remote shell (cmd) ================= */

.term-view {
  display: flex;
  flex-direction: column;
  width: min(1200px, 94vw);
  height: min(760px, 90vh);
  min-width: 420px;
  min-height: 260px;
  background: #000;
}
.term-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 6px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex: 0 0 auto;
}
.term-badge {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.term-view.ps .term-badge { color: #6fb3ff; }
.term-out {
  flex: 1 1 auto;
  margin: 0;
  padding: 12px 14px 0;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: #d0d0d0;
  background: #000;
}
.term-out .term-echo { color: var(--txt); font-weight: 600; }
.term-out .term-sys { color: var(--faint); }
.term-live {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 14px 12px;
  background: #000;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: #d0d0d0;
  white-space: pre-wrap;
  word-break: break-word;
}
.term-prompt { color: var(--ok); }
.term-view.ps .term-prompt { color: #6fb3ff; }
.term-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: #d0d0d0;
  animation: termblink 1s step-end infinite;
  transform: translateY(2px);
}
@keyframes termblink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ================= file manager ================= */

.fm-view {
  display: flex;
  flex-direction: column;
  width: min(900px, 92vw);
  height: min(600px, 84vh);
  min-width: 460px;
  min-height: 300px;
  background: var(--panel);
}
.fm-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.fm-title { font-size: 12.5px; color: var(--dim); }
.fm-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.fm-path {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  background: var(--bg);
  border: 1px solid var(--line2);
  color: var(--txt);
  font-family: Consolas, monospace;
  font-size: 12.5px;
  outline: none;
}
.fm-path:focus { border-color: var(--dim); }
.fm-nav {
  height: 30px;
  min-width: 30px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--dim);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.fm-nav:hover { color: var(--txt); background: var(--hover); }
.fm-list { flex: 1 1 auto; overflow-y: auto; }
.fm-empty { padding: 40px; text-align: center; color: var(--faint); font-size: 13px; }
.fm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  cursor: default;
  position: relative;
}
.fm-row:hover { background: var(--hover); }
.fm-row .fm-ic { flex: 0 0 auto; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--dim); }
.fm-row .fm-ic svg { width: 16px; height: 16px; display: block; }
.fm-row.dir .fm-ic { color: var(--txt); }
.fm-row .fm-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt); }
.fm-row.dir .fm-name { font-weight: 600; cursor: pointer; }
.fm-row .fm-name:hover { text-decoration: underline; }
.fm-row .fm-size { flex: 0 0 76px; text-align: right; color: var(--faint); }
.fm-row .fm-date { flex: 0 0 128px; text-align: right; color: var(--faint); }
.fm-del {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--faint);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.fm-row:hover .fm-del { opacity: 1; }
.fm-del:hover { color: var(--err); }
.fm-text {
  font-family: Consolas, monospace;
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--dim);
  max-height: 60vh;
  overflow: auto;
}
.fm-actions { margin-top: 14px; display: flex; gap: 8px; }

/* ================= modal ================= */

.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  background: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
}
.modal-wrap.open { display: flex; }

.modal {
  width: min(760px, 92vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line2);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
}

.modal-body { padding: 20px; overflow-y: auto; font-size: 13.5px; line-height: 1.65; }
.modal-body pre { font-family: Consolas, monospace; font-size: 12.5px; white-space: pre-wrap; word-break: break-word; color: var(--dim); }
.shot { width: 100%; display: block; }

/* ================= toasts ================= */
/* top-right, under the header - never collides with a bottom dock */

.toast-wrap {
  position: fixed;
  top: calc(var(--head-h) + 12px);
  right: calc(var(--dock-clear) + var(--pad));   /* lines up with the content column */
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.toast {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--ok);
  color: var(--txt);
  padding: 12px 18px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.toast.err { border-left-color: var(--err); }

::selection { background: rgba(255, 255, 255, 0.18); }

/* ---------------- login page ---------------- */
.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  display: flex; flex-direction: column; gap: 10px;
  width: 300px; padding: 32px 26px 24px;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 18px 60px rgba(0,0,0,0.5);
}
.login-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  align-self: center;
  margin-bottom: 8px;
}
.login-card input {
  background: var(--bg); border: 1px solid var(--line2); color: var(--txt);
  height: 36px; padding: 0 12px; font-family: inherit; font-size: 13px; outline: none;
  transition: border-color 0.12s;
}
.login-card input:focus { border-color: var(--dim); }
.login-err { color: var(--warn); font-size: 12px; min-height: 14px; text-align: center; }

/* ================= webcam ================= */

.cam-view {
  display: flex;
  flex-direction: column;
  width: min(900px, 92vw);
  height: min(680px, 88vh);
  min-width: 420px;
  min-height: 300px;
  background: #000;
}
.cam-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 6px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex: 0 0 auto;
}
.cam-title { font-size: 12.5px; color: var(--dim); }
.cam-body { position: relative; flex: 1 1 auto; background: #000; overflow: hidden; }
.cam-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cam-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  color: var(--faint); font-size: 12.5px; background: #000;
}
.cam-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-top: 1px solid var(--line);
  background: var(--panel); flex: 0 0 auto;
}
.cam-sel {
  flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 10px;
  background: var(--bg); border: 1px solid var(--line2); color: var(--txt);
  font-family: inherit; font-size: 12px; outline: none;
}
.cam-live.active { color: var(--err); }
.key-status { flex: 1 1 auto; font-size: 11.5px; color: var(--faint); }

/* ================= keylogger viewer ================= */

.key-view {
  display: flex; flex-direction: column;
  width: min(800px, 92vw); height: min(560px, 84vh);
  min-width: 380px; min-height: 240px; background: #000;
}
.key-out {
  flex: 1 1 auto; margin: 0; padding: 12px 14px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px; line-height: 1.55; color: #d0d0d0; background: #000;
}

/* ================= process manager ================= */

.pm-search {
  width: 100%; height: 32px; padding: 0 12px; margin-bottom: 10px;
  background: var(--bg); border: 1px solid var(--line2); color: var(--txt);
  font-family: inherit; font-size: 12.5px; outline: none;
}
.pm-search:focus { border-color: var(--dim); }
.pm-list { max-height: 60vh; overflow-y: auto; }
.pm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.pm-name { flex: 0 0 160px; color: var(--txt); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-path { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); }
.pm-pid { flex: 0 0 70px; text-align: right; color: var(--faint); }