/* index.css - Vanguard Chain console design system
   Round 28: full light + dark theming - the page is light by day and
   dark by night (auto, by the clock) with a small manual toggle in the
   top bar. Round 29: back to the classic BLUE identity - calm blue
   days, navy nights (the candy palette is gone). Still zero webfonts /
   zero external assets. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

/* ---------------- theme tokens ---------------- */
/* light: the classic blue console - soft blue washes on light slate */
:root {
  color-scheme: light;
  --bg: #f2f5fa; --wash1: #e3ecfa; --wash2: #e7f0f4;
  --fg: #1f2937; --fg-strong: #111827; --fg-soft: #374151;
  --muted: #6b7280; --faint: #94a3b8;
  --card: #ffffff; --card2: #f8fafd; --card3: #eef2f7;
  --brd: #e5e9f0; --brd2: #d7dee8; --brd-soft: #edf1f6;
  --acc1: #3b82f6; --acc2: #0f6cbd; --acc: #0f6cbd; --acc-strong: #0d63a8;
  --ok-bg: #e7f6ec; --ok-fg: #0b5e2f;
  --warn-bg: #fdf3e0; --warn-fg: #92600a;
  --bad-bg: #fdecea; --bad-fg: #b3261e;
  --info-bg: #e8f1fc; --info-fg: #0c5da3;
  --mut-bg: #eef1f6; --mut-fg: #6b7280;
  --input-bg: #ffffff; --input-brd: #d3dae5; --ring: rgba(15,108,189,.22);
  --sel-bg: #e2eefb; --sel-fg: #0d63a8;
  --hover: #f0f3f8; --hover-brd: #c4d3e8;
  --topbar: rgba(248,250,253,.88); --topbar-brd: #e5e9f0;
  --shadow: 0 1px 2px rgba(11,18,32,.05), 0 4px 16px rgba(11,18,32,.07);
  --shadow-lg: 0 2px 4px rgba(11,18,32,.05), 0 10px 26px rgba(11,18,32,.14);
  --shadow-btn: 0 2px 8px rgba(15,108,189,.3);
  --modal-scrim: rgba(11,18,32,.45);
  --toast-bg: #0b1220;
  --code-bg: #f4f8fe;
  --rout-bg: #131f3d; --rout-fg: #c4d3e8;
  --side1: #131f3d; --side2: #0b1220; --side-fg: #cbd5e1; --side-sub: #7c8db0;
  --t-blue: #e8f1fc; --t-green: #e7f6e7; --t-purple: #e2eefb;
  --t-amber: #fdf3e0; --t-red: #fdecea;
  --sb-track: #eef2f7; --sb-thumb: #b9c3d3;
}
/* dark: navy night - the old sign-in page's deep blue, everywhere */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220; --wash1: #16224a; --wash2: #0e3a5c;
  --fg: #dbe4f3; --fg-strong: #f4f8fe; --fg-soft: #c3cedd;
  --muted: #93a3bb; --faint: #6e7f9a;
  --card: #131c30; --card2: #17223a; --card3: #1c2a45;
  --brd: #243252; --brd2: #33456b; --brd-soft: #1e2b47;
  --acc1: #3b82f6; --acc2: #6ea8ff; --acc: #6ea8ff; --acc-strong: #4d8dff;
  --ok-bg: #122e1f; --ok-fg: #7ee2a0;
  --warn-bg: #3a2d10; --warn-fg: #ffd88a;
  --bad-bg: #46201f; --bad-fg: #ff9d94;
  --info-bg: #14263f; --info-fg: #8fc1ff;
  --mut-bg: #1a2438; --mut-fg: #93a3bb;
  --input-bg: #17223a; --input-brd: #33456b; --ring: rgba(110,168,255,.3);
  --sel-bg: #1d2f63; --sel-fg: #9cc0ff;
  --hover: #1a2740; --hover-brd: #3d5178;
  --topbar: rgba(16,24,41,.85); --topbar-brd: #22304e;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.5);
  --shadow-btn: 0 2px 10px rgba(59,130,246,.35);
  --modal-scrim: rgba(4,8,18,.62);
  --toast-bg: #1c2a45;
  --code-bg: #17223a;
  --rout-bg: #0e1626; --rout-fg: #9cc0ff;
  --side1: #101a30; --side2: #0a1120; --side-fg: #c3cedd; --side-sub: #7f93b0;
  --t-blue: rgba(110,168,255,.15); --t-green: rgba(126,226,160,.13);
  --t-purple: rgba(144,168,255,.15); --t-amber: rgba(255,214,138,.13);
  --t-red: rgba(255,157,148,.13);
  --sb-track: #17223a; --sb-thumb: #3d5178;
}


