/* ============================================================== tokens ===
   A blue system. Two hues carry the app — blue for files, indigo for text —
   and a teal that means "someone else sent you this". The navigation rail
   keeps its own deep-navy palette in both themes; everything else follows
   the light/dark switch below. */

:root {
  color-scheme: light dark;

  --bg: #f3f6fc;
  --surface: #ffffff;
  --surface-sunken: #f2f5fb;
  --surface-raised: #ffffff;
  --surface-hover: #e8eef9;

  --text: #0b1220;
  --text-muted: #55617a;
  --text-faint: #6b7794;

  --line: #e2e8f4;
  --line-strong: #c7d2e6;

  /* --primary fills (buttons, switches); --accent is the same hue for text,
     icons and outlines. They part ways in the dark theme, where a fill that
     carries white text is too dark to read as text. */
  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --primary-soft: #e8efff;
  --primary-line: #bcd0fb;
  --on-primary: #ffffff;
  --accent: #1d4ed8;
  --knob: #ffffff;

  --danger: #d11f1f;
  --danger-soft: #fef2f2;
  --danger-line: #fecaca;

  --success: #0f766e;
  --success-soft: #e7f8f5;
  --success-line: #a3e3d8;

  --warn: #b45309;
  --warn-soft: #fffbeb;
  --warn-line: #fde68a;

  --files: #1d4ed8;
  --files-soft: #e8efff;
  --files-line: #bcd0fb;
  --files-rgb: 29, 78, 216;

  --texts: #4338ca;
  --texts-soft: #ecebfe;
  --texts-line: #c9c5fb;
  --texts-rgb: 67, 56, 202;

  --recv: #0f766e;
  --recv-soft: #e7f8f5;
  --recv-line: #a3e3d8;
  --recv-rgb: 15, 118, 110;

  /* Whichever of the two the current pane has set. Sections inside a pane
     reference only --tint, so one attribute recolours a whole half. */
  --tint: var(--files);
  --tint-soft: var(--files-soft);
  --tint-line: var(--files-line);
  --tint-rgb: var(--files-rgb);

  /* The gradient pair every piece of graphics is built from. */
  --grad-a: #2563eb;
  --grad-b: #22d3ee;

  /* The rail is dark in both themes. */
  --rail-bg: #081029;
  --rail-text: #e8effd;
  --rail-muted: #8ba0cc;
  --rail-line: rgba(255, 255, 255, 0.08);
  --rail-hover: rgba(255, 255, 255, 0.07);
  --rail-active: rgba(255, 255, 255, 0.12);

  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Three layered shadows rather than one heavy drop: a contact edge, a short
     ambient, and a long soft one. Together they read as height, not as blur. */
  --shadow-sm:
    0 1px 1px rgba(11, 18, 32, 0.04),
    0 1px 3px -1px rgba(11, 18, 32, 0.07);
  --shadow-card:
    0 0 0 1px rgba(11, 18, 32, 0.015),
    0 1px 2px rgba(11, 18, 32, 0.04),
    0 10px 24px -12px rgba(11, 18, 32, 0.12);
  --shadow-md:
    0 1px 2px rgba(11, 18, 32, 0.06),
    0 8px 18px -8px rgba(11, 18, 32, 0.14),
    0 24px 48px -20px rgba(11, 18, 32, 0.24);
  --shadow-tint:
    0 1px 2px rgba(var(--tint-rgb), 0.26),
    0 8px 20px -8px rgba(var(--tint-rgb), 0.45);

  /* A one-pixel highlight along the top of a filled control. */
  --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.2);

  /* The page is not flat: two very wide, very faint washes sit behind
     everything and never move. */
  --page-wash:
    radial-gradient(1200px 500px at 8% -14%, rgba(37, 99, 235, 0.09), transparent 62%),
    radial-gradient(1000px 460px at 96% -8%, rgba(34, 211, 238, 0.07), transparent 62%);

  /* Eight type steps, and nothing between them. A hierarchy you can name is
     a hierarchy you can keep. */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 25px;

  --step: 4px;
  --rail-w: 220px;
  --topbar-h: 66px;
  --focus: 0 0 0 3px rgba(29, 78, 216, 0.28);

  /* Motion: short, on transform and opacity. --ease is the default settle,
     --ease-out for things entering, --spring for a small physical overshoot. */
  --dur-fast: 140ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Inline images. data: URLs are allowed by the img-src policy. */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355617a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}

/* theme.js resolves "system" and always writes data-theme before first paint,
   so one explicit dark block covers both the toggle and the OS preference. */
:root[data-theme="dark"] {
  --bg: #070b14;
  --surface: #101725;
  --surface-sunken: #0b111c;
  --surface-raised: #161f31;
  --surface-hover: #1e293d;

  --text: #e6ecf7;
  --text-muted: #94a3bd;
  --text-faint: #7d8aa4;

  --line: #1e2942;
  --line-strong: #2e3c5a;

  --primary: #2563eb;
  --primary-hover: #3b82f6;
  --primary-soft: #111d3a;
  --primary-line: #26406f;
  --on-primary: #ffffff;
  --accent: #7aa2ff;
  --knob: #d6dded;

  --danger: #f87171;
  --danger-soft: #2d1a1c;
  --danger-line: #52282b;

  --success: #43d3bd;
  --success-soft: #0c2622;
  --success-line: #1b4a43;

  --warn: #fbbf24;
  --warn-soft: #2b2311;
  --warn-line: #4d3c14;

  --files: #7aa2ff;
  --files-soft: #111d3a;
  --files-line: #26406f;
  --files-rgb: 122, 162, 255;

  --texts: #a5a0ff;
  --texts-soft: #181632;
  --texts-line: #332e66;
  --texts-rgb: 165, 160, 255;

  --recv: #43d3bd;
  --recv-soft: #0c2622;
  --recv-line: #1b4a43;
  --recv-rgb: 67, 211, 189;

  --grad-a: #60a5fa;
  --grad-b: #22d3ee;

  --rail-bg: #060c1e;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-card:
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 26px -14px rgba(0, 0, 0, 0.7);
  --shadow-md:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 8px 18px -8px rgba(0, 0, 0, 0.6),
    0 24px 48px -20px rgba(0, 0, 0, 0.8);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  --page-wash:
    radial-gradient(1200px 500px at 8% -14%, rgba(37, 99, 235, 0.16), transparent 62%),
    radial-gradient(1000px 460px at 96% -8%, rgba(34, 211, 238, 0.10), transparent 62%);

  --focus: 0 0 0 3px rgba(122, 162, 255, 0.38);

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ================================================================ base === */

* { box-sizing: border-box; }

/* Author display rules below would otherwise beat the UA's [hidden] rule. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter var", Inter, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--page-wash);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, figcaption { margin: 0; }

a { color: var(--accent); }

/* Every figure in the app is a quantity, and quantities should not jitter as
   they tick over. */
.gauge-text strong, .read-body strong, .gauge-centre strong, .file-meta,
.note-meta, .user-meta, .progress-meta, .tab-count, .chip-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Visible focus for keyboard users only. The ring follows each control's own
   corner radius, so a pill stays a pill while focused. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

a:not([class]):focus-visible { border-radius: 4px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-md) 0;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

code {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-sunken);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
}

.hint { color: var(--text-muted); font-size: var(--fs-xs); }

.eyebrow {
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================== motion === */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px); }
}

@keyframes slide-indeterminate {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* The rail's light: three coloured blooms turning very slowly behind the
   navigation. It is the one thing on the page that never stops. */
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(0, -4%, 0) rotate(180deg) scale(1.15); }
  100% { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); }
}

/* The empty-state drawing breathes, a couple of pixels, very slowly. */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* A bar in the activity plot growing to its height on first draw. */
@keyframes grow-up {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

/* ================================================================ shell === */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ----- the rail */

.rail {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 2);
  height: 100vh;
  padding: calc(var(--step) * 5) calc(var(--step) * 3) calc(var(--step) * 4);
  overflow: hidden;
  color: var(--rail-text);
  background: var(--rail-bg);
  animation: fade-in var(--dur-slow) var(--ease-out) both;
}

.rail-aurora {
  position: absolute;
  inset: -25% -70% -10% -70%;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(26% 20% at 32% 14%, rgba(56, 189, 248, 0.95), transparent 70%),
    radial-gradient(30% 22% at 68% 34%, rgba(37, 99, 235, 0.9), transparent 70%),
    radial-gradient(28% 20% at 30% 58%, rgba(99, 102, 241, 0.85), transparent 70%),
    radial-gradient(26% 18% at 64% 80%, rgba(14, 165, 233, 0.7), transparent 70%);
  filter: blur(30px);
  animation: aurora 34s linear infinite;
}

/* A hairline of light down the rail's inner edge, and a soft vignette at its
   foot so the account block has something to sit on. */
.rail::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-right: 1px solid var(--rail-line);
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

.rail > *:not(.rail-aurora) { position: relative; z-index: 1; }

.rail-brand {
  display: flex;
  gap: calc(var(--step) * 2.5);
  align-items: center;
  padding: 0 calc(var(--step) * 3) calc(var(--step) * 4);
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  color: #ffffff;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 6px rgba(2, 8, 28, 0.5),
    0 0 26px -6px rgba(34, 211, 238, 0.8);
}

.brand-mark svg { width: 19px; height: 19px; }

.rail-brand-text { display: grid; min-width: 0; line-height: 1.2; }

.rail-brand-text strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.rail-brand-text small {
  margin-top: 2px;
  color: var(--rail-muted);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ----- navigation, which is also the pane switch */

.rail-nav {
  position: relative;
  display: grid;
  gap: 2px;
}

/* The lit pill behind the active item. It slides between the two rows, so the
   switch reads as one object moving rather than two states blinking. */
.rail-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--rail-active);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  transition: transform var(--dur-slow) var(--spring);
}

.rail-nav[data-active="text"] .rail-marker { transform: translateY(46px); }

/* A bright bar on the marker's left edge, in the hue of the active section. */
.rail-marker::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  width: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
  box-shadow: 0 0 14px 0 rgba(34, 211, 238, 0.9);
}

.nav-item {
  position: relative;
  z-index: 1;
  display: flex;
  gap: calc(var(--step) * 3);
  align-items: center;
  min-height: 44px;
  padding: 0 calc(var(--step) * 3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--rail-muted);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 550;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.nav-item:hover { color: var(--rail-text); }

.rail-nav .nav-item:hover { background: none; }

.nav-item.is-active { color: #ffffff; font-weight: 650; }

.nav-icon { display: grid; place-items: center; flex: none; width: 20px; height: 20px; }

.nav-icon svg { width: 19px; height: 19px; }

.nav-label { flex: 1; min-width: 0; }

/* A link in the rail that is not part of the switch gets its own hover fill. */
.nav-link:hover { background: var(--rail-hover); }

/* How many things are waiting in a section. */
.tab-count {
  min-width: 22px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  color: var(--rail-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-item.is-active .tab-count { background: rgba(255, 255, 255, 0.18); color: #ffffff; }

/* Something arrived from someone else while you were in the other section. */
.tab-count.is-fresh {
  background: linear-gradient(140deg, var(--grad-a), var(--grad-b));
  color: #04121f;
  box-shadow: 0 0 16px -2px rgba(34, 211, 238, 0.85);
}

.rail-foot { margin-top: auto; padding-top: calc(var(--step) * 3); }

/* ----- the workspace beside it */

.workspace { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  animation: fade-in var(--dur) var(--ease) both;
}

/* Not every engine has backdrop-filter; those get the plain surface back. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--surface); }
}

.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 3);
  align-items: center;
  justify-content: space-between;
  min-height: var(--topbar-h);
  padding: calc(var(--step) * 2) calc(var(--step) * 7);
}

.view-head { min-width: 0; }

.view-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.view-sub {
  margin-top: 1px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.topbar-actions {
  display: flex;
  gap: calc(var(--step) * 2);
  align-items: center;
  min-width: 0;
}

.app-shell {
  flex: 1;
  padding: calc(var(--step) * 6) calc(var(--step) * 7) calc(var(--step) * 14);
}

/* ============================================================ overview === */

/* The dashboard band: a gauge, three readings and a small chart on one
   surface, with a gradient sheen across the top of it. */
.overview {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin-bottom: calc(var(--step) * 5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}

/* One wash across the band. Absolutely positioned, so it is not a cell. */
.overview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), transparent 55%);
}

/* Every reading is one cell: same width, same padding, same hairline. */
.overview > * {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  gap: calc(var(--step) * 3);
  align-items: center;
  min-width: 152px;
  padding: calc(var(--step) * 4) calc(var(--step) * 5);
}

.overview > * + * { box-shadow: inset 1px 0 0 var(--line); }

/* ----- the storage gauge */



.gauge-ring { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; }

.gauge-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }

.gauge-track { fill: none; stroke: var(--line); stroke-width: 7; }

.gauge-arc {
  fill: none;
  stroke: url(#gaugeStroke);
  stroke-width: 7;
  stroke-linecap: round;
  /* 2 * pi * r, with r = 28. */
  stroke-dasharray: 175.93;
  stroke-dashoffset: 175.93;
  transition: stroke-dashoffset 1s var(--ease-out);
}

.gauge-centre { position: relative; }

.gauge-centre strong { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: -0.04em; }

.gauge-text { display: grid; min-width: 0; line-height: 1.15; }

.gauge-text strong { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.03em; }

.gauge-text small { margin-top: 1px; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 550; white-space: nowrap; }

.gauge.no-quota .gauge-ring { display: none; }

.gauge.is-warm .gauge-arc { stroke: var(--warn); }
.gauge.is-tight .gauge-arc { stroke: var(--danger); }
.gauge.is-warm .gauge-text small { color: var(--warn); }
.gauge.is-tight .gauge-text small { color: var(--danger); }

/* ----- the three readings */



.read-files { --stat: var(--files); --stat-soft: var(--files-soft); --stat-line: var(--files-line); }
.read-text { --stat: var(--texts); --stat-soft: var(--texts-soft); --stat-line: var(--texts-line); }
.read-recv { --stat: var(--recv); --stat-soft: var(--recv-soft); --stat-line: var(--recv-line); }

.read-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--stat-soft);
  color: var(--stat);
  box-shadow: inset 0 0 0 1px var(--stat-line);
}

.read-icon svg { width: 18px; height: 18px; }

.read-body { display: grid; min-width: 0; line-height: 1.15; }

.read-body strong { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.03em; }

.read-body small { margin-top: 1px; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 550; white-space: nowrap; }

/* The chart earns half a cell more than a single figure does. */
.activity { flex-grow: 1.6; flex-direction: column; align-items: stretch; justify-content: center; }

/* ----- the activity plot */



.activity-head {
  display: flex;
  gap: calc(var(--step) * 4);
  align-items: baseline;
  justify-content: space-between;
}

.activity-title { color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }

.activity-key { display: flex; gap: calc(var(--step) * 3); }

.key { display: inline-flex; gap: 5px; align-items: center; color: var(--text-faint); font-size: var(--fs-2xs); font-weight: 600; }

.key::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 3px;
}

.key-files::before { background: var(--files); }
.key-text::before { background: var(--texts); }

.activity-plot {
  display: flex;
  gap: calc(var(--step) * 1.5);
  align-items: flex-end;
  height: 54px;
}

.bar-col {
  display: grid;
  gap: calc(var(--step) * 1);
  justify-items: center;
  width: 22px;
}

.bar {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  height: 38px;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--line) 60%, transparent));
}

/* Every day keeps a baseline, so a quiet week still reads as seven days. */
.bar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 5px;
  background: var(--line-strong);
  opacity: 0.55;
}

.bar-seg { display: block; width: 100%; transform-origin: bottom; }

.bar-files { height: var(--files-h, 0%); background: linear-gradient(180deg, color-mix(in srgb, var(--files) 78%, white), var(--files)); }
.bar-text { height: var(--text-h, 0%); background: linear-gradient(180deg, color-mix(in srgb, var(--texts) 78%, white), var(--texts)); }

.bar.is-new .bar-seg { animation: grow-up 600ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }

.bar-day { color: var(--text-faint); font-size: var(--fs-2xs); font-weight: 600; }

.bar-col.is-today .bar-day { color: var(--accent); font-weight: 750; }

/* =============================================================== panes === */

/* The toast and the row menu are appended to the body, outside either pane,
   so the body carries whichever hue the open section is using. */
body[data-mode="files"] {
  --tint: var(--files);
  --tint-soft: var(--files-soft);
  --tint-line: var(--files-line);
  --tint-rgb: var(--files-rgb);
  --grad-a: #2563eb;
  --grad-b: #22d3ee;
}

body[data-mode="text"] {
  --tint: var(--texts);
  --tint-soft: var(--texts-soft);
  --tint-line: var(--texts-line);
  --tint-rgb: var(--texts-rgb);
  --grad-a: #6366f1;
  --grad-b: #38bdf8;
}

:root[data-theme="dark"] body[data-mode="files"] { --grad-a: #60a5fa; --grad-b: #22d3ee; }
:root[data-theme="dark"] body[data-mode="text"] { --grad-a: #a5b4fc; --grad-b: #38bdf8; }


.mode-pane[data-mode="files"] {
  --tint: var(--files);
  --tint-soft: var(--files-soft);
  --tint-line: var(--files-line);
  --tint-rgb: var(--files-rgb);
  --grad-a: #2563eb;
  --grad-b: #22d3ee;
}

.mode-pane[data-mode="text"] {
  --tint: var(--texts);
  --tint-soft: var(--texts-soft);
  --tint-line: var(--texts-line);
  --tint-rgb: var(--texts-rgb);
  --grad-a: #6366f1;
  --grad-b: #38bdf8;
}

:root[data-theme="dark"] .mode-pane[data-mode="files"] { --grad-a: #60a5fa; --grad-b: #22d3ee; }
:root[data-theme="dark"] .mode-pane[data-mode="text"] { --grad-a: #a5b4fc; --grad-b: #38bdf8; }

.mode-pane.pane-enter:not([hidden]) { animation: rise-in var(--dur-slow) var(--ease-out) both; }

.columns { display: grid; gap: calc(var(--step) * 5); align-items: stretch; }

.column { display: grid; gap: calc(var(--step) * 5); min-width: 0; }

@media (min-width: 1180px) {
  .columns { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .column:last-child { position: sticky; top: calc(var(--topbar-h) + var(--step) * 5); }
}

.mode-pane .column:first-child { animation: rise-in var(--dur-slow) var(--ease-out) 60ms both; }
.mode-pane .column:last-child { animation: rise-in var(--dur-slow) var(--ease-out) 110ms both; }

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

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: calc(var(--step) * 5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* A gradient hairline along the top edge and a faint corner wash, both in the
   pane's own hue, so the panel belongs to the section it is in. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b) 45%, transparent 85%);
}

.panel > * { position: relative; }

.panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2) calc(var(--step) * 3);
  align-items: center;
  margin-bottom: calc(var(--step) * 4);
}

.panel-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  color: #ffffff;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  box-shadow: var(--sheen), 0 4px 12px -4px rgba(var(--tint-rgb), 0.55);
}

.panel-icon svg { width: 18px; height: 18px; }

.panel-text { flex: 1 1 200px; min-width: 0; }

.panel-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }

.panel-sub { margin-top: 1px; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5);
  margin-left: auto;
}

/* Each list keeps its own scrollbar, so the two panels stay side by side and
   the page itself does not grow with the number of rows. */
@media (min-width: 1180px) {
  .list-scroll {
    max-height: calc(100vh - var(--topbar-h) - 330px);
    min-height: 190px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 calc(var(--step) * -1);
    padding: 0 var(--step);
  }
}

.list-scroll { flex: 1; display: flex; flex-direction: column; scrollbar-width: thin; }

.list-scroll::-webkit-scrollbar { width: 10px; }

.list-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  background-clip: content-box;
}

/* ----- the type mix bar */

.mix { display: grid; gap: calc(var(--step) * 2); margin-bottom: calc(var(--step) * 4); }

.mix-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
}

.mix-seg {
  width: var(--w, 0%);
  height: 100%;
  background: var(--kind, var(--line-strong));
  transition: width var(--dur-slow) var(--ease-out);
}

.mix-seg:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.mix-seg:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }

.mix-key { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 1) calc(var(--step) * 3); }

.mix-key span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 600;
}

.mix-key span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--kind, var(--line-strong));
}

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

button { font: inherit; color: inherit; cursor: pointer; }

