/* =========================================================
   DokMine — design system v2 "clean-room"
   One identity across login, workbench, and account.

   Rules the system is built on:
   1. Machine-found values (emails, counts, IDs, sizes) are
      monospace; everything a human reads is the sans stack.
   2. One action color (petrol). The brand ember appears only
      in the mark and extract-mode identity details.
   3. Zero webfonts — system stacks only, for speed and
      consistent rendering.
   ========================================================= */

:root {
  /* neutrals — cool paper, blue-black ink */
  --ink: #17202b;
  --slate: #3c4654;
  --muted: #64707f;
  --faint: #97a1ad;
  --line: #e4e8ed;
  --line-strong: #ccd4dc;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f9fafb;

  /* brand: petrol = action/redact identity, ember = extract identity */
  --vault: #17606d;
  --vault-bright: #1e7a8a;
  --vault-soft: #e3eff1;
  --ore: #b47716;
  --ore-bright: #d19023;
  --ore-soft: #f7edd9;

  /* semantic */
  --ok: #1e7a4e;
  --ok-soft: #e2f2e9;
  --danger: #b3372c;
  --danger-soft: #f9e6e3;
  --warn: #996c10;
  --warn-soft: #f7eed8;

  /* type — system stacks, no network fonts */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono",
               Menlo, Consolas, monospace;

  /* shape + depth — quiet */
  --r-sm: 6px;
  --r: 9px;
  --r-lg: 12px;
  --r-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(23,32,43,.05);
  --shadow: 0 4px 16px -6px rgba(23,32,43,.10), 0 1px 3px rgba(23,32,43,.06);
  --shadow-lg: 0 18px 44px -16px rgba(23,32,43,.22);

  /* action accent (constant) + mode identity (varies by panel mode) */
  --accent: var(--vault);
  --accent-bright: var(--vault-bright);
  --accent-soft: var(--vault-soft);
  --mode: var(--ore);
  --mode-soft: var(--ore-soft);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hidden { display: none !important; }

/* Visually hidden, but STILL FOCUSABLE.
   .hidden is display:none, which removes an element from the tab order
   entirely. On the file input that made the dropzone - the primary action of
   the whole app - unreachable by keyboard: no tab stop, no Enter to open the
   picker. Mouse users never noticed, because the wrapping <label> works fine.
   This hides the input visually while keeping it in the tab order and the
   accessibility tree. Do NOT swap it back to .hidden. */
.sr-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }

a { color: var(--vault-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

code {
  font-family: var(--font-mono);
  font-size: .84em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}

:focus-visible {
  outline: 2px solid var(--vault-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--vault-soft); }

/* =========================================================
   HEADER
   ========================================================= */
.dm-top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.dm-top-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 22px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dm-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.dm-brand:hover { text-decoration: none; }
.dm-brand .mine { color: var(--ore); }
.dm-brand .dok { color: var(--ink); }

.dm-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--ore-bright);
  flex: none;
}
.dm-mark svg { width: 17px; height: 17px; }

.dm-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dm-nav a {
  color: var(--muted);
  font-size: .92rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  transition: color .12s, background .12s;
}
.dm-nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.dm-nav a.active { color: var(--ink); background: var(--bg); }

.dm-signout {
  margin-left: 6px;
  font: 500 .88rem var(--font-body);
  color: var(--slate);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.dm-signout:hover { border-color: var(--faint); color: var(--ink); }

.dm-burger {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--slate);
  cursor: pointer;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.dm-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 22px;
}
.dm-main { padding-top: 34px; padding-bottom: 72px; }

.dm-welcome {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.dm-welcome h1 { font-size: 1.52rem; }
.dm-welcome .who { color: var(--muted); font-size: .9rem; }
.dm-welcome .who b { color: var(--slate); font-weight: 600; }

.dm-tagline {
  color: var(--muted);
  font-size: .95rem;
  margin: 6px 0 26px;
  max-width: 62ch;
}

/* =========================================================
   STATS STRIP — metric tiles
   ========================================================= */
.dm-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}

.dm-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px 15px;
  box-shadow: var(--shadow-sm);
}
.dm-stat .cap {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dm-stat .val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.42rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.dm-stat .val small {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}

.dm-meter {
  height: 4px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 12px;
}
.dm-meter span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--vault-bright);
  border-radius: 99px;
  transition: width .5s cubic-bezier(.25,.9,.3,1);
}