body.op {
  font-family: "Segoe UI Variable Text", -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -10%, var(--wash1) 0%, transparent 55%),
    radial-gradient(900px 420px at -10% 110%, var(--wash2) 0%, transparent 50%),
    var(--bg);
  color: var(--fg); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .35s ease, color .35s ease;
}
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted, .sub { color: var(--muted); }
.small { font-size: 12px; }
.spacer { flex: 1; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* smooth theme flip on the big surfaces */
.card, .tile, .topbar, .pane, .mitem, .frow, .vrow, .drawer, .mcard2,
input[type=text], input[type=number], input[type=email], select, textarea {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* ---------------- shell: sidebar + topbar + content ---------------- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 224px;
  background: linear-gradient(180deg, var(--side1) 0%, var(--side2) 100%);
  color: var(--side-fg); display: flex; flex-direction: column; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 20px 16px 14px; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--acc1), var(--acc2)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  box-shadow: 0 4px 12px rgba(15,108,189,.4);
}
.brand .brandname { font-size: 15.5px; font-weight: 700; color: #fff; letter-spacing: .2px; }
.brand .brandsub { display: block; font-size: 10px; color: var(--side-sub); margin-top: 1px; }
.snav { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.snavlink {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 9px; color: var(--side-fg); font-weight: 500; font-size: 13.5px;
  transition: background .15s ease, color .15s ease;
}
.snavlink .ico { width: 20px; text-align: center; font-size: 15px; }
.snavlink:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.snavlink.sel {
  background: linear-gradient(90deg, rgba(59,130,246,.95), rgba(15,108,189,.95));
  color: #fff; box-shadow: 0 3px 10px rgba(15,108,189,.35);
}
.sfoot {
  margin-top: auto; padding: 14px 16px; font-size: 10.5px; color: var(--side-sub);
  border-top: 1px solid rgba(255,255,255,.06); line-height: 1.5;
}

.main { margin-left: 224px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: 60px;
  background: var(--topbar);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--topbar-brd);
  display: flex; align-items: center; padding: 0 24px; gap: 14px;
  position: sticky; top: 0; z-index: 30; flex: none;
}
.tb-title { font-size: 16px; font-weight: 700; color: var(--fg-strong); letter-spacing: -.01em; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.clock { color: var(--muted); font-size: 13px; white-space: nowrap; }
.adminchip { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--fg-strong); font-size: 13.5px; }
.adminchip .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--acc1), var(--acc2)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}

/* the small day/night switch: cycles Auto -> Light -> Dark */
.themeBtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid var(--brd2); background: var(--card); color: var(--fg-soft);
  border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px;
  font-weight: 700; line-height: 1; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.themeBtn:hover { color: var(--acc); border-color: var(--acc2); box-shadow: 0 0 0 3px var(--ring); }
.themeBtn .ic { width: 13px; height: 13px; display: none; fill: currentColor; }
.themeBtn.mode-auto .ic-auto, .themeBtn.mode-light .ic-light,
.themeBtn.mode-dark .ic-dark { display: block; }

.content { padding: 24px 28px; flex: 1; min-height: 0; }
.content.mailcontent {
  padding: 0; flex: 1; display: flex; flex-direction: column;
  height: calc(100vh - 60px); max-height: calc(100vh - 60px);
  min-height: 0; overflow: hidden;
}

