/* CipherContact - desktop-first campaign operations visual system.
The graphite, lime, glass, and low-motion interaction tokens keep the shell,
campaign control room, and work surfaces visually consistent. */

@import url('/static/fonts/fonts.css');

:root {
  --accent: #315a37;
  --accent-mid: #477a49;
  --accent-light: #8fb96b;
  --accent-pale: rgba(71, 122, 73, 0.14);
  --accent-bg: #edf3e9;
  --accent-dark: #1d3522;
  --accent-shadow: rgba(49, 90, 55, 0.24);
  --accent-rgb: 71, 122, 73;
  --particle-color-rgb: 94, 139, 83;
  --signal: #b9ed70;
  --signal-ink: #182016;
  --signal-soft: rgba(185, 237, 112, 0.19);
  --button-ink: #ffffff;

  --bg: #e9eee6;
  --surface: rgba(255, 255, 252, 0.88);
  --surface2: rgba(246, 249, 242, 0.88);
  --surface3: #dfe8dc;
  --text: #17201a;
  --text-mid: #3e4d42;
  --muted: #667267;
  --dim: #8a958b;
  --border: rgba(37, 57, 42, 0.13);
  --border2: rgba(37, 57, 42, 0.22);

  --amber: #a56609; --amber-bg: #fff6dc;
  --red: #b84444; --red-bg: #fff0ef;
  --blue: #477a49; --blue-bg: #edf3e9;
  --green-status: #187450; --green-bg: #e8f6ed;
  --good: #187450; --bad: #b84444; --warn: #a56609; --info: #477a49;

  --shadow-sm: 0 1px 2px rgba(24, 38, 28, 0.06), 0 7px 24px rgba(44, 67, 49, 0.06);
  --shadow-md: 0 8px 28px rgba(37, 57, 42, 0.12), 0 2px 6px rgba(37, 57, 42, 0.06);
  --shadow-lg: 0 18px 46px rgba(37, 57, 42, 0.16), 0 5px 15px rgba(37, 57, 42, 0.08);

  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --topbar-h: 60px;
  --dock-w: 64px;
  --dock-w-open: 216px;
  --sidebar-w: 220px;
  --font: 'Space Grotesk', 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --glass-bg: linear-gradient(145deg, rgba(255, 255, 252, 0.80), rgba(240, 246, 236, 0.64));
  --glass-border: rgba(255, 255, 252, 0.86);
  --glass-blur: 18px;

  --sb-bg-1: rgba(247, 250, 243, 0.77);
  --sb-bg-2: rgba(225, 234, 220, 0.67);
  --sb-border: rgba(37, 57, 42, 0.13);
  --sb-sheen: rgba(255, 255, 252, 0.74);
  --sb-shadow: var(--shadow-md);
  --sb-text-dim: #627064;
}