.dm-tier {
  font: 600 .72rem var(--font-body);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vault);
  background: var(--vault-soft);
  border: 1px solid rgba(23,96,109,.22);
  padding: 2px 9px;
  border-radius: 99px;
}

/* =========================================================
   CARDS
   ========================================================= */
.dm-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 26px;
  overflow: hidden;
}

.dm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.dm-card-head h3 {
  font-size: .98rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 9px;
}
.dm-card-head h3 svg { color: var(--muted); }

.dm-card-body { padding: 22px; }

.dm-denied .dm-card-body { text-align: center; padding: 44px 22px; }

/* =========================================================
   WORK PANEL — mode control
   ========================================================= */
.dm-panel[data-mode="extract"] { --mode: var(--ore); --mode-soft: var(--ore-soft); }
.dm-panel[data-mode="redact"]  { --mode: var(--vault); --mode-soft: var(--vault-soft); }

.dm-center { display: flex; justify-content: center; }

/* --- Step headers -------------------------------------------------------
   The panel body used to be a flat stack of controls with nothing to say
   they were sequential. A numbered header plus a rule above each one gives
   the panel a grammar: do this, then this, then run. */
.dm-step {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 22px 0 11px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.dm-step:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dm-step .n {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--mode);
  font-variant-numeric: tabular-nums;
  /* Fixed width so every step's heading starts on the same x-position. */
  min-width: 13px;
}
.dm-step h4 { font-size: .92rem; font-weight: 650; margin: 0; }
.dm-step .meta { margin-left: auto; font-size: .78rem; color: var(--muted); }

/* --- Mode cards ---------------------------------------------------------
   Two described choices, not two bare pills. The sentence under each label
   is the only thing on the page that tells a first-time user whether their
   original file is modified. */
.dm-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dm-mode {
  appearance: none;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  cursor: pointer;
  display: block;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.dm-mode .t {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 650 .92rem var(--font-body);
  color: var(--slate);
  margin-bottom: 3px;
}
.dm-mode .d {
  display: block;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--muted);
}
.dm-mode svg { width: 15px; height: 15px; }
.dm-mode:hover { border-color: var(--line-strong); background: var(--surface-2); }
.dm-mode.on {
  border-color: var(--mode);
  box-shadow: inset 0 0 0 1px var(--mode);
  background: color-mix(in srgb, var(--mode-soft) 55%, var(--surface));
}
.dm-mode.on .t { color: var(--mode); }
.dm-mode.on .d { color: var(--slate); }
.dm-mode:disabled { cursor: default; }
@media (max-width: 520px) {
  .dm-modes { grid-template-columns: 1fr; }
}
.dm-mode.on[data-self="extract"] svg { color: var(--ore); }
.dm-mode.on[data-self="redact"]  svg { color: var(--vault); }

/* =========================================================
   REDACTION OPTIONS
   ========================================================= */
.dm-redact-opts {
  /* Full width and left-aligned, matching the other steps. It used to be a
     centred 560px island while the dropzone below it ran full width, which
     broke the vertical rhythm every time redact mode was selected. */
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px 16px 14px;
}
.dm-redact-opts .head {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Bulk toggle for the detector list. With eight-plus types, ticking every box
   by hand every session was the most repeated action on this panel. */
.dm-check-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 9px;
  font-size: .82rem;
}
.dm-check-bar .sep { color: var(--line-strong); }
.dm-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--vault-bright);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dm-linkbtn:hover { opacity: .8; }

.dm-checks {
  display: flex;
  gap: 6px 16px;
  flex-wrap: wrap;
}
.dm-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .89rem;
  color: var(--slate);
  cursor: pointer;
  user-select: none;
  padding: 3px 2px;
}
.dm-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--vault);
  cursor: pointer;
}
/* A modifier hangs off the type above it, so it is indented and quieter -
   it must not read as another entity type in the same list. */
