/* Document360 Design System (DDS) — colors & type tokens
 * Source: projects/d360-design-system/styles/_colors.scss + root-color.scss
 * Prefix: --dds-*
 */

/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* FontAwesome @font-face stripped — unused (icons are inline SVG) */

:root {
  /* ---------- Type ---------- */
  --dds-font-family: "Inter", sans-serif;
  --dds-font-family-display: "Titillium Web", "Inter", sans-serif;

  --dds-font-xxsmall: 0.625rem;  /* 10 */
  --dds-font-xsmall:  0.75rem;   /* 12 */
  --dds-font-small:   0.8125rem; /* 13 */
  --dds-font-base:    0.875rem;  /* 14 */
  --dds-font-medium:  1rem;      /* 16 */
  --dds-font-large:   1.125rem;  /* 18 */
  --dds-font-xlarge:  1.25rem;   /* 20 */

  --dds-lh-xxsmall: 0.75rem;
  --dds-lh-xsmall:  1.125rem;
  --dds-lh-small:   1.25rem;
  --dds-lh-base:    1.375rem;
  --dds-lh-medium:  1.5rem;
  --dds-lh-large:   1.75rem;
  --dds-lh-xlarge:  2rem;

  --dds-fw-light: 300;
  --dds-fw-normal: 400;
  --dds-fw-medium: 500;
  --dds-fw-semibold: 600;
  --dds-fw-bold: 700;

  /* ---------- Neutral surface ---------- */
  --dds-surface-white: #ffffff;
  --dds-surface-neutral-50:  #fafafa;
  --dds-surface-neutral-100: #f4f4f5;
  --dds-surface-neutral-200: #e4e4e7;
  --dds-surface-neutral-300: #d1d1d6;
  --dds-surface-neutral-400: #a0a0aa;
  --dds-surface-neutral-500: #70707a;
  --dds-surface-neutral-600: #51525c;
  --dds-surface-neutral-700: #3e3e46;
  --dds-surface-neutral-800: #26272b;
  --dds-surface-neutral-900: #18181b;
  --dds-surface-neutral-950: #09090b;

  /* ---------- Primary (brand purple) ---------- */
  --dds-surface-primary-50:  #f2eefb;
  --dds-surface-primary-100: #e5ddf7;
  --dds-surface-primary-200: #ccbbf0;
  --dds-surface-primary-300: #b29ae8;
  --dds-surface-primary-400: #9978e1;
  --dds-surface-primary-500: #7f56d9;
  --dds-surface-primary-600: #6645ae;
  --dds-surface-primary-700: #4c3482;
  --dds-surface-primary-800: #332257;
  --dds-surface-primary-900: #19112b;

  /* ---------- Semantic hues ---------- */
  --dds-surface-red-100: #ffebe6; --dds-surface-red-200: #ffbdad;
  --dds-surface-red-300: #ff8f73; --dds-surface-red-400: #ff7452;
  --dds-surface-red-500: #ff5630; --dds-surface-red-600: #de350b;
  --dds-surface-red-700: #bf2600; --dds-surface-red-800: #991b1b;
  --dds-surface-red-900: #450a0a;

  --dds-surface-green-100: #dcfce7; --dds-surface-green-200: #bbf7d0;
  --dds-surface-green-300: #86efac; --dds-surface-green-400: #4ade80;
  --dds-surface-green-500: #22c55e; --dds-surface-green-600: #16a34a;
  --dds-surface-green-700: #15803d; --dds-surface-green-800: #166534;
  --dds-surface-green-900: #052e16;

  --dds-surface-yellow-100: #fffae6; --dds-surface-yellow-200: #fff0b3;
  --dds-surface-yellow-300: #ffe380; --dds-surface-yellow-400: #ffc400;
  --dds-surface-yellow-500: #ffab00; --dds-surface-yellow-600: #ff991f;
  --dds-surface-yellow-700: #ff8b00; --dds-surface-yellow-800: #92400e;
  --dds-surface-yellow-900: #451a03;

  --dds-surface-orange-100: #ffedd5; --dds-surface-orange-200: #fed7aa;
  --dds-surface-orange-300: #fdba74; --dds-surface-orange-400: #fb923c;
  --dds-surface-orange-500: #f97316; --dds-surface-orange-600: #ea580c;
  --dds-surface-orange-700: #c2410c; --dds-surface-orange-800: #9a3412;
  --dds-surface-orange-900: #431407;

  --dds-surface-blue-100: #deebff; --dds-surface-blue-200: #b3d4ff;
  --dds-surface-blue-300: #4c9aff; --dds-surface-blue-400: #2684ff;
  --dds-surface-blue-500: #0065ff; --dds-surface-blue-600: #0052cc;
  --dds-surface-blue-700: #0747a6; --dds-surface-blue-800: #1e3a8a;
  --dds-surface-blue-900: #172554;

  --dds-surface-teal-100: #ccfbf1; --dds-surface-teal-200: #99f6e4;
  --dds-surface-teal-300: #5eead4; --dds-surface-teal-400: #2dd4bf;
  --dds-surface-teal-500: #14b8a6; --dds-surface-teal-600: #0d9488;
  --dds-surface-teal-700: #0f766e; --dds-surface-teal-800: #115e59;
  --dds-surface-teal-900: #042f2e;

  --dds-surface-cyan-100: #e6fcff; --dds-surface-cyan-200: #b3f5ff;
  --dds-surface-cyan-300: #79e2f2; --dds-surface-cyan-400: #00c7e6;
  --dds-surface-cyan-500: #00b8d9; --dds-surface-cyan-600: #00a3bf;
  --dds-surface-cyan-700: #008da6; --dds-surface-cyan-800: #155e75;
  --dds-surface-cyan-900: #083344;

  --dds-surface-pink-100: #fce7f3; --dds-surface-pink-200: #fbcfe8;
  --dds-surface-pink-300: #f9a8d4; --dds-surface-pink-400: #f472b6;
  --dds-surface-pink-500: #ec4899; --dds-surface-pink-600: #db2777;
  --dds-surface-pink-700: #be185d; --dds-surface-pink-800: #9d174d;
  --dds-surface-pink-900: #500724;

  --dds-surface-fuchsia-100: #fae8ff; --dds-surface-fuchsia-500: #d946ef;
  --dds-surface-fuchsia-700: #a21caf;

  /* ---------- Semantic tokens ---------- */
  --dds-text-base: var(--dds-surface-neutral-900);
  --dds-text-secondary: var(--dds-surface-neutral-500);
  --dds-text-white: var(--dds-surface-white);
  --dds-text-placeholder-white-bg: var(--dds-surface-neutral-300);
  --dds-text-primary: var(--dds-surface-primary-500);
  --dds-text-primary-dark: var(--dds-surface-primary-600);
  --dds-text-link: var(--dds-surface-blue-600);
  --dds-text-green: var(--dds-surface-green-700);
  --dds-text-red: var(--dds-surface-red-700);
  --dds-text-yellow: var(--dds-surface-yellow-800);

  --dds-icon-base: var(--dds-surface-neutral-700);
  --dds-icon-secondary: var(--dds-surface-neutral-500);
  --dds-icon-primary: var(--dds-surface-primary-500);

  --dds-border-neutral-100: var(--dds-surface-neutral-100);
  --dds-border-neutral-200: var(--dds-surface-neutral-200);
  --dds-border-neutral-300: var(--dds-surface-neutral-300);
  --dds-border-primary: var(--dds-surface-primary-500);
  --dds-border-primary-300: var(--dds-surface-primary-300);

  /* ---------- Radius ---------- */
  --dds-border-radius: 0.5rem;
  --dds-border-radius-sm: 0.5rem;
  --dds-border-radius-lg: 0.5rem;
  --dds-border-radius-pill: 9999px;

  /* ---------- Shadows ---------- */
  --dds-shadow-xs: 0px 1px 2px 0px rgba(16,24,40,0.05);
  --dds-shadow-sm: 0px 1px 3px 0px rgba(16,24,40,0.10), 0px 1px 2px 0px rgba(16,24,40,0.06);
  --dds-shadow-md: 0px 4px 8px -2px rgba(16,24,40,0.10), 0px 2px 4px -2px rgba(16,24,40,0.06);
  --dds-shadow-lg: 0px 12px 16px -4px rgba(16,24,40,0.08), 0px 4px 6px -2px rgba(16,24,40,0.03);
  --dds-shadow-xl: 0px 20px 24px -4px rgba(16,24,40,0.08), 0px 8px 8px -4px rgba(16,24,40,0.03);
  --dds-shadow-2xl: 0px 24px 48px -12px rgba(16,24,40,0.18);
  --dds-shadow-3xl: 0px 32px 64px -12px rgba(16,24,40,0.14);

  /* ---------- Spacing scale (rem) ---------- */
  --dds-space-0: 0; --dds-space-1: 0.25rem; --dds-space-2: 0.5rem;
  --dds-space-3: 0.75rem; --dds-space-4: 1rem; --dds-space-5: 1.25rem;
  --dds-space-6: 1.5rem; --dds-space-7: 2rem; --dds-space-8: 2.5rem;
  --dds-space-9: 3rem; --dds-space-10: 4rem;

  /* AI gradient (from button "ai" variant) */
  --dds-gradient-ai: linear-gradient(265.94deg,#ffbc04 4.51%,#fb5856 39.43%,#f34eb5 69.06%,#6d71ff 90.58%);
}

/* Semantic classes */
html, body { font-family: var(--dds-font-family); color: var(--dds-text-base); background: var(--dds-surface-white); }

.dds-display   { font-family: var(--dds-font-family-display); font-weight: 700; font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.01em; }
.dds-h1        { font-size: var(--dds-font-xlarge);  line-height: var(--dds-lh-xlarge);  font-weight: 700; }
.dds-h2        { font-size: var(--dds-font-large);   line-height: var(--dds-lh-large);   font-weight: 600; }
.dds-h3        { font-size: var(--dds-font-medium);  line-height: var(--dds-lh-medium);  font-weight: 600; }
.dds-body      { font-size: var(--dds-font-base);    line-height: var(--dds-lh-base);    font-weight: 400; }
.dds-body-sm   { font-size: var(--dds-font-small);   line-height: var(--dds-lh-small);   font-weight: 400; }
.dds-caption   { font-size: var(--dds-font-xsmall);  line-height: var(--dds-lh-xsmall);  font-weight: 400; color: var(--dds-text-secondary); }
.dds-mono      { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--dds-font-small); }