:root[data-theme="dark"] {
  --accent: #b8ec70;
  --accent-mid: #d0f58a;
  --accent-light: #e0ffaf;
  --accent-pale: rgba(208, 245, 138, 0.13);
  --accent-bg: #171b16;
  --accent-dark: #d0f58a;
  --accent-shadow: rgba(208, 245, 138, 0.18);
  --accent-rgb: 208, 245, 138;
  --particle-color-rgb: 191, 232, 114;
  --signal: #c8f477;
  --signal-ink: #171b14;
  --signal-soft: rgba(200, 244, 119, 0.18);
  --button-ink: #171b14;

  --bg: #090a0a;
  --surface: rgba(30, 32, 30, 0.84);
  --surface2: rgba(42, 45, 41, 0.72);
  --surface3: #30342f;
  --text: #f2f4ef;
  --text-mid: #d2d8ce;
  --muted: #a8afa5;
  --dim: #737a71;
  --border: rgba(255, 255, 255, 0.09);
  --border2: rgba(255, 255, 255, 0.16);

  --amber: #f1c967; --amber-bg: rgba(113, 82, 17, 0.28);
  --red: #ff9191; --red-bg: rgba(122, 43, 43, 0.25);
  --blue: #c8f477; --blue-bg: rgba(200, 244, 119, 0.12);
  --green-status: #89df9f; --green-bg: rgba(54, 126, 77, 0.25);
  --good: #89df9f; --bad: #ff9191; --warn: #f1c967; --info: #c8f477;

  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.32), 0 10px 24px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.40), 0 3px 9px rgba(0, 0, 0, 0.27);
  --shadow-lg: 0 24px 62px rgba(0, 0, 0, 0.53), 0 6px 18px rgba(0, 0, 0, 0.32);
  --glass-bg: linear-gradient(145deg, rgba(39, 42, 39, 0.78), rgba(23, 24, 23, 0.68));
  --glass-border: rgba(255, 255, 255, 0.11);
  --sb-bg-1: rgba(25, 27, 24, 0.82);
  --sb-bg-2: rgba(13, 14, 13, 0.78);
  --sb-border: rgba(255, 255, 255, 0.09);
  --sb-sheen: rgba(255, 255, 255, 0.065);
  --sb-text-dim: #9da69c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #b8ec70;
    --accent-mid: #d0f58a;
    --accent-light: #e0ffaf;
    --accent-pale: rgba(208, 245, 138, 0.13);
    --accent-bg: #171b16;
    --accent-dark: #d0f58a;
    --accent-shadow: rgba(208, 245, 138, 0.18);
    --accent-rgb: 208, 245, 138;
    --particle-color-rgb: 191, 232, 114;
    --signal: #c8f477;
    --signal-ink: #171b14;
    --signal-soft: rgba(200, 244, 119, 0.18);
    --button-ink: #171b14;

    --bg: #090a0a;
    --surface: rgba(30, 32, 30, 0.84);
    --surface2: rgba(42, 45, 41, 0.72);
    --surface3: #30342f;
    --text: #f2f4ef;
    --text-mid: #d2d8ce;
    --muted: #a8afa5;
    --dim: #737a71;
    --border: rgba(255, 255, 255, 0.09);
    --border2: rgba(255, 255, 255, 0.16);

    --amber: #f1c967; --amber-bg: rgba(113, 82, 17, 0.28);
    --red: #ff9191; --red-bg: rgba(122, 43, 43, 0.25);
    --blue: #c8f477; --blue-bg: rgba(200, 244, 119, 0.12);
    --green-status: #89df9f; --green-bg: rgba(54, 126, 77, 0.25);
    --good: #89df9f; --bad: #ff9191; --warn: #f1c967; --info: #c8f477;

    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.32), 0 10px 24px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.40), 0 3px 9px rgba(0, 0, 0, 0.27);
    --shadow-lg: 0 24px 62px rgba(0, 0, 0, 0.53), 0 6px 18px rgba(0, 0, 0, 0.32);
    --glass-bg: linear-gradient(145deg, rgba(39, 42, 39, 0.78), rgba(23, 24, 23, 0.68));
    --glass-border: rgba(255, 255, 255, 0.11);
    --sb-bg-1: rgba(25, 27, 24, 0.82);
    --sb-bg-2: rgba(13, 14, 13, 0.78);
    --sb-border: rgba(255, 255, 255, 0.09);
    --sb-sheen: rgba(255, 255, 255, 0.065);
    --sb-text-dim: #9da69c;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  position: relative;
}

body:not(.login-page)::before,
body:not(.login-page)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body:not(.login-page)::before {
  background:
    radial-gradient(circle at 75% -10%, rgba(122, 160, 91, 0.23), transparent 32rem),
    radial-gradient(circle at 15% 94%, rgba(80, 118, 73, 0.13), transparent 28rem);
}
body:not(.login-page)::after {
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(51, 75, 53, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 75, 53, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}
:root[data-theme="dark"] body:not(.login-page)::before {
  background:
    radial-gradient(circle at 76% -12%, rgba(159, 207, 78, 0.13), transparent 33rem),
    radial-gradient(circle at 10% 95%, rgba(70, 102, 62, 0.15), transparent 29rem);
}
:root[data-theme="dark"] body:not(.login-page)::after {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:not(.login-page)::before {
    background:
      radial-gradient(circle at 76% -12%, rgba(159, 207, 78, 0.13), transparent 33rem),
      radial-gradient(circle at 10% 95%, rgba(70, 102, 62, 0.15), transparent 29rem);
  }
  :root:not([data-theme="light"]) body:not(.login-page)::after {
    opacity: 0.18;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  }
}

#cc-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] #cc-particles { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #cc-particles { mix-blend-mode: screen; }
}

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