/* One base for every button-shaped control; each variant only sets colour. */
:where(.primary-button, .ghost-button, .delete-button, .download-link) {
  display: inline-flex;
  gap: calc(var(--step) * 1.5);
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 calc(var(--step) * 3.5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.primary-button, .ghost-button, .delete-button, .download-link, .row-menu-button,
.text-button, .chip, .nav-item, .icon-button, .link-chip, .person, .mini-button,
.password-eye, .account-button {
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

:where(.ghost-button, .delete-button, .chip, .icon-button, .link-chip, .person,
  .password-eye, .mini-button, .row-menu-button):active:not(:disabled) {
  transform: scale(0.97);
}

/* A filled gradient is for the one action a panel is for. */
.primary-button {
  min-height: 38px;
  padding: 0 calc(var(--step) * 4);
  border-color: transparent;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  color: #ffffff;
  font-weight: 650;
  box-shadow: var(--sheen), var(--shadow-tint);
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    var(--sheen),
    0 2px 4px rgba(var(--tint-rgb), 0.3),
    0 12px 24px -8px rgba(var(--tint-rgb), 0.55);
  filter: saturate(1.08) brightness(1.04);
}

.primary-button:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--sheen), 0 1px 2px rgba(var(--tint-rgb), 0.3);
}

.primary-button svg { flex: none; width: 16px; height: 16px; }

/* The row action: tinted but hollow, filling in only under the pointer. */
.download-link {
  min-height: 34px;
  padding: 0 calc(var(--step) * 3.5);
  border-color: var(--tint-line);
  background: var(--tint-soft);
  color: var(--tint);
  font-weight: 650;
}

.download-link:hover {
  border-color: transparent;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  color: #ffffff;
  box-shadow: var(--sheen), 0 6px 14px -6px rgba(var(--tint-rgb), 0.5);
}

.download-link:active { transform: scale(0.97); }

.ghost-button:hover:not(:disabled) { border-color: var(--text-faint); background: var(--surface-hover); }

.ghost-button.danger { color: var(--danger); }

.ghost-button.danger:hover:not(:disabled) { border-color: var(--danger-line); background: var(--danger-soft); }

.delete-button { color: var(--danger); }

.delete-button:hover:not(:disabled) { border-color: var(--danger-line); background: var(--danger-soft); }

.text-button {
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.text-button:hover:not(:disabled) { background: var(--primary-soft); }

/* Header tools: smaller than a ghost button, the icon carrying most of the
   meaning so several of them still fit on one line. */
.mini-button {
  display: inline-flex;
  gap: calc(var(--step) * 1.5);
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 calc(var(--step) * 2.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.mini-button svg { flex: none; width: 14px; height: 14px; }

.mini-button:hover:not(:disabled) { border-color: var(--tint-line); background: var(--tint-soft); color: var(--tint); }

.mini-button.accent { border-color: var(--tint-line); background: var(--tint-soft); color: var(--tint); }

.mini-button.danger { color: var(--danger); }

.mini-button.danger:hover:not(:disabled) { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }

.icon-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-muted);
}

.icon-button:hover { border-color: var(--line-strong); background: var(--surface-hover); color: var(--text); }

.icon-button svg { grid-area: 1 / 1; width: 17px; height: 17px; }

/* Show only the icon matching the active theme preference. */
#themeToggle .icon-system, #themeToggle .icon-light, #themeToggle .icon-dark { display: none; }

:root[data-theme-pref="system"] #themeToggle .icon-system,
:root[data-theme-pref="light"] #themeToggle .icon-light,
:root[data-theme-pref="dark"] #themeToggle .icon-dark { display: block; }

:root:not([data-theme-pref]) #themeToggle .icon-system { display: block; }

button:disabled, .ghost-button[disabled], .mini-button:disabled, a[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ----- the share link */

.link-chip {
  display: inline-flex;
  gap: calc(var(--step) * 2);
  align-items: center;
  max-width: 320px;
  min-height: 36px;
  padding: 0 calc(var(--step) * 1) 0 calc(var(--step) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.link-chip svg { flex: none; width: 14px; height: 14px; color: var(--text-faint); }

.link-chip:hover { border-color: var(--line-strong); background: var(--surface-hover); }

.link-chip-url {
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.link-chip-copy {
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.link-chip.is-copied .link-chip-copy { border-color: var(--success-line); background: var(--success-soft); color: var(--success); }

/* ======================================================== account menu === */

.account { position: relative; }

.account-button {
  display: flex;
  gap: calc(var(--step) * 2.5);
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 calc(var(--step) * 3);
  border: 1px solid var(--rail-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  color: var(--rail-text);
}

.account-button:hover { background: var(--rail-hover); border-color: rgba(255, 255, 255, 0.16); }

.account-button[aria-expanded="true"] { background: var(--rail-active); }

.account-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--grad-a), var(--grad-b));
  color: #041224;
  font-size: var(--fs-xs);
  font-weight: 750;
  text-transform: uppercase;
}

.account-name {
  flex: 1;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.account-caret { flex: none; width: 14px; height: 14px; color: var(--rail-muted); transition: transform var(--dur-fast) var(--ease); }

.account-button[aria-expanded="true"] .account-caret { transform: rotate(180deg); }

/* The menu opens upward, out of the rail's foot. */
.account-menu {
  position: absolute;
  bottom: calc(100% + var(--step) * 1.5);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 100%;
  padding: var(--step);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  animation: rise-in var(--dur-fast) var(--ease-out) both;
}

.account-head {
  padding: calc(var(--step) * 1.5) calc(var(--step) * 3) calc(var(--step) * 2);
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.account-head strong { color: var(--text); font-weight: 700; }

.account-head:empty { display: none; }

.account-item {
  display: flex;
  gap: calc(var(--step) * 2.5);
  align-items: center;
  min-height: 38px;
  padding: 0 calc(var(--step) * 3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.account-item svg { flex: none; width: 16px; height: 16px; color: var(--text-muted); }

.account-item:hover { background: var(--surface-hover); }

.account-item.danger { color: var(--danger); }
.account-item.danger svg { color: var(--danger); }
.account-item.danger:hover { background: var(--danger-soft); }

/* ============================================================== inputs === */

input[type="text"], input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  min-height: 40px;
  padding: calc(var(--step) * 2) calc(var(--step) * 3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

input::placeholder, textarea::placeholder { color: var(--text-faint); }

input[type="text"]:hover, input[type="password"]:hover, input[type="number"]:hover, textarea:hover, select:hover {
  border-color: color-mix(in srgb, var(--line-strong) 50%, var(--text-faint));
}

input[type="text"]:focus-visible, input[type="password"]:focus-visible, input[type="number"]:focus-visible,
textarea:focus-visible, select:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus);
  outline: none;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out;
}

input:disabled, textarea:disabled, select:disabled { opacity: 0.6; cursor: not-allowed; background: var(--surface-sunken); }

select {
  width: auto;
  padding-right: calc(var(--step) * 8);
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right calc(var(--step) * 2.5) center;
  background-size: 16px;
  cursor: pointer;
}

textarea { resize: vertical; }

/* Field with a visible label, used on the login and account forms. */
.field { display: grid; gap: calc(var(--step) * 1.5); }

.field label { font-size: var(--fs-sm); font-weight: 600; }

.field .hint { margin-top: 2px; }

/* A checkbox drawn as a switch. Still a native checkbox underneath. */
.switch {
  position: relative;
  flex: none;
  width: 40px;
  height: 23px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-hover);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.28);
  transition: transform var(--dur) var(--spring);
}

.switch:checked {
  border-color: transparent;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
}

.switch:checked::before { background: #ffffff; transform: translateX(17px); }

.switch:focus-visible { box-shadow: var(--focus); border-radius: var(--radius-pill); }

/* password-eye.js wraps every password box in one of these. */
.password-field { position: relative; display: block; }

.password-field input { padding-right: calc(var(--step) * 11); }

.password-field .password-eye {
  position: absolute;
  top: 50%;
  right: calc(var(--step) * 1.25);
  display: grid;
  place-items: center;
  width: 32px;
  min-height: 0;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  transform: translateY(-50%);
}

.password-field .password-eye:hover { background: var(--surface-hover); color: var(--text); }

.password-field .password-eye:active { transform: translateY(-50%) scale(0.94); }

.password-eye svg { width: 18px; height: 18px; }

.password-eye .icon-hide { display: none; }
.password-eye.is-on .icon-show { display: none; }
.password-eye.is-on .icon-hide { display: block; }

/* ============================================================== status === */

/* Inline alert (the login pages render one inside the card). */
.status {
  display: flex;
  gap: calc(var(--step) * 2.5);
  align-items: flex-start;
  padding: calc(var(--step) * 2.5) calc(var(--step) * 3.5);
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.status.error { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }

/* The app page shows status as a toast, so nothing below it moves. */
.status-wrap {
  position: fixed;
  right: 0;
  bottom: calc(var(--step) * 5 + env(safe-area-inset-bottom, 0px));
  left: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 calc(var(--step) * 4);
  pointer-events: none;
}

.status-wrap .status {
  max-width: 560px;
  border-color: var(--line-strong);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: toast-in var(--dur) var(--ease-out) both;
}

.status-wrap .status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
}

.status-wrap .status.error::before { background: var(--danger); }

.status-wrap .status.is-leaving { animation: toast-out var(--dur-fast) var(--ease) forwards; }

/* ============================================================ dropzone === */

.dropzone {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: calc(var(--step) * 1);
  flex: 1;
  min-height: 200px;
  overflow: hidden;
  padding: calc(var(--step) * 9) calc(var(--step) * 4);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

/* A bloom of the section's colour that only comes up on hover and drag. */
.dropzone-aura {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(40% 40% at 50% 50%, rgba(var(--tint-rgb), 0.35), transparent 70%);
  filter: blur(30px);
  transition: opacity var(--dur) var(--ease);
}

.dropzone > *:not(.dropzone-aura) { position: relative; }

.dropzone:hover { border-color: var(--tint); background: var(--tint-soft); }

.dropzone:hover .dropzone-aura { opacity: 0.5; }

.dropzone:focus-visible { border-color: var(--tint); box-shadow: var(--focus); }

.dropzone.dragover {
  border-style: solid;
  border-color: var(--tint);
  background: var(--tint-soft);
  box-shadow: inset 0 0 0 1px var(--tint), 0 0 0 4px rgba(var(--tint-rgb), 0.12);
}

.dropzone.dragover .dropzone-aura { opacity: 1; }

.dropzone.is-uploading { opacity: 0.6; pointer-events: none; }

.dropzone-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: calc(var(--step) * 2);
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  box-shadow: var(--sheen), 0 6px 18px -6px rgba(var(--tint-rgb), 0.6);
  transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--ease);
}

.dropzone-icon svg { width: 25px; height: 25px; transition: transform var(--dur) var(--ease); }

.dropzone:hover .dropzone-icon { transform: translateY(-2px); }

.dropzone.dragover .dropzone-icon { transform: scale(1.1); }

.dropzone.dragover .dropzone-icon svg { transform: translateY(-3px); }

.dropzone-title { font-size: var(--fs-base); font-weight: 700; letter-spacing: -0.015em; }

.dropzone-sub { color: var(--text-muted); font-size: var(--fs-sm); }

.dropzone-link { color: var(--tint); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }

.dropzone-hint { margin-top: calc(var(--step) * 2); }

.dropzone-hint:empty { display: none; }

/* ============================================================ progress === */

.progress {
  margin-top: calc(var(--step) * 4);
  padding: calc(var(--step) * 4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.progress:not([hidden]) { animation: rise-in var(--dur) var(--ease-out) both; }

.progress-head {
  display: flex;
  gap: calc(var(--step) * 3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(var(--step) * 3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.progress-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--line);
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* No byte count to show (before the first progress event, and again while the
   server finishes writing): an honest moving segment rather than 0%. */
.progress[data-phase="waiting"] .progress-fill {
  width: 35%;
  animation: slide-indeterminate 1.2s var(--ease) infinite;
}

.progress[data-phase="done"] .progress-fill { width: 100%; background: var(--success); }
.progress[data-phase="warning"] .progress-fill { width: 100%; background: var(--warning, #b7791f); }
.progress[data-phase="error"] .progress-fill { width: 100%; background: var(--danger); }
.progress[data-phase="done"] .progress-head { color: var(--success); }
.progress[data-phase="warning"] .progress-head { color: var(--warning, #b7791f); }
.progress[data-phase="error"] .progress-head { color: var(--danger); }

.progress-meta { margin-top: calc(var(--step) * 2); color: var(--text-muted); font-size: var(--fs-xs); }

/* ==================================================== confidential warn === */

/* Confidential text is a prominent in-app warning, not a browser popup.
   Red makes it easy to notice; the copy/actions still make clear it is reviewable. */
.sensitive-report {
  margin-top: calc(var(--step) * 1);
  padding: calc(var(--step) * 4);
  border: 1px solid color-mix(in srgb, var(--danger) 58%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--danger) 9%, transparent);
}

.sensitive-report:not([hidden]) { animation: rise-in var(--dur) var(--ease-out) both; }

.sensitive-head { display: flex; gap: calc(var(--step) * 3); align-items: flex-start; }

.sensitive-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}

.sensitive-icon svg { width: 18px; height: 18px; }

.sensitive-text { flex: 1; min-width: 0; }

.sensitive-text strong { display: block; color: var(--danger); font-size: var(--fs-md); font-weight: 700; }

.sensitive-text p { margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); }

.sensitive-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5);
  margin: calc(var(--step) * 3) 0 0;
  padding: 0;
  list-style: none;
}

/* The masked value, in a monospace pill so it reads as evidence rather than
   as text someone could mistake for the real thing. */
.sensitive-item {
  display: inline-flex;
  gap: calc(var(--step) * 1.5);
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 28%, transparent);
  font-size: var(--fs-2xs);
}

.sensitive-item b { font-weight: 650; }

.sensitive-item code {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
}

.sensitive-advice { margin-top: calc(var(--step) * 3); color: var(--text-muted); font-size: var(--fs-xs); }

.sensitive-confirm {
  display: flex;
  gap: calc(var(--step) * 2.5);
  align-items: flex-start;
  margin-top: calc(var(--step) * 3);
  padding: calc(var(--step) * 2.5) calc(var(--step) * 3);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 34%, transparent);
  font-size: var(--fs-xs);
  cursor: pointer;
}

.sensitive-confirm input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--danger);
}

.sensitive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2);
  align-items: center;
  margin-top: calc(var(--step) * 3);
}

.sensitive-actions .primary-button {
  --tint: var(--warn);
  --tint-rgb: 180, 83, 9;
  --grad-a: #d97706;
  --grad-b: #f59e0b;
}

/* ====================================================== blocked report === */

/* A refusal is not a toast: it carries a reference someone may need to quote,
   so it stays on screen until it is dismissed. */
.blocked-report {
  margin-top: calc(var(--step) * 4);
  padding: calc(var(--step) * 4);
  border: 1px solid var(--danger-line);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
}

.blocked-report:not([hidden]) { animation: rise-in var(--dur) var(--ease-out) both; }

.blocked-head {
  display: flex;
  gap: calc(var(--step) * 3);
  align-items: flex-start;
}

.blocked-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.blocked-icon svg { width: 18px; height: 18px; }

.blocked-text { flex: 1; min-width: 0; }

.blocked-text strong { display: block; color: var(--danger); font-size: var(--fs-md); font-weight: 700; }

.blocked-text p { margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); }

.blocked-list {
  display: grid;
  gap: calc(var(--step) * 2);
  margin: calc(var(--step) * 3) 0 0;
  padding: 0;
  list-style: none;
}

.blocked-item {
  padding: calc(var(--step) * 2.5) calc(var(--step) * 3);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--danger-line);
}

.blocked-name {
  font-size: var(--fs-sm);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.blocked-why { margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); }

.blocked-ref {
  display: inline-block;
  margin-top: calc(var(--step) * 1.5);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-2xs);
}

/* ============================================================= options === */

/* The three send settings are folded away behind a line that already shows
   what they are set to, so the common case is a dropzone and nothing else. */
.options-block { margin-top: calc(var(--step) * 4); }

.text-form .options-block { margin-top: 0; }

.options-summary {
  display: flex;
  gap: calc(var(--step) * 2);
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.options-summary:hover { border-color: var(--line-strong); background: var(--surface-hover); }

.options-summary[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.options-summary-tags {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5);
  align-items: center;
  min-width: 0;
}

.options-caret { display: grid; place-items: center; flex: none; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease); }

.options-caret svg { width: 15px; height: 15px; }

.options-summary[aria-expanded="true"] .options-caret { transform: rotate(180deg); }

/* One tag per setting. Grey while it is on its default, coloured the moment
   the sender changes it. */
.otag {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.55;
  white-space: nowrap;
}

.otag svg { flex: none; width: 12px; height: 12px; }

.otag.is-set-lock { border-color: var(--primary-line); background: var(--primary-soft); color: var(--accent); }
.otag.is-set-share { border-color: var(--recv-line); background: var(--recv-soft); color: var(--recv); }
.otag.is-set-timer { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }

.options {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--surface-sunken);
}

.options:not([hidden]) { animation: rise-in var(--dur-fast) var(--ease-out) both; }

.options > * { padding: calc(var(--step) * 3.5) calc(var(--step) * 4); }

.options > * + * { border-top: 1px solid var(--line); }