/* Security360 — DAST TestPlan redesign
 * Built on Document360 Design System tokens
 * Identity color: Security360 indigo-blue (kept from original UI)
 */

:root {
  /* Security360 brand blue (replaces purple primary) */
  --s360: #3852f0;
  --s360-hover: #2c43d4;
  --s360-50: #eef1ff;
  --s360-100: #dee4ff;
  --s360-200: #c0caff;
  --s360-300: #94a3ff;
  --s360-600: #2c43d4;
  --s360-700: #243aae;

  --bg-app: #f7f8fb;
  --bg-card: #ffffff;
  --bg-hover: #fcfcfd;
  --bg-inset: #f7f8fb;
  --border-soft: #ebecf0;
  --border: #e4e4e7;

  --text: var(--dds-surface-neutral-900);
  --text-2: var(--dds-surface-neutral-700);
  --text-3: var(--dds-surface-neutral-500);
  --text-4: var(--dds-surface-neutral-400);

  /* danger-tint surfaces (theme-aware) */
  --danger-text: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;

  /* shadow scales (deepened in dark) */
  --shadow-card: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-pop: 0 16px 40px -10px rgba(16,24,40,0.22);
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--dds-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
input, textarea { font-family: inherit; }

/* ---------- App shell ---------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  height: 56px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 40px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  font-family: var(--dds-font-family-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--s360);
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand sup {
  font-size: 11px;
  font-weight: 600;
  color: var(--s360);
  vertical-align: super;
  margin-left: 1px;
}
.nav { display: flex; gap: 4px; }
.nav-item {
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--bg-app); color: var(--text); }
.nav-item.active {
  background: var(--s360-50);
  color: var(--s360);
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-3);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-app); color: var(--text); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--s360);
  color: #fff; font-weight: 600; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
}

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
}

.sidebar {
  background: var(--bg-card);
  border-right: 1px solid var(--border-soft);
  padding: 24px 16px 32px;
  overflow: auto;
}
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 12px;
}
.sidebar-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sidebar-search {
  position: relative;
  margin: 0 4px 14px;
}
.sidebar-search input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-app);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color .15s, background .15s;
}
.sidebar-search input::placeholder { color: var(--text-4); }
.sidebar-search input:focus {
  background: var(--bg-card);
  border-color: var(--s360-300);
  box-shadow: 0 0 0 3px var(--s360-50);
}
.sidebar-search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-4);
}

/* Tree */
.tree { list-style: none; padding: 0; margin: 0; }
.tree-node {
  display: flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  color: var(--text);
  font-size: 13.5px;
  position: relative;
  transition: background .12s;
}
.tree-node:hover { background: var(--bg-app); }
.tree-node.active {
  background: var(--s360-50);
  color: var(--s360);
  font-weight: 500;
}
.tree-node.active .tree-icon { color: var(--s360); }
.tree-node .chev {
  width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); flex: 0 0 14px;
  transition: transform .15s;
}
.tree-node .chev.placeholder { visibility: hidden; }
.tree-node .chev.open { transform: rotate(90deg); }
.tree-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-3); display: inline-flex; }
.tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-meta { font-size: 11px; color: var(--text-3); flex: 0 0 auto; }
.tree-children { list-style: none; padding: 0; margin: 2px 0 6px 14px; border-left: 1px solid var(--border-soft); }
.tree-children .tree-node { padding-left: 14px; }
.tree-children .tree-node .tree-icon { color: var(--text-3); }
.tree-children .tree-node.active .tree-icon { color: var(--s360); }

.dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; flex: 0 0 6px;
}
.dot.draft { background: #f59e0b; }
.dot.findings { background: #ef4444; }
.dot.clean { background: #22c55e; }

.tree-add {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-3);
  font-size: 13px;
  margin-top: 6px;
}
.tree-add:hover { background: var(--bg-app); color: var(--s360); }

/* ---------- Main content ---------- */
.main {
  padding: 40px 56px 80px;
  overflow: auto;
  max-width: 1180px;
  width: 100%;
}

.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 10px;
}
.breadcrumb a { color: var(--s360); text-decoration: none; font-weight: 500; cursor: pointer; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--text-4); }

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.page-title {
  font-family: var(--dds-font-family-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.page-title .star {
  color: var(--text-4); cursor: pointer;
  display: inline-flex; transition: color .15s;
}
.page-title .star:hover { color: #f59e0b; }
.page-title .star.on { color: #f59e0b; }
.page-title .doc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--s360);
}
.page-sub {
  color: var(--text-3);
  font-size: 14px;
  margin: 6px 0 0;
}
.page-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px;
  border-radius: 8px; border: 1px solid transparent;
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn.sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn-primary {
  background: var(--s360); color: #fff;
}
.btn-primary:hover { background: var(--s360-hover); }
.btn-secondary {
  background: var(--bg-card); color: var(--text); border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-app); }
.btn-ghost {
  background: transparent; color: var(--text-2);
}
.btn-ghost:hover { background: var(--bg-app); color: var(--text); }
.btn-danger-outline {
  background: var(--bg-card); color: var(--danger-text); border-color: var(--danger-border);
}
.btn-danger-outline:hover { background: var(--danger-bg); border-color: var(--danger-text); }

/* ---------- Tables ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}
.table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-card);
}
.table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; cursor: pointer; }
.table tbody tr:hover { background: var(--bg-app); }
.table tbody tr.no-hover { cursor: default; }
.table tbody tr.no-hover:hover { background: transparent; }
.table .col-shrink { width: 1%; white-space: nowrap; }
.table .col-num { width: 1%; text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; padding-right: 14px; }
.table .muted { color: var(--text-3); }

/* Checkbox */
.checkbox {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .12s;
  flex: 0 0 16px;
}
.checkbox.checked {
  background: var(--s360); border-color: var(--s360);
}
.checkbox.checked svg { color: #fff; }
.checkbox:hover { border-color: var(--s360-300); }

/* Tags / Pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
  padding: 2px 10px;
  border-radius: 9999px;
  line-height: 18px;
}
.pill.green { background: #ecfdf5; color: #047857; }
.pill.red { background: #fef2f2; color: #b91c1c; }
.pill.yellow { background: #fffbeb; color: #b45309; }
.pill.blue { background: var(--s360-50); color: var(--s360-700); }
.pill.neutral { background: var(--bg-app); color: var(--text-2); }
.pill .dot { width: 6px; height: 6px; }

/* Icon helpers */
.i { width: 16px; height: 16px; display: inline-flex; flex: 0 0 auto; }
.i-sm { width: 14px; height: 14px; }
.i-lg { width: 20px; height: 20px; }

/* ---------- Empty states ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 24px;
  text-align: center;
}
.empty-illo {
  width: 96px; height: 96px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: var(--text-4);
}
.empty h2 {
  font-family: var(--dds-font-family-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.empty p {
  font-size: 14px;
  color: var(--text-3);
  margin: 0 0 24px;
  max-width: 440px;
  line-height: 1.55;
}
.empty .btn { margin-top: 4px; }
.empty.in-table { padding: 64px 24px; }

/* Inline empty hint for sidebar */
.tree-empty {
  font-size: 12.5px;
  color: var(--text-4);
  padding: 6px 8px 6px 28px;
  font-style: italic;
}

/* ---------- Module detail ---------- */
.detail-section {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}
.detail-section .sec-head {
  padding: 18px 24px 6px;
}
.detail-section .sec-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.detail-section .sec-sub {
  font-size: 13px;
  color: var(--text-3);
  margin: 4px 0 0;
}
.detail-section .sec-body {
  padding: 16px 24px 24px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 16px; }
.field label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}
.field label .opt {
  color: var(--text-4); font-weight: 400; margin-left: 4px;
}
.input, .textarea {
  width: 100%;
  font-size: 13.5px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus {
  border-color: var(--s360-300);
  box-shadow: 0 0 0 3px var(--s360-50);
}
.textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--text-4); }