/* ---------------- buttons / badges / forms ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--brd2);
  background: var(--card); color: var(--fg); border-radius: 10px; padding: 7px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.25;
  font-family: inherit; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease,
              transform .05s ease;
}
.btn:hover { background: var(--hover); border-color: var(--hover-brd); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
  border-color: transparent; color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn.primary:hover {
  filter: saturate(1.12) brightness(1.03);
  box-shadow: 0 4px 14px rgba(15,108,189,.42);
}
.btn.danger { color: var(--bad-fg); border-color: var(--bad-bg); background: var(--card); }
.btn.danger:hover { background: var(--bad-bg); }
.btn.small { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn:disabled { opacity: .55; cursor: default; }
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge.warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge.bad { background: var(--bad-bg); color: var(--bad-fg); }
.badge.info { background: var(--info-bg); color: var(--info-fg); }
.badge.mut { background: var(--mut-bg); color: var(--mut-fg); }

input[type=text], input[type=number], input[type=email], select, textarea {
  border: 1px solid var(--input-brd); border-radius: 10px; padding: 8px 10px;
  font-size: 13px; font-family: inherit; color: var(--fg); background: var(--input-bg);
  outline: none; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--acc2); box-shadow: 0 0 0 3px var(--ring);
}
label.chk { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; }


/* ---------------- cards / tiles / tables ---------------- */
.card {
  background: var(--card); border: 1px solid var(--brd); border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 20px; }
.card h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--fg-strong); }
.card .cardsub { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; line-height: 1.55; }

.statgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin-bottom: 20px;
}
.tile {
  background: var(--card); border: 1px solid var(--brd); border-radius: 16px;
  padding: 18px; display: flex; gap: 14px; align-items: center;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, background-color .3s ease;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.tile .ticon {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.tile .tnum { font-size: 26px; font-weight: 700; color: var(--fg-strong); line-height: 1.1; letter-spacing: -.02em; }
.tile .tlbl { color: var(--muted); font-size: 12px; margin-top: 2px; }
.t-blue .ticon { background: var(--t-blue); }
.t-green .ticon { background: var(--t-green); }
.t-purple .ticon { background: var(--t-purple); }
.t-amber .ticon { background: var(--t-amber); }
.t-red .ticon { background: var(--t-red); }

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); padding: 8px 10px;
  border-bottom: 1px solid var(--brd); font-weight: 600;
}
.tbl td { padding: 10px; border-bottom: 1px solid var(--brd-soft); vertical-align: middle; }
.tbl tr:hover td { background: var(--hover); }
.tbl .tdsub { color: var(--muted); font-size: 12px; }

/* ---------------- overview page ---------------- */
.hero { margin-bottom: 20px; }
.hero h1 {
  font-size: 27px; font-weight: 700; color: var(--fg-strong); margin: 0 0 3px;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--fg-strong) 25%, var(--acc) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .hsub { color: var(--muted); font-size: 14px; }