.protect-toggle {
  display: flex;
  gap: calc(var(--step) * 3);
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.protect-toggle-text { display: grid; gap: 1px; min-width: 0; }

.protect-toggle-title, .share-title, .expiry-title { font-size: var(--fs-md); font-weight: 600; }

.protect-toggle-sub { color: var(--text-muted); font-size: var(--fs-xs); }

.protect-field { display: grid; gap: calc(var(--step) * 2); margin-top: calc(var(--step) * 3); }

.share-head, .expiry-head {
  display: flex;
  gap: calc(var(--step) * 3);
  align-items: center;
  justify-content: space-between;
}

.share-head select, .expiry-head select {
  flex: none;
  min-width: 190px;
  min-height: 36px;
  padding-top: calc(var(--step) * 1.5);
  padding-bottom: calc(var(--step) * 1.5);
  font-size: var(--fs-sm);
}

.share-head select { min-width: 205px; }

.share-sub, .expiry-sub { margin-top: calc(var(--step) * 2.5); color: var(--text-muted); font-size: var(--fs-xs); }

.expiry-minutes {
  display: flex;
  gap: calc(var(--step) * 2);
  align-items: center;
  margin-top: calc(var(--step) * 3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.expiry-minutes input { width: 96px; min-height: 36px; }

/* Revealed controls rise in; they start hidden, so nothing plays on load. */
.protect-field:not([hidden]), .expiry-minutes:not([hidden]), .people:not([hidden]) {
  animation: rise-in var(--dur) var(--ease-out) both;
}

/* ========================================================== recipients === */

.people { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 2); margin-top: calc(var(--step) * 3); }

.people .hint { width: 100%; }

.person {
  position: relative;
  display: inline-flex;
  gap: calc(var(--step) * 2);
  align-items: center;
  min-height: 32px;
  padding: 0 calc(var(--step) * 3) 0 calc(var(--step) * 2.5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.person:hover { border-color: var(--accent); }

/* The box is drawn as a small round check; the input stays for keyboard and
   screen-reader use. */
.person input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.person input:checked { border-color: var(--primary); background: var(--primary) var(--check) center / 11px no-repeat; }

.person:has(input:checked) { border-color: var(--accent); background: var(--primary-soft); color: var(--accent); }

.person:has(input:focus-visible) { box-shadow: var(--focus); }

.person input:focus-visible { box-shadow: none; }

/* Inline "share this file with…" panel inside a file row. */
.reshare {
  display: grid;
  gap: calc(var(--step) * 3);
  width: 100%;
  margin-top: calc(var(--step) * 3);
  padding: calc(var(--step) * 3.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  animation: rise-in var(--dur) var(--ease-out) both;
}

.reshare select { min-height: 36px; font-size: var(--fs-sm); }

.reshare .people { margin-top: 0; }

.reshare-actions { display: flex; gap: calc(var(--step) * 2); align-items: center; }

/* =========================================================== text form === */

.text-form { display: flex; flex: 1; flex-direction: column; gap: calc(var(--step) * 3); }

.text-form textarea { flex: 1; min-height: 140px; line-height: 1.55; }

.text-form-footer { display: flex; gap: calc(var(--step) * 3); align-items: center; justify-content: space-between; }

/* =============================================================== lists === */

.note-list, .file-list, .user-list { display: grid; gap: calc(var(--step) * 2.5); }

.user-list:not(:empty) { margin-top: calc(var(--step) * 4); }

.note-row, .file-row, .user-row {
  position: relative;
  padding: calc(var(--step) * 3) calc(var(--step) * 3.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.note-row:hover, .file-row:hover, .user-row:hover {
  border-color: color-mix(in srgb, var(--tint) 32%, var(--line));
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

/* Something another person sent you wears a coloured edge, matching the
   "Sent to me" chip and the reading in the overview band. */
.note-row.is-received, .file-row.is-received {
  border-left: 3px solid var(--recv);
  padding-left: calc(var(--step) * 3.5 - 2px);
}

/* Only rows that were not on screen before the last refresh animate. */
.note-row.is-new, .file-row.is-new, .user-row.is-new {
  animation: rise-in var(--dur) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}

/* Badges: locked, sender, disabled, permanent admin. */
.lock-badge, .from-badge, .off-badge, .root-badge {
  display: inline-flex;
  flex: none;
  gap: 4px;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
}

.lock-badge, .root-badge {
  border-color: var(--primary-line);
  background: var(--primary-soft);
  color: var(--accent);
  text-transform: uppercase;
}

.from-badge { border-color: var(--recv-line); background: var(--recv-soft); color: var(--recv); }

.off-badge { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); text-transform: uppercase; }

/* Metadata lines: separate items with a middle dot, wrap freely. */
.note-meta, .file-meta, .user-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1) calc(var(--step) * 1.5);
  align-items: center;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.meta-item { display: inline-flex; gap: 4px; align-items: center; min-width: 0; overflow-wrap: anywhere; }

.meta-item + .meta-item::before { content: "\00b7"; margin-right: calc(var(--step) * 1.5); color: var(--text-faint); }

.meta-item svg { flex: none; width: 12px; height: 12px; }

/* Expiry and password state are tags, so they read as status rather than as
   one more fact in the line. */
.meta-expiry, .meta-lock {
  padding: 0 7px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-pill);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.7;
}

.meta-lock { border-color: var(--primary-line); background: var(--primary-soft); color: var(--accent); }

.meta-item + .meta-expiry::before, .meta-item + .meta-lock::before { content: none; }

/* ----- files */

.file-row { display: flex; gap: calc(var(--step) * 3.5); align-items: center; justify-content: space-between; }

/* The icon is tinted by what kind of file it is, so a long list can be
   scanned by colour before any filename is read. */
.file-icon {
  display: grid;
  place-items: center;
  flex: none;
  align-self: flex-start;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--kind-soft, var(--surface-sunken));
  color: var(--kind, var(--text-muted));
  box-shadow: inset 0 0 0 1px var(--kind-line, var(--line));
}

.file-icon svg { width: 18px; height: 18px; }

[data-kind="image"] { --kind: #7c3aed; --kind-soft: #f3efff; --kind-line: #dcd0fb; }
[data-kind="video"] { --kind: #be123c; --kind-soft: #fff1f3; --kind-line: #fecdd6; }
[data-kind="audio"] { --kind: #c2410c; --kind-soft: #fff5ed; --kind-line: #fed7b5; }
[data-kind="doc"]   { --kind: #1d4ed8; --kind-soft: #e8efff; --kind-line: #bcd0fb; }
[data-kind="sheet"] { --kind: #0f766e; --kind-soft: #e7f8f5; --kind-line: #a3e3d8; }
[data-kind="zip"]   { --kind: #b45309; --kind-soft: #fffaeb; --kind-line: #fde3a7; }
[data-kind="code"]  { --kind: #0369a1; --kind-soft: #e8f5fe; --kind-line: #b3ddf7; }
[data-kind="other"] { --kind: #64748b; --kind-soft: #f1f5f9; --kind-line: #cbd5e1; }

:root[data-theme="dark"] [data-kind="image"] { --kind: #c4b5fd; --kind-soft: #1d1738; --kind-line: #3b2f6e; }
:root[data-theme="dark"] [data-kind="video"] { --kind: #fb7185; --kind-soft: #2e1519; --kind-line: #5b242c; }
:root[data-theme="dark"] [data-kind="audio"] { --kind: #fdba74; --kind-soft: #2b1c10; --kind-line: #573418; }
:root[data-theme="dark"] [data-kind="doc"]   { --kind: #7aa2ff; --kind-soft: #111d3a; --kind-line: #26406f; }
:root[data-theme="dark"] [data-kind="sheet"] { --kind: #43d3bd; --kind-soft: #0c2622; --kind-line: #1b4a43; }
:root[data-theme="dark"] [data-kind="zip"]   { --kind: #fbbf24; --kind-soft: #2b2311; --kind-line: #4d3c14; }
:root[data-theme="dark"] [data-kind="code"]  { --kind: #67c8f9; --kind-soft: #0b2436; --kind-line: #164a68; }
:root[data-theme="dark"] [data-kind="other"] { --kind: #94a3b8; --kind-soft: #172032; --kind-line: #2c3a52; }

.file-main { flex: 1; min-width: 0; }

.file-name {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1) calc(var(--step) * 2);
  align-items: center;
  font-size: var(--fs-md);
  font-weight: 650;
  line-height: 1.35;
}

.file-name-text { min-width: 0; overflow-wrap: anywhere; }

.file-meta { margin-top: 3px; }

.file-actions { display: flex; flex: none; gap: calc(var(--step) * 1.5); align-items: center; }

/* ----- text */

.note-text {
  max-height: 180px;
  margin: 0;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Stands in for .note-text on protected text, until the password is entered. */
.note-lock {
  display: grid;
  gap: calc(var(--step) * 2.5);
  padding: calc(var(--step) * 3.5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.note-lock-title { display: flex; gap: calc(var(--step) * 1.5); align-items: center; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }

.note-lock-title svg { flex: none; width: 14px; height: 14px; }

.note-lock-row { display: flex; gap: calc(var(--step) * 2); align-items: center; }

.note-lock-row .password-field { flex: 1; min-width: 0; }

.note-lock-row input { min-height: 38px; }

.note-lock-row button { flex: none; min-height: 38px; }

.note-footer {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5) calc(var(--step) * 3);
  align-items: center;
  justify-content: space-between;
  margin-top: calc(var(--step) * 2.5);
  padding-top: calc(var(--step) * 2.5);
  border-top: 1px solid var(--line);
}

.note-actions { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 1.5); align-items: center; }

/* ============================================================ row menu === */

/* One button per row opens everything else it can do. The popup is placed in
   viewport coordinates, because the list it belongs to scrolls. */
.row-menu-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-muted);
}

.row-menu-button svg { width: 17px; height: 17px; }

.row-menu-button:hover, .row-menu-button[aria-expanded="true"] {
  border-color: var(--line-strong);
  background: var(--surface-hover);
  color: var(--text);
}

.row-menu-spacer { flex: none; width: 34px; }

.row-menu {
  position: fixed;
  z-index: 70;
  display: grid;
  gap: 1px;
  min-width: 210px;
  max-width: calc(100vw - 16px);
  padding: var(--step);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  outline: none;
  animation: pop-in var(--dur-fast) var(--ease-out) both;
}

.row-menu-group {
  padding: calc(var(--step) * 2) calc(var(--step) * 2.5) calc(var(--step) * 1);
  color: var(--text-faint);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.row-menu-item {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 calc(var(--step) * 2.5);
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
}

.row-menu-item:hover { background: var(--surface-hover); }

/* The setting a file is already on, so the menu doubles as a read-out. */
.row-menu-item.is-current { color: var(--accent); }

.row-menu-item.is-current::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: auto;
  background: currentColor;
  mask: var(--tick) center / contain no-repeat;
  -webkit-mask: var(--tick) center / contain no-repeat;
}

.row-menu-item.danger {
  margin-top: calc(var(--step) * 1.5);
  padding-top: calc(var(--step) * 1.5);
  border-top: 1px solid var(--line);
  border-radius: 0 0 6px 6px;
  color: var(--danger);
}

.row-menu-item.danger:hover { background: var(--danger-soft); }

/* ============================================================= search === */

/* Appears once a list is long enough that scanning it stops being instant. */
.search {
  display: flex;
  gap: calc(var(--step) * 2);
  align-items: center;
  margin-bottom: calc(var(--step) * 3);
  padding: 0 calc(var(--step) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.search:focus-within { border-color: var(--tint); background: var(--surface); box-shadow: var(--focus); }

.search svg { flex: none; width: 15px; height: 15px; color: var(--text-faint); }

.search input {
  min-height: 34px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-sm);
}

.search input:focus-visible { box-shadow: none; }

/* Safari and Chrome both draw their own clear button; neither matches. */
.search input::-webkit-search-cancel-button { appearance: none; }

/* ======================================================== filter chips === */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5);
  margin-bottom: calc(var(--step) * 4);
}

.chip {
  display: inline-flex;
  gap: calc(var(--step) * 1.5);
  align-items: center;
  min-height: 32px;
  padding: 0 calc(var(--step) * 2) 0 calc(var(--step) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.chip:hover { border-color: var(--line-strong); color: var(--text); }

.chip-count {
  min-width: 19px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-hover);
  color: var(--text-faint);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.chip.is-active { border-color: var(--tint-line); background: var(--tint-soft); color: var(--tint); }

.chip.is-active .chip-count { background: color-mix(in srgb, var(--tint) 18%, transparent); color: var(--tint); }

/* "Sent to me" keeps the received colour wherever it appears. */
.chip-in.is-active { border-color: var(--recv-line); background: var(--recv-soft); color: var(--recv); }

.chip-in.is-active .chip-count { background: color-mix(in srgb, var(--recv) 18%, transparent); color: var(--recv); }

/* ======================================================== empty states === */

.empty-state {
  display: grid;
  flex: 1;
  align-content: center;
  justify-items: center;
  gap: calc(var(--step) * 1);
  padding: calc(var(--step) * 8) calc(var(--step) * 4);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(300px 180px at 50% 30%, rgba(var(--tint-rgb), 0.06), transparent 70%),
    var(--surface-sunken);
  text-align: center;
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}

.empty-art { display: block; width: 168px; margin-bottom: calc(var(--step) * 2); }

.empty-art svg { display: block; width: 100%; height: auto; }

/* The drawing lifts a couple of pixels and settles, very slowly. */
.empty-art .art-float { animation: float-soft 6s ease-in-out infinite; transform-origin: 50% 60%; }

.empty-art .art-shadow { fill: rgba(var(--tint-rgb), 0.10); stroke: none; }

.empty-art .art-fill { fill: rgba(var(--tint-rgb), 0.10); stroke: none; }

.empty-art .art-edge { stroke: var(--tint); stroke-width: 2.4; fill: none; }

.empty-art .art-accent { stroke: color-mix(in srgb, var(--tint) 62%, transparent); stroke-width: 2.6; }

.empty-art .art-line { stroke: color-mix(in srgb, var(--text-muted) 55%, transparent); stroke-width: 2.4; }

/* The drop outline the file sits inside, echoing the real dropzone. */
.empty-art .art-dash {
  stroke: color-mix(in srgb, var(--tint) 38%, transparent);
  stroke-width: 2;
  stroke-dasharray: 8 8;
  fill: none;
}

.empty-title { font-size: var(--fs-base); font-weight: 700; letter-spacing: -0.015em; }

/* Three steps, connected. It replaces the drawing that used to sit here: an
   empty list is the one moment the flow is worth spelling out. */
.flow {
  display: grid;
  gap: calc(var(--step) * 1);
  width: min(360px, 100%);
  margin: calc(var(--step) * 5) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.flow-step {
  position: relative;
  display: flex;
  gap: calc(var(--step) * 3);
  align-items: center;
  padding: calc(var(--step) * 2) 0;
}

/* The line joining one mark to the next, drawn behind them. */
.flow-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(50% + 18px);
  bottom: calc(-50% + 18px);
  left: 17px;
  width: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--tint-line), color-mix(in srgb, var(--tint-line) 35%, transparent));
}

.flow-mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--tint);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--tint-line), var(--shadow-sm);
}

.flow-mark svg { width: 17px; height: 17px; }

/* The last step is the payoff, so it is the one that is filled in. */
.flow-step:last-child .flow-mark {
  color: #ffffff;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  box-shadow: var(--sheen), 0 4px 12px -4px rgba(var(--tint-rgb), 0.5);
}

.flow-text { display: grid; min-width: 0; line-height: 1.3; }

.flow-text strong { font-size: var(--fs-sm); font-weight: 650; }

.flow-text small { margin-top: 1px; color: var(--text-muted); font-size: var(--fs-xs); }

.empty-sub { max-width: 34ch; color: var(--text-muted); font-size: var(--fs-sm); }

/* =========================================================== skeletons === */

/* Shown until the first list reply lands. Same row rhythm as the real rows,
   so nothing jumps when they are swapped in. */
.skeleton-list { display: grid; gap: calc(var(--step) * 2.5); }

.skeleton-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon line pill"
    "icon sub  pill";
  gap: calc(var(--step) * 1.5) calc(var(--step) * 3.5);
  align-items: center;
  padding: calc(var(--step) * 3) calc(var(--step) * 3.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.skeleton-note { grid-template-columns: 1fr; grid-template-areas: "line" "sub"; }

.sk {
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-hover) 40%, var(--surface-sunken) 80%)
    0 0 / 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

.sk-icon { grid-area: icon; width: 38px; height: 38px; border-radius: var(--radius-md); }
.sk-line { grid-area: line; width: var(--w, 60%); }
.sk-sub { grid-area: sub; width: var(--w, 35%); height: 8px; opacity: 0.7; }
.sk-pill { grid-area: pill; width: 88px; height: 34px; border-radius: var(--radius-sm); }

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

.card {
  position: relative;
  overflow: hidden;
  padding: calc(var(--step) * 5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.tinted-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b) 45%, transparent 85%);
}

.tinted-card > * { position: relative; }

.card-head {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2) calc(var(--step) * 3);
  align-items: center;
  margin-bottom: calc(var(--step) * 4);
}

.card-head > div:first-child { flex: 1 1 auto; min-width: 0; }

.head-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  color: #ffffff;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  box-shadow: var(--sheen), 0 4px 12px -4px rgba(var(--tint-rgb), 0.55);
}

.head-icon svg { width: 18px; height: 18px; }

.head-text { flex: 1 1 200px; min-width: 0; }

.card-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }

.card-sub { margin-top: 1px; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }

.section-actions { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 1.5); margin-left: auto; }

.stack-form { display: grid; gap: calc(var(--step) * 4); }

.stack-form .primary-button { justify-self: start; min-width: 160px; }

.user-row { display: flex; gap: calc(var(--step) * 3.5); align-items: center; justify-content: space-between; }

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  align-self: flex-start;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
}

.user-main { flex: 1; min-width: 0; }

.user-name {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1) calc(var(--step) * 2);
  align-items: center;
  font-size: var(--fs-md);
  font-weight: 650;
  line-height: 1.35;
}

.user-name-text { min-width: 0; overflow-wrap: anywhere; }

.user-meta { margin-top: 3px; }

.user-actions { display: flex; flex: none; flex-wrap: wrap; gap: calc(var(--step) * 2); justify-content: flex-end; }

/* ----- the brand outside the rail (the accounts page and the login card) */

.brand {
  display: flex;
  gap: calc(var(--step) * 2.5);
  align-items: center;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.brand-text { display: grid; min-width: 0; line-height: 1.2; }

.brand-text strong { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; }

.brand-sub {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The mark is designed against the rail's navy; on a light surface it needs a
   shadow of its own to keep the same weight. */
.brand .brand-mark, .login-brand .brand-mark {
  box-shadow: var(--sheen), 0 6px 16px -6px rgba(37, 99, 235, 0.65);
}

/* A page with no rail centres its own column, header included. */
body.plain .topbar-inner,
body.plain .app-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding-left: calc(var(--step) * 6);
  padding-right: calc(var(--step) * 6);
}

body.plain .app-shell { padding-bottom: calc(var(--step) * 16); }

/* ======================================================= login / unlock === */

.login-card {
  position: relative;
  overflow: hidden;
  width: min(430px, calc(100% - 32px));
  margin: max(7vh, 32px) auto 0;
  padding: calc(var(--step) * 8);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
}

.login-card > * { position: relative; }

.login-brand {
  display: flex;
  gap: calc(var(--step) * 2.5);
  align-items: center;
  margin-bottom: calc(var(--step) * 6);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* The mark in the rail is on navy; on a white card it needs its own shadow. */
.login-brand .brand-mark { box-shadow: var(--sheen), 0 6px 16px -6px rgba(37, 99, 235, 0.7); }

.login-card h1 {
  margin-top: calc(var(--step) * 1);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.login-card .subtitle { margin-top: calc(var(--step) * 2); color: var(--text-muted); font-size: var(--fs-md); }

.login-card .status { margin-top: calc(var(--step) * 4); }

.login-form { display: grid; gap: calc(var(--step) * 4); margin-top: calc(var(--step) * 5); }

.login-form input { min-height: 44px; font-size: var(--fs-base); }

.login-form .field label { font-size: var(--fs-md); }

.login-form .primary-button { min-height: 46px; margin-top: calc(var(--step) * 1); font-size: var(--fs-base); }

.login-admin { width: 100%; min-height: 42px; margin-top: calc(var(--step) * 3); }

.login-card > div > .hint { margin-top: calc(var(--step) * 5); text-align: center; }

.login-card .hint a { font-weight: 600; text-decoration: none; }

.login-card .hint a:hover { text-decoration: underline; }

/* ========================================================= small screens === */

/* Below this the rail turns into a bar across the top: the brand and the
   account on one line, the sections beneath them. */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .rail {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--step) * 2) calc(var(--step) * 3);
    padding: calc(var(--step) * 3) calc(var(--step) * 4);
  }

  .rail::after { border-right: 0; border-bottom: 1px solid var(--rail-line); background: none; }

  .rail-aurora { inset: -120% -20% auto -20%; height: 300%; }

  .rail-brand { padding: 0; }

  .rail-nav { flex: 1 1 100%; order: 3; grid-template-columns: 1fr 1fr; gap: calc(var(--step) * 1.5); }

  /* Laid out in a row, the marker slides sideways instead. */
  .rail-marker { width: calc(50% - var(--step) * 0.75); height: 100%; }
  .rail-nav[data-active="text"] .rail-marker { transform: translateX(calc(100% + var(--step) * 1.5)); }

  .nav-item { justify-content: center; }
  .nav-label { flex: 0 1 auto; }
  .nav-link { flex: 1 1 100%; order: 4; justify-content: center; background: var(--rail-hover); }

  .rail-foot { margin: 0 0 0 auto; padding: 0; }
  .account-button { width: auto; min-height: 38px; }
  .account-name { display: none; }
  .account-menu { left: auto; right: 0; }

  .topbar-inner, .app-shell { padding-left: calc(var(--step) * 4); padding-right: calc(var(--step) * 4); }
  .app-shell { padding-top: calc(var(--step) * 4); }

  /* Wrapped into two columns, an inset edge would draw a rule above the
     second cell of the first row. A one-pixel gap over a line-coloured panel
     draws only the edges that exist, however the cells fall. */
  .overview { gap: 1px; background: var(--line); }
  .overview::after { display: none; }
  .overview > * {
    flex: 1 1 46%;
    min-width: 0;
    padding: calc(var(--step) * 3.5) calc(var(--step) * 4);
    background: var(--surface);
    box-shadow: none;
  }
  .activity { flex: 1 1 100%; }
  .activity-plot { justify-content: space-between; }
  .bar-col { width: 100%; max-width: 34px; }

  .panel { padding: calc(var(--step) * 4); border-radius: var(--radius-lg); }
  .panel-head > .panel-actions { flex: 1 1 100%; margin-left: 0; }

  /* Comfortable touch targets. */
  .primary-button, .ghost-button, .delete-button, .chip { min-height: 42px; }
  .mini-button { min-height: 38px; }
  .nav-item { min-height: 44px; }
  .text-button { padding: 8px 10px; }
  input[type="text"], input[type="password"], input[type="number"], textarea, select { min-height: 44px; font-size: var(--fs-lg); }
  .share-head select, .expiry-head select, .reshare select, .expiry-minutes input { min-height: 42px; font-size: var(--fs-base); }

  .user-row { flex-wrap: wrap; }
  .user-actions { flex: 1 1 100%; justify-content: stretch; }
  .user-actions > * { flex: 1 1 0; }

  /* A file row stays one line: the name wraps rather than the buttons moving
     under it, so ten files are still ten short rows on a phone. */
  .file-row { gap: calc(var(--step) * 2.5); }
  .download-link { min-height: 38px; padding: 0 calc(var(--step) * 3); }
  .row-menu-button, .row-menu-spacer { width: 38px; height: 38px; }
  .row-menu-item { min-height: 40px; }

  .share-head, .expiry-head { flex-direction: column; align-items: stretch; gap: calc(var(--step) * 2); }
  .share-head select, .expiry-head select { min-width: 0; width: 100%; }
  .text-form-footer { flex-wrap: wrap; }
  .text-form-footer .primary-button { flex: 1 1 100%; }
  .stack-form .primary-button { justify-self: stretch; }
  .login-card { padding: calc(var(--step) * 6); margin-top: calc(var(--step) * 6); }
  .link-chip { max-width: 220px; }
}

@media (max-width: 560px) {
  .view-sub { display: none; }
  .empty-art { width: 132px; }
}

/* ========================================================= reduced motion === */

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

  /* The indeterminate bar cannot slide, so it shows a still, dimmed segment. */
  .progress[data-phase="waiting"] .progress-fill {
    width: 100%;
    animation: none !important;
    transform: none;
    opacity: 0.55;
  }

  /* The rail's light holds still rather than disappearing. */
  .rail-aurora { animation: none !important; }
}


/* ------------------------------------------------ security health (admin) */
.security-summary-card { margin-top: calc(var(--step) * 5); }
.security-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: calc(var(--step) * 3);
  margin-top: calc(var(--step) * 4);
}
.security-summary-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: calc(var(--step) * 3);
  background: var(--surface);
}
.security-summary-item span { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.security-summary-item strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.security-detail { margin-top: calc(var(--step) * 3); }

.security-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 6px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--warn);
  background: var(--surface);
  vertical-align: middle;
}


/* ======================================== confidential file warning (red) === */
/* This is deliberately prominent, but it is still a warning/choice flow rather
   than a malware refusal. The text and actions make that distinction explicit. */
.file-sensitive-report {
  margin-top: calc(var(--step) * 3);
  padding: calc(var(--step) * 4);
  border: 1px solid color-mix(in srgb, var(--danger) 58%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--danger) 9%, transparent);
}

.file-sensitive-report:not([hidden]) { animation: rise-in var(--dur) var(--ease-out) both; }
.file-sensitive-head { display: flex; gap: calc(var(--step) * 3); align-items: flex-start; }
.file-sensitive-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.file-sensitive-icon svg { width: 18px; height: 18px; }
.file-sensitive-text { flex: 1; min-width: 0; }
.file-sensitive-text strong { display: block; color: var(--danger); font-size: var(--fs-md); font-weight: 700; }
.file-sensitive-text p { margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); }
.file-sensitive-list {
  display: grid;
  gap: calc(var(--step) * 1.5);
  margin: calc(var(--step) * 3) 0 0;
  padding: 0;
  list-style: none;
}
.file-sensitive-item {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5);
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: calc(var(--step) * 2) calc(var(--step) * 2.5);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 28%, transparent);
  font-size: var(--fs-2xs);
}
.file-sensitive-item b {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.file-sensitive-finding {
  display: grid;
  gap: 2px;
  flex: 1 1 260px;
  min-width: 0;
}
.file-sensitive-finding-title {
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 720;
}
.file-sensitive-finding-detail {
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.file-sensitive-severity {
  flex: none;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  color: var(--danger);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent);
}
.file-sensitive-severity.is-medium {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 25%, transparent);
}
.file-sensitive-item span { color: var(--text-muted); }
.file-sensitive-item code {
  max-width: 100%;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--danger);
  font-size: inherit;
  overflow-wrap: anywhere;
}
.file-sensitive-advice { margin-top: calc(var(--step) * 3); color: var(--text-muted); font-size: var(--fs-xs); }
.file-sensitive-confirm {
  display: flex;
  gap: calc(var(--step) * 2.5);
  align-items: flex-start;
  margin-top: calc(var(--step) * 3);
  padding: calc(var(--step) * 2.5) calc(var(--step) * 3);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 34%, transparent);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.file-sensitive-confirm input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--danger);
}
.file-sensitive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2);
  align-items: center;
  margin-top: calc(var(--step) * 3);
}
.danger-outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 calc(var(--step) * 3.5);
  border: 1px solid color-mix(in srgb, var(--danger) 58%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.danger-outline-button:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.danger-outline-button:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

/* =================================================== prepared sharing === */
.pending-share {
  display: grid;
  gap: calc(var(--step) * 2.5);
  margin-top: calc(var(--step) * 3);
  padding: calc(var(--step) * 3.5);
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-md);
  background: var(--primary-soft);
}