.metaline {
  display: flex; align-items: center; gap: 18px;
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--bg-app);
  border-radius: 10px;
  font-size: 13px;
}
.metaline .item { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.metaline .item b { color: var(--text); font-weight: 600; }
.metaline .sep { color: var(--border); }

/* Test case rows */
.tc-list { display: flex; flex-direction: column; }
.tc-row {
  display: grid;
  grid-template-columns: 36px 220px 1fr 140px 24px;
  gap: 16px;
  padding: 18px 24px;
  border-top: 1px solid var(--border-soft);
  align-items: flex-start;
}
.tc-row:first-child { border-top: 0; }
.tc-row.head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 24px;
  background: var(--bg-app);
  align-items: center;
}
.tc-num {
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  font-size: 13px;
  padding-top: 8px;
}
.tc-title input {
  border: 0;
  background: transparent;
  padding: 6px 8px;
  margin-left: -8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border-radius: 6px;
  width: 100%;
}
.tc-title input:hover { background: var(--bg-app); }
.tc-title input:focus {
  background: var(--bg-card);
  box-shadow: 0 0 0 1.5px var(--s360-300);
  outline: none;
}
.tc-obs {
  display: flex; flex-direction: column; gap: 8px;
}
.tc-obs .editor {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  margin-left: -10px;
  min-height: 32px;
  font-size: 13.5px;
  color: var(--text);
  cursor: text;
  transition: background .12s, border-color .12s;
}
.tc-obs .editor.placeholder { color: var(--text-4); font-style: italic; }
.tc-obs .editor:hover { background: var(--bg-app); }
.tc-obs .editor:focus {
  background: var(--bg-card);
  border-color: var(--s360-300);
  box-shadow: 0 0 0 3px var(--s360-50);
  outline: none;
}
.tc-obs .url {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: var(--text-3);
  padding: 0 0 0 0;
}
.tc-obs .url input {
  border: 0;
  background: transparent;
  padding: 4px 6px;
  margin-left: -6px;
  font-size: 12.5px;
  color: var(--s360);
  border-radius: 6px;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.tc-obs .url input::placeholder { color: var(--text-4); font-family: var(--dds-font-family); font-style: italic; }
.tc-obs .url input:hover { background: var(--bg-app); }
.tc-obs .url input:focus { background: var(--bg-card); box-shadow: 0 0 0 1.5px var(--s360-300); outline: none; }
.tc-status {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 6px;
}
.tc-vuln {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 9999px;
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: all .12s;
  width: max-content;
}
.tc-vuln:hover { border-color: var(--s360-300); }
.tc-vuln.on {
  background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text);
}
.tc-vuln.on .checkbox { background: #dc2626; border-color: #dc2626; }
.tc-remove {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--text-4);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .12s;
  margin-top: 4px;
}
.tc-remove:hover { background: var(--danger-bg); color: var(--danger-text); }

.tc-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px;
  background: transparent;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  color: var(--text-3);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  margin: 16px 24px 20px;
  transition: all .15s;
}
.tc-add:hover {
  border-color: var(--s360-300);
  background: var(--s360-50);
  color: var(--s360);
}

/* ---------- Save bar ---------- */
.savebar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 18px;
  background: #1a1d2e;
  color: rgba(255,255,255,0.85);
  border-radius: 14px;
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, 0.32), 0 4px 12px -4px rgba(16, 24, 40, 0.18);
  font-size: 13px;
  max-width: 760px;
  animation: savebar-in .25s ease;
}
@keyframes savebar-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.savebar .dot-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 0 rgba(251,191,36,0.5);
  animation: pulse 1.6s ease-in-out infinite;
  flex: 0 0 8px;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
}
.savebar .label { flex: 1; }
.savebar .btn {
  height: 32px; padding: 0 14px; font-size: 13px;
}
.savebar .btn-ghost-dark { background: transparent; color: rgba(255,255,255,0.85); border: 0; }
.savebar .btn-ghost-dark:hover { background: rgba(255,255,255,0.08); color: #fff; }
.savebar .btn-primary { background: var(--s360); }
.savebar .btn-primary:hover { background: var(--s360-hover); }
.savebar .btn-outline-light {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.savebar .btn-outline-light:hover { background: rgba(255,255,255,0.08); }

/* ---------- Misc ---------- */
.footer {
  border-top: 1px solid var(--border-soft);
  padding: 22px 28px;
  text-align: center;
  font-size: 12px;
  color: var(--text-4);
  background: var(--bg-card);
}

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-card);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Star button */
.star-btn {
  background: transparent; border: 0; padding: 0;
  color: var(--text-4); cursor: pointer;
  display: inline-flex; align-items: center;
  transition: color .15s, transform .15s;
}
.star-btn:hover { color: #f59e0b; transform: scale(1.05); }
.star-btn.on { color: #f59e0b; }
.star-btn.on svg { fill: currentColor; }

/* Subtle progress strip on cycle rows */
.progress {
  height: 4px;
  background: var(--bg-app);
  border-radius: 4px;
  overflow: hidden;
  width: 84px;
}
.progress .bar {
  height: 100%;
  background: var(--s360);
  border-radius: 4px;
  transition: width .3s;
}
.progress .bar.warn { background: #f59e0b; }
.progress .bar.danger { background: #ef4444; }
.progress .bar.ok { background: #22c55e; }

/* Hover row link styling */
.link {
  color: var(--s360);
  text-decoration: none;
  cursor: pointer;
}
.link:hover { text-decoration: underline; }

/* Tooltip indicator */
.help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--border);
  color: #fff; font-size: 9px; font-weight: 700;
  margin-left: 4px;
}

/* Floating create button (overview header) */
.btn-icon-leading svg { margin-right: -2px; }

/* Modal */
.modal-bg {
  position: fixed; inset: 0; background: rgba(15, 18, 30, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  animation: fade-in .15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 420px;
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(16, 24, 40, 0.28);
  padding: 24px;
  animation: modal-in .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.modal h3 {
  font-family: var(--dds-font-family-display);
  font-size: 18px; font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.modal p { color: var(--text-3); margin: 0 0 16px; font-size: 13.5px; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* responsive shrink */
@media (max-width: 1024px) {
  .layout { grid-template-columns: 240px 1fr; }
  .main { padding: 32px 32px 80px; }
}

/* Security360 — Findings / Scan-snapshot pages
 * Built on Document360 Design System tokens + Security360 app.css
 */

:root {
  /* Severity ramp */
  --sev-critical: #b42318;
  --sev-critical-bg: #fef3f2;
  --sev-critical-soft: #fee4e2;
  --sev-high: #f04438;
  --sev-high-bg: #fef3f2;
  --sev-high-soft: #fee4e2;
  --sev-medium: #dc6803;
  --sev-medium-bg: #fffaeb;
  --sev-medium-soft: #fef0c7;
  --sev-low: #099250;
  --sev-low-bg: #edfcf2;
  --sev-low-soft: #d3f8df;
  --sev-info: #475467;
  --sev-info-bg: #f2f4f7;
  --sev-info-soft: #e4e7ec;

  --page-bg: #eef1f7;
}

/* page chrome ------------------------------------------------------------ */
body.s360 { background: var(--page-bg); }

.page-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 40px 56px;
}

/* breadcrumb-ish back link */
.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--s360);
  text-decoration: none;
  margin-bottom: 14px;
}
.backlink:hover { text-decoration: underline; }
.backlink .sep { color: var(--text-4); font-weight: 400; }
.backlink .crumb-dim { color: var(--text-3); font-weight: 500; }

/* project header --------------------------------------------------------- */
.proj-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 26px;
}
.proj-title {
  font-family: var(--dds-font-family-display);
  font-size: 34px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text); margin: 0;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.proj-id {
  margin: 10px 0 0; font-size: 13px; color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.proj-id b { color: var(--text-2); font-weight: 600; }
.proj-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 9999px;
}
.status-chip.completed { background: var(--sev-low-bg); color: var(--sev-low); }
.status-chip .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}

/* archival ribbon on snapshot page */
.archival-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; margin-bottom: 26px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--s360);
  border-radius: 10px;
  font-size: 13px; color: var(--text-2);
}
.archival-bar .lock {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--text);
}
.archival-bar .meta { display: inline-flex; align-items: center; gap: 7px; }
.archival-bar b { color: var(--text); font-weight: 600; }
.archival-bar .vsep { width: 1px; height: 16px; background: var(--border); }