.dm-check-sub {
  margin-left: 18px;
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
.dm-sub-note {
  margin-left: 30px;
  margin-top: 2px;
}

.dm-check.is-off { color: var(--faint); cursor: not-allowed; }
.dm-check.is-off input { cursor: not-allowed; }
.dm-unavail {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 99px;
  padding: 1px 7px;
  margin-left: 2px;
}

.dm-mask-styles {
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
}
.dm-mask-styles code { font-size: .8em; }

.dm-redact-note {
  font-size: .8rem;
  color: var(--muted);
  margin-top: 10px;
}

/* =========================================================
   DROPZONE — with the scanline signature on dragover
   ========================================================= */
#upload-container { margin-top: 22px; }

.dm-drop {
  position: relative;
  display: block;
  /* The dropzone is the primary action on this page and should read that way.
     It's tinted with the active mode colour (ember for extract, petrol for
     redact), has a solid 2px border and a soft lift, so it reads as an inviting
     target rather than an empty placeholder. */
  border: 2px dashed color-mix(in srgb, var(--mode) 42%, var(--line-strong));
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 100% at 50% 0%,
      color-mix(in srgb, var(--mode-soft) 70%, transparent) 0%,
      transparent 70%),
    var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), var(--shadow-sm);
  /* Trimmed from 40/34 vertical padding. The zone is one step of four now,
     not the whole panel, and at its old size it dominated the layout it is
     supposed to sit inside. */
  padding: 24px 22px 20px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
/* The focus ring lives on the label, because the input it wraps is 1px and
   invisible - its own outline would be invisible with it. */
.dm-drop:focus-within {
  outline: 2px solid var(--vault-bright);
  outline-offset: 3px;
  border-style: solid;
  border-color: var(--mode);
}

.dm-drop:hover {
  border-color: var(--mode);
  box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--mode) 45%, transparent),
              var(--shadow-sm);
  transform: translateY(-1px);
}
.dm-drop:hover .dm-drop-btn {
  background: var(--mode);
  color: #fff;
  border-color: var(--mode);
}
.dm-drop.dragover,
.dm-drop.drag {
  border-color: var(--vault-bright);
  border-style: solid;
  background: var(--vault-soft);
  box-shadow: 0 0 0 4px rgba(30,122,138,.14), var(--shadow);
}
/* scanline — appears only while dragging a file over the zone */
.dm-drop::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -3px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vault-bright), transparent);
  opacity: 0;
}
.dm-drop.dragover::after,
.dm-drop.drag::after {
  opacity: 1;
  animation: dm-scan 1.5s linear infinite;
}
@keyframes dm-scan {
  0%   { top: 0; }
  100% { top: 100%; }
}

.dm-drop .rig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  /* Solid mode-tinted chip: the icon is the anchor of the whole card. */
  background: color-mix(in srgb, var(--mode-soft) 85%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--mode) 30%, transparent);
  color: var(--mode);
  margin-bottom: 11px;
  box-shadow: 0 5px 13px -8px color-mix(in srgb, var(--mode) 55%, transparent);
  transition: transform .16s;
}
.dm-drop:hover .rig { transform: scale(1.04); }
.dm-drop .rig svg { width: 24px; height: 24px; }

.dm-drop .hd {
  display: block;
  font-size: 1rem;
  font-weight: 680;
  letter-spacing: -0.015em;
  margin-bottom: 3px;
  color: var(--ink);
}
.dm-drop .dm-drop-sub {
  display: block;
  color: var(--muted);
  font-size: .84rem;
  margin: 0 0 11px;
}

/* Explicit click affordance — "or click to choose files" as body text was too
   easy to miss; a button makes the interaction obvious at a glance. */
.dm-drop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 .88rem var(--font-body);
  color: var(--mode);
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--mode) 45%, var(--line-strong));
  border-radius: var(--r-sm);
  padding: 7px 17px;
  transition: background .16s, color .16s, border-color .16s;
}

.dm-drop-formats {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--faint);
  margin: 11px 0 0;
  letter-spacing: .01em;
}

/* --- Compact dropzone ---------------------------------------------------
   Once files are selected the dropzone shrinks to a single line. This is the
   fix for the weight inversion that made the file list hard to notice: the
   full-size zone (2px dashed, tinted, gradient, lifted) stayed the loudest
   element on the page while the actual selection sat below it in the
   quietest container. Same drag target, same click-to-browse — just no
   longer competing with the thing it produced. */