code {
  font-family: var(--mono);
  font-size: 12px;
}

/* ── App shell: icon dock + text sidebar + topbar + content ── */

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

.icon-dock {
  width: var(--dock-w);
  background: linear-gradient(180deg, var(--sb-bg-1) 0%, var(--sb-bg-2) 100%);
  backdrop-filter: blur(36px) saturate(135%);
  -webkit-backdrop-filter: blur(36px) saturate(135%);
  border-right: 1px solid var(--sb-border);
  box-shadow: inset -1px 0 0 var(--sb-sheen), var(--sb-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 0 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  flex-shrink: 0;
  z-index: 200;
  transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
@media (hover: hover) {
  .icon-dock:hover { width: var(--dock-w-open); }
}
.dock-brand {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--signal-ink);
  background: var(--signal);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.46) inset, 0 9px 24px -7px var(--accent-shadow);
  font-weight: 800;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.dock-item {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  color: var(--sb-text-dim);
  text-decoration: none;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}
.icon-dock:hover .dock-item { width: 196px; }
.dock-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.dock-item:hover { background: var(--surface3); color: var(--text); }
.dock-item.active {
  color: var(--signal-ink);
  background: linear-gradient(135deg, var(--signal) 0%, var(--accent-light) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) inset, 0 0 0 1px rgba(var(--accent-rgb), 0.27),
    0 6px 19px -4px var(--accent-shadow), 0 2px 30px -6px var(--accent-shadow);
}
.dock-item-label {
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
.icon-dock:hover .dock-item-label { opacity: 1; }

.side-nav {
  width: var(--sidebar-w);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--sb-border);
  padding: 20px 14px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: none;
}
@media (min-width: 1200px) {
  .side-nav { display: block; }
}
.side-nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--mono);
  color: var(--dim);
  padding: 0 10px;
  margin: 18px 0 8px;
}
.side-nav-label:first-child { margin-top: 4px; }
.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius);
  color: var(--text-mid);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.side-nav a:hover { background: var(--surface3); color: var(--text); }
.side-nav a .count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}

.main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: var(--topbar-h);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--sb-border);
  position: sticky;
  top: 0;
  z-index: 150;
}

header.topbar .brand {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.brand-accent { color: var(--accent-mid); }

header.topbar .who {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
}

.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.theme-toggle svg { width: 16px; height: 16px; }

main {
  max-width: 1240px;
  width: 100%;
  margin: 24px auto;
  padding: 0 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Cards ── */

.card, .stat-card, section.card {
  background: var(--glass-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] section.card {
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .stat-card,
  :root:not([data-theme="light"]) section.card {
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

section.card {
  padding: 20px;
  position: relative;
  overflow: hidden;
}
section.card h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.stat-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.stat-card {
  padding: 16px 18px;
  min-width: 130px;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease, border-color 300ms ease;
  position: relative;
  overflow: hidden;
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.33);
  box-shadow: 0 14px 42px rgba(var(--accent-rgb), 0.17), var(--shadow-md);
}
.stat-card.is-tilting,
[data-glass-tilt].is-tilting {
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow: 0 18px 48px rgba(var(--accent-rgb), 0.19), var(--shadow-md);
}
.stat-card .stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.stat-card .stat-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

/* ── Tables ── */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
tr:last-child td { border-bottom: none; }

/* ── Forms ── */

form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 14px; }
form.inline label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }

input, select, button {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent-mid);
  box-shadow: 0 0 0 3px var(--accent-pale);
}

button {
  background: linear-gradient(135deg, var(--accent-mid), var(--accent));
  color: var(--button-ink);
  border: none;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}
button:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.4); }
button:active { transform: translateY(0); }