/* kebab menu ------------------------------------------------------------- */
.kebab { position: relative; }
.kebab-btn {
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.kebab-btn:hover { background: var(--bg-app); }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 232px; background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 16px 40px -10px rgba(16,24,40,0.22);
  padding: 6px; z-index: 60;
}
.menu-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 8px;
  font-size: 13.5px; color: var(--text); cursor: pointer;
}
.menu-item:hover { background: var(--bg-app); }
.menu-item .ico { color: var(--text-3); display: inline-flex; }
.menu-item .tail { margin-left: auto; font-size: 11.5px; color: var(--text-4); }
.menu-item.danger { color: var(--sev-critical); }
.menu-item.danger .ico { color: var(--sev-critical); }
.menu-sep { height: 1px; background: var(--border-soft); margin: 5px 4px; }

/* severity summary ------------------------------------------------------- */
.summary {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 16px; padding: 24px 26px; margin-bottom: 30px;
  display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center;
}
.summary-total { text-align: left; }
.summary-total .big {
  font-family: var(--dds-font-family-display);
  font-size: 56px; font-weight: 700; line-height: 1; color: var(--text);
  letter-spacing: -0.03em;
}
.summary-total .lbl {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); margin-top: 8px;
}
.summary-total .delta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 14px;
  font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 9999px;
}
.summary-total .delta.up { background: var(--sev-critical-bg); color: var(--sev-critical); }
.summary-total .delta.down { background: var(--sev-low-bg); color: var(--sev-low); }
.summary-total .delta.flat { background: var(--bg-app); color: var(--text-3); }

.summary-right { min-width: 0; }
.sev-bar {
  display: flex; height: 14px; border-radius: 8px; overflow: hidden;
  background: var(--bg-app); gap: 2px;
}
.sev-bar .seg { height: 100%; min-width: 4px; transition: flex .3s; }
.sev-legend {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px;
}
.sev-legend .cell {
  border: 1px solid var(--border-soft); border-radius: 11px; padding: 12px 14px;
  cursor: default; transition: border-color .15s, background .15s;
}
.sev-legend .cell .top { display: flex; align-items: center; gap: 7px; }
.sev-legend .cell .swatch { width: 9px; height: 9px; border-radius: 3px; }
.sev-legend .cell .name {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-3);
}
.sev-legend .cell .count {
  font-family: var(--dds-font-family-display);
  font-size: 26px; font-weight: 700; color: var(--text); margin-top: 6px; line-height: 1;
}

/* section heading -------------------------------------------------------- */
.section { margin-bottom: 34px; }
.section-head {
  display: flex; align-items: center; gap: 13px; margin-bottom: 16px;
}
.section-head .accent { width: 4px; height: 24px; border-radius: 3px; background: var(--s360); }
.section-head h2 {
  font-family: var(--dds-font-family-display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin: 0;
}
.section-head .count {
  font-size: 13px; color: var(--text-3); font-weight: 500; margin-left: 2px;
}

/* findings toolbar ------------------------------------------------------- */
.findings-toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.search-box {
  position: relative; flex: 1; min-width: 220px;
}
.search-box svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-4);
}
.search-box input {
  width: 100%; height: 40px; padding: 0 12px 0 38px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card);
  font-size: 14px; color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search-box input::placeholder { color: var(--text-4); }
.search-box input:focus { border-color: var(--s360-300); box-shadow: 0 0 0 3px var(--s360-50); }

.sev-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.sev-filter {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 13px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-card);
  font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer;
  transition: all .12s;
}
.sev-filter:hover { background: var(--bg-app); }
.sev-filter .swatch { width: 8px; height: 8px; border-radius: 3px; }
.sev-filter .n {
  font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums;
  background: var(--bg-app); padding: 1px 7px; border-radius: 9999px;
}
.sev-filter.active { color: #fff; border-color: transparent; }
.sev-filter.active .n { background: rgba(255,255,255,0.22); color: #fff; }
.sev-filter.active .swatch { background: #fff !important; }

.select {
  height: 40px; padding: 0 34px 0 13px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-card);
  font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer;
  appearance: none; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.select:focus { border-color: var(--s360-300); box-shadow: 0 0 0 3px var(--s360-50); }

/* severity group --------------------------------------------------------- */
.sev-group {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 14px; overflow: hidden; margin-bottom: 16px;
  border-left: 4px solid var(--grp-color, var(--border));
}
.sev-group-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer; user-select: none;
}
.sev-group-head:hover { background: var(--bg-hover); }
.sev-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 7px;
}
.sev-group-head .grp-label { font-size: 15px; font-weight: 600; color: var(--text); }
.sev-group-head .grp-count { color: var(--text-3); font-weight: 500; }
.sev-group-head .chev {
  margin-left: auto; color: var(--text-3); transition: transform .2s;
}
.sev-group-head .chev.open { transform: rotate(180deg); }

.sev-group-body { border-top: 1px solid var(--border-soft); }

/* finding ---------------------------------------------------------------- */
.finding {
  display: grid; grid-template-columns: 300px 1fr;
  border-top: 1px solid var(--border-soft);
}
.sev-group-body > .finding:first-child { border-top: 0; }
.finding-left {
  padding: 22px 22px 22px 0; padding-left: 22px;
  border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 12px;
}
.finding-title {
  font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4;
  text-wrap: pretty;
}
.finding-meta { display: flex; flex-direction: column; gap: 9px; }
.asset-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--s360); text-decoration: none; word-break: break-all;
}
.asset-link:hover { text-decoration: underline; }
.tool-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px;
  background: var(--s360-50); color: var(--s360-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.finding-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cwe-tag {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  padding: 3px 8px; border-radius: 6px; background: var(--bg-app);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.finding-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.act-btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  height: 32px; padding: 0 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: all .12s; width: max-content;
}
.act-verify { background: var(--sev-medium-bg); color: var(--sev-medium); border-color: var(--sev-medium-soft); }
.act-verify:hover { background: var(--sev-medium-soft); }
.act-details { background: var(--bg-card); color: var(--text-2); border-color: var(--border); }
.act-details:hover { background: var(--bg-app); }

.finding-right { padding: 22px 24px; min-width: 0; }
.fr-block + .fr-block { margin-top: 18px; }
.fr-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.fr-text { font-size: 14px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.fr-evidence {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--text-2);
  background: var(--bg-app); border: 1px solid var(--border-soft);
  border-radius: 9px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word;
}
.fr-fix {
  font-size: 14px; line-height: 1.6; color: #05603a;
  background: var(--sev-low-bg); border-left: 3px solid var(--sev-low);
  border-radius: 0 9px 9px 0; padding: 13px 16px;
}

/* technology profile ----------------------------------------------------- */
.panel {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 20px 22px;
}
.tech-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.tech-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-card);
  font-size: 14px; font-weight: 500; color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.tech-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s360); }