.dm-drop-compact-label { display: none; }
.dm-drop.compact {
  padding: 9px 13px;
  text-align: left;
  border-width: 1px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: none;
  margin-top: 8px;
}
.dm-drop.compact:hover { transform: none; box-shadow: none; }
.dm-drop.compact .rig,
.dm-drop.compact .hd,
.dm-drop.compact .dm-drop-sub,
.dm-drop.compact .dm-drop-btn,
.dm-drop.compact .dm-drop-formats { display: none; }
.dm-drop.compact .dm-drop-compact-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  color: var(--muted);
}
.dm-drop.compact .dm-drop-compact-label .ico { color: var(--mode); display: inline-flex; }

/* --- File tray ----------------------------------------------------------
   One bordered container with internal dividers, instead of loose rows
   floating on the card body. */
.dm-tray {
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.dm-tray-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
  font-weight: 600;
  color: var(--slate);
}
.dm-tray-head .ico { color: var(--mode); display: inline-flex; }
.dm-tray-head .dm-linkbtn { margin-left: auto; font-weight: 500; }

/* --- Run bar ------------------------------------------------------------
   States the commitment before it is made: what will happen, to how many
   files, and what it costs against today's quota. */
.dm-run-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 15px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.dm-run-what { min-width: 190px; }
.dm-run-what > span { display: block; }
.dm-run-what > span:first-child {
  font-size: .89rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.dm-run-what .cost { font-size: .78rem; color: var(--muted); }
.dm-run-what .cost.warn { color: var(--danger); }

/* --- Collapsed input summary --------------------------------------------
   Step 1 (mode) deliberately STAYS VISIBLE. Collapsing it too left the
   "Process more files" button as the only way to reach the mode switch after
   a run — and with the activity panel now hidden in extract mode, its tabs no
   longer offer a second route, so someone who had just extracted could not get
   to redaction at all without a reset. Mode is also the cheapest thing to
   change your mind about, so it is the wrong thing to hide. */
.dm-panel.input-collapsed #upload-container,
.dm-panel.input-collapsed #redaction-step,
.dm-panel.input-collapsed #run-step,
.dm-panel.input-collapsed > .dm-card-body > .dm-step:not(.dm-step-mode) { display: none; }

/* Tighten the surviving step so it reads as a header for the summary bar
   below it rather than a stranded fragment of the old form. */
.dm-panel.input-collapsed .dm-step-mode { margin-bottom: 9px; }
.dm-panel.input-collapsed .dm-modes { margin-bottom: 14px; }

.dm-collapsed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px 11px 15px;
  background: var(--surface);
  /* A left keyline in the mode colour and a real border, so the bar reads as
     a completed-state banner rather than another flat row of chrome. */
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ok);
  border-radius: var(--r);
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
}
.dm-collapsed .ico { color: var(--ok); display: inline-flex; }
.dm-collapsed .btn { margin-left: auto; }
.dm-collapsed .btn .ico { color: currentColor; }
.dm-collapsed .btn svg { width: 14px; height: 14px; }

/* =========================================================
   SELECTED FILES + ACTIONS + PROGRESS
   ========================================================= */
.dm-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.dm-action-bar-btns { display: flex; gap: 10px; }

.dm-files-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: .93rem;
  color: var(--slate);
  margin: 18px 0 10px;
}
.dm-files-head svg { color: var(--muted); }

.dm-files { margin-top: 12px; }

.dm-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  margin-bottom: 6px;
  font-size: .89rem;
}
.dm-file-row .ico { color: var(--muted); display: inline-flex; flex: none; }
.dm-file-row .nm {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.dm-file-row .sz {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  color: var(--muted);
  flex: none;
}

.dm-progress { margin-top: 18px; }
.dm-progress-track {
  height: 5px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.dm-progress-track span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--vault-bright);
  border-radius: 99px;
  transition: width .3s ease;
}
.dm-progress p {
  font-size: .84rem;
  color: var(--muted);
  margin: 8px 0 0;
  text-align: center;
}

/* =========================================================
   RESULTS
   ========================================================= */
.dm-export-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.dm-icon-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--slate);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.dm-icon-btn:hover { color: var(--ink); border-color: var(--faint); background: var(--surface-2); }
.dm-icon-btn:disabled { opacity: .45; cursor: not-allowed; }