button.secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border2);
  box-shadow: none;
}
button.secondary:hover { box-shadow: var(--shadow-sm); }

button.danger { background: linear-gradient(135deg, var(--red), #a91d1d); box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3); }

/* ── Badges / flash / misc ── */

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: var(--green-bg);
  color: var(--green-status);
}
.badge.muted { background: var(--surface3); color: var(--muted); }

.flash {
  padding: 11px 16px;
  border-radius: var(--radius);
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}
.flash.error { background: var(--red-bg); color: var(--red); }
.flash.success { background: var(--green-bg); color: var(--green-status); }

.empty { color: var(--dim); font-style: italic; font-size: 13px; }

/* ── Login ── */

.login-page { overflow: hidden; background: #0a0c0a; }
.login-page #cc-particles { display: none; }
.login-page .app-shell, .login-page .main-col, .login-page .login-wrap { min-height: 100vh; }
.login-wrap { position: relative; z-index: 1; }
.login-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 456px);
  overflow: hidden;
  color: #f4f6f0;
  background:
    radial-gradient(ellipse at 14% 0%, rgba(166, 216, 105, .20), transparent 38%),
    linear-gradient(135deg, #111511, #090b09);
}
.login-scene::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 10, 8, .83), rgba(8, 10, 9, .36) 52%, rgba(6, 8, 7, .62)),
    linear-gradient(180deg, rgba(8, 10, 9, .14), rgba(8, 10, 9, .50));
  content: "";
  pointer-events: none;
}
.login-scene::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .30;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, #000, transparent 68%);
  content: "";
  pointer-events: none;
}
.login-video {
  position: absolute;
  z-index: 0;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.08) brightness(.73);
  animation: login-drift 32s ease-in-out infinite alternate;
}
@keyframes login-drift {
  from { transform: scale(1); }
  to { transform: scale(1.055) translate3d(-.7%, -.45%, 0); }
}
.login-story {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px clamp(44px, 7vw, 114px) 42px;
}
.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f5f7f1;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.login-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #151810;
  background: #c8f477;
  box-shadow: 0 8px 24px rgba(200, 244, 119, .24);
  font-family: var(--mono);
  font-size: 18px;
}
.login-copy { max-width: 610px; padding-bottom: 18px; }
.login-kicker {
  margin: 0 0 12px;
  color: #c8f477;
  font: 800 11px/1.2 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.login-copy h1 {
  max-width: 590px;
  margin: 0;
  color: #f7f8f4;
  font-size: clamp(43px, 4.35vw, 69px);
  line-height: .98;
  letter-spacing: -.058em;
  text-shadow: 0 4px 26px rgba(0, 0, 0, .25);
}
.login-copy > p:last-child {
  max-width: 535px;
  margin: 22px 0 0;
  color: rgba(239, 244, 234, .76);
  font-size: 17px;
}
.login-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: rgba(235, 241, 229, .78);
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.login-assurances span { display: inline-flex; align-items: center; }
.login-assurances span::before {
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #c8f477;
  box-shadow: 0 0 12px rgba(200, 244, 119, .68);
  content: "";
}
.login-panel {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 44px 28px 0;
}
.login-card {
  position: relative;
  width: min(100%, 408px);
  overflow: hidden;
  padding: 31px;
  border: 1px solid rgba(255, 255, 255, .19);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(35, 39, 34, .70), rgba(12, 15, 12, .52));
  box-shadow: 0 26px 68px rgba(0, 0, 0, .39), inset 0 1px rgba(255, 255, 255, .10);
  backdrop-filter: blur(24px) saturate(128%);
  -webkit-backdrop-filter: blur(24px) saturate(128%);
}
.login-card::before {
  position: absolute;
  inset: 0;
  opacity: .7;
  background: linear-gradient(122deg, rgba(255, 255, 255, .11), transparent 30%, transparent 70%, rgba(200, 244, 119, .08));
  content: "";
  pointer-events: none;
}
.login-card > * { position: relative; z-index: 1; }
.login-card h2 {
  margin: 0;
  color: #f7f8f4;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.045em;
}
.login-intro { margin: 9px 0 29px; color: rgba(231, 239, 225, .67); }
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  color: rgba(245, 248, 240, .84);
  font-size: 13px;
  font-weight: 600;
}
.field-hint { color: rgba(229, 237, 222, .52); font-weight: 400; }
.login-card input {
  width: 100%;
  padding: 10px 11px;
  border-color: rgba(255, 255, 255, .13);
  color: #f6f8f1;
  background: rgba(3, 5, 3, .34);
}
.login-card input:focus {
  border-color: rgba(200, 244, 119, .72);
  box-shadow: 0 0 0 3px rgba(200, 244, 119, .13);
}
.login-card button {
  width: 100%;
  margin-top: 4px;
  padding: 11px;
  color: #151810;
  background: #c8f477;
  box-shadow: 0 11px 25px rgba(155, 202, 88, .20);
}
.login-card button:hover { box-shadow: 0 14px 30px rgba(155, 202, 88, .27); }
.login-card .flash {
  margin: 0 0 16px;
  border: 1px solid rgba(255, 156, 156, .36);
  color: #ffd3d3;
  background: rgba(116, 25, 36, .54);
}
.login-notice { margin: 15px 0 0; color: rgba(229, 237, 222, .52); font-size: 11px; line-height: 1.45; }