.flowstate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.codebox {
  margin-top: 14px; background: var(--code-bg); border: 1px dashed var(--brd2);
  border-radius: 12px; padding: 14px 16px;
}
.code {
  font-family: Consolas, "Courier New", monospace; font-size: 22px;
  font-weight: 700; letter-spacing: .12em; color: var(--fg-strong);
  background: var(--card); border: 1px solid var(--brd); border-radius: 10px; padding: 6px 14px;
}
/* ---------------- victims page ---------------- */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.vcard {
  background: var(--card); border: 1px solid var(--brd); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.vhead { display: flex; gap: 12px; align-items: center; }
.vava {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--acc1), var(--acc2)); color: #fff;
  font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center;
}
.vname { font-weight: 800; font-size: 15px; color: var(--fg-strong); }
.vemail { color: var(--muted); font-size: 12.5px; word-break: break-all; }
.vmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 12.5px; }
.vmeta .k { color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.vmeta .v { color: var(--fg-soft); word-break: break-word; }
.vpills { display: flex; flex-wrap: wrap; gap: 6px; }
.vfoot { display: flex; gap: 8px; margin-top: auto; }
.vfoot .btn:last-child { margin-left: auto; }


/* ---------------- mail client ---------------- */
.mailtoolbar {
  height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: var(--card); border-bottom: 1px solid var(--brd); flex: none;
}
.mv-ident { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.mv-ident b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-ident .sub { color: var(--muted); font-size: 12px; }
/* the single grid row is exactly the pane height (minmax(0,1fr)) - never
   content-sized - so #list scrolls INSIDE its pane and the page never grows
   with the message list */
.mailwrap {
  flex: 1; display: grid; grid-template-columns: 232px 340px 1fr;
  grid-template-rows: minmax(0, 1fr); min-height: 0;
}
.pane { overflow-y: auto; background: var(--card); min-height: 0; min-width: 0; }
.pane.folders { border-right: 1px solid var(--brd); background: var(--card2); padding: 8px; }
.pane.mlist { border-right: 1px solid var(--brd); display: flex; flex-direction: column; overflow: hidden; }
/* #list is the mail pane's own scroller: the search row stays pinned and
   lazy-loading fires on this element's scroll, never on the page */
#list { flex: 1 1 auto; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
/* .dim = a search is in flight: rows stay visible but muted, and the pane
   cannot be scrolled until the results land or the search is cancelled */
#list.dim { opacity: .55; pointer-events: none; overflow: hidden; }
.listfoot.lm { cursor: pointer; color: var(--acc); font-weight: 700; }
.listfoot.lm:hover { background: var(--hover); }
.pane.mread { background: var(--card); }

/* visible, styled scrollbars on the mail panes (folders / list / reader):
   slim rounded thumb over a soft track, hover-darkened */
#list, .pane, #reader {
  scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track);
}
#list::-webkit-scrollbar, .pane::-webkit-scrollbar, #reader::-webkit-scrollbar {
  width: 12px; height: 12px;
}
#list::-webkit-scrollbar-track, .pane::-webkit-scrollbar-track,
#reader::-webkit-scrollbar-track {
  background: var(--sb-track); border-radius: 8px;
}
#list::-webkit-scrollbar-thumb, .pane::-webkit-scrollbar-thumb,
#reader::-webkit-scrollbar-thumb {
  background: var(--sb-thumb); border-radius: 8px; border: 3px solid var(--sb-track);
}
#list::-webkit-scrollbar-thumb:hover, .pane::-webkit-scrollbar-thumb:hover,
#reader::-webkit-scrollbar-thumb:hover { filter: brightness(.85); }


.frow {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; color: var(--fg); font-size: 13.5px;
  font-weight: 500; margin-bottom: 1px;
}
.frow:hover { background: var(--hover); }
.frow.sel { background: var(--sel-bg); color: var(--sel-fg); }
.frow .fico { width: 18px; text-align: center; flex: none; }
.frow .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.frow .funread {
  background: linear-gradient(135deg, var(--acc1), var(--acc2)); color: #fff;
  font-size: 10.5px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; flex: none;
}
.frow .ftotal { color: var(--faint); font-size: 11.5px; flex: none; }
.fgroup {
  margin: 10px 6px 4px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--faint); font-weight: 700;
}