.dm-tabs {
  display: flex;
  /* Wrap rather than clip. With nowrap, a file that triggers many categories
     pushed the last tab past the container edge with no scrollbar and no way
     to reach it. Wrapping needs no scroll affordance and stays keyboard- and
     touch-reachable. */
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.dm-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font: 600 .9rem var(--font-body);
  color: var(--muted);
  padding: 10px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .12s, border-color .12s;
}
.dm-tab:hover { color: var(--slate); }
.dm-tab.on { color: var(--ink); border-bottom-color: var(--vault-bright); }
.dm-tab .ct {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 1px 8px;
  min-width: 26px;
  text-align: center;
}
.dm-tab.on .ct { color: var(--vault); background: var(--vault-soft); border-color: rgba(23,96,109,.2); }

.dm-pane { display: none; }
.dm-pane.on { display: block; }

.dm-assay {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
  background: var(--surface);
  max-height: 340px;
  overflow: auto;
}
.dm-assay ul { list-style: none; margin: 0; padding: 6px 0; }
.dm-assay li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--slate);
  padding: 7px 18px;
  border-bottom: 1px solid var(--surface-2);
  word-break: break-all;
}
.dm-assay li:last-child { border-bottom: 0; }
.dm-assay li .dot {
  width: 7px; height: 7px;
  border-radius: 99px;
  flex: none;
  background: var(--faint);
}
.dm-assay li.ok .dot,  .dm-assay li .dot.ok  { background: var(--ok); }
.dm-assay li.bad .dot, .dm-assay li .dot.bad { background: var(--danger); }
.dm-assay li.unk .dot, .dm-assay li .dot.unk { background: var(--faint); }
.dm-assay li.empty { color: var(--muted); font-family: var(--font-body); justify-content: center; padding: 22px; }

/* =========================================================
   DOWNLOADS
   ========================================================= */