.pending-share-head,
.pending-file,
.share-submit-row,
.bulk-bar {
  display: flex;
  gap: calc(var(--step) * 2.5);
  align-items: center;
}

.pending-share-head { justify-content: space-between; align-items: flex-start; }
.pending-share-head p { margin-top: 3px; color: var(--text-muted); font-size: var(--fs-xs); }
.pending-file-list { display: grid; gap: calc(var(--step) * 1.5); max-height: 180px; overflow: auto; }
.pending-file {
  min-height: 34px;
  padding: calc(var(--step) * 1.5) calc(var(--step) * 2);
  border: 1px solid color-mix(in srgb, var(--primary-line) 72%, var(--line));
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.pending-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 650; }
.pending-file-size { flex: none; color: var(--text-muted); font-size: var(--fs-xs); }
.share-submit-row { justify-content: space-between; margin-top: calc(var(--step) * 3); }
.share-submit-row .hint { max-width: 62%; }

/* ======================================================== bulk actions === */
.bulk-bar {
  flex-wrap: wrap;
  margin-top: calc(var(--step) * 3);
  padding: calc(var(--step) * 2.5) calc(var(--step) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.bulk-select-all { display: inline-flex; gap: calc(var(--step) * 1.5); align-items: center; font-size: var(--fs-sm); font-weight: 650; cursor: pointer; }
.bulk-select-all input,
.row-select input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.bulk-count { color: var(--text-muted); font-size: var(--fs-xs); }
.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5);
  margin-left: auto;
}
.bulk-bar .bulk-actions .mini-button { margin-left: 0; }
.bulk-share-panel {
  display: grid;
  gap: calc(var(--step) * 3);
  margin-top: calc(var(--step) * 2);
  padding: calc(var(--step) * 3.5);
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-md);
  background: var(--primary-soft);
}
.bulk-share-panel select { min-height: 38px; }

.row-select {
  position: absolute;
  top: calc(var(--step) * 3);
  left: calc(var(--step) * 2.5);
  z-index: 1;
  display: grid;
  place-items: center;
}
.file-row.is-selectable,
.note-row.is-selectable { padding-left: calc(var(--step) * 8); }
.file-row.is-selectable.is-received,
.note-row.is-selectable.is-received { padding-left: calc(var(--step) * 8); }
.file-row.is-selected,
.note-row.is-selected { border-color: var(--primary-line); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }

@media (max-width: 720px) {
  .share-submit-row { align-items: stretch; flex-direction: column; }
  .share-submit-row .hint { max-width: none; }
  .share-submit-row .primary-button { width: 100%; }
  .bulk-actions { width: 100%; margin-left: 0; }
  .bulk-actions .mini-button { flex: 1 1 auto; }
  .pending-file { align-items: flex-start; flex-wrap: wrap; }
  .pending-file-name { flex-basis: calc(100% - 80px); }
}

/* ========================================================= Phase 4 UX ===
   Responsive refinement without a UI framework. These rules deliberately
   build on the existing design system rather than introducing a second one. */

/* Slightly denser desktop rhythm keeps the primary send + list actions inside
   a normal laptop viewport while preserving comfortable touch targets. */
@media (min-width: 901px) {
  .topbar-inner { min-height: 62px; padding-block: calc(var(--step) * 1.5); }
  .app-shell { padding-top: calc(var(--step) * 5); }
  .overview { margin-bottom: calc(var(--step) * 4); }
  .overview > * { padding-block: calc(var(--step) * 3.25); }
  .panel { padding: calc(var(--step) * 4.5); }
  .panel-head { margin-bottom: calc(var(--step) * 3.5); }
  .dropzone { min-height: 156px; padding-block: calc(var(--step) * 6); }
  .text-form textarea { min-height: 128px; }
}

/* Search, audience filters and selection actions now read as one toolbar and
   wrap naturally instead of consuming three full rows. */
.list-tools {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2);
  align-items: center;
  margin-bottom: calc(var(--step) * 3);
}
.list-tools .search {
  flex: 1 1 210px;
  margin-bottom: 0;
}
.list-tools .filter-chips {
  flex: 0 1 auto;
  margin-bottom: 0;
}
.list-tools .bulk-bar,
.list-tools .bulk-share-panel {
  flex: 1 1 100%;
  margin-top: 0;
}
.list-tools + .list-scroll { min-height: 0; }
.list-tools:not(:has(> :not([hidden]))) { margin-bottom: 0; }

/* Text composer quick actions reduce keyboard work without changing the
   submit/security flow. Clipboard permission failure falls back to Ctrl/Cmd+V. */
.composer-tools {
  display: flex;
  gap: calc(var(--step) * 2);
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
}
.composer-hint {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.composer-actions {
  display: inline-flex;
  gap: calc(var(--step) * 1.5);
  align-items: center;
}
.composer-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2);
  align-items: center;
}
.shortcut-hint {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding-inline: calc(var(--step) * 2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-faint);
  font-size: var(--fs-2xs);
  font-weight: 650;
  white-space: nowrap;
}

/* Stronger focus containment makes it obvious which panel owns the next
   action, while remaining subtle enough for an enterprise UI. */
@media (hover: hover) and (pointer: fine) {
  .panel {
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .panel:hover {
    border-color: color-mix(in srgb, var(--tint-line) 70%, var(--line));
    box-shadow: var(--shadow-md);
  }
}

/* Admin list search uses the same list-tool visual language as the main app. */
.admin-search { margin: 0 0 calc(var(--step) * 3); }

/* Tablet: keep the dashboard genuinely at-a-glance and avoid large blank
   cards. The two work panels remain stacked so forms never become cramped. */
@media (min-width: 721px) and (max-width: 1179px) {
  .overview > * { flex-basis: 24%; }
  .overview .activity { flex-basis: 100%; }
  .columns { gap: calc(var(--step) * 4); }
}

/* Mobile shell: brand/account stay at the top, while Files/Text become a
   persistent bottom switch. This removes the scroll-to-top penalty when
   moving between the two primary jobs. */
@media (max-width: 720px) {
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

  .rail {
    position: relative;
    z-index: 30;
    min-height: 58px;
    padding: calc(var(--step) * 2.5) calc(var(--step) * 3.5);
  }
  .rail-brand { padding: 0; }
  .rail-brand-text small { display: none; }
  .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .brand-mark svg { width: 17px; height: 17px; }
  .rail-foot { margin-left: auto; }
  .account-button { min-height: 36px; padding-inline: calc(var(--step) * 2); }
  .nav-link { flex: none; order: 2; min-height: 36px; padding-inline: calc(var(--step) * 2.5); }
  .nav-link .nav-label { display: none; }

  .rail-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 80;
    order: initial;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: color-mix(in srgb, var(--rail-bg) 92%, transparent);
    box-shadow: 0 18px 46px rgba(2, 8, 28, .34);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  .rail-marker {
    top: 5px;
    left: 5px;
    width: calc(50% - 7px);
    height: calc(100% - 10px);
    border-radius: 13px;
  }
  .rail-marker::before { display: none; }
  .rail-nav[data-active="text"] .rail-marker { transform: translateX(calc(100% + 4px)); }
  .rail-nav .nav-item {
    justify-content: center;
    min-height: 48px;
    padding: 0 calc(var(--step) * 2.5);
  }
  .rail-nav .nav-icon { width: 19px; height: 19px; }
  .rail-nav .nav-label { display: inline; flex: 0 1 auto; }

  .topbar { top: 0; }
  .topbar-inner {
    min-height: 56px;
    padding: calc(var(--step) * 2) calc(var(--step) * 3.5);
    flex-wrap: nowrap;
  }
  .view-title { font-size: 18px; }
  .topbar-actions { gap: calc(var(--step) * 1.5); }
  .link-chip {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
  }
  .link-chip-url, .link-chip-copy { display: none; }
  .link-chip svg { width: 17px; height: 17px; color: var(--text-muted); }

  .app-shell {
    padding: calc(var(--step) * 3) calc(var(--step) * 3.5) calc(var(--step) * 8);
  }

  /* KPI cards become a single horizontal strip instead of a tall two-row grid. */
  .overview {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 1fr);
    gap: 1px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    margin-bottom: calc(var(--step) * 3);
  }
  .overview::-webkit-scrollbar { display: none; }
  .overview > * {
    min-width: 132px;
    padding: calc(var(--step) * 3);
    scroll-snap-align: start;
  }
  .overview .activity { display: none; }
  .gauge-ring { width: 44px; height: 44px; }
  .read-icon { width: 34px; height: 34px; }
  .gauge-text strong, .read-body strong { font-size: 18px; }

  .panel { padding: calc(var(--step) * 3.5); }
  .panel-head { margin-bottom: calc(var(--step) * 3); }
  .panel-icon { width: 34px; height: 34px; }
  .panel-title { font-size: var(--fs-base); }
  .panel-sub { display: none; }
  .panel-head > .panel-actions { flex: 0 1 auto; margin-left: auto; }
  .panel-actions .mini-button { padding-inline: calc(var(--step) * 2); }

  .dropzone {
    min-height: 126px;
    padding: calc(var(--step) * 5) calc(var(--step) * 3);
    border-radius: var(--radius-md);
  }
  .dropzone-icon { width: 42px; height: 42px; }
  .dropzone-sub { font-size: var(--fs-xs); }
  .dropzone-hint { display: none; }
  .pending-file-list { max-height: 132px; }

  .options-block { margin-top: calc(var(--step) * 3); }
  .text-form textarea { min-height: 118px; }
  .composer-tools { align-items: flex-start; }
  .composer-hint { display: none; }
  .composer-actions { width: 100%; justify-content: flex-end; }
  .shortcut-hint { display: none; }

  .list-tools { gap: calc(var(--step) * 2); margin-bottom: calc(var(--step) * 2.5); }
  .list-tools .search { flex-basis: 100%; }
  .list-tools .filter-chips {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }
  .list-tools .filter-chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; min-height: 38px; }
  .bulk-bar { align-items: center; }
  .bulk-count { order: 3; flex-basis: 100%; }

  .file-row, .note-row { border-radius: var(--radius-md); }
  .file-icon { width: 34px; height: 34px; }
  .download-link { min-width: 38px; padding-inline: calc(var(--step) * 2.5); }
  .note-text { max-height: 140px; }

  .share-submit-row,
  .text-form-footer {
    position: sticky;
    bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 8;
    margin-inline: calc(var(--step) * -1);
    padding: calc(var(--step) * 2.5) var(--step);
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .share-submit-row .primary-button,
  .text-form-footer .primary-button { min-height: 46px; }
}

/* Very narrow phones: preserve labels but collapse secondary top-level chrome. */
@media (max-width: 420px) {
  .rail-brand-text { display: none; }
  .topbar-actions .icon-button { width: 36px; height: 36px; }
  .overview { grid-auto-columns: minmax(122px, 1fr); }
  .overview > * { min-width: 122px; }
  .file-row { gap: calc(var(--step) * 2); }
  .file-icon { display: none; }
  .file-actions .download-link { font-size: 0; }
  .file-actions .download-link::after { content: "↓"; font-size: 18px; line-height: 1; }
  .security-summary-grid { grid-template-columns: 1fr; }
}

/* ====================================================== in-app dialog ===
   All app confirmations and credential/number prompts use this component.
   Browser/OS dialogs are reserved only for native file/folder selection. */
body.dfs-dialog-open { overflow: hidden; }

.dfs-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: calc(var(--step) * 5);
  background: rgba(7, 15, 36, 0.52);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fade-in var(--dur-fast) var(--ease-out) both;
}

.dfs-dialog-backdrop[hidden] { display: none; }

.dfs-dialog {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: calc(var(--step) * 4);
  width: min(520px, 100%);
  max-height: min(82vh, 720px);
  overflow: auto;
  padding: calc(var(--step) * 5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-md);
  animation: toast-in var(--dur) var(--ease-out) both;
}

.dfs-dialog-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--warn-soft);
  color: var(--warn);
}

.dfs-dialog[data-tone="danger"] .dfs-dialog-icon {
  background: var(--danger-soft);
  color: var(--danger);
}

.dfs-dialog[data-tone="success"] .dfs-dialog-icon {
  background: var(--success-soft);
  color: var(--success);
}

.dfs-dialog-icon svg { width: 20px; height: 20px; }
.dfs-dialog-main { min-width: 0; }
.dfs-dialog-title {
  margin: 1px 0 0;
  font-size: var(--fs-lg);
  line-height: 1.25;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.dfs-dialog-message {
  margin: calc(var(--step) * 1.5) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.dfs-dialog-form { margin-top: calc(var(--step) * 4); }
.dfs-dialog-fields { display: grid; gap: calc(var(--step) * 3); }
.dfs-dialog-fields:empty { display: none; }
.dfs-dialog-field { display: grid; gap: calc(var(--step) * 1.5); }
.dfs-dialog-label { font-size: var(--fs-sm); font-weight: 700; }
.dfs-dialog-field input,
.dfs-dialog-field textarea,
.dfs-dialog-field select { width: 100%; }
.dfs-dialog-help { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.dfs-dialog-error {
  margin: calc(var(--step) * 3) 0 0;
  padding: calc(var(--step) * 2.5) calc(var(--step) * 3);
  border: 1px solid var(--danger-line);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 650;
}
.dfs-dialog-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2);
  margin-top: calc(var(--step) * 4);
}

@media (max-width: 520px) {
  .dfs-dialog-backdrop {
    align-items: end;
    padding: calc(var(--step) * 3) calc(var(--step) * 3) max(calc(var(--step) * 3), env(safe-area-inset-bottom, 0px));
  }
  .dfs-dialog {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: calc(var(--step) * 3);
    width: 100%;
    max-height: 88vh;
    padding: calc(var(--step) * 4);
  }
  .dfs-dialog-icon { width: 36px; height: 36px; border-radius: 10px; }
  .dfs-dialog-actions > button { flex: 1 1 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .dfs-dialog-backdrop,
  .dfs-dialog { animation: none; }
}

/* ================================================== refreshed app shell ===
   Utility actions live in the top-right, the page owns vertical scrolling,
   and colour is used to separate jobs without adding visual clutter. */

:root {
  --bg: #f7f8ff;
  --surface-sunken: #f3f5ff;
  --surface-hover: #eef2ff;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --accent: #315eea;
  --files: #0f6eea;
  --files-soft: #eaf3ff;
  --files-line: #b8d5ff;
  --files-rgb: 15, 110, 234;
  --texts: #6d4aff;
  --texts-soft: #f1edff;
  --texts-line: #d6caff;
  --texts-rgb: 109, 74, 255;
  --recv: #0f9f86;
  --recv-soft: #e6faf5;
  --recv-line: #afeadd;
  --recv-rgb: 15, 159, 134;
  --grad-a: #3b82f6;
  --grad-b: #22d3ee;
  --page-wash:
    radial-gradient(900px 430px at 8% -10%, rgba(59, 130, 246, 0.16), transparent 64%),
    radial-gradient(820px 420px at 72% -16%, rgba(139, 92, 246, 0.13), transparent 62%),
    radial-gradient(760px 440px at 104% 12%, rgba(34, 211, 238, 0.11), transparent 60%),
    linear-gradient(180deg, #fafbff 0%, #f5f8ff 100%);
}

:root[data-theme="dark"] {
  --bg: #080b18;
  --surface: #11182b;
  --surface-sunken: #0c1222;
  --surface-raised: #161f35;
  --surface-hover: #1d2943;
  --line: #202d4a;
  --line-strong: #344666;
  --files: #65a7ff;
  --files-soft: #102341;
  --files-line: #28578d;
  --files-rgb: 101, 167, 255;
  --texts: #b29cff;
  --texts-soft: #221b42;
  --texts-line: #51418b;
  --texts-rgb: 178, 156, 255;
  --recv: #55dbc0;
  --recv-soft: #102b29;
  --recv-line: #285d56;
  --recv-rgb: 85, 219, 192;
  --page-wash:
    radial-gradient(920px 460px at 8% -12%, rgba(37, 99, 235, 0.23), transparent 64%),
    radial-gradient(820px 440px at 74% -14%, rgba(124, 58, 237, 0.18), transparent 62%),
    radial-gradient(760px 440px at 104% 14%, rgba(6, 182, 212, 0.14), transparent 60%);
}

.rail-aurora {
  opacity: .62;
  background:
    radial-gradient(28% 22% at 28% 12%, rgba(56, 189, 248, .95), transparent 70%),
    radial-gradient(30% 24% at 70% 31%, rgba(59, 130, 246, .92), transparent 70%),
    radial-gradient(28% 22% at 34% 58%, rgba(139, 92, 246, .9), transparent 70%),
    radial-gradient(24% 20% at 72% 82%, rgba(236, 72, 153, .68), transparent 72%);
}

.rail-marker {
  background: linear-gradient(135deg, rgba(59,130,246,.30), rgba(139,92,246,.22));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 24px -14px rgba(56,189,248,.9);
}

.topbar {
  border-bottom-color: color-mix(in srgb, var(--primary-line) 55%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface) 93%, #e8f1ff), color-mix(in srgb, var(--surface) 93%, #f3ecff));
}

:root[data-theme="dark"] .topbar {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface) 94%, #102e59), color-mix(in srgb, var(--surface) 94%, #2a184c));
}

.topbar-actions { gap: calc(var(--step) * 1.5); }

.utility-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--step) * 1.5);
  min-height: 36px;
  padding: 0 calc(var(--step) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.utility-button svg { width: 16px; height: 16px; flex: none; }
.utility-button:hover { transform: translateY(-1px); }
.utility-button:active { transform: scale(.97); }
.help-button {
  border-color: color-mix(in srgb, var(--texts-line) 80%, var(--line));
  background: linear-gradient(135deg, var(--texts-soft), color-mix(in srgb, var(--files-soft) 55%, var(--surface)));
  color: var(--texts);
}
.help-button:hover { box-shadow: 0 8px 20px -12px rgba(var(--texts-rgb), .8); }
.logout-button {
  border-color: var(--danger-line);
  background: color-mix(in srgb, var(--danger-soft) 72%, var(--surface));
  color: var(--danger);
}
.logout-button:hover { background: var(--danger-soft); box-shadow: 0 8px 20px -14px rgba(209,31,31,.6); }

/* Account belongs with session utilities, not primary navigation. */
.topbar-account { flex: none; }
.topbar .account-button {
  width: auto;
  min-height: 36px;
  max-width: 190px;
  padding: 0 calc(var(--step) * 2.5) 0 calc(var(--step) * 1.5);
  border-color: var(--primary-line);
  background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--texts-soft) 40%, var(--surface)));
  color: var(--text);
}
.topbar .account-button:hover,
.topbar .account-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--primary-line));
  background: color-mix(in srgb, var(--primary-soft) 75%, var(--surface));
}
.topbar .account-avatar {
  width: 26px;
  height: 26px;
  color: #fff;
  background: linear-gradient(145deg, #2563eb, #8b5cf6 58%, #06b6d4);
}
.topbar .account-name { color: var(--text); }
.topbar .account-caret { color: var(--text-muted); }
.topbar .account-menu {
  top: calc(100% + var(--step) * 2);
  right: 0;
  bottom: auto;
  left: auto;
  min-width: 235px;
  background: var(--surface-raised);
}

/* Panels are still quiet, but each workspace gets a visible colour identity. */
.mode-pane[data-mode="files"] .panel {
  background:
    radial-gradient(520px 180px at 4% 0%, rgba(59,130,246,.08), transparent 70%),
    var(--surface);
}
.mode-pane[data-mode="text"] .panel {
  background:
    radial-gradient(520px 180px at 4% 0%, rgba(139,92,246,.09), transparent 70%),
    var(--surface);
}
.overview {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--surface) 94%, #dbeafe), color-mix(in srgb, var(--surface) 94%, #ede9fe) 55%, color-mix(in srgb, var(--surface) 95%, #cffafe));
}
.read-files { background: linear-gradient(135deg, transparent, rgba(var(--files-rgb), .055)); }
.read-text { background: linear-gradient(135deg, transparent, rgba(var(--texts-rgb), .06)); }
.read-recv { background: linear-gradient(135deg, transparent, rgba(var(--recv-rgb), .06)); }

/* One page scrollbar on desktop. Lists and staged-file trays expand with the
   page instead of creating nested vertical/horizontal scroll regions. */
@media (min-width: 1180px) {
  .column:last-child { position: static; }
  .list-scroll {
    max-height: none;
    min-height: 0;
    overflow: visible;
    overscroll-behavior: auto;
    margin: 0;
    padding: 0;
  }
}
.list-scroll { overflow: visible; }
.list-scroll::-webkit-scrollbar { display: none; }
.pending-file-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: none;
  overflow: visible;
}
.pending-file { min-width: 0; overflow: hidden; }
.pending-file-name { min-width: 0; }
.note-text { max-height: none; overflow: visible; }
.text-form textarea { overflow-y: hidden; transition: height var(--dur-fast) var(--ease); }

/* Keep the primary two-column layout broad enough that controls wrap less. */
@media (min-width: 1180px) {
  .columns { grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr); gap: calc(var(--step) * 4); }
  .app-shell { padding-bottom: calc(var(--step) * 10); }
}