.tech-chip .tcat { font-size: 11px; color: var(--text-4); font-family: var(--dds-font-family); }

/* assets table ----------------------------------------------------------- */
.assets-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.assets-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); padding: 0 18px 14px; border-bottom: 1px solid var(--border-soft);
}
.assets-table td {
  padding: 16px 18px; border-bottom: 1px solid var(--border-soft); vertical-align: top;
}
.assets-table tbody tr:last-child td { border-bottom: 0; }
.assets-table .a-domain {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--s360); font-weight: 500;
}
.assets-table .a-ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-2);
}
.assets-table .a-tech { display: flex; flex-wrap: wrap; gap: 6px; }
.tech-mini {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; background: var(--sev-low-bg); color: var(--sev-low);
}
.assets-table .a-ports {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--sev-medium); display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.assets-table .a-status .pill { font-size: 11px; }

/* scan-trend timeline ---------------------------------------------------- */
.trend-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 16px; padding: 22px 26px 18px; margin-bottom: 30px;
}
.trend-head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px;
}
.trend-head h3 {
  font-family: var(--dds-font-family-display);
  font-size: 16px; font-weight: 700; color: var(--text); margin: 0;
}
.trend-head .hint { font-size: 12.5px; color: var(--text-3); }
.trend-chart {
  display: flex; align-items: flex-end; gap: 18px; height: 150px; padding: 0 4px;
}
.trend-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: default; min-width: 0;
}
.trend-bars {
  width: 100%; max-width: 46px; display: flex; flex-direction: column-reverse;
  border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,0.06);
}
.trend-bars .tseg { width: 100%; }
.trend-col .tval { font-size: 12px; font-weight: 700; color: var(--text); }
.trend-col .tdate {
  font-size: 11px; color: var(--text-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.trend-col.current .tdate { color: var(--s360); font-weight: 700; }
.trend-col.current .tbars-wrap { position: relative; }
.trend-col.current { position: relative; }
.trend-col.current::after {
  content: "THIS SCAN"; position: absolute; top: -2px;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--s360);
  background: var(--s360-50); padding: 2px 6px; border-radius: 5px;
  transform: translateY(-100%);
}
.trend-legend {
  display: flex; gap: 16px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border-soft); flex-wrap: wrap;
}
.trend-legend .li { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.trend-legend .li .swatch { width: 9px; height: 9px; border-radius: 3px; }

/* read-only finding adjustments */
.finding.readonly .finding-actions { display: none; }

/* footer reuse */
.page-footer {
  border-top: 1px solid var(--border-soft);
  padding: 26px; text-align: center; font-size: 12.5px; color: var(--text-4);
  margin-top: 20px;
}

@media (max-width: 920px) {
  .summary { grid-template-columns: 1fr; gap: 22px; }
  .sev-legend { grid-template-columns: repeat(2, 1fr); }
  .finding { grid-template-columns: 1fr; }
  .finding-left { border-right: 0; border-bottom: 1px solid var(--border-soft); }
}

/* Security360 — page components for the full revamp
 * Login · Dashboard · Scan History · Artifact Library · Generator · Users
 * Built on app.css + findings.css tokens → theme-aware for free.
 */

/* ============ shared page scaffold ============ */
.page-wrap.narrow { max-width: 1080px; }
.page-wrap.wide { max-width: 1320px; }

.page-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.page-toolbar .grow { flex: 1; min-width: 200px; }
.page-toolbar .search-box { flex: 0 1 360px; }

.subtle-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3);
}

/* segmented control to switch demo states */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-inset); border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.seg button {
  border: 0; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
  padding: 6px 12px; border-radius: 7px; transition: all .12s;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--bg-card); color: var(--s360); box-shadow: var(--shadow-card); }

/* ============ Login / auth ============ */
.auth-stage {
  min-height: 100vh;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  background: var(--bg-app);
}
.auth-aside {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 120% at 12% 12%, rgba(88,113,255,0.20), transparent 55%),
    linear-gradient(155deg, #1a2444 0%, #0c1430 100%);
  color: #eaf0ff;
  padding: 56px 60px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-aside .brand-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--dds-font-family-display); font-weight: 700; font-size: 24px;
  letter-spacing: -0.01em; color: #fff;
}
.auth-aside .brand-row sup { font-size: 12px; vertical-align: super; }
.auth-aside .mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--s360); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-headline {
  font-family: var(--dds-font-family-display);
  font-size: 38px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em;
  max-width: 14ch; margin: 0 0 18px;
}
.auth-sub { font-size: 15px; line-height: 1.6; color: #aebbe6; max-width: 42ch; margin: 0; }
.auth-points { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.auth-points li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #cdd8f5; }
.auth-points .tick {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px;
  background: rgba(88,113,255,0.22); color: #aab8ff;
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-aside .foot { font-size: 12.5px; color: #7e8cc0; }
.auth-aside .glow {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  right: -140px; bottom: -160px;
  background: radial-gradient(circle, rgba(88,113,255,0.28), transparent 70%);
  pointer-events: none;
}

.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card { width: 100%; max-width: 392px; }
.auth-card h1 {
  font-family: var(--dds-font-family-display);
  font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
  margin: 0 0 6px;
}
.auth-card .lead { color: var(--text-3); font-size: 14px; margin: 0 0 26px; }
.auth-field { margin-bottom: 16px; }
.auth-field label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 7px;
}
.auth-field label a { font-size: 12px; font-weight: 600; color: var(--s360); text-decoration: none; }
.auth-field label a:hover { text-decoration: underline; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-3);
  z-index: 1;
  pointer-events: none;
}
/* `input.auth-input` (not just `.auth-input`) bumps specificity to (0,1,1)
   so it ties — and beats via cascade order — the generic
   `input[type="text"], input[type="password"], …` rule in style.css which
   would otherwise override our padding and re-apply the wrong padding
   that pushes the input text under the icon. */
input.auth-input {
  width: 100%; height: 44px; padding: 0 14px 0 40px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); color: var(--text); font-size: 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
input.auth-input::placeholder { color: var(--text-4); opacity: 1; }
input.auth-input:focus { border-color: var(--s360-300); box-shadow: 0 0 0 3px var(--s360-50); }
input.auth-input.bare { padding-left: 14px; }
.btn-block { width: 100%; height: 44px; font-size: 14px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0;
  color: var(--text-4); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.sso-btn {
  width: 100%; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card);
  font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; transition: background .15s, border-color .15s;
}
.sso-btn:hover { background: var(--bg-hover); border-color: var(--border); }
.ms-tile { display: inline-grid; grid-template-columns: 8px 8px; gap: 2px; }
.ms-tile i { width: 8px; height: 8px; display: block; }
.auth-foot { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 24px; }
.auth-foot a { color: var(--s360); font-weight: 600; text-decoration: none; }
.flash {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 20px;
}
.flash.err { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); }
.flash.ok { background: var(--sev-low-bg); color: var(--sev-low); border: 1px solid var(--sev-low-soft); }

/* ============ Dashboard (project list) ============ */
.proj-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px;
}
.proj-card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 20px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  display: flex; flex-direction: column; gap: 16px; position: relative;
}
.proj-card:hover { border-color: var(--s360-200); box-shadow: var(--shadow-pop); transform: translateY(-2px); }
.proj-card .pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.proj-card .pc-name { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.35; }
.proj-card .pc-type {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.proj-card .pc-kebab { color: var(--text-4); display: inline-flex; padding: 2px; border-radius: 6px; }
.proj-card .pc-kebab:hover { background: var(--bg-hover); color: var(--text-2); }

.pc-metrics { display: flex; gap: 22px; }
.pc-metric .v { font-family: var(--dds-font-family-display); font-size: 24px; font-weight: 700; color: var(--text); line-height: 1; }
.pc-metric .l { font-size: 11px; color: var(--text-3); margin-top: 5px; font-weight: 500; }
.pc-metric .v.danger { color: var(--sev-critical); }

.pc-bar { display: flex; height: 7px; border-radius: 5px; overflow: hidden; background: var(--bg-inset); gap: 2px; }
.pc-bar .s { height: 100%; min-width: 3px; }

.pc-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--border-soft);
  font-size: 12px; color: var(--text-3);
}
.pc-foot .when { display: inline-flex; align-items: center; gap: 6px; }