.dm-dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.dm-dl {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
  /* min-width:0 lets this grid item shrink below its content width; without
     it the flex/grid default of min-width:auto forces the box to grow to fit
     the filename, which is what pushed long names over the border. */
  min-width: 0;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
/* text-overflow has no effect on a flex CONTAINER — it applies to a block of
   inline text. The filename therefore needs its own element to truncate in;
   previously it was a bare text node beside the svg and simply overflowed. */
.dm-dl-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-dl:hover { border-color: var(--vault-bright); text-decoration: none; box-shadow: var(--shadow-sm); }
.dm-dl svg { color: var(--vault); flex: none; }

.dm-summary-note { font-size: .87rem; color: var(--slate); margin: 0 0 10px; }
.dm-file-summary {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

/* Collapsed variant: one summary line, filenames on demand. Used when every
   file in the run ended the same way, where the per-row status label is the
   same word repeated. */
.dm-file-summary-fold {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  margin: 0 0 16px;
  overflow: hidden;
}
.dm-file-summary-fold > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  list-style: none;
}
.dm-file-summary-fold > summary::-webkit-details-marker { display: none; }
.dm-file-summary-fold > summary .st {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
  flex: none;
}
.dm-file-summary-fold > summary .hint {
  margin-left: auto;
  font-weight: 500;
  font-size: .78rem;
  color: var(--muted);
}
.dm-file-summary-fold[open] > summary .hint::after { content: ''; }
.dm-file-summary-fold[open] > summary .hint { visibility: hidden; }
.dm-file-summary-fold > summary:hover .hint { color: var(--vault); }
.dm-file-summary.bare {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
}
.dm-file-summary li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  font-size: .86rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.dm-file-summary li:last-child { border-bottom: 0; }
.dm-file-summary .fn {
  font-family: var(--font-mono);
  font-size: .8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-file-summary .st {
  flex: none;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 99px;
}
.dm-file-summary .st.ok   { color: var(--ok); background: var(--ok-soft); }
.dm-file-summary .st.bad  { color: var(--danger); background: var(--danger-soft); }
.dm-file-summary .st.warn { color: var(--warn); background: var(--warn-soft); }

/* =========================================================
   ACTIVE DOWNLOADS (files ready, expiring)
   ========================================================= */
.dm-active-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.dm-active-item:last-child { border-bottom: 0; }
.dm-active-item:hover { background: var(--surface-2); text-decoration: none; }
.dm-active-item .nm {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: .88rem;
}
.dm-active-item .nm b {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-active-item .sz {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--muted);
  flex: none;
}

.dm-countdown {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .74rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
}
.dm-countdown.fresh { color: var(--ok); background: var(--ok-soft); }
.dm-countdown.warm  { color: var(--warn); background: var(--warn-soft); }
.dm-countdown.cold  { color: var(--danger); background: var(--danger-soft); }

.dm-chip {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  color: var(--slate);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 8px;
  text-transform: lowercase;
}

.dm-status-ok  { color: var(--ok); font-weight: 600; }
.dm-status-bad { color: var(--danger); font-weight: 600; }

/* =========================================================
   ALERTS + ANNOUNCE
   ========================================================= */
.dm-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .89rem;
  line-height: 1.5;
  border: 1px solid;
  border-radius: var(--r);
  padding: 12px 16px;
  margin-bottom: 18px;
}
.dm-alert svg { flex: none; margin-top: 2px; }
.dm-alert-danger { color: #7e2921; background: var(--danger-soft); border-color: #ecc7c1; }
.dm-alert-warn   { color: #6e4e0b; background: var(--warn-soft);   border-color: #ead9ae; }
.dm-alert-info   { color: #114551; background: var(--vault-soft);  border-color: #c3dde2; }
.dm-alert-ok     { color: #0f5a37; background: var(--ok-soft);     border-color: var(--ok); border-left-width: 4px; font-weight: 600; }
.dm-alert a { color: inherit; font-weight: 600; text-decoration: underline; }

.dm-announce {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .89rem;
  color: #114551;
  background: var(--vault-soft);
  border: 1px solid #c3dde2;
  border-radius: var(--r);
  padding: 11px 16px;
  margin-bottom: 18px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 .9rem var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 9px 18px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--faint); background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-accent {
  color: #fff;
  background: var(--vault);
  border-color: var(--vault);
}
.btn-accent:hover { background: var(--vault-bright); border-color: var(--vault-bright); }

.btn-danger {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover { filter: brightness(.94); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--slate);
}
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }

.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn-quiet:hover { color: var(--ink); background: var(--surface-2); }

.btn-sm { font-size: .84rem; padding: 7px 14px; }
.btn-block { width: 100%; }

/* =========================================================
   ACCOUNT
   ========================================================= */
.dm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 26px;
}

.dm-field { padding: 13px 0; border-bottom: 1px solid var(--line); }
.dm-field:first-child { padding-top: 0; }
.dm-field:last-child { border-bottom: 0; padding-bottom: 0; }
.dm-field .lbl, .dm-field .k {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.dm-field .v {
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 3px;
  word-break: break-word;
}

.dm-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.dm-plan-actions { display: flex; gap: 8px; }

.dm-tier-badge {
  font: 700 .78rem var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vault);
  background: var(--vault-soft);
  border: 1px solid rgba(23,96,109,.22);
  padding: 4px 13px;
  border-radius: 99px;
}
.dm-tier-badge.pro { color: #6b4d05; background: var(--ore-soft); border-color: rgba(180,119,22,.3); }

.dm-sub-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  margin-top: 16px;
}

.dm-danger-zone {
  border-color: #ecc7c1;
}
.dm-danger-zone .dm-card-head { border-bottom-color: #f2dad6; }
.dm-danger-zone .dm-card-head h3 { color: var(--danger); }

.form-input {
  width: 100%;
  font: 400 .92rem var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  transition: border-color .12s, box-shadow .12s;
}
.form-input:focus {
  outline: none;
  border-color: var(--vault-bright);
  box-shadow: 0 0 0 3px rgba(30,122,138,.15);
}

/* =========================================================
   MODALS
   ========================================================= */
.dm-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(23,32,43,.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dm-modal-backdrop.open { display: flex; }
.dm-modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow-lg);
  animation: dm-pop .16s ease;
}
@keyframes dm-pop {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.dm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.dm-modal-head h4 { font-size: 1.02rem; }
.dm-modal-x {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.dm-modal-x:hover { color: var(--ink); background: var(--surface-2); }
.dm-modal-body { padding: 20px; font-size: .92rem; color: var(--slate); }
.dm-modal-body p { margin: 0 0 12px; }
.dm-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* --- state styles ------------------------------------------------ */
@keyframes dm-flash-kf {
  0% { box-shadow: 0 0 0 0 rgba(30,122,138,.35); }
  100% { box-shadow: 0 0 0 14px rgba(30,122,138,0); }
}
.dm-flash { animation: dm-flash-kf .9s ease-out 1; border-radius: var(--r); }

.dm-progress-track.indeterminate span {
  width: 38% !important;
  animation: dm-indet 1.1s ease-in-out infinite;
}
@keyframes dm-indet {
  0%   { margin-left: -38%; }
  100% { margin-left: 100%; }
}

.dm-meter.is-full span { background: var(--danger); }

.dm-tier.is-pro, .dm-tier-badge.is-pro {
  color: #6b4d05;
  background: var(--ore-soft);
  border-color: rgba(180,119,22,.3);
}

.dm-assay li.more {
  font-family: var(--font-body);
  color: var(--muted);
}
.dm-assay li.more a { font-weight: 600; }

/* =========================================================
   REDACTION REVIEW SUMMARY
   ========================================================= */
.dm-review {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.dm-review-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--vault);
  margin-bottom: 10px;
}
.dm-review-head svg { color: var(--ok); }
.dm-review-lead {
  font-size: .92rem;
  color: var(--slate);
  line-height: 1.7;
  margin: 0 0 4px;
}
.dm-review-lead strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.dm-review-lead .dm-chip { text-transform: none; }

.dm-review-files {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
}
.dm-review-files li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.dm-review-files li:last-child { border-bottom: 0; }
.dm-review-files .fn {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.dm-review-files .rv {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dm-review-files .dm-chip { text-transform: none; }

.dm-review-foot {
  font-size: .82rem;
  color: var(--muted);
  margin: 10px 0 0;
}
.dm-review-caveat {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
}

/* Quota exhausted — occupies the dropzone's slot and explains itself. */
.dm-quota-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  padding: 38px 24px 34px;
}
.dm-quota-block .rig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--warn-soft);
  color: var(--warn);
  margin-bottom: 14px;
}
.dm-quota-block h4 {
  font-size: 1.02rem;
  font-weight: 650;
  margin: 0 0 5px;
}
.dm-quota-block p {
  color: var(--muted);
  font-size: .88rem;
  margin: 0 0 16px;
  max-width: 44ch;
}
.dm-quota-block .btn:hover { text-decoration: none; }

/* =========================================================
   SPINNER
   ========================================================= */
.dm-spin {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 0 6px;
}
.dm-spin.show { display: flex; }
.dm-spin .ring {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--line);
  border-top-color: var(--vault-bright);
  border-radius: 50%;
  animation: dm-rot .7s linear infinite;
}
@keyframes dm-rot { to { transform: rotate(360deg); } }

/* =========================================================
   AUTH (login page)
   ========================================================= */
.dm-auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(380px, 46%) 1fr;
}

/* Left: ink panel */
.dm-auth-aside {
  background:
    radial-gradient(700px 420px at 85% -10%, rgba(30,122,138,.28), transparent 62%),
    radial-gradient(560px 420px at -10% 108%, rgba(209,144,35,.14), transparent 58%),
    #101923;
  color: #e8edf2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px 48px;
  position: relative;
  overflow: hidden;
}

.dm-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: #fff;
}
.dm-auth-brand .dm-mark { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); }
.dm-auth-brand .mine { color: var(--ore-bright); }
.dm-auth-brand .dok { color: #fff; }

.dm-auth-hero { max-width: 430px; }
.dm-auth-hero h1 {
  color: #fff;
  font-size: 1.72rem;
  line-height: 1.22;
  letter-spacing: -0.022em;
  margin: 0 0 12px;
}
.dm-auth-hero > p {
  color: #9fb0bd;
  font-size: .95rem;
  line-height: 1.6;
  margin: 0 0 30px;
}

/* Signature: the redaction preview — a document being scrubbed */
.dm-assay-demo {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.55);
  padding: 20px 22px 18px;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--slate);
  max-width: 400px;
}
.dm-assay-demo .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.dm-assay-demo .head b { color: var(--ok); letter-spacing: .04em; }
.dm-assay-demo .row {
  display: block;
  line-height: 1.9;
  white-space: nowrap;
  overflow: hidden;
}
.dm-assay-demo .bar {
  display: inline-block;
  height: .8em;
  background: var(--ink);
  border-radius: 2px;
  vertical-align: baseline;
  transform: translateY(1px);
}
.dm-assay-demo .tok {
  display: inline-block;
  font-size: .9em;
  color: var(--vault);
  background: var(--vault-soft);
  border-radius: 3px;
  padding: 0 5px;
}