.msearch {
  padding: 10px; border-bottom: 1px solid var(--brd); display: flex;
  gap: 8px; align-items: center; flex: none;
}
#list { flex: 1; overflow-y: auto; min-height: 0; }
.mitem { padding: 10px 14px; border-bottom: 1px solid var(--brd-soft); cursor: pointer; position: relative; }
.mitem:hover { background: var(--hover); }
.mitem.sel { background: var(--sel-bg); }
.mitem.unread { background: var(--card2); }
.mitem.unread .mfrom, .mitem.unread .msubj { font-weight: 700; color: var(--fg-strong); }
.mitem.unread::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--acc1), var(--acc2));
}
.mtop { display: flex; align-items: baseline; gap: 8px; }
.mfrom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--fg-strong); }
.mdate { color: var(--faint); font-size: 11.5px; flex: none; }
.msubj {
  font-size: 13px; color: var(--fg-soft); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 44px;
}
.micons {
  position: absolute; right: 14px; bottom: 8px; display: flex;
  gap: 6px; color: var(--muted); font-size: 12px; align-items: center;
}
.empty { padding: 40px 20px; text-align: center; color: var(--faint); }
/* ---------------- reading pane ---------------- */
.rwrap { padding: 22px 26px; }
.rsubject { font-size: 19px; font-weight: 700; margin: 0 0 12px; color: var(--fg-strong); }
.rmeta {
  background: var(--card2); border: 1px solid var(--brd); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 14px;
}
.rmeta .mrow { display: flex; gap: 10px; font-size: 13px; padding: 2px 0; }
.rmeta .mk { color: var(--faint); width: 68px; flex: none; font-weight: 600; }
.rmeta .mv { color: var(--fg); word-break: break-word; }
.ractions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ractions select { width: auto; padding: 4px 8px; font-size: 12px; }
.rbody { border-top: 1px solid var(--brd-soft); padding-top: 14px; }
.bodyframe { width: 100%; min-height: 320px; border: 0; }
.bodytext { white-space: pre-wrap; font-size: 13.5px; color: var(--fg); font-family: inherit; }

.attstrip { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.attcard { width: 220px; border: 1px solid var(--brd); border-radius: 12px; padding: 10px; background: var(--card2); }
.attname { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attsize { color: var(--faint); font-size: 11px; margin: 2px 0 8px; }
.attthumb {
  width: 100%; height: 120px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--brd); background: #fff; cursor: zoom-in; margin-bottom: 8px; display: block;
}
.attbtns { display: flex; gap: 6px; }


/* ---------------- modal / drawer / toast ---------------- */
.modal {
  position: fixed; inset: 0; background: var(--modal-scrim); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal[hidden] { display: none; }
.mcard2 {
  background: var(--card); border-radius: 16px; width: min(680px, 96vw);
  max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(11,18,32,.25);
}
.mhead { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--brd); flex: none; }
.mhead b { font-size: 15px; }
.mhead .mx { margin-left: auto; background: none; border: 0; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; }
.mhead .mx:hover { color: var(--fg-strong); }
.mbody { padding: 18px; overflow-y: auto; }
.mfoot {
  padding: 12px 18px; border-top: 1px solid var(--brd); display: flex;
  align-items: center; gap: 8px; flex: none;
}

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 96vw);
  background: var(--card); z-index: 70; box-shadow: -12px 0 40px rgba(11,18,32,.18);
  display: flex; flex-direction: column;
}
.drawer[hidden] { display: none; }
.dcard { display: flex; flex-direction: column; height: 100%; }
.dbody { flex: 1; overflow-y: auto; padding: 16px 18px; min-height: 0; }