@media (max-width: 1179px) {
  .pending-file-list { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .link-chip { width: 36px; min-width: 36px; max-width: 36px; padding: 0; justify-content: center; }
  .link-chip-url, .link-chip-copy { display: none; }
  .link-chip svg { width: 16px; height: 16px; }
}

@media (max-width: 900px) {
  .topbar .account-name { display: inline; max-width: 100px; }
  .topbar .account-menu { right: 0; left: auto; }
}

@media (max-width: 720px) {
  /* With session controls in the header the rail can stay focused on brand + navigation. */
  .rail { justify-content: flex-start; }
  .rail-foot { display: none; }
  .topbar-inner { gap: calc(var(--step) * 2); }
  .view-sub { display: none; }
  .topbar-actions { margin-left: auto; gap: 4px; }
  #refreshBtn { display: none; }
  .utility-button { width: 36px; min-width: 36px; height: 36px; padding: 0; }
  .utility-button span { display: none; }
  .topbar .account-button { width: 36px; min-width: 36px; height: 36px; padding: 0; justify-content: center; }
  .topbar .account-name, .topbar .account-caret { display: none; }
  .topbar .account-avatar { width: 28px; height: 28px; }
  .topbar .account-menu { top: calc(100% + 6px); right: 0; }
  .pending-file-list { max-height: none; overflow: visible; }
  .note-text { max-height: none; }
}

@media (max-width: 420px) {
  .topbar-inner { padding-inline: calc(var(--step) * 2.5); }
  .view-title { font-size: 17px; }
  .topbar-actions { gap: 3px; }
  .topbar-actions .icon-button,
  .utility-button,
  .topbar .account-button,
  .link-chip { width: 34px; min-width: 34px; height: 34px; }
}

/* Admin header follows the same top-right utility pattern. */
.admin-account-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--step) * 2);
  min-height: 36px;
  padding: 0 calc(var(--step) * 3) 0 calc(var(--step) * 1.5);
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--texts-soft) 40%, var(--surface)));
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
}
body.plain .tinted-card {
  background:
    radial-gradient(520px 180px at 3% 0%, rgba(59,130,246,.075), transparent 68%),
    radial-gradient(420px 160px at 100% 0%, rgba(139,92,246,.055), transparent 70%),
    var(--surface);
}
body.plain .security-summary-card {
  background:
    radial-gradient(540px 180px at 2% 0%, rgba(16,185,129,.08), transparent 70%),
    var(--surface);
}

@media (max-width: 720px) {
  body.plain .topbar-inner { flex-wrap: wrap; }
  body.plain .brand { flex: 1 1 auto; }
  body.plain .topbar-actions { width: 100%; justify-content: flex-end; }
  body.plain .admin-account-pill { width: 36px; min-width: 36px; padding: 0; justify-content: center; }
  body.plain .admin-account-pill > span:last-child { display: none; }
  body.plain .topbar-actions > .utility-button[href="/"] { width: auto; padding-inline: calc(var(--step) * 2.5); }
  body.plain .topbar-actions > .utility-button[href="/"]::after { content: "Share"; }
  body.plain .topbar-actions > .utility-button[href="/"] { font-size: 0; }
  body.plain .topbar-actions > .utility-button[href="/"]::after { font-size: var(--fs-sm); }
}
.dfs-dialog[data-tone="help"] .dfs-dialog-icon {
  background: linear-gradient(145deg, var(--texts-soft), var(--files-soft));
  color: var(--texts);
}

/* =================================== checkbox polish + help refresh === */

.bulk-bar {
  gap: calc(var(--step) * 2);
  align-items: center;
}

.bulk-select-all {
  gap: calc(var(--step) * 1.75);
  padding: calc(var(--step) * 1.75) calc(var(--step) * 2.25);
  border: 1px solid color-mix(in srgb, var(--primary-line) 60%, var(--line));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 70%, var(--surface)), color-mix(in srgb, var(--surface-sunken) 82%, var(--surface)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}

.bulk-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 calc(var(--step) * 1.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.bulk-select-all input,
.row-select input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid color-mix(in srgb, var(--primary-line) 72%, var(--line-strong));
  border-radius: 7px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, #ffffff), var(--surface-sunken));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 10px -8px rgba(15, 23, 42, .55);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.bulk-select-all input::after,
.row-select input::after {
  content: "";
  width: 6px;
  height: 11px;
  border-right: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  transform: rotate(45deg) translate(-1px, -1px) scale(.86);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.bulk-select-all input:hover,
.row-select input:hover {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--primary-line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-soft) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.7);
  transform: translateY(-1px);
}

.bulk-select-all input:checked,
.row-select input:checked {
  border-color: transparent;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  box-shadow: 0 10px 20px -14px rgba(var(--files-rgb), .95), inset 0 1px 0 rgba(255,255,255,.28);
}

.bulk-select-all input:checked::after,
.row-select input:checked::after {
  opacity: 1;
  border-color: #ffffff;
}

.bulk-select-all input:focus-visible,
.row-select input:focus-visible {
  outline: none;
  box-shadow: var(--focus), 0 0 0 4px color-mix(in srgb, var(--primary-soft) 65%, transparent);
}

.row-select {
  top: calc(var(--step) * 2.15);
  left: calc(var(--step) * 2.15);
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--primary-line) 55%, var(--line));
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 85%, #ffffff), color-mix(in srgb, var(--surface-sunken) 88%, var(--surface)));
  box-shadow: 0 10px 22px -18px rgba(15, 23, 42, .68);
}

.file-row.is-selectable,
.note-row.is-selectable,
.file-row.is-selectable.is-received,
.note-row.is-selectable.is-received {
  padding-left: calc(var(--step) * 11.5);
}

.file-row.is-selected,
.note-row.is-selected {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--primary-line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 76%, var(--surface)), color-mix(in srgb, var(--texts-soft) 24%, var(--surface)));
  box-shadow: 0 14px 30px -24px rgba(var(--files-rgb), .72);
}

.note-row.is-selected .note-head strong,
.file-row.is-selected .file-name-text {
  color: var(--text);
}

@media (max-width: 720px) {
  .bulk-select-all {
    width: 100%;
    justify-content: flex-start;
  }
  .bulk-count {
    margin-left: 0;
  }
  .row-select {
    top: calc(var(--step) * 1.85);
    left: calc(var(--step) * 1.85);
    width: 32px;
    height: 32px;
  }
  .file-row.is-selectable,
  .note-row.is-selectable,
  .file-row.is-selectable.is-received,
  .note-row.is-selectable.is-received {
    padding-left: calc(var(--step) * 10.5);
  }
}

.dfs-dialog-content {
  margin-top: calc(var(--step) * 3.5);
}

.dfs-dialog-helpwide {
  width: min(760px, 100%);
}

.dfs-help {
  display: grid;
  gap: calc(var(--step) * 3.5);
}

.dfs-help-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--step) * 3);
  align-items: center;
  padding: calc(var(--step) * 3.5);
  border: 1px solid color-mix(in srgb, var(--texts-line) 75%, var(--files-line));
  border-radius: calc(var(--radius-lg) - 2px);
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(34,211,238,.18), transparent 70%),
    radial-gradient(260px 160px at 0% 0%, rgba(139,92,246,.16), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--texts-soft) 92%, var(--surface)), color-mix(in srgb, var(--files-soft) 92%, var(--surface)) 60%, color-mix(in srgb, var(--recv-soft) 92%, var(--surface)));
}

.dfs-help-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0 calc(var(--step) * 1.5);
  min-height: 24px;
  border-radius: var(--radius-pill);
  background: rgba(var(--texts-rgb), .12);
  color: var(--texts);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dfs-help-hero h3 {
  margin: calc(var(--step) * 1.5) 0 calc(var(--step) * 1);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.15;
}

.dfs-help-hero p,
.dfs-help-panel-head p,
.dfs-help-quickcard p,
.dfs-help-tip,
.dfs-help-list {
  color: var(--text-muted);
}

.dfs-help-pulse {
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  gap: calc(var(--step) * 1.25);
  padding: calc(var(--step) * 2.5);
}

.dfs-help-pulse span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  box-shadow: 0 0 0 5px rgba(var(--files-rgb), .10);
  animation: dfs-help-pulse 2.2s ease-in-out infinite;
}

.dfs-help-pulse span:nth-child(2) { animation-delay: .18s; }
.dfs-help-pulse span:nth-child(3) { animation-delay: .36s; }

@keyframes dfs-help-pulse {
  0%, 100% { transform: translateY(0) scale(.95); opacity: .74; }
  50% { transform: translateY(-4px) scale(1.08); opacity: 1; }
}

.dfs-help-quickgrid,
.dfs-help-tabs {
  display: grid;
  gap: calc(var(--step) * 2);
}

.dfs-help-quickgrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dfs-help-quickcard {
  padding: calc(var(--step) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 96%, #ffffff), color-mix(in srgb, var(--surface-sunken) 92%, var(--surface)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}

.dfs-help-quickcard strong {
  display: block;
  margin-bottom: calc(var(--step) * 1);
  font-size: var(--fs-sm);
  color: var(--text);
}

.dfs-help-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dfs-help-tab {
  display: grid;
  gap: calc(var(--step) * .75);
  justify-items: start;
  min-height: 78px;
  padding: calc(var(--step) * 2.5) calc(var(--step) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-sunken));
  color: var(--text);
  text-align: left;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.dfs-help-tab:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  box-shadow: var(--shadow-card);
}

.dfs-help-tab.is-active {
  border-color: color-mix(in srgb, var(--texts) 52%, var(--texts-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--texts-soft) 90%, var(--surface)), color-mix(in srgb, var(--files-soft) 85%, var(--surface)));
  box-shadow: 0 16px 30px -24px rgba(var(--texts-rgb), .72);
}

.dfs-help-tab-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 calc(var(--step) * 1.25);
  border-radius: var(--radius-pill);
  background: rgba(var(--files-rgb), .10);
  color: var(--files);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dfs-help-tab.is-active .dfs-help-tab-badge {
  background: rgba(var(--texts-rgb), .12);
  color: var(--texts);
}

.dfs-help-tab-label {
  font-size: var(--fs-sm);
  font-weight: 750;
  line-height: 1.35;
}

.dfs-help-panel {
  display: grid;
  gap: calc(var(--step) * 2.5);
  padding: calc(var(--step) * 3.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, #ffffff), color-mix(in srgb, var(--surface-sunken) 94%, var(--surface)));
}

.dfs-help-panel-head h3 {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.25;
}

.dfs-help-panel-head p {
  margin: calc(var(--step) * 1) 0 0;
}

.dfs-help-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(var(--step) * 1.75);
}

.dfs-help-list li {
  position: relative;
  padding-left: calc(var(--step) * 4);
}

.dfs-help-list li::before {
  content: "";
  position: absolute;
  left: calc(var(--step) * 1);
  top: .5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  box-shadow: 0 0 0 5px rgba(var(--files-rgb), .08);
}

.dfs-help-tip {
  padding: calc(var(--step) * 2.5) calc(var(--step) * 3);
  border: 1px solid color-mix(in srgb, var(--recv-line) 70%, var(--line));
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--recv-soft) 88%, var(--surface)), color-mix(in srgb, var(--files-soft) 32%, var(--surface)));
  font-size: var(--fs-sm);
}

@media (max-width: 720px) {
  .dfs-dialog-helpwide {
    width: 100%;
  }
  .dfs-help-hero,
  .dfs-help-quickgrid,
  .dfs-help-tabs {
    grid-template-columns: 1fr;
  }
  .dfs-help-pulse {
    justify-content: start;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dfs-help-pulse span { animation: none; }
}

/* ===================== unified sharing options + help side drawer === */

/* Files and Text intentionally use the exact same option layout. */
.options-block {
  --option-accent: var(--files);
  --option-accent-rgb: var(--files-rgb);
  --option-soft: var(--files-soft);
  --option-line: var(--files-line);
}
.mode-pane[data-mode="text"] .options-block {
  --option-accent: var(--texts);
  --option-accent-rgb: var(--texts-rgb);
  --option-soft: var(--texts-soft);
  --option-line: var(--texts-line);
}

.options-summary {
  min-height: 58px;
  padding: calc(var(--step) * 2.25) calc(var(--step) * 3);
  border-color: color-mix(in srgb, var(--option-line) 72%, var(--line));
  background:
    radial-gradient(180px 70px at 0 0, rgba(var(--option-accent-rgb), .10), transparent 75%),
    linear-gradient(135deg, color-mix(in srgb, var(--option-soft) 72%, var(--surface)), color-mix(in srgb, var(--surface-sunken) 90%, var(--surface)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}
.options-summary:hover {
  border-color: color-mix(in srgb, var(--option-accent) 46%, var(--option-line));
  background:
    radial-gradient(200px 80px at 0 0, rgba(var(--option-accent-rgb), .14), transparent 75%),
    linear-gradient(135deg, color-mix(in srgb, var(--option-soft) 82%, var(--surface)), color-mix(in srgb, var(--surface-hover) 80%, var(--surface)));
}
.options-summary-copy {
  display: grid;
  flex: 0 1 auto;
  gap: 1px;
  min-width: 138px;
}
.options-summary-title {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.2;
}
.options-summary-sub {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.35;
}
.options-summary-tags {
  justify-content: flex-end;
}

.options {
  display: grid;
  gap: calc(var(--step) * 2);
  padding: calc(var(--step) * 2.5);
  border-color: color-mix(in srgb, var(--option-line) 58%, var(--line));
  background: color-mix(in srgb, var(--surface-sunken) 62%, var(--surface));
}
.options > * {
  position: relative;
  padding: calc(var(--step) * 3.25);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 12px 26px -24px rgba(15, 23, 42, .58), inset 0 1px 0 rgba(255,255,255,.18);
}
.options > * + * { border-top: 1px solid var(--line); }
.options > .protect-row {
  border-color: color-mix(in srgb, var(--primary-line) 70%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 42%, var(--surface)), var(--surface) 65%);
}
.options > .share-row {
  border-color: color-mix(in srgb, var(--recv-line) 72%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--recv-soft) 46%, var(--surface)), var(--surface) 65%);
}
.options > .expiry-row {
  border-color: color-mix(in srgb, var(--warn-line) 76%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--warn-soft) 48%, var(--surface)), var(--surface) 65%);
}
.protect-toggle-title, .share-title, .expiry-title {
  font-weight: 750;
}
.protect-toggle-sub, .share-sub, .expiry-sub {
  line-height: 1.5;
}
.share-head select, .expiry-head select {
  min-width: 218px;
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--surface-raised) 92%, transparent);
}
.protect-field input,
.expiry-minutes input {
  border-radius: 12px;
}
.otag {
  min-height: 25px;
  padding-inline: 10px;
  font-weight: 700;
}

/* Row selection: only the checkbox itself should be visible. */
.row-select {
  top: calc(var(--step) * 2.6);
  left: calc(var(--step) * 2.6);
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.row-select:hover { background: transparent; box-shadow: none; }
.file-row.is-selectable,
.note-row.is-selectable,
.file-row.is-selectable.is-received,
.note-row.is-selectable.is-received {
  padding-left: calc(var(--step) * 9.5);
}

/* Help is a right-side drawer rather than a centered popup. */
.dfs-dialog-backdrop[data-tone="help"] {
  place-items: stretch end;
  padding: 0;
  background: rgba(7, 15, 36, .36);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.dfs-dialog[data-tone="help"] {
  grid-template-columns: 38px minmax(0, 1fr);
  width: min(520px, calc(100vw - 20px));
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: calc(var(--step) * 5);
  border-width: 0 0 0 1px;
  border-radius: 24px 0 0 24px;
  background:
    radial-gradient(440px 260px at 100% 0%, rgba(34,211,238,.12), transparent 72%),
    radial-gradient(420px 280px at 0 16%, rgba(139,92,246,.12), transparent 70%),
    var(--surface-raised);
  box-shadow: -30px 0 70px -42px rgba(7, 15, 36, .72);
  animation: dfs-help-slide-in var(--dur) var(--ease-out) both;
}
.dfs-dialog[data-tone="help"].dfs-dialog-helpwide { width: min(520px, calc(100vw - 20px)); }
.dfs-dialog[data-tone="help"] .dfs-dialog-main {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.dfs-dialog[data-tone="help"] .dfs-dialog-content {
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}
.dfs-dialog[data-tone="help"] .dfs-dialog-form {
  flex: none;
}
.dfs-dialog[data-tone="help"] .dfs-help-quickgrid,
.dfs-dialog[data-tone="help"] .dfs-help-tabs {
  grid-template-columns: 1fr;
}
.dfs-dialog[data-tone="help"] .dfs-help-pulse {
  padding-inline: 0;
}
.dfs-dialog[data-tone="help"] .dfs-help-hero {
  grid-template-columns: 1fr;
}

@keyframes dfs-help-slide-in {
  from { opacity: .5; transform: translateX(34px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 720px) {
  .options-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .options-summary-copy { flex: 1 1 100%; }
  .options-summary-tags { justify-content: flex-start; }
  .share-head, .expiry-head {
    gap: calc(var(--step) * 1.5);
  }
  .share-head select, .expiry-head select { width: 100%; min-width: 0; }
  .row-select {
    top: calc(var(--step) * 2.25);
    left: calc(var(--step) * 2.25);
    width: 24px;
    height: 24px;
  }
  .file-row.is-selectable,
  .note-row.is-selectable,
  .file-row.is-selectable.is-received,
  .note-row.is-selectable.is-received {
    padding-left: calc(var(--step) * 9);
  }
  .dfs-dialog-backdrop[data-tone="help"] { align-items: stretch; }
  .dfs-dialog[data-tone="help"],
  .dfs-dialog[data-tone="help"].dfs-dialog-helpwide {
    width: min(94vw, 500px);
    height: 100dvh;
    border-radius: 20px 0 0 20px;
    padding: calc(var(--step) * 4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dfs-dialog[data-tone="help"] { animation: none; }
}

/* ======================= utility dock + options/admin refinement === */

/* A compact utility dock reads left-to-right as: share/copy → refresh/theme →
   help → identity → logout. Session actions stay at the far edge. */
.topbar-actions {
  gap: 5px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--primary-line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
  box-shadow: 0 12px 34px -28px rgba(15, 23, 42, .65), inset 0 1px 0 rgba(255,255,255,.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topbar-actions > .link-chip { order: 1; }
.topbar-actions > #refreshBtn { order: 2; }
.topbar-actions > #themeToggle { order: 3; }
.topbar-actions > .help-button { order: 4; }
.topbar-actions > .topbar-account { order: 5; margin-left: 3px; }
.topbar-actions > .logout-button { order: 6; }

.topbar-actions .icon-button,
.topbar-actions .utility-button,
.topbar-actions .link-chip,
.topbar .account-button {
  min-height: 38px;
  border-radius: 11px;
  box-shadow: none;
}
.topbar-actions .icon-button {
  border: 1px solid transparent;
  background: transparent;
}
.topbar-actions .icon-button:hover {
  border-color: var(--line);
  background: var(--surface-hover);
}
.topbar-actions .link-chip {
  border-color: color-mix(in srgb, var(--files-line) 72%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--files-soft) 75%, var(--surface)), var(--surface-raised));
}
.topbar-actions .help-button {
  border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--texts-soft) 92%, var(--surface)), color-mix(in srgb, var(--files-soft) 65%, var(--surface)));
}
.topbar-actions .logout-button {
  border-color: transparent;
  background: color-mix(in srgb, var(--danger-soft) 84%, var(--surface));
}
.topbar .account-button {
  border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 92%, var(--surface)), color-mix(in srgb, var(--texts-soft) 50%, var(--surface)));
}

/* Files and Text share one exact option-card geometry. */
.option-card-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(188px, auto);
  gap: calc(var(--step) * 3);
  align-items: center;
}
.option-card-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: inherit;
  cursor: default;
}
.option-card-copy[for] { cursor: pointer; }
.option-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34);
}
.option-card-icon svg { width: 19px; height: 19px; }
.option-icon-lock {
  border-color: color-mix(in srgb, var(--primary-line) 82%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface));
  color: var(--accent);
}
.option-icon-share {
  border-color: color-mix(in srgb, var(--recv-line) 82%, var(--line));
  background: color-mix(in srgb, var(--recv-soft) 82%, var(--surface));
  color: var(--recv);
}
.option-icon-timer {
  border-color: color-mix(in srgb, var(--warn-line) 82%, var(--line));
  background: color-mix(in srgb, var(--warn-soft) 84%, var(--surface));
  color: var(--warn);
}
.option-card .protect-toggle-title,
.option-card .share-title,
.option-card .expiry-title {
  font-size: var(--fs-md);
  font-weight: 780;
  line-height: 1.25;
}
.option-card .protect-toggle-sub,
.option-card .share-sub,
.option-card .expiry-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.option-card-head > select {
  width: 100%;
  min-width: 188px;
  min-height: 42px;
  border-color: color-mix(in srgb, var(--option-line) 58%, var(--line));
  border-radius: 12px;
  background-color: var(--surface-raised);
  font-weight: 650;
}
.option-card-head > .switch {
  justify-self: end;
}
.option-card .people,
.option-card .protect-field,
.option-card .expiry-minutes {
  margin-left: calc(42px + var(--step) * 3);
  margin-top: calc(var(--step) * 2.5);
}
.option-card .people { padding-top: calc(var(--step) * .5); }
.option-card .expiry-minutes {
  display: flex;
  width: fit-content;
  padding: calc(var(--step) * 1.5);
  border: 1px solid var(--warn-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn-soft) 62%, var(--surface));
}
.option-card .expiry-minutes[hidden],
.option-card .people[hidden],
.option-card .protect-field[hidden] { display: none; }
.option-card .expiry-minutes input { background: var(--surface); }