.dm-auth-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 4px;
}
.dm-auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
}
.dm-auth-chip svg { color: var(--vault-bright); flex: none; width: 12px; height: 12px; }

.dm-auth-foot {
  font-size: .78rem;
  color: #6f8090;
}

/* Right: auth card */
.dm-auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--bg);
}

.dm-auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  padding: 34px 34px 26px;
}
.dm-auth-card h2 {
  font-size: 1.32rem;
  letter-spacing: -0.018em;
  margin: 0 0 6px;
}
.dm-auth-card .sub {
  color: var(--muted);
  font-size: .9rem;
  margin: 0 0 22px;
}

.dm-auth-mobilebrand { display: none; }

.dm-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 3px;
  gap: 3px;
  margin-bottom: 24px;
}
.dm-auth-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font: 600 .88rem var(--font-body);
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color .12s, background .12s, box-shadow .12s;
}
.dm-auth-tab:hover { color: var(--slate); }
.dm-auth-tab.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(23,32,43,.1), 0 0 0 1px var(--line);
}

.dm-auth-div {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 20px 0 16px;
}
.dm-auth-div::before, .dm-auth-div::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.dm-gbtn-wrap { display: flex; justify-content: center; margin: 4px 0 8px; }

.dm-disclaimer {
  font-size: .74rem;
  color: var(--faint);
  line-height: 1.55;
  margin-top: 22px;
  text-align: center;
}
.dm-disclaimer a { color: var(--muted); text-decoration: underline; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .dm-auth-shell { grid-template-columns: 1fr; }
  .dm-auth-aside {
    padding: 22px 24px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  .dm-auth-panel { padding: 28px 18px 40px; align-items: flex-start; }
  .dm-auth-hero, .dm-auth-chips, .dm-auth-foot { display: none; }
  .dm-auth-mobilebrand { display: none; }
}

@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .dm-top-inner { padding: 0 16px; height: 54px; }
  .dm-burger { display: inline-flex; }
  .dm-nav {
    display: none;
    position: absolute;
    top: 54px;
    left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 16px 12px;
    gap: 2px;
  }
  .dm-nav.open { display: flex; }
  .dm-nav a { padding: 12px 10px; font-size: .95rem; }
  .dm-signout { margin: 8px 0 0; padding: 11px; }
  .dm-wrap { padding: 0 16px; }
  .dm-main { padding-top: 24px; padding-bottom: 48px; }

  .dm-strip { grid-template-columns: 1fr; gap: 10px; }
  .dm-stat { padding: 14px 16px 13px; }

  .dm-card-body { padding: 16px; }
  .dm-card-head { padding: 13px 16px; }

  .dm-drop { padding: 34px 16px 30px; }
  .dm-mode { padding: 8px 14px; }

  .dm-action-bar { flex-direction: column; align-items: stretch; }
  .dm-action-bar-btns { justify-content: stretch; }
  .dm-action-bar-btns .btn { flex: 1; }

  .dm-grid-2 { grid-template-columns: 1fr; }

  .dm-auth-card { padding: 26px 22px 20px; border-radius: var(--r-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ---------------------------------------------------------------
   Redaction review notices
   Structural messages from the redactor: what was done to the file
   and what it may have cost. Severity drives colour so a "your data
   was NOT redacted" line cannot read as routine chrome.
   --------------------------------------------------------------- */
.dm-notice-list { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; gap: 9px; }

.dm-notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--r); border: 1px solid transparent;
  font-size: .9rem; line-height: 1.45;
}
.dm-notice-ico { flex: 0 0 auto; margin-top: 1px; }
.dm-notice-body { display: flex; flex-direction: column; gap: 3px; }
.dm-notice-body strong { font-size: .82rem; letter-spacing: .01em; }
.dm-notice-msg { color: var(--slate); }

.dm-notice-critical {
  background: var(--danger-soft); border-color: rgba(187,59,46,.32); color: var(--danger);
}
.dm-notice-critical .dm-notice-msg { color: var(--ink); }

.dm-notice-warning {
  background: var(--warn-soft); border-color: rgba(153,108,16,.28); color: var(--warn);
}
.dm-notice-info {
  background: var(--vault-soft); border-color: rgba(44,95,107,.22); color: var(--vault);
}

.dm-notice-files {
  font-family: var(--font-mono); font-size: .76rem; color: var(--muted);
  word-break: break-word; margin-top: 2px;
}