@media (max-width: 900px) {
  .login-scene { grid-template-columns: 1fr; }
  .login-story { min-height: 390px; padding: 38px 42px 24px; }
  .login-panel { padding: 0 42px 38px; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .login-video { display: none; }
}

/* Agent workbench */
.workbench-heading, .contact-rail, .section-title-row, .release-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.workbench-heading h1 { margin: 0; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.04em; line-height: 1.05; }
.eyebrow { margin: 0 0 5px; color: var(--accent-mid); font: 700 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.workbench-subtitle { color: var(--muted); margin: 10px 0 0; }
.shortcut-strip { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 11px; }
kbd { padding: 2px 6px; border: 1px solid var(--border2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font: 600 10px var(--mono); color: var(--text-mid); }
.agent-stats .stat-card { flex: 1; }
.work-card { overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: var(--radius-xl); background: var(--glass-bg); box-shadow: var(--shadow-lg); backdrop-filter: blur(var(--glass-blur)); }
.contact-rail { padding: 13px 20px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .1), transparent); border-bottom: 1px solid var(--border); }
.campaign-chip { font: 700 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.callback-badge { margin-left: 8px; background: var(--amber-bg); color: var(--amber); }
.lease-clock { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.lease-clock strong { min-width: 48px; color: var(--green-status); font: 700 13px var(--mono); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-status); box-shadow: 0 0 0 5px rgba(22, 163, 74, .12); }
.lease-warning .lease-clock strong { color: var(--amber); }
.lease-warning .pulse-dot { background: var(--amber); }
.lease-expired { opacity: .82; border-color: var(--red); }
.contact-stage { padding: 34px 30px 28px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(var(--accent-rgb), .1), transparent 55%); }
.contact-kicker { color: var(--muted); margin: 0; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.contact-stage h2 { margin: 7px 0 4px; font-size: 28px; }
.phone-number { display: inline-block; color: var(--accent-mid); font: 700 clamp(25px, 5vw, 40px)/1.2 var(--mono); letter-spacing: .03em; text-decoration: none; }
.phone-number:hover { text-decoration: underline; }
.contact-metadata { margin: 24px auto 0; max-width: 680px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; text-align: left; }
.contact-metadata div { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); }
.contact-metadata dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.contact-metadata dd { margin: 3px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.disposition-panel { padding: 24px 30px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.disposition-panel > label, .disposition-panel > select, .disposition-panel > .dnc-warning, .work-actions { grid-column: 1 / -1; }
.disposition-panel label, #skip-form label { display: block; margin-bottom: 6px; color: var(--text-mid); font-weight: 700; font-size: 12px; }
.disposition-panel label span { color: var(--muted); font-weight: 400; }
.disposition-panel select, .disposition-panel textarea, .disposition-panel input { width: 100%; }
textarea { font: inherit; padding: 9px 10px; border: 1px solid var(--border2); border-radius: var(--radius); background: var(--surface); color: var(--text); resize: vertical; }
textarea:focus { outline: none; border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--accent-pale); }
.dnc-warning { padding: 12px 14px; border: 1px solid rgba(220, 38, 38, .25); border-radius: var(--radius); background: var(--red-bg); color: var(--red); font-weight: 600; }
.work-actions button, .ready-card button { padding: 12px 18px; font-size: 14px; }
.work-actions button span, .ready-card button span { opacity: .72; margin-left: 15px; font: 600 10px var(--mono); }
.release-panel { padding: 16px 30px 22px; border-top: 1px solid var(--border); align-items: end; }
#skip-form { flex: 1; max-width: 520px; }
#skip-form > div { display: flex; gap: 8px; }
#skip-form input { flex: 1; }
.ready-card { padding: 54px 28px; text-align: center; position: relative; overflow: hidden; border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass-bg); box-shadow: var(--shadow-md); }
.ready-card h2 { margin: 5px 0; font-size: 28px; }
.ready-card > p:not(.eyebrow) { color: var(--muted); }
.ready-card form { margin-top: 22px; }
.ready-orbit { width: 62px; height: 62px; margin: 0 auto 18px; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(var(--accent-rgb), .05); }
.ready-orbit span { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-mid); box-shadow: 0 0 22px rgba(var(--accent-rgb), .65); }
.callbacks-card .section-title-row h2 { margin-bottom: 0; }
.privacy-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; }