.toast {
  position: fixed; right: 20px; bottom: 20px; background: var(--toast-bg); color: #fff;
  border-radius: 12px; padding: 12px 18px; font-size: 13.5px; z-index: 90;
  box-shadow: 0 10px 30px rgba(11,18,32,.35); max-width: 440px;
}
.toast.err { background: #7f1d1d; }

/* ---------------- composer ---------------- */
.crow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.crow .clbl { width: 52px; color: var(--muted); font-size: 12.5px; font-weight: 700; flex: none; }
.crow input { flex: 1; }
.crow select { flex: 1; width: auto; }
.ctog { font-size: 12px; color: var(--acc); cursor: pointer; font-weight: 600; }
.ctog:hover { text-decoration: underline; }
.cfiles { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.fchip {
  display: flex; align-items: center; gap: 8px; background: var(--card2);
  border: 1px solid var(--brd); padding: 6px 10px; border-radius: 8px; font-size: 12.5px;
}
.fchip .fname2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip .fsize { color: var(--muted); flex: none; }
.fchip button { margin-left: auto; background: none; border: 0; color: var(--bad-fg); cursor: pointer; font-size: 15px; }
.dropzone {
  border: 2px dashed var(--brd2); border-radius: 12px; padding: 16px;
  text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 10px;
}
.dropzone.over { border-color: var(--acc2); background: var(--sel-bg); }
/* ---------------- rules drawer ---------------- */
.rlcard { border: 1px solid var(--brd); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--card); }
.rlhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rlhead b { font-size: 13.5px; }
.rlstat { color: var(--muted); font-size: 11.5px; margin-top: 6px; }
.rlerr { color: var(--bad-fg); font-size: 11.5px; margin-top: 4px; }
.rlbtns { display: flex; gap: 6px; margin-top: 8px; }
.rform {
  border: 1px solid var(--brd2); border-radius: 12px; padding: 14px;
  margin-bottom: 12px; background: var(--card2);
}
.rform > b { display: block; margin-bottom: 10px; font-size: 13.5px; }
.frow2 { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.frow2 > * { min-width: 0; }
.condrow { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr auto; gap: 6px; margin-bottom: 6px; }
.actrow { display: grid; grid-template-columns: 1.2fr 1.6fr auto; gap: 6px; margin-bottom: 6px; }
.xbtn { background: none; border: 0; color: var(--bad-fg); font-size: 16px; cursor: pointer; padding: 2px 6px; line-height: 1.3; }
.xbtn:hover { background: var(--bad-bg); border-radius: 6px; }
.engrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.engrow input[type=number] { width: 90px; }
#r-out {
  background: var(--rout-bg); color: var(--rout-fg); font-size: 11.5px; border-radius: 8px;
  padding: 10px; max-height: 200px; overflow: auto; white-space: pre-wrap;
  font-family: Consolas, "Courier New", monospace; margin-top: 12px;
}
.rulehdr { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 700; margin: 14px 0 6px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1200px) {
  .mailwrap { grid-template-columns: 200px 300px 1fr; }
}
@media (max-width: 1000px) {
  .mailwrap { grid-template-columns: 180px 260px 1fr; }
  .sidebar { width: 64px; }
  .brand .brandname, .brand .brandsub, .snavlink span:not(.ico), .sfoot { display: none; }
  .main { margin-left: 64px; }
}
@media (max-width: 820px) {
  .mailwrap { grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); }
  .pane.folders { display: flex; overflow-x: auto; }
  .pane.folders .frow { flex: none; }
}


/* ------------- victims page: compact rows (20+ per screen) --------- */
.vlist { display: flex; flex-direction: column; gap: 5px; }
.vrow {
  display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--brd); border-radius: 10px; padding: 4px 12px;
  flex-wrap: wrap; box-shadow: var(--shadow);
}
.vrow:hover { border-color: var(--hover-brd); }
.vlist .vava {
  width: 28px; height: 28px; font-size: 12px;
}
.vrid { flex: 1 1 260px; min-width: 200px; display: flex;
  flex-direction: column; gap: 1px; overflow: hidden; }