/* Admin: dashboard-first, but still a simple two-workflow page. */
.admin-shell {
  max-width: 1320px;
  margin-inline: auto;
}
.admin-hero {
  display: flex;
  gap: calc(var(--step) * 5);
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(var(--step) * 5);
  padding: calc(var(--step) * 5);
  border: 1px solid color-mix(in srgb, var(--primary-line) 62%, var(--line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(440px 220px at 0 0, rgba(59,130,246,.14), transparent 70%),
    radial-gradient(400px 220px at 100% 0, rgba(139,92,246,.12), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, #dbeafe), color-mix(in srgb, var(--surface) 94%, #ede9fe));
  box-shadow: var(--shadow-card);
}
.admin-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-inline: calc(var(--step) * 1.5);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary-soft) 88%, var(--surface));
  color: var(--accent);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.admin-hero h1 {
  margin: calc(var(--step) * 1.5) 0 calc(var(--step) * 1);
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.035em;
}
.admin-hero p { max-width: 650px; color: var(--text-muted); }
.admin-hero-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: calc(var(--step) * 2);
  flex: none;
}
.admin-hero-badge {
  display: grid;
  min-width: 96px;
  padding: calc(var(--step) * 2.5) calc(var(--step) * 3);
  border: 1px solid var(--primary-line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--primary-soft));
  text-align: center;
}
.admin-hero-badge strong { font-size: 22px; line-height: 1.1; color: var(--accent); }
.admin-hero-badge span { margin-top: 3px; color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 700; }
.admin-hero-badge.is-success { border-color: var(--success-line); background: color-mix(in srgb, var(--success-soft) 62%, var(--surface)); }
.admin-hero-badge.is-success strong { color: var(--success); }
.admin-hero-badge.is-muted { border-color: var(--line); background: var(--surface-sunken); }
.admin-hero-badge.is-muted strong { color: var(--text-muted); }

.admin-account-grid {
  grid-template-columns: minmax(300px, .72fr) minmax(520px, 1.28fr);
  align-items: start;
}
.admin-account-grid > .column:first-child .card {
  position: sticky;
  top: calc(var(--topbar-h) + var(--step) * 4);
}
body.plain .tinted-card {
  border-color: color-mix(in srgb, var(--line) 76%, var(--primary-line));
  box-shadow: 0 18px 42px -36px rgba(15,23,42,.55);
}
body.plain .stack-form .primary-button { width: 100%; }
body.plain .user-row {
  align-items: center;
  border-color: color-mix(in srgb, var(--line) 82%, var(--primary-line));
}
body.plain .user-actions { gap: calc(var(--step) * 1.5); }

/* Live security dashboard. */
.security-summary-card {
  margin-top: calc(var(--step) * 5);
  overflow: hidden;
}
.security-card-head { align-items: center; }
.security-head-icon {
  background: linear-gradient(145deg, color-mix(in srgb, var(--success-soft) 86%, var(--surface)), color-mix(in srgb, var(--recv-soft) 78%, var(--surface)));
  color: var(--success);
}
.security-refresh svg { width: 15px; height: 15px; }
.security-refresh.is-loading svg { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.security-overall {
  display: flex;
  gap: calc(var(--step) * 3);
  align-items: center;
  margin-top: calc(var(--step) * 4);
  padding: calc(var(--step) * 3.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
.security-overall[data-status="healthy"] {
  border-color: var(--success-line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--success-soft) 68%, var(--surface)), color-mix(in srgb, var(--recv-soft) 48%, var(--surface)));
}
.security-overall[data-status="attention"] {
  border-color: var(--warn-line);
  background: color-mix(in srgb, var(--warn-soft) 58%, var(--surface));
}
.security-overall[data-status="degraded"] {
  border-color: var(--danger-line);
  background: color-mix(in srgb, var(--danger-soft) 62%, var(--surface));
}
.security-overall-orb {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--line) 60%, transparent);
}
.security-overall[data-status="healthy"] .security-overall-orb { background: var(--success); box-shadow: 0 0 0 7px color-mix(in srgb, var(--success-soft) 80%, transparent); }
.security-overall[data-status="attention"] .security-overall-orb { background: var(--warn); box-shadow: 0 0 0 7px color-mix(in srgb, var(--warn-soft) 82%, transparent); }
.security-overall[data-status="degraded"] .security-overall-orb { background: var(--danger); box-shadow: 0 0 0 7px color-mix(in srgb, var(--danger-soft) 82%, transparent); }
.security-overall-copy { display: grid; min-width: 0; }
.security-overall-copy > span { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; }
.security-overall-copy strong { margin-top: 2px; font-size: 20px; letter-spacing: -.02em; }
.security-overall-copy small { margin-top: 2px; color: var(--text-muted); }
.security-live-pill {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 750;
}
.security-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success-soft) 78%, transparent); }
.security-summary-grid-expanded {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: calc(var(--step) * 3);
}
.security-summary-grid-expanded .security-summary-item {
  min-height: 86px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-sunken));
}
.security-summary-grid-expanded .security-summary-item strong {
  overflow-wrap: anywhere;
}
.security-checks-wrap {
  margin-top: calc(var(--step) * 4);
  padding-top: calc(var(--step) * 4);
  border-top: 1px solid var(--line);
}
.security-checks-head h3 { margin: 0; font-size: var(--fs-md); }
.security-checks-head p { margin-top: 3px; color: var(--text-muted); font-size: var(--fs-xs); }
.security-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--step) * 2);
  margin-top: calc(var(--step) * 3);
}
.security-check-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: calc(var(--step) * 2.5);
  align-items: start;
  padding: calc(var(--step) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.security-check-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--text-faint); }
.security-check-item.is-good .security-check-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success-soft) 78%, transparent); }
.security-check-item.is-warn .security-check-dot { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn-soft) 78%, transparent); }
.security-check-item.is-bad .security-check-dot { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-soft) 78%, transparent); }
.security-check-item > div { display: grid; gap: 2px; }
.security-check-label { color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 750; text-transform: uppercase; letter-spacing: .035em; }
.security-check-item strong { font-size: var(--fs-sm); }
.security-check-item small { color: var(--text-muted); line-height: 1.45; }
.security-detail { margin-top: calc(var(--step) * 3); }
.security-footnote { margin-top: calc(var(--step) * 1.5); }

/* Admin utility dock follows the same visual sequence as the share screen. */
body.plain .topbar-actions > .utility-button[href="/"] { order: 1; }
body.plain .topbar-actions > #themeToggle { order: 2; }
body.plain .topbar-actions > .help-button { order: 3; }
body.plain .topbar-actions > .admin-account-pill { order: 4; margin-left: 3px; }
body.plain .topbar-actions > .logout-button { order: 5; }

@media (max-width: 980px) {
  .admin-account-grid { grid-template-columns: 1fr; }
  .admin-account-grid > .column:first-child .card { position: static; }
  .security-summary-grid-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-hero { align-items: flex-start; flex-direction: column; }
  .admin-hero-badges { width: 100%; }
}

@media (max-width: 720px) {
  .topbar-actions {
    padding: 3px;
    border-radius: 13px;
  }
  .topbar-actions > .help-button { order: 3; }
  .option-card-head {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: calc(var(--step) * 2.5);
  }
  .option-card-icon { width: 38px; height: 38px; border-radius: 12px; }
  .option-card-head > select,
  .option-card-head > .switch {
    grid-column: 2;
    justify-self: stretch;
  }
  .option-card-head > .switch { justify-self: start; }
  .option-card .people,
  .option-card .protect-field,
  .option-card .expiry-minutes {
    margin-left: calc(38px + var(--step) * 2.5);
  }
  .admin-hero { padding: calc(var(--step) * 4); }
  .admin-hero-badges { grid-template-columns: repeat(3, 1fr); }
  .admin-hero-badge { min-width: 0; padding-inline: calc(var(--step) * 1.5); }
  .security-summary-grid-expanded,
  .security-check-grid { grid-template-columns: 1fr; }
  .security-overall { align-items: flex-start; flex-wrap: wrap; }
  .security-live-pill { margin-left: 0; }
}

@media (max-width: 480px) {
  .admin-hero-badges { grid-template-columns: 1fr; }
}

/* ======================== Help drawer — edge-to-edge redesign === */
/* The Help surface is a true right drawer: square left edge, no legacy icon
   column and no unused outer padding. All content owns its own intentional
   spacing inside the drawer. */
.dfs-dialog-backdrop[data-tone="help"] {
  place-items: stretch end;
  padding: 0;
  background: rgba(7, 15, 36, .38);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.dfs-dialog[data-tone="help"],
.dfs-dialog[data-tone="help"].dfs-dialog-helpwide {
  display: block;
  width: min(680px, 100vw);
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-raised);
  box-shadow: -28px 0 70px -38px rgba(7, 15, 36, .68);
  animation: dfs-help-slide-in var(--dur) var(--ease-out) both;
}

.dfs-dialog[data-tone="help"] > .dfs-dialog-icon,
.dfs-dialog[data-tone="help"] .dfs-dialog-title,
.dfs-dialog[data-tone="help"] .dfs-dialog-message,
.dfs-dialog[data-tone="help"] .dfs-dialog-fields,
.dfs-dialog[data-tone="help"] .dfs-dialog-error,
.dfs-dialog[data-tone="help"] .dfs-dialog-actions {
  display: none !important;
}

.dfs-dialog[data-tone="help"] .dfs-dialog-main {
  display: block;
  height: 100%;
  min-width: 0;
}

.dfs-dialog[data-tone="help"] .dfs-dialog-content {
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.dfs-dialog[data-tone="help"] .dfs-dialog-form {
  display: block;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.dfs-help-drawer {
  min-height: 100%;
  background:
    radial-gradient(500px 260px at 100% -5%, rgba(34, 211, 238, .10), transparent 70%),
    radial-gradient(470px 300px at 12% 0%, rgba(139, 92, 246, .10), transparent 72%),
    var(--surface-raised);
}

.dfs-help-drawer-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  gap: 14px;
  align-items: start;
  padding: 22px 24px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: color-mix(in srgb, var(--surface-raised) 91%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.dfs-help-brandmark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--texts), var(--files) 60%, #22d3ee);
  color: #fff;
  font-size: 20px;
  font-weight: 850;
  box-shadow: 0 16px 26px -18px rgba(var(--texts-rgb), .9);
}

.dfs-help-heading { min-width: 0; }
.dfs-help-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--texts);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dfs-help-heading h2 {
  margin: 0;
  font-size: clamp(21px, 3vw, 28px);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.dfs-help-heading p {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.dfs-help-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  font: 400 27px/1 sans-serif;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.dfs-help-close:hover { background: var(--surface-hover); color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }
.dfs-help-close:active { transform: scale(.95); }
.dfs-help-close:focus-visible { outline: none; box-shadow: var(--focus); }

.dfs-help-search-wrap {
  position: sticky;
  top: 112px;
  z-index: 3;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 18px 24px 12px;
  padding: 0 12px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 12px 30px -26px rgba(15, 23, 42, .65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dfs-help-search-wrap:focus-within {
  border-color: color-mix(in srgb, var(--texts) 48%, var(--texts-line));
  box-shadow: var(--focus);
}
.dfs-help-search-wrap svg { width: 18px; height: 18px; color: var(--text-faint); }
.dfs-help-search {
  width: 100%;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--fs-sm) !important;
}
.dfs-help-search-wrap kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: 7px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 11px;
  font-family: inherit;
  font-weight: 750;
}

.dfs-help-groups {
  display: flex;
  gap: 7px;
  padding: 0 24px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dfs-help-groups::-webkit-scrollbar { display: none; }
.dfs-help-group {
  flex: none;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.dfs-help-group:hover { color: var(--text); border-color: var(--line-strong); }
.dfs-help-group.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--texts), var(--files));
  color: #fff;
  box-shadow: 0 10px 22px -16px rgba(var(--texts-rgb), .9);
}

.dfs-help-topic-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 18px;
  border-bottom: 1px solid var(--line);
}
.dfs-help-topic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-sunken));
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.dfs-help-topic:hover { transform: translateY(-1px); border-color: var(--line-strong); color: var(--text); }
.dfs-help-topic.is-active {
  border-color: color-mix(in srgb, var(--texts) 48%, var(--texts-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--texts-soft) 90%, var(--surface)), color-mix(in srgb, var(--files-soft) 72%, var(--surface)));
  color: var(--text);
  box-shadow: 0 10px 24px -20px rgba(var(--texts-rgb), .8);
}
.dfs-help-topic-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--files);
  box-shadow: 0 0 0 4px rgba(var(--files-rgb), .08);
}
.dfs-help-topic-dot[data-accent="purple"] { background: var(--texts); box-shadow: 0 0 0 4px rgba(var(--texts-rgb), .08); }
.dfs-help-topic-dot[data-accent="teal"] { background: var(--recv); box-shadow: 0 0 0 4px rgba(var(--recv-rgb), .08); }
.dfs-help-topic-dot[data-accent="amber"] { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn-soft) 82%, transparent); }
.dfs-help-topic-dot[data-accent="red"] { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-soft) 82%, transparent); }
.dfs-help-topic-dot[data-accent="indigo"] { background: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, .09); }

.dfs-help-no-results {
  margin: 22px 24px 0;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  text-align: center;
}

.dfs-help-detail-wrap { padding: 20px 24px 34px; }
.dfs-help-detail {
  --help-accent: var(--files);
  --help-soft: var(--files-soft);
  --help-line: var(--files-line);
  display: grid;
  gap: 18px;
}
.dfs-help-detail[data-accent="purple"] { --help-accent: var(--texts); --help-soft: var(--texts-soft); --help-line: var(--texts-line); }
.dfs-help-detail[data-accent="teal"] { --help-accent: var(--recv); --help-soft: var(--recv-soft); --help-line: var(--recv-line); }
.dfs-help-detail[data-accent="amber"] { --help-accent: var(--warn); --help-soft: var(--warn-soft); --help-line: var(--warn-line); }
.dfs-help-detail[data-accent="red"] { --help-accent: var(--danger); --help-soft: var(--danger-soft); --help-line: var(--danger-line); }
.dfs-help-detail[data-accent="indigo"] { --help-accent: #6366f1; --help-soft: color-mix(in srgb, var(--texts-soft) 65%, var(--surface)); --help-line: color-mix(in srgb, var(--texts-line) 70%, var(--line)); }

.dfs-help-detail-head {
  position: relative;
  padding: 21px 22px 20px;
  overflow: hidden;
  border: 1px solid var(--help-line);
  border-radius: 18px;
  background:
    radial-gradient(280px 140px at 100% 0%, color-mix(in srgb, var(--help-accent) 11%, transparent), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--help-soft) 88%, var(--surface)), color-mix(in srgb, var(--surface) 97%, var(--help-soft)));
}
.dfs-help-detail-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--help-accent);
}
.dfs-help-detail-group {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--help-accent) 11%, var(--surface));
  color: var(--help-accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dfs-help-detail-head h3 {
  margin: 10px 0 7px;
  font-size: clamp(22px, 3vw, 29px);
  line-height: 1.16;
  letter-spacing: -.025em;
}
.dfs-help-detail-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.dfs-help-guide-block {
  padding: 19px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-sunken));
}
.dfs-help-guide-block h4 {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  font-weight: 800;
}
.dfs-help-steps {
  counter-reset: dfs-help-step;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dfs-help-steps li {
  counter-increment: dfs-help-step;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.dfs-help-steps li::before {
  content: counter(dfs-help-step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--help-soft) 88%, var(--surface));
  color: var(--help-accent);
  font-size: 11px;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px var(--help-line);
}
.dfs-help-steps li span { padding-top: 3px; }

.dfs-help-notes ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 19px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.dfs-help-notes li::marker { color: var(--help-accent); }

.dfs-help-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--help-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--help-soft) 75%, var(--surface));
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.dfs-help-tip strong {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--help-accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .dfs-dialog[data-tone="help"],
  .dfs-dialog[data-tone="help"].dfs-dialog-helpwide {
    width: 100vw;
    border-left: 0;
    border-radius: 0;
  }
  .dfs-help-drawer-head {
    grid-template-columns: 38px minmax(0, 1fr) 36px;
    gap: 11px;
    padding: 16px 16px 14px;
  }
  .dfs-help-brandmark { width: 38px; height: 38px; border-radius: 11px; }
  .dfs-help-heading p { display: none; }
  .dfs-help-search-wrap { top: 83px; margin: 12px 16px 10px; }
  .dfs-help-groups { padding-inline: 16px; }
  .dfs-help-topic-strip { padding: 0 16px 15px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dfs-help-topic-strip::-webkit-scrollbar { display: none; }
  .dfs-help-topic { flex: 0 0 auto; }
  .dfs-help-detail-wrap { padding: 16px 16px 26px; }
  .dfs-help-detail-head, .dfs-help-guide-block { border-radius: 14px; }
}

@media (max-width: 420px) {
  .dfs-help-heading h2 { font-size: 20px; }
  .dfs-help-drawer-head { padding-inline: 13px; }
  .dfs-help-search-wrap, .dfs-help-groups { margin-left: 13px; margin-right: 13px; }
  .dfs-help-groups { padding-inline: 0; }
  .dfs-help-topic-strip { padding-inline: 13px; }
  .dfs-help-detail-wrap { padding-inline: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .dfs-dialog[data-tone="help"] { animation: none; }
}

/* ============================ Security Health — dedicated admin tab === */
.admin-tabs {
  display: flex;
  gap: calc(var(--step) * 2);
  width: fit-content;
  max-width: 100%;
  margin: 0 0 calc(var(--step) * 4);
  padding: calc(var(--step) * 1.25);
  border: 1px solid color-mix(in srgb, var(--primary-line) 55%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-raised) 92%, var(--primary-soft));
  box-shadow: 0 12px 34px -30px rgba(15,23,42,.65);
}
.admin-tab {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: calc(var(--step) * 2);
  align-items: center;
  min-width: 190px;
  min-height: 54px;
  padding: calc(var(--step) * 2) calc(var(--step) * 3);
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.admin-tab:hover { color: var(--text); background: var(--surface-hover); transform: translateY(-1px); }
.admin-tab.is-active {
  border-color: color-mix(in srgb, var(--primary-line) 82%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--files-soft) 88%, var(--surface)), color-mix(in srgb, var(--texts-soft) 50%, var(--surface)));
  color: var(--text);
  box-shadow: 0 12px 28px -22px rgba(var(--files-rgb), .75);
}
.admin-tab.security-tab.is-active {
  border-color: color-mix(in srgb, var(--success-line) 72%, var(--primary-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--success-soft) 72%, var(--surface)), color-mix(in srgb, var(--recv-soft) 64%, var(--surface)), color-mix(in srgb, var(--files-soft) 42%, var(--surface)));
}
.admin-tab-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--primary-soft) 84%, var(--surface));
  color: var(--accent);
}
.admin-tab.security-tab .admin-tab-icon { background: color-mix(in srgb, var(--success-soft) 80%, var(--surface)); color: var(--success); }
.admin-tab-icon svg { width: 18px; height: 18px; }
.admin-tab > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.admin-tab strong { font-size: var(--fs-sm); color: inherit; }
.admin-tab small { font-size: var(--fs-2xs); color: var(--text-muted); }
.admin-tab-status {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--line) 65%, transparent);
}
.admin-tab-status[data-status="healthy"] { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success-soft) 80%, transparent); }
.admin-tab-status[data-status="attention"] { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn-soft) 80%, transparent); }
.admin-tab-status[data-status="degraded"] { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-soft) 80%, transparent); }
.admin-pane[hidden] { display: none !important; }
.admin-pane.is-active { animation: rise-in var(--dur) var(--ease-out) both; }

.security-pane {
  --security-blue: #2583ff;
  --security-violet: #7c5cff;
  --security-cyan: #06b6d4;
  --security-teal: #0f9f86;
  --security-amber: #d97706;
  --security-indigo: #4f46e5;
  --security-rose: #e3486f;
  --security-green: #16a36a;
}

.security-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: calc(var(--step) * 5);
  align-items: stretch;
  padding: calc(var(--step) * 5.5);
  border: 1px solid color-mix(in srgb, var(--success-line) 52%, var(--primary-line));
  border-radius: 24px;
  background:
    radial-gradient(520px 250px at 4% 0%, rgba(37,131,255,.17), transparent 72%),
    radial-gradient(480px 260px at 98% 5%, rgba(124,92,255,.16), transparent 72%),
    radial-gradient(420px 220px at 72% 110%, rgba(15,159,134,.13), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, #eaf3ff), color-mix(in srgb, var(--surface) 95%, #f0ebff));
  box-shadow: 0 24px 60px -46px rgba(15,23,42,.72);
}
.security-dashboard-intro { align-self: center; }
.security-eyebrow { background: color-mix(in srgb, var(--success-soft) 80%, var(--surface)); color: var(--success); }
.security-dashboard-intro h1 {
  margin: calc(var(--step) * 1.5) 0 calc(var(--step) * 1.25);
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.045em;
  line-height: 1.02;
}
.security-dashboard-intro > p { max-width: 760px; color: var(--text-muted); line-height: 1.6; }
.security-hero-actions { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 2); align-items: center; margin-top: calc(var(--step) * 4); }
.security-hero-actions .security-refresh { min-height: 42px; }
.security-hero-actions .security-live-pill { margin-left: 0; background: color-mix(in srgb, var(--surface) 88%, transparent); }

.security-score-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: calc(var(--step) * 4);
  border: 1px solid color-mix(in srgb, var(--success-line) 65%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}