/* status chips (reused across dashboard/history) */
.st-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 9999px;
}
.st-chip .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-chip.completed { background: var(--sev-low-bg); color: var(--sev-low); }
.st-chip.running { background: var(--s360-50); color: var(--s360); }
.st-chip.queued { background: var(--sev-medium-bg); color: var(--sev-medium); }
.st-chip.failed { background: var(--sev-critical-bg); color: var(--sev-critical); }
.st-chip.idle { background: var(--bg-inset); color: var(--text-3); }
.st-chip.running .d { animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* running card progress */
.pc-progress { display: flex; flex-direction: column; gap: 8px; }
.pc-progress .ptrack { height: 6px; border-radius: 5px; background: var(--bg-inset); overflow: hidden; }
.pc-progress .pfill { height: 100%; background: var(--s360); border-radius: 5px; transition: width .4s; position: relative; }
.pc-progress .pfill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: sheen 1.3s linear infinite;
}
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.pc-progress .pmeta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); }

/* big section header w/ action */
.sec-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 36px 0 16px;
}

/* ============ running project detail (progress hero) ============ */
.scan-hero {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 16px; padding: 30px 32px; margin-bottom: 30px;
}
.scan-hero .sh-top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.scan-hero .sh-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--s360-100); border-top-color: var(--s360);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.scan-hero h3 { font-family: var(--dds-font-family-display); font-size: 20px; font-weight: 700; color: var(--text); margin: 0; }
.scan-hero .sh-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.scan-hero .sh-track { height: 10px; border-radius: 6px; background: var(--bg-inset); overflow: hidden; margin-bottom: 12px; }
.scan-hero .sh-fill { height: 100%; background: var(--s360); border-radius: 6px; position: relative; transition: width .5s; }
.scan-hero .sh-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: sheen 1.3s linear infinite;
}
.scan-hero .sh-row { display: flex; align-items: center; justify-content: space-between; }
.scan-hero .sh-pct { font-family: var(--dds-font-family-display); font-size: 14px; font-weight: 700; color: var(--s360); }
.scan-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
.scan-step {
  border: 1px solid var(--border-soft); border-radius: 11px; padding: 13px 15px; background: var(--bg-card);
}
.scan-step .ss-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.scan-step .ss-stat { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }
.scan-step.done .ss-dot { color: var(--sev-low); }
.scan-step.active { border-color: var(--s360-200); background: var(--s360-50); }
.scan-step.active .ss-dot { color: var(--s360); }
.scan-step.pending { opacity: 0.6; }
.scan-step .ss-dot { display: inline-flex; }

/* ============ Artifact Library ============ */
.lib-layout { display: grid; grid-template-columns: 256px 1fr; gap: 0; flex: 1; min-height: 0; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.cat-card {
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 14px;
  padding: 20px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
  display: flex; flex-direction: column; gap: 14px;
}
.cat-card:hover { border-color: var(--s360-200); box-shadow: var(--shadow-pop); transform: translateY(-2px); }
.cat-ico {
  width: 44px; height: 44px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cat-ico.sast { background: var(--s360-50); color: var(--s360); }
.cat-ico.sca { background: var(--sev-low-bg); color: var(--sev-low); }
.cat-ico.trivy { background: var(--sev-medium-bg); color: var(--sev-medium); }
.cat-ico.phish { background: var(--sev-critical-bg); color: var(--sev-critical); }
.cat-card .cc-name { font-size: 15px; font-weight: 600; color: var(--text); }
.cat-card .cc-desc { font-size: 13px; color: var(--text-3); line-height: 1.5; flex: 1; }
.cat-card .cc-count { font-size: 12.5px; color: var(--text-3); font-weight: 600; }

.info-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.info-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-3); padding: 2px 8px; border-radius: 6px;
  background: var(--bg-inset); border: 1px solid var(--border-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.fmt-tag { font-weight: 700; text-transform: uppercase; }
.fmt-tag.html { color: var(--s360); }
.fmt-tag.pdf { color: var(--sev-critical); }

.art-name { display: flex; flex-direction: column; gap: 6px; }
.art-name .nm { font-weight: 600; color: var(--text); font-size: 14px; }

/* dropdown (download) */
.dd { position: relative; display: inline-block; }
.dd-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 168px;
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px;
  box-shadow: var(--shadow-pop); padding: 5px; z-index: 40;
}
.dd-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.dd-item:hover { background: var(--bg-hover); }
.dd-item .ico { color: var(--text-3); display: inline-flex; }
.dd-item.danger { color: var(--danger-text); }
.dd-item.danger .ico { color: var(--danger-text); }
.dd-sep { height: 1px; background: var(--border-soft); margin: 4px 3px; }

.row-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.icon-act {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .12s;
}
.icon-act:hover { background: var(--bg-hover); color: var(--text); }
.icon-act.danger:hover { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }

/* ============ Generator ============ */
.gen-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.gen-grid.with-preview { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.ticket-row {
  display: grid; grid-template-columns: 1.2fr 1.4fr 0.9fr 34px; gap: 10px; align-items: center;
  margin-bottom: 10px;
}
.upload-drop {
  border: 1.5px dashed var(--border); border-radius: 12px; padding: 26px;
  text-align: center; color: var(--text-3); background: var(--bg-inset);
  transition: border-color .15s, background .15s; cursor: pointer;
}
.upload-drop:hover { border-color: var(--s360-300); background: var(--s360-50); color: var(--s360); }
.upload-drop .ud-strong { display: block; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.preview-frame {
  border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; background: var(--bg-card);
  min-height: 420px; display: flex; flex-direction: column;
}
.preview-frame .pf-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft); background: var(--bg-inset);
  font-size: 12px; color: var(--text-3);
}
.preview-frame .pf-dot { width: 9px; height: 9px; border-radius: 50%; }
.preview-skeleton { padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.sk-line { height: 12px; border-radius: 6px; background: var(--bg-inset); }
.sk-block { border-radius: 10px; background: var(--bg-inset); }

/* radio cards */
.radio-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-card {
  flex: 1; min-width: 130px; border: 1px solid var(--border); border-radius: 11px; padding: 14px;
  cursor: pointer; transition: all .12s; display: flex; gap: 11px; align-items: flex-start;
}
.radio-card:hover { border-color: var(--s360-300); }
.radio-card.on { border-color: var(--s360); background: var(--s360-50); }
.radio-card .rc-radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 18px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
}
.radio-card.on .rc-radio { border-color: var(--s360); }
.radio-card.on .rc-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--s360); }
.radio-card .rc-t { font-size: 13.5px; font-weight: 600; color: var(--text); }
.radio-card .rc-d { font-size: 12px; color: var(--text-3); margin-top: 3px; }