.vrow .vtop { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vrow .vname {
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.vrow .vtop .badge { flex: none; }
.vrow .vemail {
  font-size: 11px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.vrm {
  flex: none; display: flex; align-items: center; gap: 14px;
  font-size: 11px; color: var(--fg-soft); white-space: nowrap;
}
.vrm .k {
  display: inline-block; font-size: 9px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint); font-weight: 700; margin-right: 5px;
}
.vract { flex: none; display: flex; gap: 6px; }
@media (max-width: 1250px) { .vrm .vm-dev { display: none; } }
@media (max-width: 1080px) { .vrm .vm-tenant { display: none; } }
@media (max-width: 920px) { .vrm { display: none; } }
@media (max-width: 820px) {
  .vrid { flex-basis: 100%; }
  .vract { margin-left: 40px; }
}

/* ---------------- deployment page ---------------- */
.dpgrid { display: grid; grid-template-columns: 400px 1fr; gap: 20px; align-items: start; }
.dpcard { padding: 0; }
.dpgrid .card + .card { margin-top: 0; }
.dphead {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  border-bottom: 1px solid var(--brd);
}
.dphead b { font-size: 15px; color: var(--fg-strong); }
.dpbody { padding: 16px 18px; }
.dpfield { margin-bottom: 14px; }
.dpfield > label {
  display: block; font-weight: 700; font-size: 12px; margin-bottom: 5px;
  color: var(--fg-soft);
}
.dpfield select, .dpfield input { width: 100%; }
.dpfield label .dextras { float: right; }
.dpradio { display: flex; gap: 16px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.btn.big { width: 100%; padding: 11px; font-size: 15px; margin-top: 4px; }
.pvframe { border: 1px solid var(--brd2); border-radius: 12px; overflow: hidden; background: #fff; }
.pvchrome {
  height: 30px; background: var(--card3); border-bottom: 1px solid var(--brd2);
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
}
.pvchrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--brd2); }
.pvchrome .url {
  margin-left: 8px; flex: 1; background: var(--card); border-radius: 6px; font-size: 11px;
  color: var(--muted); padding: 3px 10px; border: 1px solid var(--brd2); overflow: hidden;
  white-space: nowrap;
}
#pv { width: 100%; height: 640px; border: 0; display: block; background: #fff; }
.ltrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--brd-soft);
}
.ltrow:last-child { border-bottom: 0; }
.lturl { flex: 1; min-width: 0; }
.lturl a {
  font-weight: 600; font-size: 13.5px; display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}
.ltact { display: flex; gap: 8px; flex: none; }
@media (max-width: 1100px) { .dpgrid { grid-template-columns: 1fr; } }

/* round 20d: the one-time fast-lane consent action on a store-lagged row */
.flink { font-weight: 600; }
.flink:hover { text-decoration: underline; }


/* ---------------- round 23: Vanguard Chain multi-tenant console ------------- */
/* subscription banner under the topbar for an expired user */
.subbanner {
  background: var(--bad-bg); color: var(--bad-fg); border-bottom: 1px solid var(--brd2);
  padding: 7px 24px; font-size: 13px; font-weight: 700;
}
/* subscription chip next to the user name in the topbar */
.subchip {
  font-size: 10.5px; font-weight: 800; border-radius: 999px;
  padding: 2px 8px; margin-left: 6px; letter-spacing: .02em;
}
.subchip.ok { background: var(--ok-bg); color: var(--ok-fg); }
.subchip.fin { background: var(--bad-bg); color: var(--bad-fg); }