.security-score-ring {
  --score: 0;
  --score-color: var(--success);
  position: relative;
  display: grid;
  place-items: center;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  background: conic-gradient(var(--score-color) calc(var(--score) * 1%), color-mix(in srgb, var(--line) 76%, transparent) 0);
  box-shadow: 0 18px 42px -30px color-mix(in srgb, var(--score-color) 72%, transparent);
}
.security-score-ring::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--line);
}
.security-score-ring > div { position: relative; z-index: 1; display: grid; }
.security-score-ring strong { font-size: 32px; line-height: 1; letter-spacing: -.04em; }
.security-score-ring span { margin-top: 5px; color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.security-score-card[data-status="attention"] .security-score-ring { --score-color: var(--warn); }
.security-score-card[data-status="degraded"] .security-score-ring { --score-color: var(--danger); }
.security-score-copy { display: grid; gap: 3px; margin-top: calc(var(--step) * 3); }
.security-score-copy > span { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; }
.security-score-copy > strong { font-size: 20px; }
.security-score-copy > small { color: var(--text-muted); }

.security-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--step) * 3);
  margin-top: calc(var(--step) * 4);
}
.security-kpi {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 118px;
  padding: calc(var(--step) * 3.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: 0 16px 34px -30px rgba(15,23,42,.65);
}
.security-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--kpi); }
.security-kpi::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; right: -45px; top: -50px; background: color-mix(in srgb, var(--kpi) 9%, transparent); }
.security-kpi > span { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; }
.security-kpi > strong { align-self: end; margin-top: calc(var(--step) * 1.5); color: var(--kpi); font-size: 30px; line-height: 1; }
.security-kpi > small { margin-top: calc(var(--step) * 1); color: var(--text-muted); font-size: var(--fs-2xs); }
.security-kpi.is-green { --kpi: var(--success); }
.security-kpi.is-blue { --kpi: var(--security-blue); }
.security-kpi.is-amber { --kpi: var(--warn); }
.security-kpi.is-violet { --kpi: var(--security-violet); }

.security-section {
  margin-top: calc(var(--step) * 4);
  padding: calc(var(--step) * 4.5);
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--primary-line));
  border-radius: 22px;
  background:
    radial-gradient(460px 180px at 0 0, rgba(59,130,246,.055), transparent 70%),
    var(--surface-raised);
  box-shadow: 0 18px 44px -38px rgba(15,23,42,.55);
}
.security-section-head { display: flex; gap: calc(var(--step) * 3); align-items: end; justify-content: space-between; margin-bottom: calc(var(--step) * 3.5); }
.security-section-kicker { display: inline-block; color: var(--accent); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.security-section-head h2 { margin: 4px 0 0; font-size: clamp(19px, 2vw, 24px); letter-spacing: -.02em; }
.security-section-head p { margin: 4px 0 0; color: var(--text-muted); }

.security-domain-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--step) * 2.5); }
.security-domain-card {
  --domain: var(--security-blue);
  display: grid;
  gap: calc(var(--step) * 2.5);
  min-height: 170px;
  padding: calc(var(--step) * 3.25);
  border: 1px solid color-mix(in srgb, var(--domain) 24%, var(--line));
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--domain) 7%, var(--surface)), var(--surface));
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.security-domain-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--domain) 52%, var(--line)); box-shadow: 0 18px 34px -28px color-mix(in srgb, var(--domain) 55%, transparent); }
.security-domain-card.is-violet { --domain: var(--security-violet); }
.security-domain-card.is-cyan { --domain: var(--security-cyan); }
.security-domain-card.is-teal { --domain: var(--security-teal); }
.security-domain-card.is-amber { --domain: var(--security-amber); }
.security-domain-card.is-indigo { --domain: var(--security-indigo); }
.security-domain-card.is-rose { --domain: var(--security-rose); }
.security-domain-card.is-green { --domain: var(--security-green); }
.security-domain-head { display: flex; gap: calc(var(--step) * 2); align-items: start; justify-content: space-between; }
.security-domain-head > div { display: grid; gap: 5px; }
.security-domain-head strong { color: var(--text); font-size: var(--fs-sm); }
.security-domain-head small { color: var(--text-muted); font-size: var(--fs-2xs); line-height: 1.45; }
.security-domain-score { flex: none; color: var(--domain); font-size: 22px; font-weight: 800; letter-spacing: -.035em; }
.security-domain-bar { height: 9px; overflow: hidden; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--domain) 11%, var(--surface-sunken)); }
.security-domain-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--domain) 78%, #fff), var(--domain)); transition: width 420ms var(--ease-out); }
.security-domain-meta { display: flex; gap: calc(var(--step) * 2); justify-content: space-between; margin-top: auto; color: var(--text-muted); font-size: var(--fs-2xs); font-weight: 650; }
.security-domain-card.is-warn .security-domain-score { color: var(--warn); }
.security-domain-card.is-bad .security-domain-score { color: var(--danger); }

.security-snapshot .security-summary-grid-expanded { margin-top: 0; }
.security-snapshot .security-summary-item { position: relative; overflow: hidden; }
.security-snapshot .security-summary-item::after { content: ""; position: absolute; width: 56px; height: 56px; right: -24px; bottom: -28px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 7%, transparent); }