/* ============ Users admin ============ */
.role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 9999px;
}
.role-badge.super { background: var(--s360-50); color: var(--s360-700); }
.role-badge.admin { background: var(--sev-low-bg); color: var(--sev-low); }
.role-badge.editor { background: var(--sev-medium-bg); color: var(--sev-medium); }
.role-badge.viewer { background: var(--bg-inset); color: var(--text-3); }
.user-cell { display: flex; align-items: center; gap: 12px; }
.user-cell .uav {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; color: #fff;
}
.user-cell .um { min-width: 0; }
.user-cell .un { font-weight: 600; color: var(--text); font-size: 14px; }
.user-cell .ue { font-size: 12.5px; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sso-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.sso-flag .on { color: var(--sev-low); }

/* ============ Home hub ============ */
.hub-stage { min-height: 100vh; background: var(--bg-app); }
.hub-hero {
  background:
    radial-gradient(110% 130% at 88% 0%, rgba(88,113,255,0.16), transparent 50%),
    linear-gradient(160deg, var(--bg-card), var(--bg-card));
  border-bottom: 1px solid var(--border-soft);
  padding: 56px 0 48px;
}
.hub-inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.hub-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s360);
  background: var(--s360-50); padding: 6px 12px; border-radius: 9999px;
}
.hub-hero h1 {
  font-family: var(--dds-font-family-display); font-size: 44px; line-height: 1.08;
  font-weight: 700; letter-spacing: -0.025em; color: var(--text); margin: 0 0 14px; max-width: 18ch;
}
.hub-hero p { font-size: 16px; line-height: 1.6; color: var(--text-3); max-width: 56ch; margin: 0; }
.hub-section { padding: 40px 0; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.hub-card {
  display: flex; flex-direction: column; gap: 12px; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 16px; padding: 22px;
  transition: border-color .15s, box-shadow .15s, transform .15s; cursor: pointer;
}
.hub-card:hover { border-color: var(--s360-200); box-shadow: var(--shadow-pop); transform: translateY(-3px); }
.hub-card .hc-ico {
  width: 46px; height: 46px; border-radius: 12px; background: var(--s360-50); color: var(--s360);
  display: inline-flex; align-items: center; justify-content: center;
}
.hub-card .hc-name { font-size: 17px; font-weight: 600; color: var(--text); }
.hub-card .hc-desc { font-size: 13.5px; line-height: 1.55; color: var(--text-3); flex: 1; }
.hub-card .hc-go {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--s360);
}
.hub-card .hc-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: -4px;
}
.hub-foot { border-top: 1px solid var(--border-soft); padding: 24px 0; }

@media (max-width: 940px) {
  .auth-stage { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .gen-grid.with-preview { grid-template-columns: 1fr; }
  .scan-steps { grid-template-columns: repeat(2, 1fr); }
  .lib-layout { grid-template-columns: 1fr; }
}

/* Security360 — Dark theme
 * First-class dark mode. Activated via <html data-theme="dark">.
 * Strategy: redefine the token layer (surfaces, text, brand-soft, severity
 * ramp) so token-driven selectors flip automatically; a small set of
 * non-tokenized accents are overridden explicitly below.
 */

html[data-theme="dark"] {
  /* ---- surfaces ---- */
  --bg-app:      #0c121c;   /* page background           */
  --bg-card:     #151d2a;   /* cards / panels / chrome    */
  --bg-hover:    #1b2533;   /* row + header hover         */
  --bg-inset:    #0f1622;   /* inputs / code / soft inset */
  --border-soft: #222d3d;
  --border:      #303e52;

  /* ---- text ---- */
  --text:   #e8eef6;
  --text-2: #bccada;
  --text-3: #8294aa;
  --text-4: #5d6e84;

  /* ---- brand (indigo) tuned for dark ---- */
  --s360:       #5871ff;
  --s360-hover: #6f86ff;
  --s360-50:    #18203c;   /* indigo wash surface (nav active, focus ring, tags) */
  --s360-100:   #1f2a52;
  --s360-200:   #2d3a78;
  --s360-300:   #5566cc;   /* focus border */
  --s360-600:   #7d92ff;
  --s360-700:   #b7c2ff;   /* tag text on indigo wash */

  /* ---- danger-tint surfaces ---- */
  --danger-text:   #ff8478;
  --danger-bg:     #2a1513;
  --danger-border: #582623;

  /* ---- shadows: deeper, since light shadows vanish on dark ---- */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-pop:  0 20px 48px -12px rgba(0,0,0,0.7);
}

/* ---- severity ramp (dark variants — Critical/High must pop) ---- */
html[data-theme="dark"] {
  --sev-critical: #ff5e52; --sev-critical-bg: #2a1411; --sev-critical-soft: #3c1a16;
  --sev-high:     #ff7063; --sev-high-bg:     #2a1411; --sev-high-soft:     #3c1a16;
  --sev-medium:   #f6b73f; --sev-medium-bg:   #2a2210; --sev-medium-soft:   #3a2f14;
  --sev-low:      #34d399; --sev-low-bg:      #0e2a20; --sev-low-soft:      #15392b;
  --sev-info:     #9fb0c4; --sev-info-bg:     #1a2230; --sev-info-soft:     #28323f;
  --page-bg:      #0c121c;
}

/* ---- non-tokenized accent overrides ---- */

/* status pills */
html[data-theme="dark"] .pill.green  { background: #102a1f; color: #4ade80; }
html[data-theme="dark"] .pill.red    { background: #2a1513; color: #ff8478; }
html[data-theme="dark"] .pill.yellow { background: #2a2210; color: #fcd34d; }
html[data-theme="dark"] .pill.blue   { background: var(--s360-50); color: var(--s360-700); }
html[data-theme="dark"] .pill.neutral{ background: var(--bg-hover); color: var(--text-2); }

/* recommended-fix block text */
html[data-theme="dark"] .fr-fix { color: #6ee7b7; }

/* table head sits on card, not white */
html[data-theme="dark"] .table th { background: var(--bg-card); }

/* help bubble glyph reads as the page color on its grey chip */
html[data-theme="dark"] .help { color: var(--bg-app); }

/* kebab/menu + modal lift with deeper shadow */
html[data-theme="dark"] .menu  { box-shadow: var(--shadow-pop); }
html[data-theme="dark"] .modal { box-shadow: var(--shadow-pop); }

/* the dark savebar already reads dark in light mode — give it a border + a
   slightly deeper fill so it separates from the dark page */
html[data-theme="dark"] .savebar {
  background: #060a12;
  border: 1px solid var(--border);
}

/* select dropdown caret: swap grey arrow for a lighter one */
html[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238294aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---- dark-mode hover states ----
   resting `var(--bg-app)` hovers read darker-than-card in dark, which
   inverts the usual lift. Remap interactive hovers to the lighter token. */
html[data-theme="dark"] .nav-item:hover,
html[data-theme="dark"] .icon-btn:hover,
html[data-theme="dark"] .kebab-btn:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .menu-item:hover,
html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] .act-details:hover,
html[data-theme="dark"] .sev-filter:hover,
html[data-theme="dark"] .tree-node:hover,
html[data-theme="dark"] .tree-add:hover,
html[data-theme="dark"] .tc-title input:hover,
html[data-theme="dark"] .tc-obs .editor:hover,
html[data-theme="dark"] .tc-obs .url input:hover { background: var(--bg-hover); }

/* ---- theme toggle button in the topbar ---- */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-3);
  cursor: pointer; transition: background .15s, color .15s;
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--text); }
.theme-toggle .moon { display: inline-flex; }
.theme-toggle .sun  { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }
html[data-theme="dark"] .theme-toggle .sun  { display: inline-flex; }

/* smooth the flip everywhere, but keep it restrained (150ms, like DDS) */
.topbar, .sidebar, .card, .panel, .summary, .sev-group, .menu,
.modal, .footer, .table th, .input, .textarea, .btn-secondary,
.tech-chip, .trend-card, .archival-bar, .search-box input, .select,
.sev-filter, .kebab-btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }

/* Security360 — POLISH LAYER (loads last)
 * Goal: cleaner, calmer, more premium. Stronger type hierarchy, more
 * generous whitespace, softer borders, subtle layered depth.
 * Token-driven → applies to light & dark; dark token overrides still win.
 */

/* ============================================================
   1 · TOKENS — calmer surfaces, softer lines, subtle depth (light)
   ============================================================ */
:root {
  --bg-app: #f5f6f9;
  --page-bg: #f5f6f9;
  --bg-hover: #f3f4f8;
  --bg-inset: #f5f6f9;
  --border-soft: #edeef3;
  --border: #e3e5ec;

  --shadow-card: 0 1px 2px rgba(20,28,46,0.04), 0 2px 6px rgba(20,28,46,0.03);
  --shadow-pop:  0 10px 30px -8px rgba(20,28,46,0.14), 0 4px 10px -4px rgba(20,28,46,0.06);

  /* refined radii scale */
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
}

html[data-theme="dark"] {
  --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.28);
  --shadow-pop:  0 18px 44px -12px rgba(0,0,0,0.66), 0 6px 16px -6px rgba(0,0,0,0.5);
}