/* the sign-in page (standalone - no sidebar) */
body.loginbody {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1100px 520px at 12% -8%, #dbe7f8 0%, transparent 60%),
    radial-gradient(900px 480px at 110% 110%, #d6ecf2 0%, transparent 55%),
    linear-gradient(160deg, #f4f8fd 0%, #e9f0f8 100%);
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  margin: 0; color: var(--fg); font-size: 14px;
}
:root[data-theme="dark"] body.loginbody {
  background:
    radial-gradient(1100px 520px at 12% -8%, #1d2f63 0%, transparent 60%),
    radial-gradient(900px 480px at 110% 110%, #0e3a5c 0%, transparent 55%),
    linear-gradient(160deg, #0b1220 0%, #131f3d 100%);
}
.loginwrap { width: 100%; max-width: 400px; padding: 20px; }
.logincard {
  background: var(--card); border-radius: 20px; padding: 30px 28px;
  box-shadow: 0 24px 60px rgba(4,10,30,.45);
}
.loginbrand { display: flex; justify-content: center; margin-bottom: 10px; }
.loginbrand .logo {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(135deg, var(--acc1), var(--acc2));
  color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(15,108,189,.4);
}
.logincard h1 { text-align: center; font-size: 22px; font-weight: 700;
  color: var(--fg-strong); margin: 0 0 4px; }
.loginsub { text-align: center; color: var(--muted); font-size: 13px;
  margin-bottom: 18px; line-height: 1.5; }
.loginkey, .logintotp {
  width: 100%; border: 1px solid var(--input-brd); border-radius: 10px;
  padding: 11px 13px; font-size: 15px; margin-bottom: 10px;
  font-family: Consolas, Menlo, monospace; letter-spacing: .06em;
}
.loginkey:focus, .logintotp:focus { outline: 2px solid var(--ring);
  border-color: var(--acc2); }
.loginbtn { width: 100%; justify-content: center; font-size: 15px;
  padding: 11px 16px; margin-top: 4px; }
.loginerr {
  margin-top: 12px; background: var(--bad-bg); color: var(--bad-fg);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; font-weight: 600;
}
.loginfoot { margin-top: 16px; text-align: center; font-size: 11.5px;
  color: var(--faint); line-height: 1.5; }
.loginfoot a { color: var(--acc); }

/* help page account card + admin console form labels */
.lbl { font-weight: 700; font-size: 11.5px; color: var(--fg-soft); display: block;
  margin: 10px 0 5px; text-transform: uppercase; letter-spacing: .4px; }
.gencode label.lbl { margin-top: 0; }

/* ---------------- round 26: 2FA setup + Telegram card ---------------- */
#twofa-card{border:2px solid var(--brd2);
  background:linear-gradient(180deg,var(--card2),var(--card))}
.tgform{display:flex;flex-direction:column;gap:6px;max-width:520px}
.tglabel{font-size:12px;font-weight:700;color:var(--fg-soft);margin-top:6px}
.tgform input{width:100%}
#tg-state{align-self:center}
.tfabody{padding:18px}
.tfa-steps{display:flex;flex-direction:column;gap:10px;max-width:360px;
  margin:0 auto}
.tfastep{font-size:13px;color:var(--fg-soft);line-height:1.5}
.qrwrap{width:196px;height:196px;background:#fff;border:1px solid var(--brd);
  border-radius:12px;padding:10px;margin:0 auto;box-shadow:var(--shadow)}
.qrwrap img{width:100%;height:100%;display:block}
.tfa-key{background:var(--code-bg);border:1px dashed var(--brd2);border-radius:8px;
  padding:8px 12px;font-size:14px;letter-spacing:1px;color:var(--fg-strong);
  font-family:Consolas,monospace;word-break:break-all;flex:1}
@media (max-width:640px){
  .qrwrap{width:164px;height:164px}
}


/* ---------------- round 27: first-login welcome note + polish ------- */
/* the welcome note: a note-like card over the page BEFORE the dashboard
   (rendered once, until the user clicks Let's go -> /api/welcome/seen) */
.welcard{width:min(620px,96vw)}
.welvecl{
  height:86px;border-radius:14px 14px 0 0;flex:none;
  background:linear-gradient(135deg,var(--acc1) 0%,var(--acc2) 100%);
  color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;
}
.weltitle{
  font-size:20px;font-weight:700;color:var(--fg-strong);margin:0 0 4px;letter-spacing:-.01em}
.welsub{color:var(--muted);font-size:13px;margin-bottom:14px}
.welsteps{display:flex;flex-direction:column;gap:10px}
.welstep{
  display:flex;align-items:center;gap:12px;background:var(--card2);
  border:1px solid var(--brd-soft);border-radius:12px;padding:12px 14px;
}
.welstep .wn{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--acc1),var(--acc2));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
}
.welstep > div{flex:1;min-width:0;font-size:13.5px;color:var(--fg)}
.welstep .ws{display:block;color:var(--muted);font-size:12px;margin-top:2px;line-height:1.5}
.welstep .btn{flex:none}
/* round 28: the day/night hint under the welcome steps */
.weltheme{
  margin-top:12px;font-size:12.5px;color:var(--muted);
  background:var(--card2);border:1px dashed var(--brd2);border-radius:10px;
  padding:9px 12px;line-height:1.55;
}

/* deployed links: collapsible card body (hidden by default; opens on a
   fresh deploy or on View) */
#lt-card .dpbody[hidden]{display:none}
#lt-card .ltrow{border-radius:8px;transition:background .15s ease}
#lt-card .ltrow:hover{background:var(--hover)}

/* lighter toast + slightly rounder corner radius rhythm */
.toast{border-radius:12px;box-shadow:0 12px 34px rgba(11,18,32,.3)}