.security-inventory-head { align-items: center; }
.security-control-search { width: min(310px, 100%); flex: none; }
.security-control-groups { display: grid; gap: calc(var(--step) * 2.25); }
.security-control-group {
  --domain: var(--security-blue);
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--domain) 24%, var(--line));
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.security-control-group.is-violet { --domain: var(--security-violet); }
.security-control-group.is-cyan { --domain: var(--security-cyan); }
.security-control-group.is-teal { --domain: var(--security-teal); }
.security-control-group.is-amber { --domain: var(--security-amber); }
.security-control-group.is-indigo { --domain: var(--security-indigo); }
.security-control-group.is-rose { --domain: var(--security-rose); }
.security-control-group.is-green { --domain: var(--security-green); }
.security-control-group > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--step) * 3);
  align-items: center;
  padding: calc(var(--step) * 3.25);
  list-style: none;
  cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--domain) 6%, var(--surface)), var(--surface));
}
.security-control-group > summary::-webkit-details-marker { display: none; }
.security-control-group > summary::after { content: "⌄"; grid-column: 2; grid-row: 1; align-self: center; justify-self: end; color: var(--text-muted); font-size: 20px; transition: transform var(--dur-fast) var(--ease); }
.security-control-group[open] > summary::after { transform: rotate(180deg); }
.security-control-group-lead { display: grid; gap: 4px; padding-right: 44px; }
.security-control-group-lead strong { font-size: var(--fs-md); }
.security-control-group-lead small { color: var(--text-muted); line-height: 1.45; }
.security-control-group-stats { display: flex; gap: calc(var(--step) * 1.5); align-items: center; padding-right: 32px; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; }
.security-control-group-score { padding: 4px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--domain) 10%, var(--surface)); color: var(--domain); }
.security-control-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--step) * 2); padding: 0 calc(var(--step) * 3.25) calc(var(--step) * 3.25); border-top: 1px solid var(--line); }
.security-control-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: calc(var(--step) * 2.25);
  align-items: start;
  padding: calc(var(--step) * 2.75);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-raised) 92%, var(--surface-sunken));
}
.security-control-row[hidden] { display: none; }
.security-control-indicator { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--text-faint); }
.security-control-row.is-active .security-control-indicator { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success-soft) 78%, transparent); }
.security-control-row.is-attention .security-control-indicator { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn-soft) 78%, transparent); }
.security-control-row.is-degraded .security-control-indicator { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-soft) 78%, transparent); }
.security-control-row.is-optional .security-control-indicator,
.security-control-row.is-info .security-control-indicator,
.security-control-row.is-not-applicable .security-control-indicator { background: var(--texts); box-shadow: 0 0 0 4px color-mix(in srgb, var(--texts-soft) 78%, transparent); }
.security-control-copy { display: grid; gap: 4px; min-width: 0; }
.security-control-copy strong { font-size: var(--fs-sm); }
.security-control-copy small { color: var(--text-muted); line-height: 1.45; }
.security-control-badges { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.security-control-status,
.security-control-source {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.security-control-status.is-active { border-color: var(--success-line); background: var(--success-soft); color: var(--success); }
.security-control-status.is-attention { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.security-control-status.is-degraded { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.security-control-status.is-optional,
.security-control-status.is-info,
.security-control-status.is-not-applicable { border-color: var(--texts-line); background: var(--texts-soft); color: var(--texts); }
.security-control-source { opacity: .82; }
.security-footnote { margin: calc(var(--step) * 3) calc(var(--step) * 1) 0; text-align: center; }

@media (max-width: 1180px) {
  .security-domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .security-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .security-dashboard-hero { grid-template-columns: 1fr; }
  .security-score-card { min-height: 0; flex-direction: row; gap: calc(var(--step) * 4); text-align: left; }
  .security-score-ring { width: 116px; height: 116px; flex: none; }
  .security-control-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .admin-tabs { width: 100%; }
  .admin-tab { min-width: 0; flex: 1 1 0; grid-template-columns: 32px minmax(0, 1fr) auto; padding: calc(var(--step) * 1.75) calc(var(--step) * 2); }
  .admin-tab-icon { width: 32px; height: 32px; }
  .admin-tab small { display: none; }
  .security-dashboard-hero, .security-section { padding: calc(var(--step) * 3.5); border-radius: var(--radius-lg); }
  .security-domain-grid, .security-kpi-grid { grid-template-columns: 1fr; }
  .security-section-head, .security-inventory-head { align-items: stretch; flex-direction: column; }
  .security-control-search { width: 100%; }
  .security-control-group > summary { grid-template-columns: minmax(0, 1fr); }
  .security-control-group > summary::after { grid-column: 1; justify-self: end; }
  .security-control-group-stats { justify-content: flex-start; padding-right: 0; }
  .security-control-group-lead { padding-right: 36px; }
}
@media (max-width: 480px) {
  .admin-tabs { gap: 4px; padding: 4px; }
  .admin-tab { grid-template-columns: 28px minmax(0, 1fr); gap: 7px; min-height: 48px; }
  .admin-tab-icon { width: 28px; height: 28px; border-radius: 9px; }
  .admin-tab-status { display: none; }
  .security-score-card { flex-direction: column; text-align: center; }
  .security-control-row { grid-template-columns: 9px minmax(0, 1fr); }
  .security-control-badges { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .security-domain-bar > span { transition: none; }
}

/* ================= Nav + help compaction refresh ================= */
.rail-admin-group {
  display: grid;
  gap: 6px;
  margin-top: calc(var(--step) * 1.5);
  padding-top: calc(var(--step) * 2.5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rail-group-label {
  padding: 0 calc(var(--step) * 3);
  color: rgba(214, 228, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rail-admin-group .nav-item {
  font-size: var(--fs-sm);
}

@media (max-width: 900px) {
  .rail-admin-group {
    flex: 1 1 100%;
    order: 4;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--step) * 1.5);
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .rail-group-label {
    width: 100%;
    padding: 0;
  }
  .rail-admin-group .nav-link {
    flex: 1 1 0;
    justify-content: center;
    background: var(--rail-hover);
  }
}

@media (max-width: 640px) {
  .rail-admin-group {
    gap: 8px;
  }
  .rail-group-label {
    display: none;
  }
  .rail-admin-group .nav-link {
    min-height: 36px;
    padding-inline: calc(var(--step) * 2.5);
  }
}

.dfs-help-search-wrap {
  margin: 14px 20px 10px;
}

.dfs-help-groups {
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 10px;
  overflow: visible;
}

.dfs-help-group {
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

.dfs-help-topic-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 20px 14px;
}

.dfs-help-topic {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 13px;
  white-space: normal;
}

.dfs-help-topic > span:last-child {
  display: block;
  min-width: 0;
}

.dfs-help-no-results {
  margin: 18px 20px 0;
}

.dfs-help-detail-wrap {
  padding: 16px 20px 28px;
}

.dfs-help-detail {
  gap: 14px;
}

.dfs-help-detail-head {
  padding: 18px 20px 17px;
}

.dfs-help-guide-block {
  padding: 16px 18px;
}

@media (max-width: 900px) {
  .dfs-help-topic-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .dfs-help-search-wrap {
    margin: 12px 16px 10px;
  }
  .dfs-help-groups {
    padding: 0 16px 10px;
  }
  .dfs-help-topic-strip {
    grid-template-columns: 1fr;
    padding: 0 16px 12px;
  }
  .dfs-help-topic {
    min-height: 38px;
    padding: 8px 11px;
  }
  .dfs-help-no-results {
    margin: 16px 16px 0;
  }
  .dfs-help-detail-wrap {
    padding: 14px 16px 24px;
  }
}

@media (max-width: 420px) {
  .dfs-help-search-wrap,
  .dfs-help-groups,
  .dfs-help-topic-strip,
  .dfs-help-detail-wrap {
    margin-left: 13px;
    margin-right: 13px;
    padding-left: 0;
    padding-right: 0;
  }
  .dfs-help-topic-strip {
    gap: 8px;
  }
}
@media (max-width: 420px) {
  .dfs-help-search-wrap {
    margin-left: 13px;
    margin-right: 13px;
  }
  .dfs-help-groups {
    margin: 0;
    padding: 0 13px 9px;
  }
  .dfs-help-topic-strip {
    margin: 0;
    padding: 0 13px 10px;
  }
  .dfs-help-detail-wrap {
    margin: 0;
    padding: 14px 13px 22px;
  }
}

/* =============================== Dark theme — vivid clarity refresh ===
   Dark mode keeps the same layout and semantics, but uses brighter text,
   clearer elevation and distinct Files/Text/Received colour identities. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #081120;
  --surface: #101c32;
  --surface-sunken: #0b1628;
  --surface-raised: #162640;
  --surface-hover: #1c3152;

  --text: #f4f7ff;
  --text-muted: #b9c6dd;
  --text-faint: #91a4c4;

  --line: #263a5d;
  --line-strong: #405a82;

  --primary: #3182f6;
  --primary-hover: #5b9cff;
  --primary-soft: #102d52;
  --primary-line: #2f5f98;
  --on-primary: #ffffff;
  --accent: #8bb8ff;
  --knob: #f5f8ff;

  --danger: #ff7d92;
  --danger-soft: #341b2a;
  --danger-line: #6b3044;

  --success: #49e0ba;
  --success-soft: #0d302d;
  --success-line: #25645b;

  --warn: #ffd166;
  --warn-soft: #342a13;
  --warn-line: #6f5920;

  --files: #57b8ff;
  --files-soft: #0e3157;
  --files-line: #2e6797;
  --files-rgb: 87, 184, 255;

  --texts: #c0a3ff;
  --texts-soft: #2a2052;
  --texts-line: #654d9d;
  --texts-rgb: 192, 163, 255;

  --recv: #4ce5c5;
  --recv-soft: #0d332f;
  --recv-line: #286f63;
  --recv-rgb: 76, 229, 197;

  --grad-a: #4f8cff;
  --grad-b: #22d3ee;

  --rail-bg: #07142c;
  --rail-text: #f3f7ff;
  --rail-muted: #a9b9d7;
  --rail-line: rgba(137, 180, 255, 0.16);
  --rail-hover: rgba(91, 156, 255, 0.12);
  --rail-active: rgba(91, 111, 255, 0.22);

  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(112, 160, 230, .035);
  --shadow-card:
    0 0 0 1px rgba(128, 178, 255, .045),
    0 10px 28px -18px rgba(0, 0, 0, .72),
    0 22px 54px -36px rgba(44, 111, 255, .34);
  --shadow-md:
    0 1px 2px rgba(0, 0, 0, .45),
    0 16px 36px -20px rgba(0, 0, 0, .80),
    0 30px 72px -42px rgba(70, 124, 255, .34);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, .12);

  --page-wash:
    radial-gradient(980px 520px at 5% -10%, rgba(35, 115, 255, .28), transparent 64%),
    radial-gradient(920px 520px at 65% -15%, rgba(126, 78, 255, .22), transparent 65%),
    radial-gradient(820px 520px at 108% 18%, rgba(14, 210, 224, .18), transparent 62%),
    linear-gradient(160deg, #0a1528 0%, #091221 48%, #07101d 100%);

  --focus: 0 0 0 3px rgba(87, 184, 255, .38), 0 0 0 1px rgba(87, 184, 255, .72);

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4d2e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] body {
  background-color: var(--bg);
  background-image: var(--page-wash);
  background-attachment: fixed;
}

/* Left rail: richer colour, readable labels and a clearer active destination. */
:root[data-theme="dark"] .rail {
  background:
    radial-gradient(290px 430px at 108% 24%, rgba(37, 99, 235, .26), transparent 72%),
    radial-gradient(300px 420px at -14% 82%, rgba(139, 92, 246, .22), transparent 72%),
    linear-gradient(180deg, #081a38 0%, #07132c 48%, #081127 100%);
}
:root[data-theme="dark"] .rail-aurora { opacity: .76; }
:root[data-theme="dark"] .rail-marker {
  background: linear-gradient(135deg, rgba(53, 130, 246, .46), rgba(118, 75, 255, .36));
  box-shadow:
    inset 0 0 0 1px rgba(157, 196, 255, .28),
    0 12px 28px -17px rgba(34, 211, 238, .92),
    0 0 36px -24px rgba(139, 92, 246, .95);
}
:root[data-theme="dark"] .nav-item { color: #b9c8e4; }
:root[data-theme="dark"] .nav-item:hover { color: #ffffff; background: rgba(86, 150, 255, .10); }
:root[data-theme="dark"] .rail-nav .nav-item:hover { background: transparent; }
:root[data-theme="dark"] .nav-item.is-active { color: #ffffff; text-shadow: 0 1px 10px rgba(119, 183, 255, .20); }
:root[data-theme="dark"] .rail-group-label { color: #8fa8d1; }
:root[data-theme="dark"] .rail-admin-group { border-top-color: rgba(128, 169, 234, .15); }
:root[data-theme="dark"] .rail-admin-group .nav-link:hover { background: rgba(89, 155, 255, .13); }

/* Header and utilities: a visible glass dock with colour-coded actions. */
:root[data-theme="dark"] .topbar {
  border-bottom-color: #2a4268;
  background:
    linear-gradient(90deg, rgba(12, 28, 52, .97), rgba(17, 26, 54, .96) 58%, rgba(11, 40, 55, .94));
  box-shadow: 0 10px 34px -28px rgba(75, 145, 255, .75);
}
:root[data-theme="dark"] .topbar-actions {
  padding: 5px;
  border: 1px solid rgba(90, 132, 195, .36);
  border-radius: 15px;
  background: rgba(8, 19, 38, .58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 26px -22px rgba(0,0,0,.92);
}
:root[data-theme="dark"] .utility-button,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .link-chip {
  border-color: #314b72;
  background: linear-gradient(145deg, #172944, #111e34);
  color: #c6d4eb;
}
:root[data-theme="dark"] .utility-button:hover,
:root[data-theme="dark"] .icon-button:hover,
:root[data-theme="dark"] .link-chip:hover {
  border-color: #5276aa;
  background: linear-gradient(145deg, #20395e, #172844);
  color: #ffffff;
  box-shadow: 0 10px 24px -18px rgba(87,184,255,.72);
}
:root[data-theme="dark"] .help-button {
  border-color: #5d4b94;
  background: linear-gradient(135deg, #2b2151, #18345a);
  color: #cdb8ff;
}
:root[data-theme="dark"] .help-button:hover {
  border-color: #8068c7;
  background: linear-gradient(135deg, #3a2969, #1c4770);
}
:root[data-theme="dark"] #themeToggle {
  border-color: #386993;
  background: linear-gradient(145deg, #113759, #282052);
  color: #70d7ff;
  box-shadow: inset 0 0 0 1px rgba(110, 211, 255, .08), 0 0 22px -15px rgba(34, 211, 238, .95);
}
:root[data-theme="dark"] .logout-button {
  border-color: #71384b;
  background: linear-gradient(145deg, #351927, #261624);
  color: #ff8da0;
}
:root[data-theme="dark"] .logout-button:hover { background: linear-gradient(145deg, #492033, #321927); color: #ffafbd; }
:root[data-theme="dark"] .topbar .account-button,
:root[data-theme="dark"] .admin-account-pill {
  border-color: #4d518b;
  background: linear-gradient(135deg, #25254e, #14344f);
  color: #f3f6ff;
}
:root[data-theme="dark"] .topbar .account-button:hover,
:root[data-theme="dark"] .topbar .account-button[aria-expanded="true"] {
  border-color: #7772c7;
  background: linear-gradient(135deg, #332c64, #194363);
}
:root[data-theme="dark"] .topbar .account-menu {
  border-color: #365078;
  background: linear-gradient(180deg, #182941, #101b30);
  box-shadow: var(--shadow-md);
}

/* Dashboard band: each number reads as a distinct coloured status tile. */
:root[data-theme="dark"] .overview {
  border-color: #2c4369;
  background: linear-gradient(120deg, #142544 0%, #171f42 54%, #123548 100%);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.035);
}
:root[data-theme="dark"] .overview::after {
  background:
    radial-gradient(500px 140px at 10% 0%, rgba(65, 143, 255, .18), transparent 70%),
    radial-gradient(430px 150px at 62% 0%, rgba(148, 102, 255, .14), transparent 72%),
    radial-gradient(380px 160px at 100% 0%, rgba(53, 224, 197, .12), transparent 72%);
}
:root[data-theme="dark"] .overview > * + * { box-shadow: inset 1px 0 0 rgba(92, 123, 174, .22); }
:root[data-theme="dark"] .read-files { background: linear-gradient(135deg, rgba(87,184,255,.08), transparent 78%); }
:root[data-theme="dark"] .read-text { background: linear-gradient(135deg, rgba(192,163,255,.09), transparent 78%); }
:root[data-theme="dark"] .read-recv { background: linear-gradient(135deg, rgba(76,229,197,.085), transparent 78%); }
:root[data-theme="dark"] .read-icon {
  box-shadow: inset 0 0 0 1px var(--stat-line), 0 10px 24px -18px var(--stat);
}
:root[data-theme="dark"] .gauge-track { stroke: #274263; }

/* Main cards: clearly separated from the page without becoming flat grey. */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] body.plain .tinted-card {
  border-color: #2a4166;
  background:
    linear-gradient(155deg, rgba(22, 38, 67, .98), rgba(14, 27, 49, .98));
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.035);
}
:root[data-theme="dark"] .mode-pane[data-mode="files"] .panel {
  background:
    radial-gradient(460px 180px at 0% 0%, rgba(53, 138, 255, .13), transparent 68%),
    linear-gradient(155deg, rgba(21, 38, 68, .99), rgba(13, 27, 49, .99));
}
:root[data-theme="dark"] .mode-pane[data-mode="text"] .panel {
  background:
    radial-gradient(460px 180px at 0% 0%, rgba(146, 92, 255, .14), transparent 68%),
    linear-gradient(155deg, rgba(27, 34, 69, .99), rgba(16, 25, 48, .99));
}
:root[data-theme="dark"] .panel::before { height: 2px; opacity: 1; }
:root[data-theme="dark"] .panel-title,
:root[data-theme="dark"] .card-title { color: #f7f9ff; }
:root[data-theme="dark"] .panel-sub,
:root[data-theme="dark"] .card-sub,
:root[data-theme="dark"] .hint { color: #aebdd6; }

/* Upload / compose surfaces: brighter edge, richer hover and legible secondary text. */
:root[data-theme="dark"] .dropzone {
  border-color: #3b587f;
  background:
    radial-gradient(400px 190px at 50% -20%, rgba(var(--tint-rgb), .11), transparent 72%),
    linear-gradient(180deg, #0c1930, #0a1426);
}
:root[data-theme="dark"] .dropzone:hover {
  border-color: var(--tint);
  background:
    radial-gradient(430px 200px at 50% 0%, rgba(var(--tint-rgb), .18), transparent 72%),
    color-mix(in srgb, var(--tint-soft) 58%, #0b172a);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 25%, transparent), 0 20px 42px -32px rgba(var(--tint-rgb), .86);
}
:root[data-theme="dark"] .dropzone-title { color: #f4f8ff; }
:root[data-theme="dark"] .dropzone-sub,
:root[data-theme="dark"] .dropzone-hint { color: #a9bad4; }
:root[data-theme="dark"] .dropzone-link { color: color-mix(in srgb, var(--tint) 88%, #ffffff); }
:root[data-theme="dark"] .text-form textarea {
  border-color: #345077;
  background: linear-gradient(180deg, #0e1b31, #0a1528);
}

/* Sharing options are an important decision surface, so make all three cards obvious. */
:root[data-theme="dark"] .options-summary {
  border-color: #36547d;
  background: linear-gradient(135deg, #12223d, #111a34 70%, #102b3d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
:root[data-theme="dark"] .options-summary:hover {
  border-color: #5279aa;
  background: linear-gradient(135deg, #182f50, #171f42 70%, #14384c);
}
:root[data-theme="dark"] .options {
  border-color: #36547d;
  background: linear-gradient(180deg, #101d35, #0c172a);
}
:root[data-theme="dark"] .option-card {
  background: transparent;
}
:root[data-theme="dark"] .options > .protect-row { background: linear-gradient(90deg, rgba(83, 143, 255, .07), transparent 62%); }
:root[data-theme="dark"] .options > .share-row { background: linear-gradient(90deg, rgba(76, 229, 197, .07), transparent 62%); }
:root[data-theme="dark"] .options > .expiry-row { background: linear-gradient(90deg, rgba(255, 209, 102, .07), transparent 62%); }
:root[data-theme="dark"] .option-card-icon {
  box-shadow: inset 0 0 0 1px currentColor, 0 10px 22px -18px currentColor;
}
:root[data-theme="dark"] .otag {
  border-color: #3c5475;
  background: #17263e;
  color: #c0cee2;
}
:root[data-theme="dark"] .otag.is-set-lock { border-color: var(--primary-line); background: #153458; color: #a7cbff; }
:root[data-theme="dark"] .otag.is-set-share { border-color: var(--recv-line); background: #103a34; color: #73efd8; }
:root[data-theme="dark"] .otag.is-set-timer { border-color: var(--warn-line); background: #3b2d10; color: #ffda7c; }

/* Inputs, selects and switches must stay clearly visible against dark cards. */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  border-color: #3b567d;
  background-color: #101d33;
  color: #f1f5ff;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #8195b4; }
:root[data-theme="dark"] input:hover,
:root[data-theme="dark"] textarea:hover,
:root[data-theme="dark"] select:hover { border-color: #5377a6; }
:root[data-theme="dark"] input:focus-visible,
:root[data-theme="dark"] textarea:focus-visible,
:root[data-theme="dark"] select:focus-visible {
  border-color: #62b6ff;
  box-shadow: var(--focus);
}
:root[data-theme="dark"] .switch {
  border-color: #446184;
  background: #162641;
}
:root[data-theme="dark"] .switch:checked { background: linear-gradient(145deg, #477dff, #22d3ee); }

/* Shared lists: more separation, better selection visibility and readable badges. */
:root[data-theme="dark"] .file-row,
:root[data-theme="dark"] .note-row,
:root[data-theme="dark"] .user-row {
  border-color: #293f63;
  background: linear-gradient(145deg, #121f37, #0e192d);
}
:root[data-theme="dark"] .file-row:hover,
:root[data-theme="dark"] .note-row:hover,
:root[data-theme="dark"] .user-row:hover {
  border-color: color-mix(in srgb, var(--tint) 54%, #355171);
  background: linear-gradient(145deg, #182b49, #111e35);
  box-shadow: 0 18px 36px -30px rgba(var(--tint-rgb), .80);
}
:root[data-theme="dark"] .file-row.is-selected,
:root[data-theme="dark"] .note-row.is-selected {
  border-color: color-mix(in srgb, var(--primary) 68%, #47658c);
  background:
    radial-gradient(280px 120px at 0% 0%, rgba(87,184,255,.15), transparent 72%),
    linear-gradient(145deg, #193154, #161f42);
  box-shadow: inset 3px 0 0 #55b7ff, 0 16px 34px -28px rgba(87,184,255,.92);
}
:root[data-theme="dark"] .bulk-bar {
  border-color: #345078;
  background: linear-gradient(135deg, #13223b, #101c31);
}
:root[data-theme="dark"] .bulk-select-all {
  border-color: #3b5d89;
  background: linear-gradient(135deg, #173052, #15213b);
}
:root[data-theme="dark"] .bulk-count { border-color: #365273; background: #13223a; color: #bac8dd; }

/* Empty states should feel intentional, not like a black void. */
:root[data-theme="dark"] .empty-state {
  border-radius: 18px;
  background:
    radial-gradient(330px 190px at 50% 10%, rgba(var(--tint-rgb), .10), transparent 72%),
    linear-gradient(180deg, rgba(9, 18, 36, .82), rgba(8, 15, 30, .72));
}
:root[data-theme="dark"] .empty-title { color: #f0f5ff; }
:root[data-theme="dark"] .empty-sub { color: #a9bad5; }

/* Buttons: disabled states remain visibly present, enabled primaries carry colour. */
:root[data-theme="dark"] .primary-button {
  background: linear-gradient(135deg, #3d7cff, #21c9df);
  color: #ffffff;
  box-shadow: 0 12px 28px -18px rgba(34, 211, 238, .86), var(--sheen);
}
:root[data-theme="dark"] .primary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #568fff, #32d7e8);
}
:root[data-theme="dark"] button:disabled,
:root[data-theme="dark"] .primary-button:disabled,
:root[data-theme="dark"] .mini-button:disabled {
  opacity: .58;
  color: #91a3bd;
  filter: saturate(.72);
}

/* Help drawer uses the same richer dark surfaces and keeps topic colours visible. */
:root[data-theme="dark"] .dfs-dialog[data-tone="help"] {
  background: linear-gradient(180deg, #101d33, #0b1628);
  border-left-color: #34547e;
}
:root[data-theme="dark"] .dfs-help-drawer-head {
  border-bottom-color: #2d4569;
  background:
    radial-gradient(360px 180px at 4% 0%, rgba(111, 89, 255, .14), transparent 72%),
    linear-gradient(90deg, #142440, #111c34);
}
:root[data-theme="dark"] .dfs-help-search-wrap {
  border-color: #3d5b83;
  background: rgba(13, 25, 45, .90);
}
:root[data-theme="dark"] .dfs-help-group,
:root[data-theme="dark"] .dfs-help-topic,
:root[data-theme="dark"] .dfs-help-guide-block {
  border-color: #2f486d;
  background: linear-gradient(145deg, #14233b, #101b30);
}
:root[data-theme="dark"] .dfs-help-group:hover,
:root[data-theme="dark"] .dfs-help-topic:hover { border-color: #5779a9; }
:root[data-theme="dark"] .dfs-help-topic.is-active {
  border-color: #766ac7;
  background: linear-gradient(135deg, #302657, #173858);
  color: #ffffff;
}
:root[data-theme="dark"] .dfs-help-detail-head {
  background:
    radial-gradient(300px 150px at 100% 0%, color-mix(in srgb, var(--help-accent) 18%, transparent), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--help-soft) 70%, #122039), #101a2e);
}

/* Accounts + Security Health: preserve all status colours in dark mode. */
:root[data-theme="dark"] body.plain {
  background-color: var(--bg);
  background-image: var(--page-wash);
}
:root[data-theme="dark"] .admin-hero,
:root[data-theme="dark"] .security-dashboard-hero,
:root[data-theme="dark"] .security-section {
  border-color: #2d466d;
  background:
    radial-gradient(460px 220px at 100% 0%, rgba(71, 129, 255, .11), transparent 70%),
    linear-gradient(150deg, #142641, #101a2f);
  box-shadow: var(--shadow-card);
}
:root[data-theme="dark"] .security-kpi,
:root[data-theme="dark"] .security-domain-card,
:root[data-theme="dark"] .security-summary-item,
:root[data-theme="dark"] .security-control-group {
  border-color: #2d466d;
  background: linear-gradient(145deg, #152642, #101a2f);
}
:root[data-theme="dark"] .security-domain-card:hover,
:root[data-theme="dark"] .security-control-group:hover {
  border-color: color-mix(in srgb, var(--domain, var(--files)) 55%, #405d83);
}
:root[data-theme="dark"] .security-domain-bar { background: rgba(120, 150, 195, .16); }
:root[data-theme="dark"] .security-control-row {
  border-color: #294261;
  background: #0f1d31;
}
:root[data-theme="dark"] .security-score-ring {
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.35)) drop-shadow(0 0 22px rgba(66, 211, 185, .08));
}

/* Scrollbars should be visible but unobtrusive in dark mode. */
:root[data-theme="dark"] * {
  scrollbar-color: #405a80 #101a2b;
}
:root[data-theme="dark"] *::-webkit-scrollbar-track { background: #101a2b; }
:root[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: #405a80;
  border-color: #101a2b;
}

/* =============================== DFS contextual tooltips === */
.dfs-tooltip {
  position: fixed;
  z-index: 9000;
  width: max-content;
  max-width: min(320px, calc(100vw - 20px));
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--primary-line) 70%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 96%, var(--primary-soft));
  color: var(--text);
  box-shadow: 0 16px 38px -20px rgba(15, 23, 42, .58), inset 0 1px 0 rgba(255,255,255,.24);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.42;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px) scale(.985);
  transition: opacity 90ms ease, transform 90ms ease;
  overflow-wrap: anywhere;
}
.dfs-tooltip.is-long { max-width: min(440px, calc(100vw - 20px)); }
.dfs-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.dfs-tooltip[hidden] { display: none; }
:root[data-theme="dark"] .dfs-tooltip {
  border-color: color-mix(in srgb, var(--files-line) 58%, var(--line-strong));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 90%, var(--files-soft)), color-mix(in srgb, var(--surface-raised) 94%, var(--texts-soft)));
  color: #f8fbff;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.025) inset;
}
@media (max-width: 720px) {
  .dfs-tooltip { max-width: min(280px, calc(100vw - 16px)); font-size: 11px; }
  .dfs-tooltip.is-long { max-width: min(340px, calc(100vw - 16px)); }
}
@media (prefers-reduced-motion: reduce) {
  .dfs-tooltip { transition: none; }
}

/* ===================================================== screen sharing === */

/* Screen Share is the third primary workspace. Its emerald/cyan identity is
   intentionally distinct from Files (blue) and Text (violet). */
body[data-mode="screen"] {
  --tint: #0d9488;
  --tint-soft: #ecfdf5;
  --tint-line: #99f6e4;
  --tint-rgb: 13, 148, 136;
  --grad-a: #0d9488;
  --grad-b: #06b6d4;
}
.mode-pane[data-mode="screen"] {
  --tint: #0d9488;
  --tint-soft: #ecfdf5;
  --tint-line: #99f6e4;
  --tint-rgb: 13, 148, 136;
  --grad-a: #0d9488;
  --grad-b: #06b6d4;
}
:root[data-theme="dark"] body[data-mode="screen"],
:root[data-theme="dark"] .mode-pane[data-mode="screen"] {
  --tint: #5eead4;
  --tint-soft: #0d2928;
  --tint-line: #225f5b;
  --tint-rgb: 94, 234, 212;
  --grad-a: #2dd4bf;
  --grad-b: #22d3ee;
}

.rail-nav[data-active="screen"] .rail-marker { transform: translateY(92px); }
body[data-mode="screen"] .overview { display: none; }

.screen-share-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: calc(var(--step) * 5);
  align-items: start;
}
.screen-sessions-panel { grid-column: 1 / -1; }
.mode-pane[data-mode="screen"] .panel {
  background:
    radial-gradient(560px 210px at 0% 0%, rgba(13,148,136,.10), transparent 70%),
    radial-gradient(500px 190px at 100% 0%, rgba(6,182,212,.07), transparent 72%),
    var(--surface);
}
.screen-panel-head { align-items: flex-start; }
.screen-panel-head .eyebrow {
  margin: 0 0 5px;
  color: var(--tint);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.screen-panel-head h2 { margin-top: 0; }
.screen-security-pill,
.screen-state-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-pill);
  background: var(--tint-soft);
  color: var(--tint);
  font-size: var(--fs-xs);
  font-weight: 750;
}
.screen-security-pill svg { width: 15px; height: 15px; }
.screen-state-chip[data-state="live"] { background: #ecfdf5; border-color: #86efac; color: #15803d; }
.screen-state-chip[data-state="waiting"] { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
.screen-state-chip[data-state="ended"] { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
:root[data-theme="dark"] .screen-state-chip[data-state="live"] { background: #10291d; border-color: #276b45; color: #86efac; }

.screen-form { display: grid; gap: calc(var(--step) * 4); margin-top: calc(var(--step) * 5); }
.screen-field { display: grid; gap: calc(var(--step) * 1.5); }
.screen-field > span { color: var(--text); font-size: var(--fs-sm); font-weight: 700; }
.screen-field small { color: var(--text-faint); font-weight: 550; }
.screen-field select,
.screen-field input { min-height: 44px; }
.screen-audio-option {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--step) * 2.5);
  padding: calc(var(--step) * 3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tint-soft) 38%, var(--surface));
  cursor: pointer;
}
.screen-audio-option input { margin-top: 3px; }
.screen-audio-option span { display: grid; gap: 3px; }
.screen-audio-option strong { font-size: var(--fs-sm); }
.screen-audio-option small { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.screen-primary { min-height: 46px; }
.screen-primary svg { width: 18px; height: 18px; }
.screen-privacy-note,
.screen-notice {
  display: grid;
  gap: 4px;
  margin-top: calc(var(--step) * 4);
  padding: calc(var(--step) * 3.5);
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tint-soft) 54%, var(--surface));
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.screen-privacy-note strong { color: var(--text); }
.screen-notice-warn { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning); }

.screen-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 330px;
  margin-top: calc(var(--step) * 4);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius-lg) + 2px);
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(var(--tint-rgb), .13), transparent 72%),
    #07111f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.screen-stage-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 360px;
  padding: calc(var(--step) * 6);
  color: #b8c6db;
  text-align: center;
}
.screen-stage-empty strong { color: #eef7ff; font-size: var(--fs-lg); }
.screen-stage-empty > span:last-child { font-size: var(--fs-sm); line-height: 1.5; }
.screen-stage-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 4px;
  border: 1px solid rgba(94,234,212,.32);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(13,148,136,.24), rgba(6,182,212,.16));
  color: #67e8f9;
}
.screen-stage-icon svg { width: 30px; height: 30px; }
.screen-video {
  display: block;
  width: 100%;
  max-height: min(68vh, 650px);
  object-fit: contain;
  background: #020617;
}
.screen-live-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2) calc(var(--step) * 5);
  margin-top: calc(var(--step) * 3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.screen-live-meta strong { color: var(--text); }
.screen-controls { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 2); margin-top: calc(var(--step) * 3); }

.screen-session-list { display: grid; gap: calc(var(--step) * 2.5); margin-top: calc(var(--step) * 4); }
.screen-session-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: calc(var(--step) * 3);
  align-items: center;
  padding: calc(var(--step) * 3.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.screen-session-card.is-active { border-color: var(--tint-line); box-shadow: 0 0 0 3px rgba(var(--tint-rgb), .07); }
.screen-session-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--tint-line) 70%, var(--line)); }
.screen-session-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  color: white;
  font-weight: 800;
  box-shadow: 0 8px 20px -12px rgba(var(--tint-rgb), .9);
}
.screen-session-body { min-width: 0; }
.screen-session-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.screen-session-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-session-meta { margin: 4px 0 0; overflow: hidden; color: var(--text-muted); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.screen-session-status {
  flex: none;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}
.screen-session-status.is-live { background: #dcfce7; color: #15803d; }
.screen-session-status.is-waiting { background: var(--warning-soft); color: var(--warning); }
.screen-session-status.is-ended { background: var(--danger-soft); color: var(--danger); }
:root[data-theme="dark"] .screen-session-status.is-live { background: #10291d; color: #86efac; }
.screen-session-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.screen-session-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: calc(var(--step) * 4);
  padding: calc(var(--step) * 7) calc(var(--step) * 4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}
.screen-session-empty strong { color: var(--text); }
.screen-session-empty span { font-size: var(--fs-sm); }

@media (max-width: 1100px) {
  .screen-share-layout { grid-template-columns: 1fr; }
  .screen-sessions-panel { grid-column: auto; }
}

@media (max-width: 900px) {
  .rail-nav { grid-template-columns: repeat(3, 1fr); }
  .rail-marker { width: calc((100% - var(--step) * 3) / 3); }
  .rail-nav[data-active="text"] .rail-marker { transform: translateX(calc(100% + var(--step) * 1.5)); }
  .rail-nav[data-active="screen"] .rail-marker { transform: translateX(calc(200% + var(--step) * 3)); }
}

@media (max-width: 720px) {
  .rail-nav { grid-template-columns: repeat(3, 1fr); }
  .rail-marker { width: calc((100% - 18px) / 3); }
  .rail-nav[data-active="text"] .rail-marker { transform: translateX(calc(100% + 4px)); }
  .rail-nav[data-active="screen"] .rail-marker { transform: translateX(calc(200% + 8px)); }
  .rail-nav .nav-label { font-size: 11px; }
  .screen-share-layout { gap: calc(var(--step) * 3); }
  .screen-stage { min-height: 230px; }
  .screen-session-card { grid-template-columns: auto minmax(0, 1fr); }
  .screen-session-actions { grid-column: 1 / -1; justify-content: stretch; }
  .screen-session-actions .mini-button { flex: 1; }
}

/* Screen Share collaboration extensions: multi-recipient, audio, captions and recording. */
.screen-recipient-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.screen-field-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.screen-field-head > div { display: grid; gap: 2px; }
.screen-field-head strong { color: var(--text); font-size: var(--fs-sm); }
.screen-field-head small,
.screen-recipient-summary { color: var(--text-muted); font-size: var(--fs-xs); }
.screen-select-all { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-xs); cursor: pointer; }
.screen-recipient-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 182px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.screen-recipient-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.screen-recipient-item:hover { border-color: var(--tint-line); background: var(--tint-soft); }
.screen-recipient-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-recipient-summary { display: block; margin-top: 7px; }
.screen-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.screen-live-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.screen-recording-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-pill);
  background: #fef2f2;
  color: #b91c1c;
  font-size: var(--fs-xs);
  font-weight: 800;
}
:root[data-theme="dark"] .screen-recording-chip { border-color: #7f1d1d; background: #351313; color: #fca5a5; }
.screen-caption-overlay {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(2,6,23,.78);
  color: white;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.45;
  text-align: center;
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.screen-caption-language {
  flex: none;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(94,234,212,.18);
  color: #99f6e4;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
}
.screen-recording-consent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--warning-line);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
}
.screen-recording-consent > div:first-child { display: grid; gap: 3px; }
.screen-recording-consent strong { color: var(--text); font-size: var(--fs-sm); }
.screen-recording-consent span { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.screen-consent-actions { display: flex; flex: none; gap: 7px; }
.screen-transcript-panel {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.screen-transcript-head { display: flex; justify-content: space-between; gap: 12px; color: var(--text); font-size: var(--fs-sm); }
.screen-transcript-head span { color: var(--text-muted); font-size: var(--fs-xs); }
.screen-transcript-list { display: grid; gap: 7px; max-height: 160px; overflow: auto; margin-top: 9px; }
.screen-transcript-line { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; align-items: start; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; }
.screen-transcript-line b { color: var(--tint); font-size: 10px; letter-spacing: .04em; }
.screen-participant-summary { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.screen-participant-pill { padding: 2px 6px; border-radius: 999px; background: var(--surface-muted); color: var(--text-muted); font-size: 10px; }
.screen-participant-pill.is-accepted { background: #dcfce7; color: #15803d; }
.screen-participant-pill.is-rejected,
.screen-participant-pill.is-ended { background: var(--danger-soft); color: var(--danger); }
:root[data-theme="dark"] .screen-participant-pill.is-accepted { background: #10291d; color: #86efac; }

@media (max-width: 720px) {
  .screen-recipient-list,
  .screen-option-grid { grid-template-columns: 1fr; }
  .screen-recording-consent { align-items: stretch; flex-direction: column; }
  .screen-consent-actions { width: 100%; }
  .screen-consent-actions .mini-button { flex: 1; }
  .screen-caption-overlay { left: 10px; right: 10px; bottom: 10px; }
}