@media (max-width: 760px) {
  .workbench-heading, .contact-rail, .release-panel { align-items: flex-start; flex-direction: column; }
  .disposition-panel { grid-template-columns: 1fr; padding: 20px; }
  .contact-stage { padding: 28px 20px; }
  .release-panel { padding: 16px 20px 20px; }
  #skip-form { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot { box-shadow: none; }
}

/* Campaign control room */
.ops-heading, .campaign-detail-head, .panel-heading, .review-drawer-head, .lifecycle-stack,
.readiness-strip, .campaign-tile-top, .campaign-tile-stats, .create-submit {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.campaign-control-hero {
  position: relative;
  overflow: hidden;
  margin: -24px -24px 2px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 17% 0%, rgba(170, 211, 116, 0.34), transparent 28rem),
    linear-gradient(110deg, rgba(237, 244, 231, 0.92), rgba(221, 232, 214, 0.76));
}
.campaign-control-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(47, 85, 45, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 85, 45, 0.09) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, #000, transparent 82%);
}
.campaign-control-hero .ops-heading {
  position: relative;
  max-width: 1240px;
  min-height: 186px;
  margin: 0 auto;
  padding: 42px 34px 32px;
}
.campaign-control-hero .eyebrow { color: var(--accent); }
.campaign-control-hero .button-link {
  color: var(--signal-ink);
  background: var(--signal);
  box-shadow: 0 10px 28px -10px var(--accent-shadow);
}
.campaign-control-hero .button-link:hover { color: var(--signal-ink); }
:root[data-theme="dark"] .campaign-control-hero {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 22% -23%, rgba(174, 224, 91, 0.26), transparent 31rem),
    radial-gradient(circle at 84% 100%, rgba(61, 80, 50, 0.38), transparent 32rem),
    linear-gradient(112deg, #171916, #0d0e0d 72%);
}
:root[data-theme="dark"] .campaign-control-hero::before {
  opacity: 0.30;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}