/* faint global type tightening */
body { letter-spacing: -0.005em; }

/* ============================================================
   2 · TYPOGRAPHY — confident hierarchy
   ============================================================ */
.proj-title {
  font-size: 32px; line-height: 1.12; letter-spacing: -0.025em; font-weight: 700;
}
.page-title {
  font-size: 29px; line-height: 1.15; letter-spacing: -0.022em; font-weight: 700;
}
.page-sub {
  font-size: 14.5px; line-height: 1.55; color: var(--text-3); margin-top: 8px;
}
.proj-id { font-size: 13px; margin-top: 10px; }

.section-head { margin-bottom: 18px; gap: 14px; }
.section-head h2 { font-size: 23px; letter-spacing: -0.018em; }
.section-head .accent { height: 26px; width: 4px; border-radius: 4px; }
.section-head .count { font-size: 13px; }

.detail-section .sec-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.detail-section .sec-sub { font-size: 13.5px; line-height: 1.5; margin-top: 5px; }

/* micro labels — quieter, evenly tracked */
.subtle-label, .fr-label, .table th, .assets-table th,
.tc-row.head, .field label, .auth-field label {
  letter-spacing: 0.06em;
}
.field label, .auth-field label { letter-spacing: 0; font-weight: 600; }
.fr-text, .fr-fix { line-height: 1.65; }

/* big numbers stay on the display face, a touch tighter */
.summary-total .big, .pc-metric .v, .sev-legend .cell .count,
.scan-hero .sh-pct { letter-spacing: -0.03em; }

/* ============================================================
   3 · SURFACES — soft borders + subtle elevation, rounder
   ============================================================ */
.card, .panel, .summary, .detail-section, .trend-card, .scan-hero,
.sev-group, .archival-bar, .preview-frame {
  border-color: var(--border-soft);
  box-shadow: var(--shadow-card);
}
.card, .panel, .preview-frame { border-radius: var(--r-lg); }
.detail-section, .trend-card { border-radius: var(--r-lg); }
.summary, .scan-hero { border-radius: 20px; }
.sev-group { border-radius: var(--r-md); }

.menu, .modal, .dd-menu { box-shadow: var(--shadow-pop); border-color: var(--border-soft); }
.modal { border-radius: 18px; }

/* cards that lift on hover — calmer rest, clearer hover */
.proj-card, .cat-card, .hub-card {
  border-radius: 20px; box-shadow: var(--shadow-card); border-color: var(--border-soft);
}
.proj-card:hover, .cat-card:hover, .hub-card:hover {
  border-color: var(--s360-200); box-shadow: var(--shadow-pop); transform: translateY(-3px);
}

/* topbar — quieter line, faint lift */
.topbar { height: 60px; border-bottom-color: var(--border-soft); box-shadow: 0 1px 0 rgba(20,28,46,0.02); }

/* ============================================================
   4 · WHITESPACE — more generous rhythm
   ============================================================ */
.page-wrap { padding: 48px 44px 84px; }
.main { padding: 48px 60px 100px; }

.proj-head { margin-bottom: 32px; gap: 28px; }
.section { margin-bottom: 46px; }
.summary { padding: 30px 34px; margin-bottom: 36px; gap: 38px; }
.detail-section { margin-bottom: 24px; }
.detail-section .sec-head { padding: 24px 30px 8px; }
.detail-section .sec-body { padding: 14px 30px 30px; }
.field + .field { margin-top: 20px; }
.panel { padding: 24px 26px; }

.proj-grid { gap: 22px; }
.cat-grid { gap: 20px; }
.hub-grid { gap: 22px; }
.sev-legend { gap: 14px; margin-top: 24px; }
.page-toolbar { margin-bottom: 28px; }

/* tables — airier rows, lighter dividers */
.table th { padding: 15px 24px; border-bottom-color: var(--border-soft); }
.table td { padding: 18px 24px; border-bottom-color: var(--border-soft); }
.assets-table th { padding: 0 22px 15px; }
.assets-table td { padding: 18px 22px; }

/* cards inner generosity */
.proj-card { padding: 22px 24px; gap: 18px; }
.cat-card { padding: 24px; gap: 15px; }
.hub-card { padding: 26px; gap: 13px; }

/* ============================================================
   5 · CONTROLS — refined buttons, inputs, pills
   ============================================================ */
.btn {
  height: 38px; padding: 0 18px; font-weight: 600; border-radius: var(--r-sm);
  letter-spacing: -0.01em;
}
.btn.sm { height: 32px; padding: 0 13px; border-radius: 8px; }
.btn-primary { box-shadow: 0 1px 2px rgba(56,82,240,0.20); }
.btn-primary:hover { box-shadow: 0 2px 8px rgba(56,82,240,0.28); }
.btn-secondary { border-color: var(--border); box-shadow: var(--shadow-card); }

.input, .textarea {
  padding: 11px 13px; border-radius: var(--r-sm); border-color: var(--border);
}
.search-box input { height: 42px; border-radius: 11px; border-color: var(--border); }
.select { height: 42px; border-radius: 11px; border-color: var(--border); }

.pill { padding: 3px 11px; font-size: 11.5px; }
.st-chip { padding: 5px 11px; }
.tool-tag, .cwe-tag { border-radius: 7px; }

/* kebab / icon buttons a touch larger + rounder */
.kebab-btn { border-radius: var(--r-sm); border-color: var(--border); }
.icon-btn, .theme-toggle { border-radius: var(--r-sm); }

/* ============================================================
   6 · DAST module grid — calmer, better aligned
   ============================================================ */
.tc-row { padding: 22px 30px; gap: 22px; }
.tc-row.head { padding: 14px 30px; letter-spacing: 0.07em; }
.tc-list { }
.tc-title input { font-size: 14.5px; }
.tc-obs .editor { font-size: 13.5px; line-height: 1.6; min-height: 38px; padding: 10px 12px; }
.tc-add { margin: 20px 30px 26px; padding: 16px; border-radius: var(--r-md); }
.metaline { margin-top: 22px; padding: 14px 18px; border-radius: var(--r-md); }

/* DAST overview / cycle tables inherit the airier table rules above */
.progress { height: 5px; }

/* ============================================================
   7 · Generator + Library refinements
   ============================================================ */
.upload-drop { padding: 30px; border-radius: var(--r-md); }
.ticket-row { gap: 12px; margin-bottom: 12px; }
.radio-card { padding: 15px; border-radius: var(--r-md); }
.cat-ico { border-radius: 13px; }
.info-chip { border-radius: 7px; padding: 3px 9px; }
.preview-frame { min-height: 460px; }

/* findings explorer toolbar breathing room */
.findings-toolbar { margin-bottom: 20px; gap: 12px; }
.finding-left { padding: 26px 24px; gap: 14px; }
.finding-right { padding: 26px 28px; }
.fr-block + .fr-block { margin-top: 22px; }

/* hub hero — a bit more air */
.hub-hero { padding: 64px 0 56px; }
.hub-section { padding: 44px 0; }

/* footer calmer */
.page-footer, .footer { border-top-color: var(--border-soft); padding: 30px; }

/* ============================================================
   8 · responsive trims
   ============================================================ */
@media (max-width: 1024px) {
  .main { padding: 40px 32px 90px; }
  .page-wrap { padding: 40px 28px 80px; }
}