:root[data-theme="dark"] .campaign-control-hero .eyebrow { color: var(--accent-mid); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .campaign-control-hero {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background:
      radial-gradient(circle at 22% -23%, rgba(174, 224, 91, 0.26), transparent 31rem),
      radial-gradient(circle at 84% 100%, rgba(61, 80, 50, 0.38), transparent 32rem),
      linear-gradient(112deg, #171916, #0d0e0d 72%);
  }
  :root:not([data-theme="light"]) .campaign-control-hero::before {
    opacity: 0.30;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  }
  :root:not([data-theme="light"]) .campaign-control-hero .eyebrow { color: var(--accent-mid); }
}
.ops-heading { align-items: end; }
.ops-heading h1, .campaign-detail-head h1 { margin: 0; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; line-height: 1.02; }
.ops-heading p:not(.eyebrow), .campaign-detail-head > div > p:not(.eyebrow), .form-intro > p:not(.eyebrow) { color: var(--muted); margin: 10px 0 0; max-width: 680px; }
.button-link { display: inline-block; padding: 10px 14px; border-radius: var(--radius); background: var(--accent); color: var(--button-ink); font-weight: 700; text-decoration: none; box-shadow: 0 3px 10px var(--accent-shadow); white-space: nowrap; }
.button-link:hover { color: var(--button-ink); transform: translateY(-1px); }
.campaign-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.campaign-tile { min-height: 190px; padding: 19px; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--glass-bg); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.campaign-tile::before { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; top: -94px; right: -56px; background: radial-gradient(circle, rgba(var(--accent-rgb), .24), rgba(var(--accent-rgb), .025) 67%, transparent 68%); }
.campaign-tile::after { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--radius-lg) - 1px); border: 1px solid rgba(255, 255, 255, .13); pointer-events: none; }
.campaign-tile:hover { color: var(--text); transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .38); box-shadow: 0 17px 42px rgba(var(--accent-rgb), .15), var(--shadow-md); }
.campaign-tile h2 { font-size: 20px; margin: 25px 0 5px; letter-spacing: -.02em; }
.campaign-tile p { margin: 0; min-height: 40px; color: var(--muted); font-size: 13px; }
.campaign-tile-top { position: relative; z-index: 1; }
.campaign-arrow { color: var(--accent-mid); font-size: 18px; }
.campaign-tile-stats { margin-top: 18px; color: var(--muted); font-size: 11px; }
.campaign-tile-stats strong { color: var(--text); font: 800 17px var(--mono); }
.private-metric { display: block; margin-top: 20px; color: var(--muted); font-size: 11px; }
.status-chip { display: inline-block; padding: 4px 8px; border-radius: 999px; background: var(--surface3); color: var(--text-mid); font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.status-active { border-color: rgba(22, 163, 74, .25); }
.status-active .status-chip { background: var(--green-bg); color: var(--green-status); }
.status-draft .status-chip { background: var(--blue-bg); color: var(--blue); }
.status-paused .status-chip { background: var(--amber-bg); color: var(--amber); }
.status-archived .status-chip { background: var(--surface3); color: var(--muted); }
.ops-empty { grid-column: 1 / -1; padding: 44px; text-align: center; border: 1px dashed var(--border2); border-radius: var(--radius-lg); background: rgba(var(--accent-rgb), .025); }
.ops-empty h2 { margin: 8px 0 3px; font-size: 20px; }
.ops-empty p { margin: 0; color: var(--muted); }
.empty-mark { width: 36px; height: 36px; display: grid; place-items: center; margin: 0 auto; border: 1px solid var(--border2); border-radius: 50%; color: var(--accent-mid); font: 400 28px/1 var(--mono); }
.ops-form-card { display: grid; grid-template-columns: minmax(200px, .72fr) minmax(0, 1.28fr); gap: 36px; padding: 28px; border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass-bg); box-shadow: var(--shadow-md); }
.ops-form-card h2 { margin: 0; font-size: 24px; }
.campaign-create-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.campaign-create-form label, .import-form label, .disposition-form label, .assignment-form label, .decision-form label { display: flex; flex-direction: column; gap: 6px; color: var(--text-mid); font-size: 12px; font-weight: 700; }
.campaign-create-form label span, .import-form label span, .disposition-form label span, .decision-form label span { color: var(--muted); font-weight: 400; }
.campaign-create-form .wide { grid-column: 1 / -1; }
.create-submit { margin-top: 2px; }
.create-submit p { margin: 0; color: var(--muted); font-size: 11px; }
.back-link { display: inline-block; margin-bottom: 16px; color: var(--muted); font: 600 11px var(--mono); text-decoration: none; }
.back-link:hover { color: var(--accent-mid); }
.campaign-detail-head { align-items: end; }
.lifecycle-stack { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lifecycle-stack form { margin: 0; }
.quiet-danger { background: transparent; color: var(--red); box-shadow: none; border: 1px solid rgba(220, 38, 38, .25); }
.quiet-danger:hover { box-shadow: none; background: var(--red-bg); }
.readiness-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 0; flex-wrap: wrap; }
.readiness-strip div { min-width: 140px; display: flex; flex-direction: column; gap: 2px; }
.readiness-strip span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.readiness-strip strong { font-size: 13px; }
.ops-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .85fr); gap: 20px; align-items: start; }
.ops-panel { padding: 22px; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--glass-bg); box-shadow: var(--shadow-sm); }
.import-panel { grid-row: span 2; }
.panel-heading { align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.panel-heading h2 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.02em; }
.panel-note { color: var(--muted); font-size: 10px; text-align: right; max-width: 150px; }
.import-form, .disposition-form, .assignment-form { display: flex; flex-direction: column; gap: 13px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.file-field { padding: 12px; border: 1px dashed var(--border2); border-radius: var(--radius); background: var(--surface2); }
.file-field input { padding: 0; border: 0; background: transparent; }
.mapping-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.import-list { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; }
.import-list h3 { margin: 0 0 4px; font-size: 13px; }
.import-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px; border: 1px solid transparent; border-radius: var(--radius); color: var(--text); text-decoration: none; background: var(--surface2); }
.import-row:hover, .import-row.selected { color: var(--text); border-color: rgba(var(--accent-rgb), .22); background: var(--accent-pale); }
.import-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 12px; }
.import-row small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.review-drawer { margin-top: 18px; padding: 16px; border: 1px solid rgba(var(--accent-rgb), .16); border-radius: var(--radius); background: rgba(var(--accent-rgb), .035); }
.review-drawer h3 { margin: 2px 0 0; font-size: 16px; }
.invalid-summary, .valid-summary, .decision-note, .pending-note, .commit-form p { font-size: 12px; color: var(--text-mid); }
.invalid-list { margin: 10px 0; padding: 0; list-style: none; }
.invalid-list li { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--text-mid); font-size: 12px; }
.invalid-list span { color: var(--red); font: 700 10px var(--mono); }
.import-error { padding: 9px; border-radius: var(--radius); background: var(--red-bg); color: var(--red); font-size: 12px; }
.decision-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 10px; padding-top: 10px; }
.commit-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.commit-form p { margin: 0 0 9px; }
.disposition-list, .assignment-list { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.disposition-list > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.disposition-list > div:last-child, .assignment-list > div:last-child { border-bottom: 0; }
.disposition-list strong { font-size: 12px; }.disposition-list code { color: var(--accent-mid); font-size: 10px; }.disposition-list span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.checks label { display: block; color: var(--text-mid); font-weight: 500; }.checks input { margin-right: 5px; }.checks small { color: var(--muted); }
.assignment-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }.assignment-list strong, .assignment-list span { display: block; }.assignment-list strong { font-size: 12px; }.assignment-list > div > div > span { color: var(--muted); font-size: 10px; }
.permission-note { color: var(--muted); font-size: 12px; padding: 16px 0; }

@media (max-width: 900px) {
  .ops-form-card, .ops-grid { grid-template-columns: 1fr; }.import-panel { grid-row: auto; }.campaign-detail-head, .ops-heading { align-items: flex-start; flex-direction: column; }.lifecycle-stack { justify-content: flex-start; }.panel-note { text-align: left; max-width: none; }.decision-form { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .campaign-create-form, .mapping-grid, .checks { grid-template-columns: 1fr; }.create-submit { align-items: stretch; flex-direction: column; }.readiness-strip { gap: 10px; }.ops-panel, .ops-form-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-card, .campaign-tile { transition: none; }
  .stat-card:hover, .campaign-tile:hover { transform: none; }
}