/* =====================================
   CORE TOKENS
   minimalist palette inspired by Ive / Jobs
===================================== */
:root {
  --ink-1000: #000000;
  --ink-900: #0a0a0a;
  --ink-800: #141414;
  --ink-700: #1e1e1e;
  --ink-600: #2a2a2a;
  --ink-500: #3a3a3a;
  --ink-400: #575757;
  --ink-300: #7a7a7a;
  --ink-200: #9d9d9d;
  --ink-100: #d0d0d0;
  --paper: #f5f5f5;
  --surface: #ffffff;
  --surface-muted: #f2f2f2;
  --surface-tint: #f8f8f8;
  --border: #e0e0e0;
  --accent: #111111;
  --accent-soft: rgba(0, 0, 0, 0.08);
  --accent-strong: #1c1c1c;
  --success: #2f2f2f;
  --danger: #3a3a3a;
  --warning: #4a4a4a;
  --info: #2f2f2f;
  --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.12);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-panel: 32px;
  --radius-pill: 999px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --table-radius: var(--radius-xs);
  --table-cell-pad-y: var(--space-xs);
  --table-cell-pad-x: var(--space-sm);
  --favorite-star-filled: #A50044;
  --favorite-star-filled-rgb: 165, 0, 68;
  --font-sans: 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* =====================================
   TASK MANAGEMENT MODULE
===================================== */
.tm-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2rem 1.2rem 2.5rem;
}

.tm-header {
  margin-bottom: 1rem;
}

.tm-titlebar {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
}

.tm-titlebar--tight {
  margin-bottom: 0.8rem;
}

.tm-title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #222;
}

.tm-subtitle {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
}

.tm-meta {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: #7f7f7f;
}

.tm-panel {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.tm-alert {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  font-size: 0.9rem;
}
.tm-alert--success { background: #f3faf4; border-color: rgba(23, 162, 74, 0.18); }
.tm-alert--error { background: #fff4f4; border-color: rgba(220, 53, 69, 0.18); }

.tm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}
.tm-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tm-field--full { grid-column: 1 / -1; }

.tm-label {
  display: block;
  font-size: 0.85rem;
  color: #333;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.tm-hint {
  font-size: 0.82rem;
  color: #7f7f7f;
  margin-top: 0.35rem;
}

.tm-input {
  width: 100%;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  font-size: 0.95rem;
  background: #fff;
}
.tm-input:focus {
  outline: none;
  border-color: rgba(13, 110, 253, 0.55);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

.tm-textarea { resize: vertical; min-height: 2.6rem; }
.tm-select-multi { padding: 0.5rem; }

.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  background: #fff;
  color: #222;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
}
.tm-btn:hover { background: rgba(17, 17, 17, 0.03); }
.tm-btn--primary {
  background: #1e6cff;
  border-color: rgba(30, 108, 255, 0.55);
  color: #fff;
}
.tm-btn--primary:hover { background: #185ee0; }
.tm-btn--danger {
  background: #fff;
  border-color: rgba(220, 53, 69, 0.4);
  color: #b02a37;
}
.tm-btn--danger:hover { background: rgba(220, 53, 69, 0.06); }

.tm-table-wrap { overflow: auto; }
.tm-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.tm-table th, .tm-table td {
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  padding: 0.65rem 0.6rem;
  vertical-align: top;
  text-align: left;
}
.tm-table th { font-size: 0.86rem; color: #555; font-weight: 800; }
.tm-table td { font-size: 0.93rem; }
.tm-table--editor { min-width: 980px; }

.tm-col-actions { width: 110px; white-space: nowrap; text-align: right; }
.tm-col-sys { width: 110px; white-space: nowrap; }
.tm-center { text-align: center; }

.tm-strong { font-weight: 800; color: #222; }
.tm-muted { color: #7f7f7f; font-size: 0.9rem; }
.tm-empty { margin: 0; color: #7f7f7f; }
.tm-list { margin: 0; padding-left: 1.1rem; }

.tm-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.9rem;
}

.tm-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  color: #222;
  margin-top: 0.45rem;
}
.tm-check--cell { margin-top: 0; }
.tm-cell { min-width: 160px; }

@media (max-width: 900px) {
  .tm-grid, .tm-grid--compact { grid-template-columns: 1fr; }
  .tm-col-actions { text-align: left; }
}

/* =====================================
   MONOCHROME EXPERIENCE OVERLAY
   Cohesive premium SaaS shell across pages
===================================== */
body {
  background: #ffffff;
  color: var(--ink-800);
  letter-spacing: 0.01em;
  padding-top: 72px;
}

main,
.page-shell,
.agenda-shell,
.subject-shell,
.console-page,
.product-page,
.workflow-view,
.profile-page,
.u360-page,
.dispatch-page,
.report-shell,
.training-shell,
.memo-shell,
.list-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--space-xl) var(--space-sm) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (max-width: 768px) {
  main,
  .page-shell,
  .agenda-shell,
  .subject-shell,
  .console-page,
  .product-page,
  .workflow-view,
  .profile-page,
  .u360-page,
  .dispatch-page,
  .report-shell,
  .training-shell,
  .memo-shell,
  .list-shell { padding: var(--space-lg) var(--space-sm) var(--space-xl); }
}

.stack,
.section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

label {
  color: var(--ink-700);
  font-weight: 600;
  letter-spacing: 0.01em;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  width: 100%;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink-800);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: var(--ink-600);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
  outline: none;
}

::placeholder { color: var(--ink-300); }

button,
.btn,
input[type="submit"],
input[type="button"],
.agenda-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.12s ease, box-shadow 0.2s ease;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.agenda-btn:hover {
  background: var(--accent-strong);
  box-shadow: var(--shadow-md);
}

button:active,
.btn:active,
input[type="submit"]:active,
input[type="button"]:active,
.agenda-btn:active {
  transform: scale(0.97);
  opacity: 0.85;
  box-shadow: none;
}

button:disabled,
.btn:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.agenda-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn-secondary,
.btn-ghost,
.agenda-btn-ghost {
  background: transparent;
  color: var(--ink-700);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn-danger {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #ffffff;
}
.btn-danger:hover { background: var(--ink-600); border-color: var(--ink-600); }

.btn-link {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  color: var(--ink-600);
}

.btn-inline-link {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  display: inline;
  cursor: pointer;
  color: var(--ink-700);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-inline-link:hover { color: var(--ink-900); }
.btn-inline-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-inline-link--danger { color: var(--danger); }
.btn-inline-link--danger:hover { color: var(--danger); opacity: 0.85; }

.pill,
.badge,
.tag,
.agenda-chip,
.dispatch-pill,
.mc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--ink-700);
}

table,
.assess-table,
.agenda-table,
.listing-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ── Interview questions / question editor compact UI ─────────────────────── */
.iq-page .assess-panel,
.iq-page .assess-card { padding: var(--space-md); }

.iq-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
}

.iq-title { margin: 0; font-size: 22px; color: var(--ink-900); letter-spacing: -0.02em; }
.iq-subtitle { margin: 4px 0 0; color: var(--ink-500); font-size: 13px; }

.iq-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-600);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: var(--space-xs);
}
.iq-back:hover { text-decoration: underline; }

.iq-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.iq-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.iq-form .assess-form-full { grid-column: 1 / -1; }

.iq-form .assess-input,
.iq-form .assess-select,
.iq-form .assess-textarea { padding: 10px 12px; }
.iq-form .assess-textarea { min-height: 64px; }

.iq-compact-table.assess-table th,
.iq-compact-table.assess-table td { padding: 8px 10px; vertical-align: top; }
.iq-compact-table.assess-table th { font-size: 11px; letter-spacing: 0.06em; }
.iq-compact-table.assess-table td .assess-input { padding: 8px 10px; }

.iq-rowlink { cursor: pointer; }
.iq-rowlink:hover td { background: var(--surface-muted); }

.iq-split {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-md);
  align-items: start;
}
@media (max-width: 980px) {
  .iq-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iq-split { grid-template-columns: 1fr; }
}

.iq-inline-add {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.iq-inline-add .assess-input { width: 100%; }
.iq-inline-add .iq-inline-correct { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-600); font-size: 13px; }

.iq-muted-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.iq-tax-list { display: flex; flex-direction: column; gap: 10px; }
.iq-tax-empty { color: var(--ink-400); font-size: 13px; margin: 0; padding: 4px 0; }
.iq-tax-cat-group { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.iq-tax-cat-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface-muted); border-bottom: 1px solid var(--border); }
.iq-tax-label { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink-900); letter-spacing: 0.01em; }
.iq-tax-del-form { margin: 0; display: flex; }
.iq-tax-subs { display: flex; flex-direction: column; }
.iq-tax-sub-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 28px; border-bottom: 1px solid var(--border); }
.iq-tax-sub-label { flex: 1; font-size: 13px; color: var(--ink-700); }
.iq-tax-add-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 28px; background: var(--surface); }
.iq-tax-add-row .assess-input { flex: 1; width: auto; padding: 7px 10px !important; font-size: 13px; }
.iq-tax-add-cat { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 6px; }
.iq-tax-add-cat .assess-input { flex: 1; width: auto; }

th,
td,
.assess-table th,
.assess-table td,
.agenda-table th,
.agenda-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

th,
.assess-table th,
.agenda-table th {
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--ink-500);
  background: #f6f6f6;
}

tbody tr:hover td,
.assess-table tr:hover td,
.agenda-table tr:hover td { background: var(--surface-muted); }

tbody tr:last-child td,
.assess-table tr:last-child td,
.agenda-table tr:last-child td { border-bottom: none; }

.table-scroll,
.assess-table-card .table-scroll,
.agenda-table-wrap {
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
}

.mc-header.fixed { backdrop-filter: blur(12px); }

.mc-bar {
  background: linear-gradient(120deg, #111111 0%, #0a0a0a 100%);
  color: #f5f5f5;
  border-bottom: 1px solid #161616;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
  padding: 14px 20px;
}

.mc-brand {
  color: #f5f5f5;
  letter-spacing: 0.08em;
}

.mc-item-label {
  color: #f0f0f0;
  background: rgba(255, 255, 255, 0.04);
}

.mc-drop {
  background: #0f0f0f;
  border: 1px solid #151515;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.4);
}

.mc-drop-item a { color: #f2f2f2; }

.mc-drop-item a:hover,
.mc-drop-item.active a { background: rgba(255, 255, 255, 0.06); }

.mc-user-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f5;
}

.mc-user-drop {
  position: absolute;
  right: 0;
  left: auto;
  top: 100%;
  margin-top: 6px;
  min-width: 200px;
  background: #0c0c0c;
  border: 1px solid #111;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.25s;
}
.mc-user-drop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.mc-user-link { color: #f2f2f2; }

.mc-logout {
  color: #ff8a7a;
  font-weight: 700;
}

.mc-logout-item a {
  color: #ff8a7a;
  padding: 12px 14px;
}

.mc-logout-item a:hover { background: rgba(255, 138, 122, 0.12); }

.mc-user-divider {
  display: block;
  height: 1px;
  margin: 8px 10px;
  background: #1f1f1f;
  list-style: none;
}

/* =====================================
   BASE and TYPOGRAPHY
===================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink-800);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(96, 96, 96, 0.45);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-sm);
  font-weight: 600;
  line-height: 1.2;
}

p { margin: 0 0 var(--space-sm); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.text-muted,
.muted-note,
.helper,
.label-muted,
.manuals-meta,
.nav-search input::placeholder,
.listing-item-meta,
.listing-empty,
.timeline small,
.option-warning-hint,
.option-points,
.empty-state,
.answer-attachments ul,
.notification-item small,
.manuals-lede,
.summary-card p,
.history-list li,
.sidebar-placeholder,
.memo-date,
.break-card small,
.roster-desc { color: var(--ink-400); }

/* =====================================
   AGENDA LAYOUT (list/edit/new/print/view)
===================================== */
.agenda-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-sm) var(--space-xl);
}
.agenda-card {
  background: var(--surface);
  border: 1px solid var(--border, rgba(24, 24, 24, 0.08));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-md) calc(var(--space-md) + 2px) calc(var(--space-md) + 4px);
}
.agenda-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.agenda-title {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.agenda-muted {
  color: var(--ink-400);
  font-size: 14px;
  margin: 0;
}
.agenda-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.agenda-filters { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.agenda-label {
  font-weight: 600;
  color: var(--ink-800);
  margin-bottom: 6px;
  display: block;
}
.agenda-input,
.agenda-select,
.agenda-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(24, 24, 24, 0.08));
  border-radius: 12px;
  background: #ffffff;
  font-size: 14px;
}
.agenda-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}
.agenda-btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 30px rgba(24, 24, 24, 0.2);
}
.agenda-btn-ghost {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--border, rgba(24, 24, 24, 0.08));
}
.agenda-table-wrap { margin-top: var(--space-sm); overflow: auto; }
.agenda-table { width: 100%; border-collapse: collapse; }
.agenda-table th,
.agenda-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border, rgba(24, 24, 24, 0.08));
  font-size: 14px;
}
.agenda-pagination { margin-top: var(--space-md); text-align: center; }
.agenda-page-link {
  display: inline-block;
  margin: 3px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  background: #f0f0f0;
  color: var(--accent);
}
.agenda-page-link.active {
  background: var(--accent);
  color: #fff;
}
.agenda-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.agenda-stat-card {
  border: 1px solid var(--border, rgba(24, 24, 24, 0.08));
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
}
.agenda-stat-label { color: var(--ink-400); font-size: 13px; }
.agenda-stat-value { font-weight: 700; color: var(--ink-800); margin-top: 4px; }
.agenda-notes {
  margin-top: var(--space-sm);
  border: 1px solid var(--border, rgba(24, 24, 24, 0.08));
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
}
.agenda-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e0e0e0;
}
.agenda-chip-remove {
  border: none;
  background: transparent;
  font-weight: bold;
  cursor: pointer;
}
.agenda-chip-results {
  display: none;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  margin-top: 4px;
  max-height: 180px;
  overflow-y: auto;
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 30;
}
.agenda-chip-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.agenda-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.agenda-grid-full { grid-column: 1 / -1; }
.agenda-hint { color: var(--ink-400); font-size: 13px; margin-top: 4px; }
.agenda-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.agenda-flex { display: flex; align-items: center; gap: var(--space-sm); }
.agenda-flex .agenda-label { margin: 0; }
.agenda-chip-shell { position: relative; }
.agenda-chip-option { padding: 6px 10px; cursor: pointer; }
.agenda-chip-option:hover { background: var(--surface-muted); }
.agenda-chip-container { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.agenda-error-list { margin: 0; padding-left: 20px; }
.agenda-chip-empty { padding: 6px 10px; color: var(--ink-400); }
.is-hidden { display: none; }
.agenda-actions-row { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.agenda-text-right { text-align: right; }
.agenda-meta { color: var(--ink-400); font-size: 13px; display: block; }
.agenda-empty { margin-top: var(--space-sm); }
.agenda-stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.agenda-section-title { font-size: 18px; margin: 0; }
.agenda-subtext { color: var(--ink-400); font-size: 12px; }
.agenda-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-sm) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.agenda-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.agenda-inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
  align-items: center;
}

/* =====================================
   AGENDA SUBJECT DETAIL
===================================== */
.subject-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.subject-alert { margin: 0; }
.subject-error-list { margin: 0; padding-left: 18px; }

.subject-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}
.subject-stat {
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: inset 0 1px 0 #fff;
}
.subject-stat-label { color: var(--ink-400); font-size: 0.92rem; }
.subject-stat-value { display: block; font-weight: 700; margin-top: 4px; color: var(--ink-800); letter-spacing: -0.01em; }

.subject-section { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.subject-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.subject-section-title { margin: 0; font-size: 18px; color: var(--ink-900); letter-spacing: -0.01em; }
.subject-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.subject-timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid #e0e0e0;
  box-shadow: var(--shadow-sm);
}
.subject-timeline-label { font-weight: 600; color: var(--ink-800); }
.subject-timeline-value { color: var(--ink-500); }
.subject-note {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-sm);
  line-height: 1.7;
}
.subject-empty { color: var(--ink-400); font-style: italic; }
.subject-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  align-items: start;
}
.subject-meta-label { margin: 0; color: var(--ink-600); font-weight: 700; }
.subject-meta-datetime { margin: 4px 0 0; color: var(--ink-400); }
.subject-form { display: flex; flex-direction: column; gap: var(--space-xs); }
.subject-form-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.subject-label { font-weight: 700; color: var(--ink-800); }
.subject-select {
  min-width: 240px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid #e0e0e0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.subject-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-sm); outline: none; }
.subject-submit { min-width: 120px; padding-left: 18px; padding-right: 18px; }
.subject-meta-card {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.subject-meta-title { margin: 0 0 var(--space-xs); font-weight: 700; color: var(--ink-800); }
.subject-meta-text { margin: 0; color: var(--ink-500); }

/* =====================================
   Agenda Editor
===================================== */
.agenda-editor {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-sm) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.agenda-heading { margin: 0; font-size: 26px; letter-spacing: -0.02em; color: var(--ink-900); }
.agenda-subtext { margin: 0; color: var(--ink-400); }
.agenda-panel {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
}
.agenda-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.agenda-edit-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.agenda-field { display: flex; flex-direction: column; gap: 6px; }
.agenda-field-full { grid-column: 1 / -1; }
.agenda-field-label { font-weight: 700; color: var(--ink-800); }
.agenda-toggle { flex-direction: row; align-items: center; gap: var(--space-xs); }
.agenda-alert { margin: 0; }
.agenda-actions-end { justify-content: flex-end; }
/* =====================================
   Global Links (Main)
===================================== */
.global-page {
  max-width: 960px;
  margin: var(--space-xl) auto;
  padding: 0 var(--space-md);
}
.page-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.page-card h2 {
  margin-bottom: var(--space-sm);
  font-weight: 700;
  color: var(--ink-900);
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.page-header > div:first-child { flex: 1; min-width: 0; }
.page-header h2 { margin: 0 0 4px; }
.page-header .eval-muted { font-size: 0.9rem; }
.global-section { margin-top: var(--space-md); }
.global-section h3 {
  margin: 0 0 var(--space-sm);
  font-weight: 600;
  color: var(--ink-800);
}
.global-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.global-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid #e0e0e0;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  color: var(--ink-900);
  font-weight: 600;
  font-size: 0.96rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.global-link:hover {
  border-color: #d0d0d0;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* =====================================
   User Profile
===================================== */
.profile-page {
  max-width: 960px;
  margin: var(--space-xl) auto;
  padding: 0 var(--space-md);
}
.profile-header {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
}
.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0e0e0;
}
.profile-avatar.placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  color: #404040;
  font-weight: 700;
  font-size: 1.4rem;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  border: 1px solid var(--accent);
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
}
.profile-card {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--surface);
}
.profile-card h3 { margin: 0 0 var(--space-xs); }

/* =====================================
   User 360
===================================== */
.u360-page {
  max-width: 1100px;
  margin: var(--space-xl) auto;
  padding: 0 var(--space-md);
}
.u360-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-sm);
}
.u360-card {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--surface);
}
.u360-card h3 { margin: 0 0 var(--space-xs); }

/* Training start */
.dropdown {
  position: relative;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-top: 6px;
  display: none;
}
.dropdown-item {
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  border-bottom: 1px solid #e0e0e0;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--surface-muted); }
.pill-list {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  font-size: 0.9rem;
}
.pill button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.workflow-view {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) calc(var(--space-xl) + var(--space-sm));
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.workflow-title {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.workflow-desc {
  margin: 0;
  color: var(--ink-400);
  font-size: 15px;
}
.workflow-stat {
  min-width: 200px;
  background: var(--surface-tint);
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.workflow-stat-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink-400);
}
.workflow-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-900);
}
.workflow-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  border: 1px solid rgba(24, 24, 24, 0.08);
  color: var(--ink-800);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.workflow-panel {
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.workflow-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.workflow-section-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.workflow-table-wrap { overflow-x: auto; }
.workflow-table th,
.workflow-table td { font-size: 0.95rem; }
.workflow-empty {
  margin: 0;
  color: var(--ink-400);
  font-size: 15px;
}

.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.flex-1 { flex: 1; }
.clearfix::after { content: ''; display: block; clear: both; }

/* =====================================
   LAYOUT
===================================== */
body.app-shell {
  display: flex;
  background: var(--paper);
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
  padding: var(--space-xl) var(--space-md);
  background: var(--ink-800);
  color: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.sidebar-brand {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.7);
}

.sidebar-nav,
.sidebar-management-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.sidebar-link {
  padding: 12px var(--space-md);
  border-left: 4px solid transparent;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(2px);
}

.sidebar-link.active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-left-color: #808080;
}

header.main-header {
  position: fixed;
  top: 0;
  left: 220px;
  right: 0;
  height: 72px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-xl);
  background: linear-gradient(90deg, var(--ink-900), var(--ink-800));
  color: var(--surface);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 100;
}

.header-left, .header-right, .header-center {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header-center { flex: 1; justify-content: center; }
.header-right { justify-content: flex-end; }

.nav-search {
  flex: 1;
  max-width: 520px;
  position: relative;
}

.nav-search input {
  width: 100%;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #ffffff;
  padding: 12px var(--space-lg);
  color: var(--ink-700);
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid #e0e0e0;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  z-index: 10;
}

.search-results.visible { display: block; }

.notification-menu { position: relative; }

.notification-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: var(--space-sm);
  display: none;
  z-index: 99;
}

.notification-menu:hover .notification-popover { display: block; }

.notification-popover-item {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.notification-popover-item:last-child { border-bottom: none; }

.notification-popover-item p {
  margin: 0 0 4px 0;
  color: var(--ink-700);
  font-size: 0.9rem;
}

.notification-popover-item small {
  color: var(--ink-400);
  font-size: 0.75rem;
}

.notification-empty {
  margin: 0;
  text-align: center;
  color: var(--ink-400);
  font-size: 0.85rem;
}

.notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 var(--space-xs);
  margin-left: var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.search-results a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--ink-700);
}

.main_logged {
  padding: 20px;
  min-height: 100vh;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
}

.main_logged > * {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.main_logged > .full-bleed { width: 100%; }

.main_logged h2 {
  text-align: center;
  font-size: 1.6rem;
  color: var(--ink-700);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: var(--space-xl);
}

.page-card,
.manuals-card,
.manuals-section,
.break-card,
.daily-card,
.notifications-wrapper,
.dispatch-form,
.profile-card,
.batch-card,
.ijp-card,
.ijp-apply-wrapper,
.ijp-form-wrapper,
.candidates-wrapper,
.candidate-view,
.ijp-print-wrapper,
.print-wrapper,
.incident-card,
.home-card,
.info-card,
.mgmt-card,
.mgmt-quick-card,
.status-permissions form,
.category-card,
.question-block,
.question-box,
.form-box,
.optionsContainer,
.memo-summary,
.memo-body,
.comment-form,
.daily-wrapper,
.manuals-content,
.manuals-sidebar {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.table-container,
.manuals-section,
.manuals-card,
.break-card,
.roster-card,
.daily-card,
.notifications-wrapper,
.dispatch-form,
.profile-card,
.batch-card,
.ijp-card,
.ijp-form-wrapper,
.candidates-wrapper,
.candidate-view,
.incident-card,
.home-card,
.info-card,
.mgmt-card { padding: var(--space-xl); }

.table-container {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  width: min(1200px, 100%);
  margin: 0 auto;
}

.manuals-feature-card,
.manuals-mini-link,
.summary-card,
.timeline-item,
.option-note,
.status-pill,
.schedule-chip,
.history-badge {
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* =====================================
   Jony-inspired Assessment Layout
===================================== */
.assess-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.assess-pagehead-center { text-align: center; }
.assess-mine-head { position: relative; }
.assess-pagehead-pills {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  gap: var(--space-sm);
  align-items: center;
}
.assess-title { margin: 0; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; color: var(--ink-900); }
.assess-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.assess-actions-end { justify-content: flex-end; }
.assess-list .assess-panel { padding: var(--space-lg); }
.assess-filters { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (max-width: 700px) {
  .assess-pagehead-pills {
    position: static;
    justify-content: center;
    margin-top: var(--space-sm);
  }
}

.assess-panel {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid #e0e0e0;
  background: var(--surface);
  padding: clamp(18px, 3vw, 28px);
}
.assess-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.assess-section-title { margin: 0; font-size: 18px; color: var(--ink-900); letter-spacing: -0.01em; }

.assess-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
}
.assess-badge-label { text-transform: none; letter-spacing: 0.08em; font-size: 11px; color: var(--ink-400); }
.assess-badge-value { font-weight: 700; color: var(--ink-800); }
.assess-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}
.assess-field {
  background: var(--surface-tint);
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  box-shadow: inset 0 1px 0 #fff;
}
.assess-field-label { margin: 0 0 4px; color: var(--ink-400); font-size: 12px; letter-spacing: 0.04em; text-transform: none; }
.assess-field-value { margin: 0; color: var(--ink-900); font-weight: 700; letter-spacing: -0.01em; }
.assess-question-stack { display: flex; flex-direction: column; gap: var(--space-md); }
.assess-question {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
}
.assess-question-header { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.assess-question-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.assess-question-row > a { margin-left: auto; }
.assess-question-meta { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.assess-question-title { font-size: 1rem; color: var(--ink-800); line-height: 1.6; }
.assess-response { margin-top: var(--space-xs); }
.assess-text-response {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  min-height: 48px;
  line-height: 1.6;
  box-shadow: inset 0 1px 0 #fff;
}
.assess-option-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.assess-option { display: flex; gap: var(--space-xs); align-items: center; }
.assess-option-label { color: var(--ink-800); }
.assess-option-selected { font-weight: 700; color: var(--ink-600); }
.assess-form { display: flex; flex-direction: column; gap: var(--space-md); }
.assess-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm) var(--space-md);
  align-items: center;
}
.assess-score-grid { align-items: flex-start; }
.assess-form-grid-compact { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.assess-form-full { grid-column: 1 / -1; }
.assess-field-inline { display: flex; flex-direction: column; gap: 6px; }
.assess-select,
.assess-input,
.assess-textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid #e0e0e0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  padding: 12px;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.assess-select:focus,
.assess-input:focus,
.assess-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-sm);
  outline: none;
}
.assess-textarea { min-height: 70px; }
.assess-audio { width: 100%; margin-top: var(--space-xs); }
.audio-preview { display: none; }
.assess-actions-end { justify-content: flex-end; }

.assess-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}
.assess-empty-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface);
  border: 1px dashed #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  color: var(--ink-600);
  box-shadow: var(--shadow-sm);
}
.assess-score-grid .assess-field-inline { flex: 1 1 0; }
.assess-table-card {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.assess-mine .assess-section-title { margin: 0; }
.assess-pill-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.assess-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.assess-card-title {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.assess-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.assess-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.assess-table {
  width: 100%;
  border-collapse: collapse;
}

.assess-table th,
.assess-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

.assess-cell-center { text-align: center; }

.assess-table th {
  font-weight: 600;
  color: var(--ink-600);
}

.assess-table tr:hover td { background: var(--surface-tint); }

.assess-meta {
  color: var(--ink-400);
  font-size: 0.9rem;
  margin-top: var(--space-2xs);
}

.assess-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  color: var(--ink-600);
  font-weight: 600;
  font-size: 0.9rem;
}

.assess-pill.success { color: var(--success); background: rgba(128, 128, 128, 0.12); }
.assess-pill.danger  { color: var(--danger);  background: rgba(144, 144, 144, 0.12); }
.assess-pill.pending { color: var(--ink-400); background: rgba(0, 0, 0, 0.05); }
.assess-pill.is-disabled { opacity: 0.45; pointer-events: none; }

.assess-divider {
  height: 1px;
  background: #f0f0f0;
  margin: var(--space-lg) 0;
}

.assess-align-center {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.assess-chip-row {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}

.assess-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
  color: var(--ink-800);
}

.assess-chip-close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-400);
  font-size: 14px;
}

.break-shell,
.break-layout,
.break-board {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.break-layout {
  max-width: 1400px;
  flex-direction: row;
  align-items: flex-start;
}

.break-board { flex: 1 1 auto; }

.break-title {
  margin: 0;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.break-stat {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.break-stat-label {
  margin: 0;
  color: var(--ink-400);
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 12px;
}
.break-stat-value {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.break-stat-meta { color: var(--ink-400); font-size: 0.92rem; }

.break-filter-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
  align-items: end;
}

.break-filter-inline label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.break-card {
  background: var(--surface);
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-panel);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

.break-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.break-card-title {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.break-subcard {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.break-meta {
  color: var(--ink-400);
  font-size: 0.9rem;
}

.break-stack { display: flex; flex-direction: column; gap: var(--space-md); }

.break-table-wrap { overflow-x: auto; }

.break-table-card {
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.break-table {
  width: 100%;
  border-collapse: collapse;
}

.break-table th,
.break-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

.break-table th {
  font-weight: 600;
  color: var(--ink-600);
  background: var(--surface-tint);
  border-bottom: 1px solid #e0e0e0;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
  text-transform: none;
}

.break-table tr:hover td { background: var(--surface-tint); }

.break-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.break-actions,
.break-inline-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}

.break-form input,
.break-form select,
.break-form textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid #e0e0e0;
  background: #fff;
  padding: 10px 12px;
  font-size: 0.95rem;
}

.break-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
}

.summary-card {
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-card strong { font-size: 1.4rem; color: var(--ink-900); }

.break-layout .filters-panel {
  width: 320px;
  position: sticky;
  top: 96px;
}

.filters-panel {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 8px rgba(24, 24, 24, 0.08);
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.floating-filters { align-self: flex-start; }

.filters-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.break-filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
}

.break-filter-form label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: #181818;
  gap: 4px;
}

.break-filter-form input,
.break-filter-form select {
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.filters-panel .filter-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.filters-panel .filter-actions .btn { flex: 1 1 160px; justify-content: center; }

.agent-cell {
  display: flex;
  flex-direction: column;
}

.agent-cell small { color: #707070; }

.actions-cell { display: flex; gap: 8px; }

.break-form-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: inset 0 1px 0 #fff;
  display: grid;
  gap: var(--space-md);
}

.break-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  color: var(--ink-800);
}

.break-form-grid input,
.break-form-grid select { background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%); }

.break-inline-form {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  flex-wrap: wrap;
}

.icon-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid #f0f0f0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  color: var(--ink-700);
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: #e0e0e0;
}

.icon-btn.success { background: rgba(128, 128, 128, 0.12); color: #404040; border-color: #e0e0e0; }
.icon-btn.danger { background: rgba(144, 144, 144, 0.14); color: #505050; border-color: #e0e0e0; }
.icon-btn.muted { background: #f0f0f0; color: #404040; }

.chip.warning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: #606060;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.82rem;
  margin-left: 6px;
  border: 1px solid #e0e0e0;
  box-shadow: var(--shadow-sm);
}

.conflict-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f0f0f0;
  color: #505050;
  font-weight: 700;
  border: 1px solid #e0e0e0;
  box-shadow: var(--shadow-sm);
}

.break-inline-sort { display: inline; }

.break-sort {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.break-sort::after {
  content: '⇅';
  font-size: 0.75rem;
  color: #a0a0a0;
}

.break-sort.active::after { color: #505050; }

.break-view-tabs { display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; }

.break-layout .empty-state { margin: 0; }

.break-pill.subtle {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  color: var(--ink-600);
  box-shadow: var(--shadow-sm);
}

.policy-callout {
  margin: var(--space-sm) 0 var(--space-md);
  padding: var(--space-md);
  border: 1px solid #d0d0d0;
  border-radius: var(--radius-md);
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
}

.policy-copy { display: flex; flex-direction: column; gap: 4px; }

.policy-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.policy-meta li {
  min-width: 140px;
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}

.policy-meta li span {
  color: #505050;
  text-transform: none;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.break-hint { color: var(--ink-400); margin: 0; }

.break-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.break-timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-md);
  background: var(--surface-tint);
}

.break-timeline-item span { color: var(--ink-400); }

/* =====================================
   Coaching Layout
===================================== */
.coach-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.coach-stat {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.coach-stat-label {
  margin: 0;
  color: var(--ink-400);
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 12px;
}
.coach-stat-value {
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.coach-stat-meta { color: var(--ink-400); font-size: 0.92rem; }

.coach-title {
  margin: 0;
  font-size: 1.8rem;
  color: var(--ink-900);
}

.coach-meta {
  color: var(--ink-400);
  margin: 0;
}

.coach-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
}
.coach-pill.subtle {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  color: var(--ink-600);
  box-shadow: var(--shadow-sm);
}

.coach-pill-label {
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--ink-400);
}

.coach-pill-value {
  font-weight: 700;
  color: var(--ink-800);
}

.coach-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

.coach-table-card {
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.coach-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
  align-items: end;
}

.coach-filters label { display: flex; flex-direction: column; gap: 4px; }
.coach-filter { display: flex; flex-direction: column; gap: 6px; }
.coach-filters .coach-select-all {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-600);
}

.coach-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.coach-view-tabs { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; }

.coach-card-title {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.coach-table {
  width: 100%;
  border-collapse: collapse;
}

.coach-table th,
.coach-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

.coach-table th {
  font-weight: 600;
  color: var(--ink-600);
  background: var(--surface-tint);
  border-bottom: 1px solid #e0e0e0;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
  text-transform: none;
}

.coach-table tr:hover td { background: var(--surface-tint); }

.coach-stack { display: flex; flex-direction: column; gap: var(--space-md); }

.coach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-sm);
}

.coach-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.coach-input,
.coach-select {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid #e0e0e0;
  background: #fff;
  padding: 10px 12px;
  font-size: 0.95rem;
}

.coach-actions-end { display: flex; justify-content: flex-end; gap: var(--space-sm); }

.coach-panel {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.coach-panel.muted { background: var(--surface-tint); }

.coach-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-800);
  line-height: 1.6;
}

.coach-element-group { margin-bottom: var(--space-sm); }

.coach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
  color: var(--ink-800);
  font-weight: 600;
  font-size: 0.9rem;
}

.coach-chip-close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-400);
  font-size: 14px;
}

.coach-chip-row {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.coach-multi {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.coach-typeahead { position: relative; }

.coach-typeahead-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-xs);
  max-height: 220px;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: var(--space-2xs);
  background: #fff;
  box-shadow: var(--shadow-sm);
  z-index: 20;
}

.coach-typeahead-menu.is-open { display: flex; }

.coach-typeahead-empty {
  padding: 8px 10px;
  font-size: 0.9rem;
  color: var(--ink-500);
}

.coach-multi-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coach-multi-list {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-xs);
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.coach-multi-item {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink-800);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.coach-multi-item:hover { background: #ffffff; }
.coach-multi-item.is-active { background: #f0f0f0; border-color: #d0d0d0; }

.coach-element-notes { display: flex; flex-direction: column; gap: var(--space-xs); }

.coach-element-note {
  border: 1px dashed #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.coach-element-note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
}

.coach-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
}

.coach-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.coach-detail-strong {
  margin: 0;
  color: var(--ink-900);
  font-weight: 700;
}

.coach-span { grid-column: 1 / -1; }

.coach-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
}

/* =====================================
   Coaching filter bar (cfl-*)
===================================== */
.coach-page-head { display: flex; justify-content: space-between; align-items: flex-start; }
.cfl-wrap {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid rgba(24,24,24,0.07);
  padding: 10px 0 8px;
  margin-bottom: var(--space-sm);
}
.cfl-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cfl-group { position: relative; }
.cfl-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid rgba(24,24,24,0.16);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, background 0.12s;
}
.cfl-trigger:hover { border-color: var(--ink-400); background: var(--surface-muted); }
.cfl-trigger[aria-expanded="true"] { border-color: var(--accent); background: var(--surface-muted); }
.cfl-chevron { flex-shrink: 0; color: var(--ink-400); transition: transform 0.15s; }
.cfl-trigger[aria-expanded="true"] .cfl-chevron { transform: rotate(180deg); }
.cfl-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid rgba(24,24,24,0.1);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  z-index: 50;
  padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
}
.cfl-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}
.cfl-option:hover { background: var(--surface-muted); }
.cfl-option input[type=checkbox] { margin: 0; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.cfl-empty { padding: 10px 14px; font-size: 13px; color: var(--ink-400); margin: 0; }
.cfl-panel-search-wrap { padding: 6px 10px; border-bottom: 1px solid rgba(24,24,24,0.06); }
.cfl-panel-search {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(24,24,24,0.15);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-700);
  background: var(--surface-muted);
}
.cfl-panel-search:focus { outline: none; border-color: var(--accent); }
.cfl-date-panel { min-width: 220px; padding: 6px 0 10px; }
.cfl-preset-list { display: flex; flex-direction: column; padding: 0 0 4px; border-bottom: 1px solid rgba(24,24,24,0.06); }
.cfl-preset-btn {
  text-align: left;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink-700);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.1s;
}
.cfl-preset-btn:hover { background: var(--surface-muted); }
.cfl-custom-range { display: flex; align-items: center; gap: 6px; padding: 8px 12px 0; }
.cfl-date-input {
  flex: 1;
  height: 28px;
  padding: 0 6px;
  border: 1px solid rgba(24,24,24,0.15);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-700);
  background: var(--surface);
}
.cfl-date-input:focus { outline: none; border-color: var(--accent); }
.cfl-range-sep { color: var(--ink-300); font-size: 13px; flex-shrink: 0; }
.cfl-actions { display: flex; align-items: center; gap: 6px; }
.cfl-chips { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cfl-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(24,24,24,0.15);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-600);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.cfl-chip:hover { background: var(--surface-muted); border-color: var(--ink-300); }
.cfl-chip.is-on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.cfl-active-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  padding: 2px 8px;
  background: rgba(96,96,96,0.08);
  border-radius: var(--radius-pill);
}
.cfl-results-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cfl-results-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.cfl-results-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-600);
}
.cfl-status-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
}
.cfl-status--pending   { background: rgba(234,179,8,0.12);  color: #854d0e; }
.cfl-status--approved  { background: rgba(34,197,94,0.12);  color: #166534; }
.cfl-status--completed { background: rgba(99,102,241,0.12); color: #3730a3; }
.cfl-status--archived  { background: var(--surface-muted);  color: var(--ink-400); }
.cfl-agent-more {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500);
}
.coach-table td { padding: 9px 12px; }
.cfl-td-id { color: var(--ink-400); font-size: 12px; }
.cfl-agents-cell { white-space: nowrap; }
.coach-results-section { margin-top: var(--space-xs); }

/* cfl-* button overrides — the flat-UI !important block at the bottom of this file
   forces background:#111111 on all <button> elements; these rules restore the
   correct appearance for filter triggers, chips, and preset buttons. */
.cfl-trigger,
.cfl-chip,
.cfl-preset-btn {
  min-height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}
.cfl-trigger { background: var(--surface) !important; border: 1px solid rgba(24,24,24,0.16) !important; color: var(--ink-700) !important; font-size: 13px !important; padding-left: 12px !important; padding-right: 12px !important; }
.cfl-trigger:hover { background: var(--surface-muted) !important; border-color: var(--ink-400) !important; }
.cfl-trigger[aria-expanded="true"] { background: var(--surface-muted) !important; border-color: var(--accent) !important; }
.cfl-chip { background: var(--surface) !important; border: 1px solid rgba(24,24,24,0.15) !important; color: var(--ink-600) !important; font-size: 12px !important; padding-left: 10px !important; padding-right: 10px !important; }
.cfl-chip:hover { background: var(--surface-muted) !important; border-color: var(--ink-300) !important; color: var(--ink-700) !important; }
.cfl-chip.is-on { background: var(--ink-900) !important; border-color: var(--ink-900) !important; color: #fff !important; }
.cfl-preset-btn { background: transparent !important; border: none !important; color: var(--ink-700) !important; font-size: 13px !important; padding-left: 14px !important; padding-right: 14px !important; }
.cfl-preset-btn:hover { background: var(--surface-muted) !important; }

/* =====================================
   Daily Tasks
===================================== */
.daily-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: transparent;
}

.daily-title {
  margin: 0;
  font-size: 1.65rem;
  color: var(--ink-900);
  font-weight: 700;
}

.daily-meta {
  color: var(--ink-400);
  margin: 0;
}

.daily-subtitle {
  margin: 0.25rem 0 0;
  color: #6b7280;
  font-size: 0.95rem;
}

.daily-pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-md);
}

.daily-pagehead-left {
  text-align: center;
  margin: 0 auto;
}

.daily-pagehead-left--center {
  text-align: center;
}

/* Keep a single solid primary color on this page (no gradient emphasis). */
.daily-shell .btn.btn-primary {
  background: #1e6cff;
  border-color: rgba(30, 108, 255, 0.55);
  color: #fff;
}
.daily-shell .btn.btn-primary:hover { background: #185ee0; }
.daily-shell .btn.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.daily-controls {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f5f7fa;
}

.daily-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.daily-control {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.daily-control-label {
  font-size: 0.78rem;
  color: #6b7280;
}

.daily-control-input {
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
  font-size: 0.92rem;
  color: #111827;
}
.daily-control-input:disabled {
  color: #111827;
  opacity: 1;
  background: #fff;
}

.daily-pill-label {
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--ink-400);
}

.daily-pill-value {
  font-weight: 700;
  color: var(--ink-800);
}

.daily-card {
  background: var(--surface);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-panel);
  padding: var(--space-lg);
  box-shadow: none;
}

.daily-table-card {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--surface);
  box-shadow: none;
}

.daily-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.daily-card-title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.daily-stack { display: flex; flex-direction: column; gap: var(--space-md); }

.daily-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.daily-form input,
.daily-form select,
.daily-form textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid #e0e0e0;
  background: #fff;
  padding: 10px 12px;
  font-size: 0.95rem;
}

.daily-form textarea { min-height: 70px; }

.daily-actions { display: flex; justify-content: flex-end; }

.daily-table-wrap { overflow-x: auto; }

.daily-table {
  width: 100%;
  border-collapse: collapse;
}

.daily-table th,
.daily-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

.daily-table th {
  font-weight: 600;
  color: #6b7280;
  background: #f7f9fb;
  border-bottom: 1px solid #e5e7eb;
  letter-spacing: normal;
  font-size: 0.84rem;
  text-transform: none;
}

.daily-table tr:hover td { background: rgba(17, 17, 17, 0.02); }

.daily-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
}

.daily-table-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.daily-perpage {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.daily-perpage-label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.daily-perpage-select {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
  font-size: 0.92rem;
  color: #111827;
}

.daily-sort {
  color: inherit;
  text-decoration: none;
}
.daily-sort:hover {
  text-decoration: underline;
}

.daily-empty-wrap { display: flex; justify-content: center; }

.daily-empty {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 28px 24px;
  background: #f9fafb;
  text-align: center;
  width: 100%;
  max-width: 720px;
}
.daily-empty-title {
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}
.daily-empty-subtitle {
  color: #6b7280;
  font-size: 0.92rem;
}

.daily-desc { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.daily-desc-strong { font-weight: 700; color: #111827; }
.daily-desc-muted { color: #6b7280; font-size: 0.9rem; }

.daily-note { margin-top: -12px; }

.task-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.task-form select,
.task-form input[type="number"],
.task-form input[type="text"] {
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
  font-size: 0.92rem;
  color: #111827;
}
.task-form select { min-width: 220px; }
.task-form input[type="number"] { width: 110px; }
.task-form input[type="text"] { min-width: 260px; flex: 1 1 260px; }
.task-form .btn { height: 38px; border-radius: 8px; padding: 0 14px; }
.task-form.is-disabled { opacity: 0.85; }

.daily-zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.daily-entries-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .daily-pagehead { flex-direction: column; align-items: stretch; }
  .daily-control { min-width: 100%; }
}

/* =====================================
   Day-off Swaps
===================================== */
.dayoff-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.dayoff-title {
  margin: 0;
  font-size: 1.6rem;
  color: var(--ink-900);
}

.dayoff-meta {
  color: var(--ink-400);
  margin: 0;
}

.dayoff-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
}

.dayoff-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.dayoff-card-title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.dayoff-stack { display: flex; flex-direction: column; gap: var(--space-md); }

.dayoff-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.dayoff-form input,
.dayoff-form select,
.dayoff-form textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid #e0e0e0;
  background: #fff;
  padding: 10px 12px;
  font-size: 0.95rem;
}

.dayoff-form textarea { min-height: 70px; }

.dayoff-span { grid-column: 1 / -1; }

.dayoff-actions {
  display: flex;
  justify-content: flex-end;
}

.dayoff-table-wrap { overflow-x: auto; }

.dayoff-table {
  width: 100%;
  border-collapse: collapse;
}

.dayoff-table th,
.dayoff-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

.dayoff-table th { font-weight: 600; color: var(--ink-600); }

.dayoff-log {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.dayoff-inline-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.dayoff-inline-form textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid #e0e0e0;
  background: #fff;
  padding: 8px 10px;
  font-size: 0.95rem;
}

.dayoff-inline-actions { display: flex; gap: var(--space-xs); }

@media (max-width: 1100px) {
  .break-layout { flex-direction: column; }
  .break-layout .filters-panel {
    position: static;
    width: 100%;
  }
}
.assess-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-lg);
  align-items: start;
}

.assess-main { display: flex; flex-direction: column; gap: var(--space-md); }

.assess-aside { display: flex; flex-direction: column; gap: var(--space-sm); }

.assess-sticky { position: sticky; top: 96px; }

.assess-aside-block { display: flex; flex-direction: column; gap: var(--space-2xs); }

@media (max-width: 960px) {
  .assess-layout { grid-template-columns: 1fr; }
  .assess-sticky { position: static; }
}

.assess-warning {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  color: #505050;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  margin-top: var(--space-sm);
  box-shadow: var(--shadow-sm);
}

.assess-note {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  color: #303030;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  margin-top: var(--space-sm);
  box-shadow: var(--shadow-sm);
}

.assess-recorder-actions { align-items: center; }

.assess-timer { color: #fff; }

/* =====================================
   BUTTON SYSTEM
===================================== */
button,
input[type="submit"],
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-link,
.mark-read-btn,
.favorite-btn,
.note-add-btn,
.note-remove-btn,
.quick-access-form button,
.dispatch-actions a,
.cta-btn,
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border-radius: var(--radius-pill);
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

button:disabled,
.btn:disabled,
input[type="submit"]:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary,
.mark-read-btn,
.dispatch-actions a,
.daily-card button,
.dispatch-form button,
.submit-eval,
.daily-task-type-card button {
  background: var(--ink-800);
  color: var(--surface);
}

.btn-primary:hover,
.mark-read-btn:hover,
.dispatch-actions a:hover,
.daily-card button:hover,
.dispatch-form button:hover,
.submit-eval:hover {
  background: var(--accent);
  box-shadow: var(--shadow-sm);
}

.btn-secondary,
.btn-ghost,
.note-add-btn,
.note-remove-btn,
.favorite-btn,
.quick-access-form button,
.link-button,
.btn-link {
  background: transparent;
  border: 1px solid #e0e0e0;
  color: var(--ink-700);
}

.btn-secondary:hover,
.btn-ghost:hover,
.favorite-btn:hover,
.link-button:hover,
.btn-link:hover {
  border-color: var(--ink-800);
  color: var(--ink-800);
}

/* Inline link-style buttons (override pill button system) */
button.btn-inline-link,
.btn-inline-link {
  display: inline;
  align-items: initial;
  justify-content: initial;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-weight: 600;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.btn-inline-link:hover,
.btn-inline-link:hover { background: transparent; }
button.btn-inline-link.btn-inline-link--danger,
.btn-inline-link.btn-inline-link--danger { color: var(--danger); }
button.btn-inline-link.btn-inline-link--danger:hover,
.btn-inline-link.btn-inline-link--danger:hover { color: var(--danger); opacity: 0.85; }

.btn-danger,
.red_backgrounded a,
.btn-link.danger {
  background: var(--danger);
  color: var(--surface);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  color: var(--ink-700);
}

.cta-btn { border: 1px solid transparent; font-size: 1rem; padding: 12px 28px; }
.cta-btn.primary { background: var(--ink-800); color: var(--surface); }
.cta-btn.ghost { border-color: #e0e0e0; color: var(--ink-700); }
.cta-btn.ghost:hover { background: var(--surface-tint); }

/* =====================================
   FORMS and INPUTS
===================================== */
form,
#newForm,
.daily-card form,
.daily-card .comment-form,
.dispatch-form,
.mgmt-form,
.status-task-form,
.question-builder,
.comment-form,
.wiki-process-form,
.favorite-form,
.favorite-form-inline {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

label,
.dispatch-form label,
.status-permissions label,
.daily-card label,
.task-item label,
.option-label,
.sidebar-label,
.listing-header {
  font-weight: 600;
  color: var(--ink-700);
  font-size: 0.9rem;
}

select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
textarea,
.nav-search input,
.break-form select,
.break-form input,
.roster-page select,
.roster-page textarea,
.daily-card input,
.daily-card select,
.daily-card textarea,
.dispatch-form select,
.option-note textarea,
.option-note input,
.status-permissions input[type="text"],
.status-permissions select,
.wiki-process-form input,
.wiki-process-form select,
.wiki-process-form textarea,
.comment-form textarea,
.manuals-search input {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid #e0e0e0;
  background: var(--surface-tint);
  padding: 12px var(--space-sm);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(96, 96, 96, 0.15);
  outline: none;
}

.option-note-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.option-note-controls { flex-wrap: wrap; align-items: center; }
.option-note .timestamp-type { width: 170px; }
.option-note .timestamp-point { flex: 1; min-width: 140px; }
.option-note .timestamp-range { display: none; width: 100%; gap: var(--space-sm); }
.option-note .timestamp-range input { flex: 1; min-width: 120px; }
.option-note.range-mode .timestamp-range { display: flex; }
.option-note.range-mode .timestamp-point { display: none; }

fieldset,
.section-box fieldset,
.question-builder,
.optionsContainer {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-lg);
}

legend,
.section-box legend { font-weight: 600; }

.form-grid,
.filter-grid,
.form-grid-2,
.meta-info,
.meta-grid,
.mgmt-grid,
.mgmt-pair,
.home-grid,
.daily-card .comment-form,
.landing-features,
.manuals-feature-grid,
.break-summary,
.shift-grid,
.roster-page .roster-grid,
.manuals-layout,
.process-toolbar,
.filters-row,
.option-note-controls,
.filter-actions,
.shift-actions,
.actions,
.actions-inline,
.selector-bar,
.question-builder .qb-row,
.manuals-sidebar,
.manuals-content,
.info-grid,
.mgmt-quick-grid,
.category-container { gap: var(--space-md); }

.form-grid,
.form-grid-2,
.filter-grid,
.meta-info,
.meta-grid,
.mgmt-grid,
.mgmt-pair,
.home-grid,
.landing-features,
.manuals-feature-grid,
.break-summary,
.shift-grid,
.roster-page .roster-grid,
.info-grid,
.mgmt-quick-grid,
.category-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.option-row { display: flex; gap: var(--space-sm); align-items: center; }
.option-row input[type="text"], .option-row input[type="number"] { flex: 1; }
.checkbox-inline,
.inline-form,
.favorite-form-inline,
.option-label,
.option-note-controls,
.actions-inline,
.shift-actions,
.break-date-picker,
.header-left,
.header-right,
.header-center,
.nav-search,
.quick-access-form.header-quick-access,
.actions,
.ijp-actions,
.inline-form form {
  display: flex;
  align-items: center;
}

/* =====================================
   TABLES
===================================== */
.mc-table,
.main_logged table,
.results-table,
.daily-table,
.dispatch-table,
.schedule-grid,
.schedule-table,
.daily-task-type-table,
table.candidates { width: 100%; border-collapse: collapse; }

.mc-table th,
.mc-table td,
.main_logged th,
.main_logged td,
.results-table th,
.results-table td,
.daily-table th,
.daily-table td,
.dispatch-table th,
.dispatch-table td,
.schedule-grid th,
.schedule-grid td,
.schedule-table th,
.schedule-table td,
.daily-task-type-table th,
.daily-task-type-table td,
table.candidates th,
table.candidates td {
  padding: 14px var(--space-md);
  border-bottom: 1px solid #f0f0f0;
}

.mc-table thead th,
.main_logged th,
.results-table th,
.daily-table th,
.dispatch-table th,
.schedule-grid th,
.schedule-table th,
.daily-task-type-table th,
table.candidates th {
  text-transform: none;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  background: var(--surface-muted);
}

.mc-table tbody tr:nth-child(even),
.main_logged tr:nth-child(even),
.results-table tr:nth-child(even) { background: var(--surface-tint); }

.mc-table tbody tr:hover,
.main_logged tr:hover,
.results-table tr:hover,
.daily-table tr:hover,
.dispatch-table tr:hover,
.schedule-grid tr:hover,
.schedule-table tr:hover { background: var(--accent-soft); }

.mc-table td.actions,
.mc-table th.actions,
schedule-grid th,
schedule-grid td { text-align: center; }

/* =====================================
   ALERTS, STATUS and BADGES
===================================== */
.alert,
.error,
p.error,
.success,
p.success,
.success-message,
.error-message,
success-banner {
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid transparent;
  font-weight: 600;
}

.error,
p.error,
.error-message { background: rgba(144, 144, 144, 0.1); border-color: var(--danger); color: var(--danger); }
.success,
p.success,
success-message { background: rgba(128, 128, 128, 0.12); border-color: var(--success); color: var(--success); }

.status-pill,
.schedule-chip,
.history-badge,
.badge,
.pill,
.status-badge {
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
}

.status-pill.status-pending { background: var(--warning); color: #fff; }
.status-pill.status-approved,
.status-pill.status-completed,
.status-pill.status-selected,
.status-badge-active,
.badge-active { background: var(--success); color: #fff; }
.status-pill.status-denied,
.status-pill.status-cancelled,
.status-pill.status-rejected,
.badge-inactive { background: var(--danger); color: #fff; }

/* =====================================
   SPECIAL MODULES
===================================== */
.auth-body { background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.85)), var(--paper); }

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxl) var(--space-lg);
}

.auth-card {
  width: min(980px, calc(100% - 40px));
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.auth-card-compact { width: min(520px, calc(100% - 40px)); }
.auth-card-mid    { width: min(720px, calc(100% - 40px)); }
.auth-card-wide   { width: min(980px, calc(100% - 40px)); }

.auth-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
}

.auth-title {
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-xs);
}

.auth-subtitle {
  margin: 0;
  color: var(--ink-400);
  font-size: 1rem;
  line-height: 1.6;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.auth-form-spaced { gap: var(--space-lg); }

.auth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-input {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid #e0e0e0;
  background: var(--surface-tint);
  padding: 14px 16px;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-input:focus {
  border-color: var(--ink-800);
  box-shadow: 0 8px 24px rgba(12, 12, 12, 0.08);
  background: #fff;
  outline: none;
}

.auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  margin-top: var(--space-sm);
}

.auth-actions.stack {
  flex-direction: column;
  align-items: stretch;
}

.auth-link {
  font-weight: 600;
  color: var(--ink-700);
}

.auth-link:hover { color: var(--accent-strong); }
.auth-link-btn { background: black; color: white; border-radius: 8px; padding: 6px 14px; text-align: center; }
.auth-link-btn:hover { color: white; opacity: .85; }

.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border-radius: var(--radius-pill);
  border: 1px solid #e0e0e0;
  background: #fff;
  color: var(--ink-800);
  padding: 12px 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-decoration: none;
}

.auth-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.auth-button.primary {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}

.auth-button.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.auth-button.ghost {
  background: var(--surface-muted);
  color: var(--ink-700);
}

.auth-button.stretch { width: 100%; }

.auth-alert { margin-bottom: 0; }

.auth-footnote {
  text-align: center;
  color: var(--ink-400);
  margin: 0;
  font-size: 0.95rem;
}

/* =====================================
   FAQ
===================================== */
.faq-shell {
  --faq-ink: #111111;
  --faq-muted: #5f5f5f;
  --faq-line: rgba(0, 0, 0, 0.12);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(28px, 5vw, 96px) clamp(20px, 6vw, 120px) clamp(56px, 7vw, 120px);
  color: var(--faq-ink);
  font-family: "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Neue Haas Grotesk Text Pro", "Nimbus Sans", sans-serif;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 72px);
  position: relative;
  background: #ffffff;
}

.faq-lede {
  margin: 0;
  color: var(--faq-muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.faq-meta {
  margin: 0;
  color: var(--faq-muted);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: none;
  font-family: "SF Mono", SFMono-Regular, Menlo, monospace;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--faq-line);
  background: transparent;
}

.faq-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--faq-line);
  background: #ffffff;
  color: var(--faq-ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.faq-chip--primary {
  background: var(--faq-ink);
  color: #ffffff;
  border-color: var(--faq-ink);
}

.faq-chip--ghost { background: transparent; }

.faq-chip:hover { border-color: rgba(0, 0, 0, 0.3); }

.faq-chip--primary:hover { background: #000000; }

.faq-chip:focus-visible,
.faq-toc a:focus-visible,
.faq-item summary:focus-visible {
  outline: 2px solid var(--faq-ink);
  outline-offset: 2px;
}

.faq-facts {
  margin: 0;
  display: grid;
  gap: var(--space-sm);
}

.faq-facts div {
  display: grid;
  gap: 4px;
}

.faq-facts dt {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  color: var(--faq-muted);
}

.faq-facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--faq-ink);
}

.faq-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--space-sm);
}

.faq-stat__value {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--faq-ink);
  letter-spacing: -0.02em;
}

.faq-stat__label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: none;
  color: var(--faq-muted);
}

.faq-stat-note {
  margin: var(--space-sm) 0 0;
  color: var(--faq-muted);
  font-size: 0.95rem;
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.faq-rail {
  position: sticky;
  top: 96px;
  align-self: start;
  display: grid;
  gap: var(--space-lg);
  padding-right: clamp(16px, 2vw, 28px);
  border-right: 1px solid var(--faq-line);
}

.faq-rail-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--faq-line);
  border-radius: 0;
  padding: 0 0 var(--space-lg);
  box-shadow: none;
}

.faq-rail-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.faq-rail-card--support {
  background: transparent;
  color: inherit;
  border: 0;
  padding-bottom: var(--space-lg);
  box-shadow: none;
}

.faq-rail-card--support a {
  color: inherit;
  font-weight: 700;
}

.faq-rail-title {
  margin: 0 0 var(--space-2xs);
  font-size: 1.05rem;
  font-weight: 700;
}

.faq-rail-body {
  margin: 0 0 var(--space-xs);
  color: inherit;
}

.faq-rail-note {
  margin: 0;
  color: var(--faq-muted);
  font-size: 0.85rem;
}

.faq-rail-list {
  margin: 0;
  padding-left: 18px;
  color: var(--faq-muted);
  display: grid;
  gap: var(--space-2xs);
}

.faq-toc {
  display: grid;
  gap: var(--space-xs);
}

.faq-toc a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 0;
  border-bottom: 1px solid var(--faq-line);
  color: var(--faq-ink);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.faq-toc a:last-child { border-bottom: 0; }

.faq-toc a span {
  font-family: "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  color: var(--faq-muted);
  letter-spacing: 0.12em;
}

.faq-toc a:hover { color: #000000; }

.faq-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: clamp(26px, 4vw, 40px) 0;
  box-shadow: none;
  position: relative;
  scroll-margin-top: 110px;
}

.faq-panel + .faq-panel { border-top: 1px solid var(--faq-line); }

.faq-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(12px, 2.5vw, 24px);
}

.faq-grid--modules { counter-reset: faq-module; }

.faq-grid--guides { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.faq-card {
  padding: var(--space-md);
  border: 1px solid var(--faq-line);
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  position: relative;
  transition: border-color 0.2s ease;
}

.faq-card:hover { border-color: rgba(0, 0, 0, 0.25); }

.faq-card h3 { margin: 0 0 var(--space-2xs); }
.faq-card p { margin: 0; color: var(--faq-muted); }

.faq-card--module::before {
  counter-increment: faq-module;
  content: counter(faq-module, decimal-leading-zero);
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  font-size: 0.68rem;
  color: var(--faq-muted);
  font-family: "SF Mono", SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faq-card--guide { border-left: 0; }

.faq-list-bullets {
  margin: var(--space-sm) 0 0;
  padding-left: 20px;
  color: var(--faq-muted);
  display: grid;
  gap: var(--space-2xs);
}

.faq-steps {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
  counter-reset: faq-step;
}

.faq-steps li {
  position: relative;
  padding-left: 24px;
  color: var(--faq-muted);
  line-height: 1.6;
}

.faq-steps li::before {
  counter-increment: faq-step;
  content: counter(faq-step) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--faq-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.faq-accordion {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--faq-line);
}

.faq-item {
  border: 0;
  border-bottom: 1px solid var(--faq-line);
  border-radius: 0;
  background: transparent;
  padding: var(--space-sm) 0;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

.faq-item[open] { border-color: rgba(0, 0, 0, 0.22); }

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 32px;
  font-size: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.05rem;
  color: var(--faq-muted);
}

.faq-item[open] summary::after { content: "-"; }

.faq-item p {
  margin: var(--space-xs) 0 0;
  color: var(--faq-muted);
}

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

.faq-rail-card:nth-child(2) { animation-delay: 0.08s; }
.faq-rail-card:nth-child(3) { animation-delay: 0.16s; }
.faq-body .faq-panel:nth-of-type(1) { animation-delay: 0.12s; }
.faq-body .faq-panel:nth-of-type(2) { animation-delay: 0.18s; }
.faq-body .faq-panel:nth-of-type(3) { animation-delay: 0.24s; }
.faq-body .faq-panel:nth-of-type(4) { animation-delay: 0.3s; }

.faq-grid--modules .faq-card,
.faq-grid--guides .faq-card,
.faq-item { animation: faq-rise 0.5s ease both; }

.faq-grid--modules .faq-card:nth-child(1) { animation-delay: 0.04s; }
.faq-grid--modules .faq-card:nth-child(2) { animation-delay: 0.08s; }
.faq-grid--modules .faq-card:nth-child(3) { animation-delay: 0.12s; }
.faq-grid--modules .faq-card:nth-child(4) { animation-delay: 0.16s; }
.faq-grid--modules .faq-card:nth-child(5) { animation-delay: 0.2s; }
.faq-grid--modules .faq-card:nth-child(6) { animation-delay: 0.24s; }

.faq-grid--guides .faq-card:nth-child(1) { animation-delay: 0.06s; }
.faq-grid--guides .faq-card:nth-child(2) { animation-delay: 0.12s; }
.faq-grid--guides .faq-card:nth-child(3) { animation-delay: 0.18s; }
.faq-grid--guides .faq-card:nth-child(4) { animation-delay: 0.24s; }

.faq-accordion .faq-item:nth-child(1) { animation-delay: 0.05s; }
.faq-accordion .faq-item:nth-child(2) { animation-delay: 0.1s; }
.faq-accordion .faq-item:nth-child(3) { animation-delay: 0.15s; }
.faq-accordion .faq-item:nth-child(4) { animation-delay: 0.2s; }
.faq-accordion .faq-item:nth-child(5) { animation-delay: 0.25s; }

@media (max-width: 1080px) {
}

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-rail {
    position: static;
    padding-right: 0;
    border-right: none;
  }
}

@media (max-width: 720px) {
  .faq-shell { padding: var(--space-xl) var(--space-md) var(--space-xxl); }
  .faq-toc { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .faq-panel { padding: var(--space-lg) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-shell * {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================
   GLOBAL SEARCH
===================================== */
.global-shell {
  max-width: 1200px;
  margin: 72px auto 96px;
  padding: 0 24px;
}

.global-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 4vw, 40px);
}

.global-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.global-title {
  margin: 0 0 var(--space-2xs);
  letter-spacing: -0.02em;
}

.global-subtitle {
  margin: 0;
  color: var(--ink-400);
}

.global-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.global-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.global-input:focus {
  border-color: var(--ink-800);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.global-button {
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid #e0e0e0;
  background: var(--surface);
  color: var(--ink-800);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.global-button.primary {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}

.global-button:hover { box-shadow: var(--shadow-md); }

.global-hint {
  margin: 0 0 var(--space-sm);
  color: var(--ink-400);
  font-weight: 700;
  text-align: center;
}

.global-syntax {
  margin: 0 0 var(--space-md);
  color: var(--ink-500);
  font-size: 0.94rem;
  line-height: 1.5;
}

.global-syntax code {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-tint);
  color: var(--ink-800);
}

.global-error {
  margin: 0 0 var(--space-md);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  color: var(--ink-800);
  font-weight: 700;
}

.global-query-card {
  margin-bottom: var(--space-md);
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-tint);
}

.global-query-title {
  margin: 0 0 var(--space-xs);
  color: var(--ink-700);
  font-weight: 700;
}

.global-query-code {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink-800);
  font-size: 0.92rem;
  line-height: 1.5;
}

.global-section { margin-top: var(--space-md); }

.global-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.global-section-head h3 { margin: 0; letter-spacing: -0.01em; }

.global-count {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  color: var(--ink-700);
  font-weight: 700;
  font-size: 0.9rem;
}

.global-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.global-item {
  padding: 12px 14px;
  border-bottom: 1px solid #e0e0e0;
  background: #ffffff;
}

.global-item:last-child { border-bottom: none; }

.global-link {
  display: inline-flex;
  font-weight: 700;
  color: var(--ink-900);
  text-decoration: none;
}

.global-link:hover { color: var(--accent-strong); }

.global-meta {
  margin: 4px 0 0;
  color: var(--ink-500);
  font-size: 0.93rem;
}

.global-empty {
  margin: 0;
  color: var(--ink-400);
}

/* =====================================
   AGENDA EDITOR
===================================== */
.agenda-editor {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.agenda-title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.agenda-muted { margin: 0; color: var(--ink-400); }

.agenda-editor-form { display: flex; flex-direction: column; gap: var(--space-md); }
.agenda-panels { display: flex; flex-direction: column; gap: var(--space-md); }

.agenda-panel {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.agenda-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid #f0f0f0;
}
.agenda-panel-title {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.agenda-panel-subtext {
  margin: 0;
  color: var(--ink-400);
}
.agenda-eyebrow {
  margin: 0 0 4px;
  text-transform: none;
  letter-spacing: 0.14em;
  color: var(--ink-400);
  font-size: 12px;
}
.agenda-field-grid,
.agenda-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}
.agenda-panel-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
}
.agenda-panel-column {
  background: var(--surface-tint);
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: inset 0 1px 0 #fff;
}

.agenda-field { display: flex; flex-direction: column; gap: 6px; }
.agenda-field-full { grid-column: 1 / -1; }
.agenda-field-label { font-weight: 700; color: var(--ink-800); letter-spacing: -0.01em; }
.agenda-hint { color: var(--ink-400); margin: 4px 0 0; font-size: 13px; }
.agenda-toggle {
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface-tint);
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.agenda-editor .agenda-input,
.agenda-editor .agenda-select,
.agenda-editor .agenda-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid #e0e0e0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(18, 18, 18, 0.04);
  font-size: 15px;
  color: var(--ink-800);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.agenda-editor .agenda-input:focus,
.agenda-editor .agenda-select:focus,
.agenda-editor .agenda-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-sm);
  outline: none;
}
.agenda-textarea { resize: vertical; min-height: 160px; }

.agenda-editor .agenda-btn {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 11px 18px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.agenda-editor .agenda-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  box-shadow: 0 12px 28px rgba(64, 64, 64, 0.28);
}
.agenda-editor .agenda-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.agenda-editor .agenda-btn-ghost {
  background: var(--surface);
  color: var(--ink-800);
  border-color: #e0e0e0;
  box-shadow: var(--shadow-sm);
}
.agenda-editor .agenda-btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.agenda-chip-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  background: var(--surface);
  box-shadow: inset 0 1px 0 #fff;
}
.agenda-chip-results {
  display: none;
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  top: calc(100% - var(--space-sm));
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  z-index: 30;
}
.agenda-chip-results:not(:empty) { display: block; }
.agenda-chip-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.agenda-chip {
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink-700);
  box-shadow: inset 0 1px 0 #fff;
}
.agenda-chip-remove { background: transparent; border: none; cursor: pointer; color: var(--ink-400); }
.agenda-chip-option { padding: 8px 10px; cursor: pointer; transition: background 0.15s ease; }
.agenda-chip-option:hover { background: var(--surface-muted); }
.agenda-chip-empty { padding: 10px; color: var(--ink-400); }
.agenda-chip-result { border: 1px solid #e0e0e0; border-radius: var(--radius-pill); padding: 6px 10px; background: var(--surface); cursor: pointer; }

.agenda-flash {
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #e0e0e0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  color: #505050;
  box-shadow: var(--shadow-sm);
}
.agenda-flash-success {
  border-color: #e0e0e0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  color: #606060;
}
.agenda-flash-error { margin: 0; }

.agenda-actions-bar {
  position: sticky;
  bottom: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  background: linear-gradient(180deg, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 0.9) 50%, rgba(240, 240, 240, 0.98) 100%);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
}

/* =====================================
   AGENDA LIST
===================================== */
.agenda-list {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.agenda-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
  color: var(--ink-700);
  font-weight: 700;
  font-size: 13px;
  box-shadow: inset 0 1px 0 #fff;
}
.agenda-pill-soft {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-strong);
}
.agenda-filter-panel { gap: var(--space-md); }
.agenda-filter-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.agenda-table-panel { gap: var(--space-sm); }
.agenda-table-card {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.agenda-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.agenda-data-table thead th {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  color: var(--ink-600);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.agenda-data-table th,
.agenda-data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}
.agenda-data-table tbody tr:last-child td { border-bottom: none; }
.agenda-data-table tbody tr:hover td { background: var(--surface-tint); }
.agenda-data-table td strong { color: var(--ink-900); }
.agenda-data-table .agenda-meta {
  display: block;
  margin-top: 2px;
}
.agenda-table-panel .agenda-actions .agenda-btn { min-width: 80px; }
.agenda-empty-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface);
  border: 1px dashed #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  color: var(--ink-600);
  box-shadow: var(--shadow-sm);
}
.agenda-empty-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-tint);
  border-radius: var(--radius-pill);
  border: 1px solid #e0e0e0;
  font-size: 18px;
}
.agenda-pagination {
  margin-top: var(--space-md);
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
}
.agenda-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
  color: var(--ink-700);
  font-weight: 700;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.agenda-page-link:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.agenda-page-link.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(80, 80, 80, 0.2);
}

/* =====================================
   AGENDA PRINT
===================================== */
.agenda-print {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.agenda-print-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.agenda-notes-framed {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  padding: var(--space-md);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-sm);
}
/* =====================================
   Evaluation Create
===================================== */
.evaluation-page {
  max-width: 1200px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.evaluation-page.evaluation-create {
  max-width: 1440px;
  gap: var(--space-md);
}
.evaluation-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: var(--space-md);
  align-items: stretch;
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--radius-panel);
  border: 1px solid #dedede;
  background: linear-gradient(135deg, #ffffff 0%, #f4f4f4 55%, #ebebeb 100%);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.evaluation-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(0, 0, 0, 0.06), transparent 50%),
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 10px);
  opacity: 0.4;
  pointer-events: none;
}
.evaluation-hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  position: relative;
  z-index: 1;
}
.evaluation-hero-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-self: stretch;
  position: relative;
  z-index: 1;
}
.evaluation-form-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid #e0e0e0;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.evaluation-form-picker .eval-label {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.12em;
  color: var(--ink-400);
}
.evaluation-form-picker select {
  border-radius: 12px;
  border: 1px solid #d8d8d8;
  background: #ffffff;
  padding: 10px 12px;
}
.evaluation-score-mini {
  border-radius: var(--radius-lg);
  border: 1px solid #1f1f1f;
  background: linear-gradient(140deg, #101010 0%, #1b1b1b 55%, #2b2b2b 100%);
  color: #ffffff;
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.evaluation-score-label {
  text-transform: none;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.evaluation-score-value {
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.evaluation-score-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}
.evaluation-score-meta span {
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
}
.evaluation-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: var(--space-sm);
}
.evaluation-stat {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.evaluation-stat-label {
  margin: 0;
  color: var(--ink-400);
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 12px;
}
.evaluation-stat-value {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.evaluation-stat-meta { color: var(--ink-400); font-size: 0.92rem; }
.evaluation-title { margin: 0 0 var(--space-xs); font-size: 28px; letter-spacing: -0.02em; color: var(--ink-900); }
.evaluation-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: #fff;
  font-weight: 700;
}
.evaluation-pill-muted {
  background: var(--surface);
  color: var(--ink-900);
  border: 1px solid #d0d0d0;
  font-weight: 600;
}
.evaluation-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.evaluation-subtitle {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.eval-muted { color: var(--ink-400); margin: 0; }
.evaluation-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(320px, 0.85fr);
  gap: var(--space-md);
  align-items: start;
}
.evaluation-form { margin: 0; }
.evaluation-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
}
.evaluation-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}
.evaluation-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.evaluation-flow-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: flex-end;
}
.evaluation-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  background: var(--surface-tint);
}
.evaluation-meta-grid .eval-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.evaluation-sidebar {
  position: sticky;
  top: var(--space-lg);
  align-self: start;
  min-width: 0;
}
.evaluation-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.evaluation-rail-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.score-card { background: linear-gradient(145deg, #ffffff 0%, #f6f6f6 100%); }
.score-display--hero {
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.score-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-xs);
}
.score-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  border: 1px dashed #e0e0e0;
}
.score-meta-label {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ink-400);
}
.score-meta-value {
  font-weight: 700;
  color: var(--ink-900);
}
.evaluation-page.evaluation-create .evaluation-card {
  padding: clamp(16px, 2vw, 28px);
  border-radius: 28px;
}
.evaluation-page.evaluation-create .evaluation-flow { gap: var(--space-sm); }
.evaluation-page.evaluation-create .evaluation-meta-grid {
  position: sticky;
  top: 96px;
  z-index: 2;
  background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
  border-color: #dcdcdc;
  box-shadow: var(--shadow-sm);
}
.evaluation-page.evaluation-create .evaluation-sidebar { top: 96px; }
.evaluation-page.evaluation-create .evaluation-sidebar-inner {
  max-height: calc(100vh - 132px);
  overflow: auto;
  padding-right: 4px;
}
.evaluation-page.evaluation-create .evaluation-rail-card {
  border-radius: 24px;
  border-color: #e2e2e2;
}
.evaluation-page.evaluation-create .score-card {
  background: linear-gradient(140deg, #0f0f0f 0%, #1b1b1b 60%, #2a2a2a 100%);
  border-color: #1f1f1f;
  color: #ffffff;
}
.evaluation-page.evaluation-create .score-card .score-display--hero {
  color: #ffffff;
  font-size: clamp(44px, 4vw, 58px);
  font-variant-numeric: tabular-nums;
}
.evaluation-page.evaluation-create .score-card .score-meta-item {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}
.evaluation-page.evaluation-create .score-card .score-meta-label { color: rgba(255, 255, 255, 0.65); }
.evaluation-page.evaluation-create .score-card .score-meta-value { color: #ffffff; }
.evaluation-page.evaluation-create .evaluation-actions { gap: var(--space-xs); }
.evaluation-page.evaluation-create .evaluation-comment { min-height: 120px; }
.evaluation-page.evaluation-create .kp-list {
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
}
.evaluation-actions {
  display: grid;
  gap: var(--space-sm);
}
.evaluation-actions .btn {
  width: 100%;
  justify-content: center;
}
.evaluation-sidebar input[type="text"],
.evaluation-sidebar select,
.evaluation-sidebar textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e0e0e0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  padding: 12px 14px;
  font-size: 0.95rem;
}
.evaluation-sidebar input[type="text"]:focus,
.evaluation-sidebar select:focus,
.evaluation-sidebar textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-sm);
  outline: none;
  transform: translateY(-1px);
}
.evaluation-sidebar textarea { resize: vertical; }
.evaluation-comment { min-height: 140px; }
.evaluation-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.eval-fieldset {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: var(--surface-tint);
}
.eval-fieldset legend { font-weight: 700; color: var(--ink-800); }
.eval-question { margin: var(--space-sm) 0; }
.eval-label { font-weight: 600; color: var(--ink-800); }
.eval-option {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--surface);
}
.eval-option-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
}
.eval-option-meta {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed #e0e0e0;
  display: grid;
  gap: var(--space-sm);
}
.evaluation-page.evaluation-create .eval-fieldset {
  padding: var(--space-sm) var(--space-md);
  background: #ffffff;
  border-color: #e5e5e5;
}
.evaluation-page.evaluation-create .eval-question {
  margin: var(--space-sm) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px dashed #e4e4e4;
}
.evaluation-page.evaluation-create .eval-question:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.evaluation-page.evaluation-create .eval-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
}
.evaluation-page.evaluation-create .eval-option {
  border-radius: 14px;
  border-color: #e0e0e0;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.evaluation-page.evaluation-create .eval-option.is-active {
  border-color: #121212;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.evaluation-page.evaluation-create .eval-option-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: center;
}
.evaluation-page.evaluation-create .eval-option-head span:last-child {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-700);
}
.evaluation-page.evaluation-create .eval-option-meta {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px dashed #e0e0e0;
  background: var(--surface-tint);
}
.js .evaluation-page.evaluation-create .eval-option-meta { display: none; }
.js .evaluation-page.evaluation-create .eval-option.is-active .eval-option-meta { display: grid; }
.eval-dashed-btn {
  border: 1px dashed #d0d0d0;
  background: var(--surface);
  color: var(--ink-800);
}
.eval-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  background: var(--surface-tint);
}
.eval-toolbar button {
  border: 1px solid #d0d0d0;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  cursor: pointer;
}
.eval-richtext {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  min-height: 140px;
  padding: var(--space-sm);
  background: var(--surface);
}
.eval-attachment { display: flex; flex-direction: column; gap: var(--space-xs); }
.eval-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.eval-space { justify-content: space-between; }
.eval-justify { justify-content: space-between; }
.score-display { font-size: 32px; font-weight: 700; color: var(--ink-900); margin: var(--space-xs) 0; }
.eval-subtitle { margin: 0 0 var(--space-xs); }
.eval-draft-banner {
  border: 1px solid #d0d0d0;
  background: #f0f0f0;
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}
.eval-keypoints { display: flex; flex-direction: column; gap: var(--space-xs); }
.eval-keypoint {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.hidden { display: none !important; }

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

.evaluation-page.evaluation-create .evaluation-hero,
.evaluation-page.evaluation-create .evaluation-flow,
.evaluation-page.evaluation-create .evaluation-sidebar-inner { animation: eval-rise 0.5s ease both; }
.evaluation-page.evaluation-create .evaluation-flow { animation-delay: 0.06s; }
.evaluation-page.evaluation-create .evaluation-sidebar-inner { animation-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  .evaluation-page.evaluation-create .evaluation-hero,
  .evaluation-page.evaluation-create .evaluation-flow,
  .evaluation-page.evaluation-create .evaluation-sidebar-inner { animation: none !important; }
}

@media (max-width: 1100px) {
  .evaluation-grid { grid-template-columns: 1fr; }
  .evaluation-sidebar { position: static; width: 100%; }
  .evaluation-hero { grid-template-columns: 1fr; }
  .evaluation-hero-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .evaluation-meta-grid { grid-template-columns: 1fr; }
  .evaluation-flow-badges { justify-content: flex-start; }
  .evaluation-page.evaluation-create .evaluation-meta-grid { position: static; top: auto; }
  .evaluation-page.evaluation-create .evaluation-sidebar-inner {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

/* Evaluation delete */
.eval-delete-shell {
  max-width: 720px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg);
}
.eval-delete-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.eval-delete-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  align-items: center;
}
.eval-delete-title { margin: 0; font-size: 24px; letter-spacing: -0.01em; color: var(--ink-900); }
.eval-delete-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}
.eval-label { font-weight: 600; color: var(--ink-700); margin: 0 0 4px; }
.eval-value { margin: 0; font-size: 1rem; color: var(--ink-900); }
.eval-delete-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Evaluation drafts list */
.eval-drafts-shell {
  max-width: 1100px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.eval-drafts-title { margin: 0; font-size: 26px; letter-spacing: -0.02em; color: var(--ink-900); }
.eval-drafts-empty {
  border: 1px dashed #d0d0d0;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  color: var(--ink-400);
  text-align: center;
  background: var(--surface);
}
.mc-table.eval-drafts-table th,
.mc-table.eval-drafts-table td { text-align: center; }

/* Evaluation edit */
.eval-question { margin-top: var(--space-xs); }

/* Evaluation list */
.eval-list-shell {
  max-width: 1200px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.eval-panel,
.eval-filters-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
  padding: clamp(18px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.eval-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: var(--space-sm);
}
.eval-panel-title {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.eval-panel-subtext { margin: 0; color: var(--ink-400); }
.eval-eyebrow {
  margin: 0 0 4px 0;
  text-transform: none;
  letter-spacing: 0.14em;
  color: var(--ink-400);
  font-size: 12px;
}
.eval-panel-meta {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  align-items: center;
}
.eval-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid #e0e0e0;
  color: var(--ink-700);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: inset 0 1px 0 #fff;
}

.eval-filter-form { display: flex; flex-direction: column; gap: var(--space-md); }
.eval-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.eval-field { display: flex; flex-direction: column; gap: 6px; }
.eval-field.full-row { grid-column: 1 / -1; }
.eval-label {
  font-weight: 700;
  color: var(--ink-800);
  margin: 0;
  letter-spacing: -0.01em;
}
.eval-field input,
.eval-field select,
.eval-multi-select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e0e0e0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  padding: 12px 14px;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.eval-field input:focus,
.eval-field select:focus,
.eval-multi-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-sm);
  outline: none;
  transform: translateY(-1px);
}
.eval-multi-select {
  height: 140px;
  max-height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
}
.assess-checkbox-group {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.assess-check-dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.assess-check-trigger {
  width: 100%;
  min-height: 45px;
  border-radius: 14px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  color: var(--ink-800);
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}
.assess-check-trigger:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-sm);
  outline: none;
}
.assess-check-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.assess-check-menu[hidden] {
  display: none;
}
.assess-filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  line-height: 1.2;
  padding: 4px 2px;
}
.assess-filter-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.eval-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  flex-wrap: wrap;
  border-top: 1px solid #f0f0f0;
  padding-top: var(--space-sm);
}
.btn-primary.soft {
  background: var(--ink-800);
  color: #fff;
  border-color: var(--ink-800);
  box-shadow: var(--shadow-md);
}

.eval-inline-alert {
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  border: 1px solid #e0e0e0;
  color: #505050;
  box-shadow: var(--shadow-sm);
}
.eval-inline-alert.success {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border-color: #e0e0e0;
  color: #606060;
}

.eval-table-card {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background: var(--surface);
}
.mc-table.eval-table { width: 100%; border-collapse: collapse; }
.mc-table.eval-table th,
.mc-table.eval-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.95rem;
}
.mc-table.eval-table thead th {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  color: var(--ink-500);
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}
.mc-table.eval-table tbody tr:hover td { background: #ffffff; }
.mc-table.eval-table tbody tr:last-child td { border-bottom: none; }
.eval-table .actions { text-align: right; }
.eval-actions {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.eval-actions .btn-link { padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid transparent; }
.eval-actions .btn-link:hover { background: var(--surface-muted); }
.eval-row-link {
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.eval-row-link:hover {
  background: #ffffff;
  transform: translateY(-1px);
}
.eval-row-link .btn-link { font-weight: 700; }

.eval-pagination {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  flex-wrap: wrap;
  padding-top: var(--space-sm);
}
.eval-page-link {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid #e0e0e0;
  color: var(--ink-700);
  text-decoration: none;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.eval-page-link:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.eval-page-link.active {
  background: linear-gradient(135deg, var(--ink-900), #181818);
  color: #fff;
  border-color: var(--ink-900);
  box-shadow: 0 14px 28px rgba(24, 24, 24, 0.2);
}

/* IJP apply */
.ijp-apply-shell {
  max-width: 900px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.ijp-title { margin: 0 0 var(--space-xs); font-size: 26px; letter-spacing: -0.02em; color: var(--ink-900); }
.ijp-meta-pill {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  font-weight: 700;
  color: var(--ink-800);
  min-width: 90px;
  text-align: center;
}
.ijp-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.ijp-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.ijp-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); }
.ijp-position-head { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: flex-start; }
.ijp-position-title { margin: 0; font-size: 20px; letter-spacing: -0.01em; color: var(--ink-900); }
.ijp-question { border: 1px solid #e0e0e0; border-radius: var(--radius-md); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-2xs); }
.ijp-required { color: var(--danger); font-size: 0.9rem; }

/* IJP candidate view */
.candidate-shell {
  max-width: 980px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.candidate-title {
  margin: 0 0 var(--space-xs);
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.candidate-status-row {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  align-items: center;
}
.candidate-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}
.candidate-meta-card,
.candidate-answers,
.candidate-view {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}
.candidate-meta-label { margin: 0; font-size: 0.95rem; color: var(--ink-500); }
.candidate-meta-value { margin: var(--space-2xs) 0 0; font-size: 1.05rem; font-weight: 700; color: var(--ink-900); }
.candidate-meta-note { margin: var(--space-2xs) 0 0; color: var(--ink-600); }
.candidate-pill {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  font-weight: 600;
  color: var(--ink-700);
}
.candidate-answers { display: flex; flex-direction: column; gap: var(--space-md); }
.candidate-answer {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: var(--surface-tint);
  margin-top:10px;
}
.candidate-question-title { margin: 0; font-size: 1.05rem; color: var(--ink-900); }
.candidate-question-meta { margin: 0; color: var(--ink-500); }
.answer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.answer-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  align-items: center;
}
.answer-label { font-weight: 600; color: var(--ink-800); }
.answer-score { color: var(--ink-500); font-size: 0.95rem; }
.product-pill-row { flex-wrap: wrap; }
tr[data-href] { cursor: pointer; }
.row-link { cursor: pointer; transition: background 0.12s ease; }
.row-link:hover { background: #ffffff; }
.options-list { display: flex; flex-direction: column; gap: var(--space-2xs); }
/* Evaluation print */
.eval-print-shell {
  max-width: 1200px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.eval-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}
.eval-meta-card {
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  box-shadow: inset 0 1px 0 #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eval-meta-card .eval-label { margin: 0; color: var(--ink-500); font-size: 12px; letter-spacing: 0.06em; text-transform: none; }
.eval-meta-card .eval-value {
  margin: 0;
  color: var(--ink-900);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.eval-meta-status .eval-value { display: flex; align-items: center; gap: var(--space-xs); }
.eval-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
}
.eval-pill.subtle {
  background: var(--surface);
  color: var(--ink-800);
  border: 1px solid #e0e0e0;
  box-shadow: inset 0 1px 0 #fff;
}
.eval-pill.status { background: linear-gradient(135deg, var(--ink-900), #181818); }

.eval-body-panel { gap: var(--space-lg); }
.eval-print-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  gap: var(--space-lg);
  align-items: start;
}
@media (max-width: 1024px){ .eval-print-layout { grid-template-columns: 1fr; } }
.eval-main { display: flex; flex-direction: column; gap: var(--space-md); }
.eval-stack { display: flex; flex-direction: column; gap: var(--space-md); }
.eval-print-sidebar { display: flex; flex-direction: column; gap: var(--space-md); }
.section-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: var(--shadow-md);
}
.section-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-sm); }
.section-head h3 { margin: 0; letter-spacing: -0.01em; color: var(--ink-900); }
.question-block { display: flex; flex-direction: column; gap: var(--space-sm); }
.question-head { display: flex; flex-direction: column; gap: 4px; }
.question-title { margin: 0; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; }
.option-breakdown { padding-left: var(--space-sm); color: var(--ink-800); display: flex; flex-direction: column; gap: var(--space-xs); }
.option-breakdown li { margin: 0; padding: var(--space-xs) 0; border-bottom: 1px solid #f0f0f0; }
.option-breakdown li:last-child { border-bottom: none; }
.option-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.answer-block { background: var(--surface-tint); border: 1px solid #e0e0e0; border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); box-shadow: inset 0 1px 0 #fff; }
.option-notes-print ul { padding-left: var(--space-sm); margin: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.answer-attachments ul { padding-left: var(--space-sm); margin: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.eval-discussion, .eval-validation { display: flex; flex-direction: column; gap: var(--space-sm); }
.eval-comments-list { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.eval-comment { background: var(--surface); border: 1px solid #e0e0e0; border-radius: var(--radius-md); padding: var(--space-sm); box-shadow: var(--shadow-sm); }
.eval-comment.mine { border-color: #d0d0d0; background: #f0f0f0; }
.eval-comment-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); color: var(--ink-500); }
.eval-comment p { margin: var(--space-xs) 0 0; }
.eval-comment-form,
.eval-validation-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.eval-validation-form input[type="text"],
.eval-comment-form textarea {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--surface-tint);
}
.sidebar-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.kp-list { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.kp-item {
  border-left: 4px solid var(--ink-900);
  padding-left: var(--space-sm);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.kp-item.validation { border-color: #505050; }
.kp-item.validation .kp-title { color: #404040; }
.kp-item.important { border-color: #505050; }
.kp-item.important .kp-title { color: #505050; }
.kp-item.neutral { border-color: #181818; }
.kp-item.neutral .kp-title { color: #181818; }
.kp-header { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.kp-title { font-weight: 700; }
.kp-desc { margin-top: var(--space-xs); color: var(--ink-700); font-size: 0.95rem; }

/* Voice of employee list */
.voe-shell {
  max-width: 1100px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.voe-filter-panel {
  display: grid;
  gap: var(--space-sm);
  padding: clamp(16px, 2.6vw, 22px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 246, 246, 0.92));
  box-shadow: var(--shadow-sm);
}
.voe-filter-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid #ededed;
}

.voe-filter-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.voe-filter-subtext {
  margin: 0;
  color: var(--ink-400);
}
.voe-filter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.voe-count {
  min-width: 120px;
  text-align: center;
}
.voe-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm);
  align-items: end;
}
.voe-filter-wide { grid-column: span 2; }
.voe-filter-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.voe-results-card {
  align-items: center;
  text-align: center;
}
.voe-results-card .eval-panel-head {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.voe-results-card .eval-panel-head > div { width: 100%; }
.mc-table.voe-table th,
.mc-table.voe-table td { text-align: center; }
.mc-table.voe-table th.actions,
.mc-table.voe-table td.actions { text-align: right; }
.voe-table .actions { text-align: right; }
.voe-results-card { gap: var(--space-sm); }

@media (max-width: 980px){ .voe-filter-wide { grid-column: span 1; } }

@media (max-width: 760px) {
  .voe-filter-grid { grid-template-columns: 1fr; }
  .voe-filter-actions { justify-content: stretch; }
  .voe-filter-actions .btn-secondary,
  .voe-filter-actions .btn-primary { flex: 1; }
}

/* Voice of employee new */
.voe-new-shell {
  max-width: 900px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.voe-form-card { gap: var(--space-md); }
.voe-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Metricall platform feedback */
.platform-feedback-shell {
  width: min(920px, 100%);
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
}
.platform-feedback-shell--wide { width: min(1180px, 100%); }
.platform-feedback-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.platform-feedback-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.platform-feedback-header h2 {
  margin: 0;
  color: var(--ink-900);
  font-size: 26px;
}
.platform-feedback-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.platform-feedback-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}
.platform-feedback-field,
.platform-feedback-status label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-weight: 700;
  color: var(--ink-800);
}
.platform-feedback-field input,
.platform-feedback-field select,
.platform-feedback-field textarea,
.platform-feedback-status select {
  width: 100%;
  border: 1px solid #d8dee8;
  border-radius: var(--radius-md);
  padding: 11px 12px;
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
}
.platform-feedback-field textarea { resize: vertical; min-height: 180px; }
.platform-feedback-actions,
.platform-feedback-status {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
  justify-content: flex-end;
}
.platform-feedback-status label { min-width: 220px; }
.platform-feedback-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
}
.platform-feedback-meta div,
.platform-feedback-extra div {
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.platform-feedback-meta span,
.platform-feedback-extra span {
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.platform-feedback-body {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  line-height: 1.65;
  color: var(--ink-800);
  background: var(--surface);
}
.platform-feedback-extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.platform-feedback-extra pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-size: 12px;
}
.platform-feedback-table-wrap { overflow-x: auto; }
.platform-feedback-table td,
.platform-feedback-table th { white-space: nowrap; }
.platform-feedback-table td:first-child,
.platform-feedback-table th:first-child {
  min-width: 260px;
  white-space: normal;
}

.mc-owner-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink-700);
  background: var(--surface);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.mc-owner-link:hover {
  border-color: var(--ink-300);
  color: var(--ink-900);
  background: #f7f9fb;
}

.owner-dash {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.owner-dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 8px 0 2px;
}
.owner-dash-kicker {
  margin: 0 0 6px;
  color: var(--ink-400);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.owner-dash-head h1 {
  margin: 0;
  color: var(--ink-900);
  font-size: 28px;
  line-height: 1.1;
}
.owner-dash-sub {
  margin: 8px 0 0;
  max-width: 760px;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.45;
}
.owner-dash-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.owner-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.owner-kpi {
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.owner-kpi span {
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 700;
}
.owner-kpi strong {
  color: var(--ink-900);
  font-size: 26px;
  line-height: 1.15;
}
.owner-kpi small {
  color: var(--ink-400);
  font-size: 11px;
}
.owner-dash-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 14px;
}
.owner-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.owner-panel--wide { width: 100%; }
.owner-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.owner-panel-head h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}
.owner-panel-head span,
.owner-panel-head a {
  color: var(--ink-400);
  font-size: 12px;
  text-decoration: none;
}
.owner-panel-head a:hover { color: var(--ink-800); }
.owner-table-wrap { overflow-x: auto; }
.owner-feedback-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.owner-feedback-list li { border-bottom: 1px solid #edf1f5; }
.owner-feedback-list li:last-child { border-bottom: none; }
.owner-feedback-list a {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  color: var(--ink-700);
  text-decoration: none;
}
.owner-feedback-list a:hover {
  background: #f8fafc;
  color: var(--ink-900);
}
.owner-feedback-list strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owner-feedback-list span,
.owner-feedback-list small,
.owner-empty {
  color: var(--ink-400);
  font-size: 12px;
}
.owner-empty {
  margin: 0;
  padding: 16px;
}

@media (max-width: 720px) {
  .platform-feedback-header,
  .platform-feedback-actions,
  .platform-feedback-status {
    align-items: stretch;
    flex-direction: column;
  }
  .platform-feedback-card { padding: var(--space-lg); }
  .owner-dash-head {
    align-items: stretch;
    flex-direction: column;
  }
  .owner-dash-actions { justify-content: flex-start; }
  .owner-kpi-grid,
  .owner-dash-panels {
    grid-template-columns: 1fr;
  }
  .owner-kpi { min-height: 96px; }
}
.voe-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.voe-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
  align-items: center;
}
.voe-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.voe-checkbox {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  font-weight: 600;
  color: var(--ink-800);
}
.recipient-search { width: 100%; }
.recipient-list {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  max-height: 260px;
  overflow: auto;
  padding: var(--space-sm);
  background: var(--surface-tint);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.recipient-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.95rem;
  color: var(--ink-800);
}
.recipient-name { font-weight: 600; }
.recipient-login { color: var(--ink-400); font-size: 0.85rem; }
.voe-actions {
  display: flex;
  justify-content: flex-end;
}

/* Voice of employee view */
.voe-view-shell {
  max-width: 900px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.voe-status {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  align-items: center;
}
.voe-type-pill {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-sm);
  font-weight: 600;
  color: var(--ink-800);
}
.voe-content-card,
.voe-action-card,
.voe-comments-card { gap: var(--space-sm); }
.voe-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}
.voe-recipients ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.voe-comments-card .eval-comment.internal {
  border-color: #d0d0d0;
  background: #f0f0f0;
}

/* Form delete */
.form-delete-shell {
  max-width: 720px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.form-delete-title { margin: 0; font-size: 26px; letter-spacing: -0.02em; color: var(--ink-900); }
.form-delete-card { gap: var(--space-md); }
.form-delete-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}
.form-delete-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-reactivate-shell {
  max-width: 720px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Form create */
.form-create-shell {
  max-width: 1100px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.form-create-title { margin: 0 0 var(--space-xs); font-size: 28px; letter-spacing: -0.02em; color: var(--ink-900); }
.form-builder-card {
  background: var(--surface);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
}
.form-builder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}
.form-builder-grid .full-row { grid-column: 1 / -1; }
.form-pill {
  background: var(--surface-tint);
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.form-choices { gap: var(--space-sm); }
.form-choices-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-choices-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-height: 260px;
  overflow: auto;
}
.form-checks { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.sections-container { display: flex; flex-direction: column; gap: var(--space-sm); }
.section-box fieldset {
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.question-box {
  border: 1px dashed #d0d0d0;
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-top: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.question-types { display: flex; flex-direction: column; gap: var(--space-2xs); }
.optionsContainer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}
.option-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xs);
  align-items: center;
}

/* Form list deactivated */
.form-list-shell {
  max-width: 1100px;
  margin: var(--space-xxl) auto;
  padding: 0 var(--space-lg) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.form-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.roster-card { display: flex; flex-direction: column; gap: var(--space-md); border: 1px solid #e0e0e0; }
.roster-card.active { border-color: var(--ink-800); }

.progress-ring {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: conic-gradient(var(--ink-800) calc(var(--value, 0) * 100%), #f0f0f0 0);
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--ink-800);
}

.timeline-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }

.memo-summary,
.memo-body,
.c_backgrounded,
.comment-form,
.answer-attachments,
.question-block,
.question-box { background: var(--surface-tint); }

/* =====================================
   LANDING and PRINT
===================================== */
.landing {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 6vw, 80px);
  padding: clamp(24px, 5vw, 72px) clamp(18px, 5vw, 64px) clamp(32px, 7vw, 88px);
}

.landing-lede {
  margin: 0 0 var(--space-md);
  color: var(--ink-600);
  max-width: 720px;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.landing .btn-primary:hover {
  background: var(--ink-800);
  color: var(--surface);
}

.landing-panel__head h2 {
  margin: 0 0 6px;
  font-size: clamp(18px, 2.3vw, 22px);
  color: var(--ink-900);
}

.landing-note {
  margin: 0;
  color: var(--ink-500);
}

.landing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
}

.landing-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  box-shadow: var(--shadow-sm);
  height: auto;
}

.landing-stat__label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--ink-400);
}

.landing-stat h3 {
  margin: 6px 0 6px;
  font-size: 1.05rem;
  color: var(--ink-900);
}

.landing-stat__note {
  margin: 0;
  color: var(--ink-500);
  font-size: 0.9rem;
}

.landing-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  padding: clamp(24px, 4.5vw, 48px);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.landing-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.landing-section__head h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--ink-900);
}

.landing-eyebrow {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--ink-400);
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

.landing-card {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.landing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 0, 0, 0.16);
}

.landing-card h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-900);
}

.landing-card p {
  margin: 0;
  color: var(--ink-500);
}

.landing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius-panel);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #ffffff 0%, #f2f2f2 60%, #eaeaea 100%);
  box-shadow: var(--shadow-md);
}

.landing-cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 720px;
}

.landing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.landing-footer {
  text-align: center;
  color: var(--ink-500);
  font-size: 0.95rem;
  padding-bottom: var(--space-xxl);
}

@media (max-width: 720px) {
  .landing { padding: var(--space-xl) var(--space-md) var(--space-xxl); }
  .landing-actions .btn,
  .landing-cta__actions .btn { flex: 1 1 160px; }
}
.feature-card { transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius:8px; padding:16px;}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-align: center; background-color: #181818; color:lightgray;}

.print-wrapper,
.ijp-print-wrapper {
  color: var(--ink-800);
  background: var(--surface);
  border: 1px solid #e0e0e0;
  box-shadow: none;
}

.list-inline,
.list-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

.list-inline span,
.list-chips li {
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

/* =====================================
   Call Simulator
===================================== */
.sim-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.sim-shell-empty { padding: var(--space-lg) var(--space-sm); }
.sim-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.sim-header-main { display: flex; flex-direction: column; gap: var(--space-xs); }

.sim-case-switch { display: flex; flex-direction: column; gap: var(--space-2xs); }
.sim-case-switch label { font-weight: 600; color: var(--ink-800); }
.sim-case-switch select {
  min-width: 260px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-pill);
  padding: 10px 12px;
  background: #fff;
  font-weight: 600;
  color: var(--ink-700);
}
.sim-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
  min-width: 260px;
}
.sim-pill {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}
.sim-pill p { margin: 0; font-size: 12px; color: var(--ink-400); }
.sim-pill strong { font-size: 16px; letter-spacing: -0.01em; }
.sim-quote {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid rgba(18, 18, 18, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  color: var(--ink-700);
}
.sim-quote-mark { font-size: 24px; color: var(--accent); line-height: 1; }
.sim-quote-text { font-size: 16px; line-height: 1.6; }
.sim-alerts { display: grid; gap: 8px; }
.sim-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
  gap: var(--space-md);
  align-items: start;
}
.sim-columns { display: flex; flex-direction: column; gap: var(--space-md); }
.sim-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.sim-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.sim-card-head h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-800);
}
.sim-subtle { color: var(--ink-400); font-size: 13px; margin: 0; }
.sim-badge {
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  font-weight: 600;
  color: var(--ink-700);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.sim-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 600px;
  overflow: auto;
  padding: 2px;
}
.sim-row {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.sim-row.revealed { border-color: rgba(128, 128, 128, 0.45); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.25); }
.sim-label { font-weight: 700; color: var(--ink-800); }
.sim-meta-line { font-size: 12px; color: var(--ink-400); }
.sim-value { margin-top: 4px; color: var(--ink-700); }
.masked { color: var(--ink-200); font-style: italic; }
.sim-action { margin: 0; }
.ghost-btn {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-800);
  transition: all 0.2s ease;
}
.ghost-btn:hover { background: var(--surface-muted); }
.ghost-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pill-btn {
  background: linear-gradient(135deg, #181818, #282828);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.pill-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2); }
.pill-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.sim-search { display: flex; align-items: center; gap: var(--space-xs); }
.sim-search input {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-pill);
  padding: 10px 12px;
  min-width: 200px;
}
.sim-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: sticky;
  top: 100px;
}
.sim-timer {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.sim-unhide { font-size: 26px; font-weight: 800; }
.sim-target { font-weight: 700; margin-top: 4px; }
.sim-history ul { margin: 8px 0 0; padding-left: 16px; color: var(--ink-700); }
.sim-actions { gap: var(--space-sm); }
.sim-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.sim-chip {
  background: var(--surface-muted);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-700);
}
.sim-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
}
.sim-action-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  background: #ffffff;
}
.sim-card-body { padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); }
.sim-card-title { font-weight: 700; color: var(--ink-800); }
.sim-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.sim-option.chosen { text-decoration: line-through; opacity: 0.7; }
.sim-option-label { font-weight: 700; color: var(--ink-800); }
.sim-option-meta { margin: 2px 0 0; color: var(--ink-400); font-size: 12px; }
.sim-resolution { background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%); }
.sim-resolution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}
.sim-resolution-card {
  border: 1px solid rgba(64, 64, 64, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.sim-resolution-card.chosen {
  border-color: rgba(128, 128, 128, 0.45);
  opacity: 0.7;
}

/* =====================================
   Simulator Case Detail
===================================== */
.sim-detail-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.sim-shell-empty { padding: var(--space-lg) var(--space-sm); }
.sim-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.sim-detail-titles { display: flex; flex-direction: column; gap: var(--space-2xs); }

.sim-detail-titles h2 { margin: 0; letter-spacing: -0.02em; }
.sim-detail-sub { color: var(--ink-400); margin: 0; }
.sim-detail-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.sim-detail-quote {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid rgba(18, 18, 18, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  color: var(--ink-700);
}
.sim-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
}
.sim-detail-actions-block { gap: var(--space-sm); }

/* =====================================
   Simulator Case Editor
===================================== */
.sim-admin-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.sim-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.sim-admin-titles { display: flex; flex-direction: column; gap: var(--space-2xs); }

.sim-admin-titles h2 { margin: 0; letter-spacing: -0.02em; }
.sim-admin-sub { color: var(--ink-400); margin: 0; }
.sim-admin-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.sim-admin-form { display: flex; flex-direction: column; gap: var(--space-md); }
.sim-admin-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.sim-field { display: flex; flex-direction: column; gap: 6px; }
.sim-field-wide { grid-column: 1 / -1; }
.sim-field label { font-weight: 700; color: var(--ink-800); }
.sim-field input,
.sim-field select,
.sim-field textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}
.sim-field textarea { min-height: 120px; resize: vertical; }
.sim-admin-inline { margin: 0; color: var(--ink-400); font-size: 13px; }
.sim-admin-inline.warn { color: #606060; }
.sim-admin-footer {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}
.sim-alerts-spaced { margin-top: var(--space-sm); }

/* =====================================
   Simulator Case Manager
===================================== */
.sim-manage-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.sim-manage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.sim-manage-titles { display: flex; flex-direction: column; gap: var(--space-2xs); }

.sim-manage-sub { color: var(--ink-400); margin: 0; }
.sim-manage-filters {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}
.sim-manage-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
  align-items: end;
}
.sim-manage-filter-actions {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.sim-manage-table {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}
.sim-table {
  width: 100%;
  border-collapse: collapse;
}
.sim-table th,
.sim-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 14px;
}
.sim-table th { color: var(--ink-600); font-size: 13px; }
.sim-table tr:hover td { background: #ffffff; }
.sim-manage-actions {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

/* =====================================
   Simulator Catalog
===================================== */
.sim-catalog-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.sim-catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.sim-catalog-titles { display: flex; flex-direction: column; gap: var(--space-2xs); }

.sim-catalog-sub { color: var(--ink-400); margin: 0; }
.sim-catalog-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.sim-catalog-filters {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}
.sim-catalog-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
  align-items: end;
}
.sim-catalog-filter-actions {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.sim-catalog-table {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}
.sim-catalog-actions-table {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

.training-manage-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-xxl);
}

.training-manage-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.training-manage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.training-manage-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.training-manage-title {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -0.03em;
  color: var(--ink-900);
}

.training-manage-subtitle {
  margin: 0;
  color: var(--ink-400);
}

.training-manage-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.training-manage-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.training-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

.training-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.training-field label {
  font-weight: 700;
  color: var(--ink-800);
}

.training-toggle {
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
}

.training-toggle input {
  width: 18px;
  height: 18px;
}

.training-field-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.training-hint {
  margin: 0;
  color: var(--ink-400);
  font-size: 0.9rem;
}

.training-template-actions {
  display: flex;
  gap: var(--space-sm);
}

.training-template-actions .btn-secondary {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.training-actions {
  display: flex;
  justify-content: flex-end;
}

.code-input {
  width: 100%;
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--surface-tint);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.code-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(96, 96, 96, 0.18);
  outline: none;
}

.training-view-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.training-view-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.training-view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.training-view-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.training-view-heading h1 { margin: 0; letter-spacing: -0.03em; color: var(--ink-900); }

.training-view-subtitle { margin: 0; color: var(--ink-400); }

.training-view-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--ink-400);
  font-size: 0.95rem;
}

.training-view-status { display: flex; align-items: center; }

.meta-item { color: var(--ink-700); }

.meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
}

.slide-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  background: var(--surface-tint);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.slide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.slide-title-group h3 { margin: 0; letter-spacing: -0.02em; }

.slide-body {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid rgba(0, 0, 0, 0.05);
  min-height: 240px;
}

.slide-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.slide-index { color: var(--ink-400); font-weight: 700; }

.ghost-pill {
  border: 1px solid #e0e0e0;
  background: var(--surface);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--ink-700);
}

.quiz-card { gap: var(--space-lg); }

.quiz-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.quiz-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.quiz-question {
  background: var(--surface-tint);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.quiz-question-title { margin: 0; color: var(--ink-800); }

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.training-start-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-xxl);
}

.training-start-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.training-start-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.training-start-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.training-start-heading h1 { margin: 0; letter-spacing: -0.03em; color: var(--ink-900); }

.training-start-subtitle { margin: 0; color: var(--ink-400); }

.training-start-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.user-search { position: relative; }

.user-search input {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--surface-tint);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.95rem;
}

.user-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  max-height: 220px;
  overflow-y: auto;
  display: none;
  z-index: 10;
}

.user-results .dropdown-item {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.user-results .dropdown-item:last-child { border-bottom: none; }

.user-results .dropdown-item:hover { background: var(--surface-tint); }

.user-view-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.user-view-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.user-identity {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.user-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #181818, #282828);
  color: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.user-avatar.placeholder { letter-spacing: 0.08em; }

.user-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-title h1 { margin: 0; letter-spacing: -0.03em; color: var(--ink-900); }

.user-role { margin: 0; color: var(--ink-400); }

.user-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: #f0f0f0;
  color: #181818;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.06);
  width: fit-content;
}

.user-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.user-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.user-meta-tile {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-tint);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-label { text-transform: none; letter-spacing: 0.06em; font-size: 0.78rem; color: var(--ink-400); }
.meta-value { font-weight: 700; color: var(--ink-800); }

.user-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-sm);
}

.user-panel {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.panel-head h3 { margin: 0; letter-spacing: -0.01em; color: var(--ink-900); }

.user-chip-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
}

.user-chip-list li {
  background: #f0f0f0;
  color: var(--ink-900);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 700;
  font-size: 0.9rem;
}

.user-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-360-card { gap: var(--space-lg); }

.user-360-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); flex-wrap: wrap; }

.user-360-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
}

.user-360-panel {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: var(--surface-tint);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.metric {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink-900);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-label {
  font-size: 0.9rem;
  color: var(--ink-400);
  font-weight: 600;
}

.histogram,
.eval-list { display: flex; flex-direction: column; gap: var(--space-2xs); }

.print-mode .user-view-card { box-shadow: none; border: 1px solid transparent; }
.print-mode .print-hidden { display: none !important; }

.batch-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-xxl);
}

.batch-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.batch-header { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: flex-start; flex-wrap: wrap; }

.batch-card h1 { margin: 0; letter-spacing: -0.03em; color: var(--ink-900); }

.batch-form { display: flex; flex-direction: column; gap: var(--space-lg); }

.upload-block { display: flex; flex-direction: column; gap: var(--space-2xs); }

.batch-actions { display: flex; justify-content: flex-end; }

.batch-results { display: flex; flex-direction: column; gap: var(--space-sm); }
.batch-results h3 { margin: 0; }

.table-wrap { overflow-x: auto; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--radius-lg); }
.results-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.results-table th,
.results-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.results-table th { background: var(--surface-tint); font-weight: 700; color: var(--ink-700); }
.results-table tr:last-child td { border-bottom: none; }
.status-success { color: var(--success); font-weight: 700; }
.status-error { color: var(--danger); font-weight: 700; }

.user-create-shell {
  max-width: 940px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-xxl);
}

.user-create-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.user-create-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.user-create-card h1 { margin: 0; letter-spacing: -0.03em; color: var(--ink-900); }

.user-create-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.user-create-actions {
  display: flex;
  justify-content: flex-end;
}

.user-deactivate-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-xxl);
}

.user-deactivate-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.user-deactivate-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.user-deactivate-card h1 { margin: 0; letter-spacing: -0.03em; color: var(--ink-900); }

.user-deactivate-details {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: var(--surface-tint);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.user-deactivate-form {
  display: flex;
  justify-content: flex-end;
}

.user-edit-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-xxl);
}

.user-edit-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.user-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.user-edit-card h1 { margin: 0; letter-spacing: -0.03em; color: var(--ink-900); }

.user-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.user-edit-actions {
  display: flex;
  justify-content: flex-end;
}

.user-deactivated-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.user-deactivated-card {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.user-deactivated-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.user-deactivated-card h1 { margin: 0; letter-spacing: -0.03em; color: var(--ink-900); }

.user-deactivated-filters { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.user-deactivated-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
}

.user-deactivated-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.user-deactivated-table th,
.user-deactivated-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-align: left;
}

.user-deactivated-table th {
  background: var(--surface-tint);
  font-weight: 700;
  color: var(--ink-700);
}

.muted-text { color: var(--ink-400); }

/* =====================================
   Training Assign
===================================== */
.training-assign-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 760px;
  margin: 0 auto;
}
.training-assign-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.training-assign-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.training-assign-title { display: flex; flex-direction: column; gap: var(--space-2xs); }

.training-assign-title h2 { margin: 0; letter-spacing: -0.02em; }
.training-assign-form { display: flex; flex-direction: column; gap: var(--space-md); }
.training-assign-field { display: flex; flex-direction: column; gap: 6px; }
.training-assign-field label { font-weight: 700; color: var(--ink-800); }
.training-assign-field select,
.training-assign-field input[type="date"] {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}
.training-assign-hint { margin: 0; color: var(--ink-400); font-size: 13px; }
.training-assign-actions { display: flex; justify-content: flex-end; }

/* =====================================
   Training List
===================================== */
.training-list-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.training-list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.training-list-titles { display: flex; flex-direction: column; gap: var(--space-2xs); }

.training-list-sub { margin: 0; color: var(--ink-400); }
.training-list-filters {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}
.training-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
  align-items: end;
}
.training-filter-actions { display: flex; justify-content: flex-end; gap: var(--space-xs); }
.training-list-table {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}
.training-list-actions {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}
.training-status {
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 700;
}
.training-status.status-draft { background: #f0f0f0; color: #505050; }
.training-status.status-pending { background: #e0e0e0; color: #505050; }
.training-status.status-published { background: #f0f0f0; color: #404040; }
.training-status.status-archived { background: #e0e0e0; color: #505050; }

/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 1100px) {
  header.main-header { left: 200px; padding: 0 var(--space-lg); }
  .sidebar { width: 200px; }
  .main_logged {padding: 110px var(--space-xl) var(--space-xxl); }
  .sim-layout { grid-template-columns: 1fr; }
  .sim-sidebar { position: static; }
}

@media (max-width: 900px) {
  .manuals-layout,
  .evaluation-layout,
  .process-toolbar,
  .breaks-header,
  .filters-row { flex-direction: column; align-items: flex-start; }
  .evaluation-sidebar { position: static; width: 100%; }
  .sim-card-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  header.main-header { left: 0; padding: var(--space-sm) var(--space-md); flex-wrap: wrap; height: auto; }
  .main_logged { margin-left: 0; padding: 140px var(--space-lg) var(--space-xl); }
  .main_logged > * { width: 100%; }
  .nav-search { width: 100%; }
  .manuals-layout,
  .mgmt-grid,
  .filter-grid,
  .form-grid-2,
  .form-grid,
  .info-grid,
  .landing-features,
  .home-grid,
  .shift-grid,
  .break-summary,
  .roster-page .roster-grid { grid-template-columns: 1fr; }
  button,
  input[type="submit"] { width: 100%; }
  table th,
  table td { font-size: 0.85rem; padding: 10px var(--space-sm); }
}
.notifications-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 8px 10px;
}

.notifications-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(24, 24, 24, .08);
    padding: 18px;
}

.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.notif-header h2 { margin: 0; }

.notif-meta {
    color: #505050;
    font-size: 14px;
    margin: 0;
}

.notif-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notif-item {
    padding: 12px 100px 28px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #ffffff;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.notif-item.unread {
    border-color: #d0d0d0;
    background: #f0f0f0;
}

.notif-item:hover {
    background: #f7f7f7;
    border-color: #d6d6d6;
    box-shadow: 0 8px 18px rgba(40, 40, 40, 0.08);
    transform: translateY(-1px);
}

.notif-item.unread:hover {
    background: #ebebeb;
}

.notif-body { display: block; }

.notif-item .notif-time {
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: #707070;
    font-size: 13px;
}

.notif-item .notif-actions {
    position: absolute;
    right: 12px;
    top: 12px;
}

.notif-item a {
    color: #606060;
    font-weight: 600;
    text-decoration: none;
}

.notif-item:hover a { color: #404040; }
.notif-item a:hover { text-decoration: underline; }

.notif-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: #e0e0e0;
    color: #282828;
    margin-right: 8px;
}

.notif-badge.unread {
    background: #606060;
    color: #fff;
}

.notif-actions button,
.notif-actions a { font-size: 13px; }

.notif-cta {
    border: none;
    background: #606060;
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
}

.notif-cta:hover { background: #505050; }

.notif-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 10px;
    color: #505050;
    font-size: 14px;
}

.notif-pager {
    display: flex;
    gap: 8px;
}

.notif-page-btn {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #ffffff;
    color: #181818;
    text-decoration: none;
    font-weight: 600;
}

.notif-page-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.notif-page-btn.active {
    background: #606060;
    color: #fff;
    border-color: #606060;
}
.grid-two-cols {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 20px;
    align-items: start;
}

.pagination {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-btn {
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    text-decoration: none;
    color: #181818;
    font-weight: 600;
}

.page-info {
    color: #505050;
    font-size: 14px;
}
/* --- VOE VIEW CSS --- */

.voe-card {
    position: relative;
    border-radius: 10px;
    padding: 16px;
}

/* Status badge top-right */
.voe-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--ink-500);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Type badge */
.voe-type-badge {
    background: var(--ink-500);
    color: #fff;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-left: 6px;
    white-space: nowrap;
}

/* Created date */
.voe-created-at {
    color: #888;
    font-size: 12px;
    text-align: right;
}

/* Comments list */
.comment-list {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Comment boxes */
.comment-box {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
}

.comment-box.internal {
    background: #f0f0f0;
    border-color: #e0e0e0;
}

/* Utility classes */
.text-center { text-align: center; }

.mt-16 { margin-top: 16px; }
/* Filters */
.filter-card { margin-bottom: 20px; }
.filter-card .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 16px;
}
.filter-actions {
    align-self: flex-end;
    display: flex;
    gap: 10px;
}

/* New Status Button */
.top-right-btn {
    float: right;
    margin-bottom: 15px;
}
.btn-new {
    background: #f0f0f0;
    padding: 8px 18px;
    border-radius: 8px;
    color: #505050;
    font-weight: bold;
    text-decoration: none;
}

/* Table actions */
.status-action-group {
    display: flex;
    gap: 8px;
}
.status-action {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .2s;
}
.status-action.modify {
    background: #f0f0f0;
    color: #505050;
    border-color: #d0d0d0;
}
.status-action.modify:hover { background: #d0d0d0; }
.status-action.delete {
    background: #f0f0f0;
    color: #505050;
    border-color: #e0e0e0;
}
.status-action.delete:hover { background: #e0e0e0; }

/* Pagination */
.pagination {
    text-align: center;
    margin-top: 15px;
}
.page-btn {
    background: #f0f0f0;
    padding: 6px 10px;
    border-radius: 4px;
    color: #606060;
    margin: 2px;
    text-decoration: none;
}
.page-btn.active {
    background: #606060;
    color: white;
}
.manage-role {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 32px;
}

.manage-role__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.manuals-lede {
    margin: 4px 0 0;
    color: #505050;
}

.role-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.role-section {
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    padding: 24px;
    background: #fff;
}

.role-section h3 { margin-bottom: 16px; }

.role-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.role-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
    color: #282828;
}

.role-form input[type="text"],
.role-form input[type="number"],
.role-form select,
.daily-task-form input[type="text"],
.status-break-form input[type="text"],
.status-break-form input[type="number"],
.status-break-form select {
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.95rem;
    width: 100%;
}

.checkbox-inline {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    font-weight: 500;
}

.checkbox-inline.wide { grid-column: 1 / -1; }

.helper {
    color: #707070;
    font-size: 0.85rem;
    margin-top: 8px;
}

.helper.small { margin: 0; }

.helper.muted { color: #a0a0a0; }

.permission-columns {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #f0f0f0;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    box-shadow: 0 22px 80px rgba(24, 24, 24, 0.06);
    overflow: hidden;
}

.permission-card {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    padding: 22px 24px;
    background: transparent;
    border: none;
    border-top: 1px solid #f0f0f0;
}

.permission-card:first-of-type { border-top: none; }

.permission-card__title-row {
    flex: 0 0 240px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.permission-card__title-row .console-heading {
    margin: 0;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: #181818;
}

.permission-sub {
    margin: 0;
    color: #707070;
    font-size: 0.95rem;
    line-height: 1.4;
}

.permission-card__item {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
}

.permission-card__item label {
    font-weight: 600;
    color: #181818;
    letter-spacing: -0.01em;
}

.permission-card__item select {
    width: 100%;
    min-width: 0;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

.permission-card__item .console-row {
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #ffffff;
    gap: 10px;
}

.permission-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #181818;
    cursor: pointer;
}

.permission-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.permission-toggle__track {
    position: relative;
    width: 60px;
    height: 32px;
    border-radius: 999px;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
    color: #707070;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.permission-toggle__track::after {
    content: attr(data-off);
    position: absolute;
    right: 8px;
    font-weight: 700;
    color: #707070;
}

.permission-toggle__thumb {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(24, 24, 24, 0.12);
    left: 4px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.permission-toggle__text {
    min-width: 34px;
    text-align: left;
    color: #707070;
    font-size: 0.95rem;
}

.permission-toggle input:checked + .permission-toggle__track {
    background: linear-gradient(135deg, #181818, #282828);
    border-color: #181818;
    color: #fff;
}

.permission-toggle input:checked + .permission-toggle__track::after {
    content: attr(data-on);
    right: auto;
    left: 10px;
    color: #fff;
}

.permission-toggle input:checked + .permission-toggle__track .permission-toggle__thumb {
    transform: translateX(26px);
    background: #ffffff;
}

.permission-toggle input:checked ~ .permission-toggle__text { color: #181818; }

@media (max-width: 900px) {
    .permission-card {
        padding: 18px 16px;
        gap: 12px 16px;
    }

    .permission-card__title-row {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.form-actions {
    display: flex;
    justify-content: flex-end;
}

.status-break-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.role-section__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.table-container { overflow-x: auto; }

.mc-table {
    width: 100%;
    border-collapse: collapse;
}

.mc-table th,
.mc-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    font-size: 0.9rem;
}

.status-break-form {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
    margin-top: 12px;
}

.status-break-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.status-break-form__grid label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #282828;
}

.status-break-form__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.status-break-form__buttons {
    display: flex;
    gap: 8px;
}

.status-break-row--new {
    padding-top: 12px;
    border-top: 1px dashed #e0e0e0;
}

.status-break-row--new h5 {
    margin: 0 0 8px;
    color: #181818;
}

.btn-sm {
    padding: 8px 14px;
    font-size: 0.9rem;
}

.btn-text {
    background: none;
    border: none;
    padding: 4px 8px;
    color: #505050;
    cursor: pointer;
}

.btn-text.danger,
.btn-secondary.danger { color: #505050; }

.btn-secondary.danger { border-color: #a0a0a0; }

.form-error,
.success-banner {
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 500;
}

.form-error {
    background: #f0f0f0;
    color: #505050;
    border: 1px solid #e0e0e0;
}

.success-banner {
    background: #f0f0f0;
    color: #505050;
    border: 1px solid #d0d0d0;
}

.empty-state {
    color: #707070;
    font-style: italic;
}

.daily-task-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.daily-task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.daily-task-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.daily-task-list__label {
    font-weight: 600;
    color: #282828;
}

.inline-form { margin: 0; }

.daily-task-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.daily-task-form label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
}

/* =====================================
   DISPATCH
===================================== */
.dispatch-shell {
    max-width: 1100px;
    margin: var(--space-xl) auto;
    padding: 0 var(--space-md) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.dispatch-title {
    margin: 0 0 var(--space-xs);
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}

.dispatch-meta {
    color: var(--ink-400);
    margin: 0;
}
.dispatch-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #f0f0f0;
    box-shadow: var(--shadow-sm);
    color: var(--ink-700);
}

.dispatch-card {
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}

.dispatch-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.dispatch-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}

.dispatch-card-title {
    margin: 0;
    font-size: 18px;
    color: var(--ink-900);
}

.dispatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.dispatch-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.dispatch-label {
    font-weight: 600;
    color: var(--ink-800);
}

.dispatch-select {
    width: 100%;
    border: 1px solid rgba(24, 24, 24, 0.12);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--surface-muted);
    font-size: 14px;
    min-height: 44px;
}

.dispatch-hint {
    color: var(--ink-400);
    font-size: 13px;
}

.dispatch-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-sm);
}
.dispatch-actions form { margin: 0; }
.dispatch-actions .dispatch-meta { margin: 0; }

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

/* Platform management */
.console-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md) var(--space-xxl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.console-title {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}

.console-muted {
    color: var(--ink-400);
    margin: 0;
}

.console-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(24, 24, 24, 0.06);
    background: #f0f0f0;
    font-weight: 700;
    color: var(--ink-700);
}

.console-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    background: #ffffff;
    border: 1px solid rgba(24, 24, 24, 0.06);
    border-radius: var(--radius-panel);
    padding: var(--space-sm);
    box-shadow: var(--shadow-xs);
}

.console-tab {
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-md);
    padding: 10px 16px;
    cursor: pointer;
    color: var(--ink-500);
    font-weight: 600;
}

.console-tab.is-active {
    background: #ffffff;
    border-color: rgba(24, 24, 24, 0.12);
    color: var(--ink-900);
    box-shadow: var(--shadow-xs);
}

.console-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.console-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.console-panel {
    background: #ffffff;
    border: 1px solid rgba(24, 24, 24, 0.06);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
}

.console-heading {
    margin: 0;
    font-size: 20px;
    color: var(--ink-900);
}

.console-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.console-input,
.console-select,
.console-textarea {
    width: 100%;
    border: 1px solid rgba(24, 24, 24, 0.08);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    background: #f0f0f0;
    font-size: 14px;
}

.console-select { min-height: 44px; }

.console-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 10px 18px;
    min-height: 40px;
    border-radius: var(--radius-pill);
    border: 1px solid #111111;
    background: #111111;
    color: #4ade80;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.console-btn-ghost {
    background: #111111;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

.console-danger { color: #f87171; border-color: rgba(248, 113, 113, 0.3); }

.console-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.console-table {
    width: 100%;
    border-collapse: collapse;
}

.console-table th,
.console-table td {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(24, 24, 24, 0.08);
    font-size: 14px;
}

.console-table th {
    background: var(--surface-muted);
    color: var(--ink-500);
    font-weight: 700;
}

.console-alert {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-weight: 700;
}

.console-success {
    background: #f0f0f0;
    color: #404040;
}

.console-error {
    background: #f0f0f0;
    color: #404040;
}

.console-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.console-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.console-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(24, 24, 24, 0.08);
    font-size: 12px;
    color: var(--ink-600);
    background: var(--surface-muted);
}

.console-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border: 1px solid rgba(24, 24, 24, 0.08);
    border-radius: var(--radius-lg);
}

.console-list-card { background: var(--surface); }

.console-sections .console-section { display: none; }

.console-sections .console-section.is-active { display: block; }

.console-check {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.console-form-inline {
    flex: 1 1 260px;
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.console-inline-form { display: inline; }

.console-scroll {
    max-height: 260px;
    overflow: auto;
    padding-right: var(--space-xs);
}

@media (max-width: 768px) {
    .console-page { padding: var(--space-lg) var(--space-md); }

    .console-tabs { gap: 4px; }
}

.console-card {
    border: 1px solid rgba(24, 24, 24, 0.06);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.console-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.console-label {
    font-weight: 700;
    color: var(--ink-700);
    font-size: 13px;
}

.console-pill-action {
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: #f0f0f0;
}

.console-link {
    background: none;
    border: none;
    padding: 2px 4px;
    min-height: auto;
    color: #f87171;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    transition: color 0.15s ease;
}
.console-link:hover { color: #fca5a5; }

.console-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-sm);
}

.console-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-sm);
    border: 1px solid rgba(24, 24, 24, 0.08);
    border-radius: var(--radius-lg);
    background: #ffffff;
}

/* Header */
.mc-header.fixed {position:fixed;top:0;left:0;right:0;z-index:80;}
body {padding-top:56px;}
.mc-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 16px;
    background:#000000;
    color:#e0e0e0;
    box-shadow:0 6px 18px rgba(0, 0, 0, 0.35);
    flex-wrap:wrap;
}
.mc-left {display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:240px;}
.mc-brand {color:#e0e0e0;text-decoration:none;font-weight:700;font-size:17px;letter-spacing:0.2px;}
.mc-brand:hover {color:#e0e0e0;}
.mc-menu {display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.mc-item {position:relative;}
.mc-item-label {padding:6px 10px;border-radius:8px;cursor:pointer;display:inline-block;font-size:13px;color:#ffffff;}
.mc-item:hover .mc-item-label {background:rgba(255, 255, 255, 0.08);}
.mc-drop {display:none;position:absolute;top:100%;left:0;min-width:200px;background:#0c0c0c;border:1px solid #111;border-radius:10px;padding:8px 0;margin-top:6px;list-style:none;box-shadow:0 12px 28px rgba(0, 0, 0, 0.4);z-index:90;}
.mc-item.open .mc-drop,
.mc-item:hover .mc-drop {display:block;}
.mc-drop-item a {display:block;padding:10px 12px;color:#e0e0e0;text-decoration:none;font-size:13px;white-space:nowrap;}
.mc-drop-item a:hover, .mc-drop-item.active a {background:rgba(255, 255, 255, 0.08);}
.mc-right {display:flex;align-items:center;gap:12px;}
.mc-link {color:#e0e0e0;text-decoration:none;font-size:13px;}
.mc-badge {background:#707070;color:#fff;border-radius:999px;padding:2px 6px;font-size:11px;margin-left:8px;min-width:20px;text-align:center;}
.mc-user {position:relative;}
.mc-user-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255, 255, 255, 0.04);
    color:#e0e0e0;
    cursor:pointer;
}
.mc-user-name {font-weight:700;font-size:13px;}
.mc-user-btn:hover .mc-user-name {color:#e0e0e0;}
.mc-user-drop {
    position:absolute;
    right:0;
    left:auto;
    top:100%;
    margin-top:6px;
    min-width:200px;
    background:#0c0c0c;
    border:1px solid #111;
    border-radius:10px;
    box-shadow:0 12px 28px rgba(0, 0, 0, 0.4);
    padding:8px 0;
    list-style:none;
    margin:0;
    display:flex;
    flex-direction:column;
    z-index:95;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(6px);
    transition:opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.25s;
}
.mc-user-drop.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition-delay:0s;
}
.mc-user-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    border-radius:10px;
    color:#e0e0e0;
    text-decoration:none;
    font-size:13px;
}
.mc-user-link:hover,
.mc-user-link.active {background:rgba(255, 255, 255, 0.08);}
.mc-user-divider {
    display:block;
    height:1px;
    margin:8px 10px;
    background:#1f1f1f;
    list-style:none;
}
.mc-logout {color:#ff8a7a;font-weight:700;}
.mc-logout-item a {
    color:#ff8a7a;
    padding:12px 14px;
}
.mc-logout-item a:hover {background:rgba(255, 138, 122, 0.12);}
@media (max-width: 768px) {
    body {padding-top:74px;}
    .mc-bar {flex-direction:column;align-items:flex-start;}
    .mc-right {width:100%;justify-content:space-between;flex-wrap:wrap;gap:8px;}
}

/* Product edit */
.product-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
}

.product-users {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-sm);
}

.product-users-card {
    border: 1px solid rgba(24, 24, 24, 0.08);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    background: var(--surface-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    box-shadow: var(--shadow-xs);
}

.product-users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.product-users-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow: auto;
    padding-right: var(--space-xs);
}

.product-actions { grid-column: 1 / -1; }

.product-archive {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.pwd-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.pwd-list-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.console-pagination {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.console-page-btn {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(24, 24, 24, 0.12);
    background: var(--surface);
    color: var(--ink-700);
    text-decoration: none;
    font-weight: 600;
}

.console-page-btn.is-active {
    background: linear-gradient(135deg, #181818, #181818);
    color: #fff;
    border-color: transparent;
}

.pwd-reset-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.pwd-reset-token {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    border: 1px solid rgba(24, 24, 24, 0.08);
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 18px;
    color: var(--ink-900);
    display: inline-flex;
}

.roles-archive {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

/* Schedule edit */
.schedule-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.schedule-filters {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: end;
}

.schedule-actions {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.schedule-table th { text-align: center; }

.schedule-table td { vertical-align: top; }

.schedule-user { font-weight: 600; }

.schedule-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.schedule-time-row {
    display: flex;
    gap: var(--space-xs);
}

.schedule-time { min-width: 120px; }

.schedule-type { min-width: 160px; }

.break-slot-editor {
    margin-top: var(--space-xs);
    padding: var(--space-xs);
    border: 1px dashed rgba(24, 24, 24, 0.15);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.break-slot-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.break-slot-row {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.break-slot-time { min-width: 120px; }

.schedule-list-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-sm);
}

.summary-card {
    padding: var(--space-sm);
    border: 1px solid rgba(24, 24, 24, 0.08);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    box-shadow: var(--shadow-xs);
}

.schedule-time-text { font-size: 13px; }

.shifts-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.shifts-date { gap: var(--space-sm); }

.shifts-table td { vertical-align: top; }

.shifts-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.shift-view-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.shift-date-picker { gap: var(--space-sm); }

.shift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-sm);
}

.shift-card {
    padding: var(--space-sm);
    border: 1px solid rgba(24, 24, 24, 0.08);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.shift-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.shift-manual-row {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.shift-week-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-sm);
}

.shift-week-card {
    border: 1px solid rgba(24, 24, 24, 0.08);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    background: var(--surface-muted);
    box-shadow: var(--shadow-xs);
}

/* =====================================
   Users directory
===================================== */
.users-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-xxl);
}

.users-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.users-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.users-title {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.02em;
}

.users-subtitle {
    margin: 0;
    color: var(--ink-400);
}

.users-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
}

.users-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface);
    color: var(--ink-800);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.users-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.users-btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
}

.users-btn-primary:hover { background: var(--accent-strong); }

.users-btn-ghost {
    background: var(--surface-muted);
    color: var(--ink-800);
}

.users-panel {
    margin-top: var(--space-lg);
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.06);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg);
}

.users-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    align-items: end;
}

.users-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--ink-700);
}

.users-field input,
.users-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface-tint);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.users-field input:focus,
.users-field select:focus {
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(96, 96, 96, 0.15);
}

.users-filter-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: flex-start;
}

.users-table-wrap {
    margin-top: var(--space-lg);
    background: var(--surface);
    border-radius: var(--radius-panel);
    border: 1px solid rgba(24, 24, 24, 0.06);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 960px;
}

.users-table th,
.users-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(24, 24, 24, 0.05);
}

.users-table th {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.08em;
    color: var(--ink-200);
    background: var(--surface-muted);
}

.users-table tbody tr:hover { background: var(--surface-tint); }

.users-role {
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
    flex-wrap: wrap;
}

.users-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    border: 1px solid rgba(24, 24, 24, 0.08);
}

.users-pill-positive {
    background: rgba(128, 128, 128, 0.12);
    color: var(--success);
    border-color: rgba(128, 128, 128, 0.35);
}

.users-pill-muted {
    background: rgba(24, 24, 24, 0.06);
    color: var(--ink-400);
}

.users-note { color: var(--ink-200); }

.users-actions-col {
    text-align: right;
    white-space: nowrap;
}

.users-action-group {
    display: inline-flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.users-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(24, 24, 24, 0.1);
    color: var(--ink-800);
    background: var(--surface-muted);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.users-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.users-chip.soft {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-color: rgba(96, 96, 96, 0.3);
}

.users-chip.danger {
    background: rgba(144, 144, 144, 0.12);
    color: var(--danger);
    border-color: rgba(144, 144, 144, 0.4);
}

.users-empty {
    margin-top: var(--space-lg);
    padding: var(--space-xl);
    border-radius: var(--radius-panel);
    border: 1px dashed rgba(24, 24, 24, 0.12);
    background: var(--surface);
    text-align: center;
    color: var(--ink-400);
}

.users-empty-title {
    margin: 0 0 var(--space-2xs);
    font-weight: 700;
    color: var(--ink-800);
}

.users-empty-copy { margin: 0; }

.users-pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin: var(--space-lg) auto 0;
}

.users-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface);
    color: var(--ink-800);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.users-page.is-active {
    background: var(--ink-900);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.reactivate-shell {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-xxl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.reactivate-title {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}

.reactivate-subtitle {
    margin: 0;
    color: var(--ink-400);
    max-width: 640px;
}

.reactivate-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.reactivate-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.08);
    color: var(--ink-700);
    font-weight: 600;
    font-size: 13px;
}

.reactivate-chip.muted {
    background: var(--surface-muted);
    color: var(--ink-500, #505050);
}

.reactivate-chip.positive {
    background: rgba(128, 128, 128, 0.12);
    border-color: rgba(128, 128, 128, 0.35);
    color: var(--success);
}

.reactivate-link {
    align-self: center;
    color: var(--ink-600);
    text-decoration: none;
    font-weight: 600;
}

.reactivate-link:hover { color: var(--ink-900); }

.reactivate-card {
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.06);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.reactivate-card.muted {
    background: var(--surface-muted);
    border-style: dashed;
}

.reactivate-card.success {
    background: linear-gradient(135deg, #ffffff, rgba(128, 128, 128, 0.08));
    border-color: rgba(128, 128, 128, 0.35);
}

.reactivate-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.reactivate-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
}

.reactivate-item { display: flex; flex-direction: column; gap: 6px; }

.reactivate-label {
    margin: 0;
    color: var(--ink-400);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: none;
}

.reactivate-value {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-900);
}

.reactivate-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: rgba(24, 24, 24, 0.06);
    color: var(--ink-700);
    border: 1px solid rgba(24, 24, 24, 0.1);
    font-weight: 600;
    width: fit-content;
}

.reactivate-pill.muted { color: var(--ink-500, #505050); }

.reactivate-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.reactivate-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.reactivate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface);
    color: var(--ink-800);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.reactivate-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(24, 24, 24, 0.14);
}

.reactivate-btn.primary {
    background: linear-gradient(145deg, #606060 0%, #404040 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 26px rgba(64, 64, 64, 0.2);
}

.reactivate-btn.ghost {
    background: var(--surface-muted);
    color: var(--ink-800);
}

.wiki-approvals-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-xxl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.wiki-approvals-title {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}

.wiki-approvals-subtitle {
    margin: 0;
    color: var(--ink-400);
    max-width: 660px;
}

.wiki-approvals-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

.wiki-approvals-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.08);
    color: var(--ink-700);
    font-weight: 600;
    font-size: 13px;
}

.wiki-approvals-chip.muted { background: var(--surface-muted); color: var(--ink-500, #505050); }
.wiki-approvals-chip.ghost { background: rgba(24, 24, 24, 0.04); }
.wiki-approvals-chip.positive { background: rgba(128, 128, 128, 0.12); border-color: rgba(128, 128, 128, 0.35); color: var(--success); }

.wiki-approvals-link {
    align-self: center;
    color: var(--ink-700);
    text-decoration: none;
    font-weight: 600;
}

.wiki-approvals-link:hover { color: var(--ink-900); }

.wiki-approvals-panel,
.wiki-approvals-card {
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.06);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
}

.wiki-approvals-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    align-items: end;
}

.wiki-approvals-field { display: flex; flex-direction: column; gap: 6px; }

.wiki-approvals-field span {
    font-weight: 600;
    color: var(--ink-700);
}

.wiki-approvals-field input,
.wiki-approvals-field select {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface-tint);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wiki-approvals-field input:focus,
.wiki-approvals-field select:focus {
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(96, 96, 96, 0.15);
}

.wiki-approvals-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-start;
    align-items: center;
}

.wiki-approvals-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface);
    color: var(--ink-800);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wiki-approvals-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(24, 24, 24, 0.12);
}

.wiki-approvals-btn.primary {
    background: linear-gradient(145deg, #606060 0%, #404040 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(64, 64, 64, 0.2);
}

.wiki-approvals-btn.ghost { background: var(--surface-muted); }

.wiki-approvals-flash {
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid rgba(24, 24, 24, 0.08);
    font-weight: 600;
}

.wiki-approvals-flash.success {
    background: rgba(128, 128, 128, 0.12);
    color: var(--success);
    border-color: rgba(128, 128, 128, 0.3);
}

.wiki-approvals-flash.error {
    background: rgba(144, 144, 144, 0.12);
    color: var(--danger);
    border-color: rgba(144, 144, 144, 0.3);
}

.wiki-approvals-table-wrap { overflow-x: auto; }

.wiki-approvals-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 960px;
}

.wiki-approvals-table th,
.wiki-approvals-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(24, 24, 24, 0.05);
    text-align: left;
}

.wiki-approvals-table th {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.08em;
    color: var(--ink-200);
    background: #ffffff;
}

.wiki-approvals-table tbody tr:hover { background: var(--surface-tint); }

.wiki-approvals-checkbox { width: 42px; }

.wiki-approvals-titlecell { font-weight: 700; color: var(--ink-900); }

.wiki-approvals-bulk {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: var(--space-md);
}

.wiki-approvals-bulk-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

.wiki-approvals-bulk-field.stretch { flex: 1 1 260px; }

.wiki-approvals-bulk select,
.wiki-approvals-bulk textarea {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface-tint);
    font-size: 14px;
}

.wiki-approvals-bulk textarea { min-height: 56px; }

.wiki-approvals-empty {
    padding: var(--space-xl);
    border-radius: var(--radius-panel);
    border: 1px dashed rgba(24, 24, 24, 0.12);
    background: var(--surface);
    text-align: center;
    color: var(--ink-400);
    box-shadow: var(--shadow-sm);
}

.wiki-approvals-empty-title {
    margin: 0 0 var(--space-2xs);
    font-weight: 700;
    color: var(--ink-800);
}

.wiki-approvals-empty-copy { margin: 0; }

.wiki-create-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-xxl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.wiki-create-title {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}

.wiki-create-subtitle {
    margin: 0;
    color: var(--ink-400);
    max-width: 680px;
}

.wiki-create-meta {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: center;
}

.wiki-create-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.08);
    color: var(--ink-700);
    font-weight: 600;
    font-size: 13px;
}

.wiki-create-chip.muted { background: var(--surface-muted); color: var(--ink-500, #505050); }
.wiki-create-chip.ghost { background: rgba(24, 24, 24, 0.04); }

.wiki-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface);
    color: var(--ink-800);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wiki-create-btn.primary {
    background: linear-gradient(145deg, #606060 0%, #404040 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(64, 64, 64, 0.2);
}

.wiki-create-btn.ghost { background: var(--surface-muted); }

.wiki-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(24, 24, 24, 0.12);
}

.wiki-create-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.wiki-create-card {
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.08);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.wiki-create-card.success {
    background: linear-gradient(135deg, #ffffff, rgba(128, 128, 128, 0.08));
    border-color: rgba(128, 128, 128, 0.35);
}

.wiki-create-headline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.wiki-create-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.wiki-create-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    background: var(--surface);
}

.wiki-create-pill:hover {
    background: var(--accent);
    color: #fff;
}

.wiki-create-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wiki-create-field label {
    font-weight: 600;
    color: var(--ink-700);
}

.wiki-create-field input,
.wiki-create-field select,
.wiki-create-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface-tint);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wiki-create-field input:focus,
.wiki-create-field select:focus,
.wiki-create-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(96, 96, 96, 0.15);
}

.wiki-create-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-sm);
}

.wiki-create-check {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: 600;
    color: var(--ink-700);
}

.wiki-create-private {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid rgba(96, 96, 96, 0.25);
    border-radius: var(--radius-pill);
    background: rgba(96, 96, 96, 0.06);
    flex-wrap: wrap;
}

.wiki-create-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: 700;
    color: var(--ink-800);
}

.wiki-create-muted {
    margin: 0;
    color: var(--ink-400);
}

.wiki-create-hint {
    margin: 0;
    color: var(--ink-600);
}

.wiki-create-rte { gap: var(--space-sm); }

.wiki-create-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wiki-create-toolbar button,
.wiki-create-toolbar select {
    border: 1px solid rgba(24, 24, 24, 0.12);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
}

.wiki-create-toolbar button:hover { background: var(--surface-muted); }

.wiki-create-u { text-decoration: underline; }

.wiki-create-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--ink-600);
}

.wiki-create-color input {
    border: none;
    width: 32px;
    height: 24px;
    padding: 0;
    background: transparent;
}

.wiki-create-editor {
    border: 1px solid rgba(24, 24, 24, 0.12);
    border-radius: var(--radius-md);
    min-height: 220px;
    padding: var(--space-sm);
    font-size: 0.95rem;
    line-height: 1.5;
    background: var(--surface);
}

.wiki-create-editor:empty:before {
    content: attr(data-placeholder);
    color: var(--ink-200);
}

.wiki-create-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.wiki-create-search { position: relative; }

.wiki-create-search input {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface-tint);
}

.wiki-create-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    border: 1px solid rgba(24, 24, 24, 0.12);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    max-height: 180px;
    overflow-y: auto;
    z-index: 20;
    display: none;
}

.wiki-create-result {
    padding: 8px 10px;
    cursor: pointer;
}

.wiki-create-result:hover { background: var(--surface-muted); }

.wiki-create-selected {
    min-height: 32px;
    margin-bottom: var(--space-xs);
    color: var(--accent-strong);
    font-weight: 700;
}

.wiki-delete-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-xxl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.wiki-delete-title {
    margin: 0;
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}

.wiki-delete-subtitle {
    margin: 0;
    color: var(--ink-400);
}

.wiki-delete-meta {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: center;
}

.wiki-delete-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.08);
    color: var(--ink-700);
    font-weight: 600;
    font-size: 13px;
}

.wiki-delete-chip.muted { background: var(--surface-muted); color: var(--ink-500, #505050); }
.wiki-delete-chip.ghost { background: rgba(24, 24, 24, 0.04); }
.wiki-delete-chip.warning { background: rgba(192, 192, 192, 0.15); border-color: rgba(192, 192, 192, 0.35); color: var(--warning); }

.wiki-delete-card {
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.08);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.wiki-delete-card.muted { background: var(--surface-muted); }

.wiki-delete-card.success {
    border-color: rgba(128, 128, 128, 0.35);
    background: linear-gradient(135deg, #ffffff, rgba(128, 128, 128, 0.08));
}

.wiki-delete-headline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.wiki-delete-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
}

.wiki-delete-label {
    margin: 0;
    color: var(--ink-400);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: none;
}

.wiki-delete-value {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink-900);
}

.wiki-delete-actions { margin-top: var(--space-md); }

.wiki-delete-buttons {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wiki-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface);
    color: var(--ink-800);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wiki-delete-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(24, 24, 24, 0.12);
}

.wiki-delete-btn.primary {
    background: linear-gradient(145deg, #606060 0%, #404040 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(64, 64, 64, 0.2);
}

.wiki-delete-btn.ghost { background: var(--surface-muted); }
.wiki-delete-btn.danger { background: rgba(144, 144, 144, 0.12); color: var(--danger); border-color: rgba(144, 144, 144, 0.4); }

.wiki-deactivated-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-xxl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.wiki-deactivated-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.wiki-deactivated-title {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}

.wiki-deactivated-subtitle {
    margin: 0;
    color: var(--ink-400);
}

.wiki-deactivated-meta {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: center;
}

.wiki-deactivated-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.08);
    color: var(--ink-700);
    font-weight: 600;
    font-size: 13px;
}

.wiki-deactivated-chip.muted { background: var(--surface-muted); color: var(--ink-500, #505050); }
.wiki-deactivated-chip.ghost { background: rgba(24, 24, 24, 0.04); }

.wiki-deactivated-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface);
    color: var(--ink-800);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.wiki-deactivated-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.wiki-deactivated-card {
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.08);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.wiki-deactivated-card.muted { background: var(--surface-muted); }

.wiki-deactivated-table-wrap { overflow-x: auto; }

.wiki-deactivated-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
}

.wiki-deactivated-table th,
.wiki-deactivated-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(24, 24, 24, 0.05);
    text-align: left;
}

.wiki-deactivated-table th {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.08em;
    color: var(--ink-200);
    background: var(--surface-muted);
}

.wiki-deactivated-table tbody tr:hover { background: var(--surface-tint); }

.wiki-deactivated-strong { font-weight: 700; color: var(--ink-900); }

.wiki-deactivated-empty {
    padding: var(--space-xl);
    border-radius: var(--radius-panel);
    border: 1px dashed rgba(24, 24, 24, 0.12);
    background: var(--surface);
    text-align: center;
    color: var(--ink-400);
    box-shadow: var(--shadow-sm);
}

.wiki-deactivated-empty-title {
    margin: 0 0 var(--space-2xs);
    font-weight: 700;
    color: var(--ink-800);
}

.wiki-deactivated-empty-copy { margin: 0; }

.wiki-deactivated-pagination {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
}

.wiki-deactivated-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface);
    color: var(--ink-800);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.wiki-deactivated-page.is-active {
    background: var(--ink-900);
    color: #fff;
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .manage-role { padding: 20px; }

    .role-section { padding: 18px; }

    .status-break-form__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

    .permission-columns { grid-template-columns: 1fr; }
}

/* =====================================
   Wiki list
===================================== */
.wiki-list-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-xxl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.wiki-list-title {
    margin: 0;
    font-size: 32px;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}

.wiki-list-subtitle {
    margin: 0;
    color: var(--ink-400);
    max-width: 620px;
}

.wiki-list-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.wiki-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.06);
    color: var(--ink-600);
    font-weight: 600;
    font-size: 13px;
}

.wiki-list-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.wiki-search-form {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.wiki-search-input {
    min-width: 240px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(24, 24, 24, 0.12);
    background: var(--surface-tint);
    color: var(--ink-900);
    padding: 11px 16px;
    font-size: 0.95rem;
}

.wiki-search-input:focus {
    outline: none;
    border-color: rgba(24, 24, 24, 0.24);
    box-shadow: 0 0 0 3px rgba(24, 24, 24, 0.08);
}

.wiki-list-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: rgba(255, 255, 255, 0.8);
    color: var(--ink-800);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wiki-list-btn.primary {
    background: linear-gradient(145deg, #606060 0%, #404040 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(64, 64, 64, 0.25);
}

.wiki-list-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(24, 24, 24, 0.14);
}

.wiki-list-card {
    background: var(--surface);
    border: 1px solid rgba(24, 24, 24, 0.06);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.wiki-list-card.muted {
    align-items: flex-start;
    background: #ffffff;
    border-style: dashed;
}

.wiki-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.wiki-card-title {
    margin: var(--space-2xs) 0 0;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink-700);
}

.wiki-card-meta {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.wiki-list-table-wrap { overflow-x: auto; border-radius: var(--radius-md); }

.wiki-list-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 960px;
}

.wiki-list-table th,
.wiki-list-table td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(24, 24, 24, 0.05);
    text-align: left;
}

.wiki-list-table th {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.08em;
    color: var(--ink-200);
    background: #ffffff;
}

.wiki-list-table tbody tr:hover { background: var(--surface-tint); }
.wiki-list-table tbody tr.row-link { cursor: pointer; }
.wiki-approvals-row--link { cursor: pointer; transition: background 0.12s ease; }
.wiki-approvals-row--link:hover { background: var(--surface-tint); }

.wiki-list-link { color: var(--ink-900); font-weight: 700; text-decoration: none; }
.wiki-list-link:hover { color: var(--accent-strong); }

.wiki-list-empty {
    padding: var(--space-xl);
    border-radius: var(--radius-panel);
    border: 1px dashed rgba(24, 24, 24, 0.12);
    background: var(--surface);
    text-align: center;
    color: var(--ink-400);
    box-shadow: var(--shadow-sm);
}

.wiki-list-empty-title {
    margin: 0 0 var(--space-2xs);
    font-weight: 700;
    color: var(--ink-800);
}

.wiki-list-empty-copy { margin: 0; }

.wiki-list-pagination {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
}

.wiki-list-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(24, 24, 24, 0.08);
    background: var(--surface);
    color: var(--ink-800);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.wiki-list-page.is-active {
    background: var(--ink-900);
    color: #fff;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.wiki-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(24, 24, 24, 0.08);
    font-size: 12px;
    font-weight: 700;
}

.wiki-pill.pending {
    background: rgba(192, 192, 192, 0.15);
    color: var(--warning);
    border-color: rgba(192, 192, 192, 0.35);
}

.wiki-pill.muted {
    background: rgba(24, 24, 24, 0.06);
    color: var(--ink-400);
}

.wiki-pill.danger {
    background: rgba(144, 144, 144, 0.12);
    color: var(--danger);
    border-color: rgba(144, 144, 144, 0.35);
}

.wiki-pill.positive {
    background: rgba(128, 128, 128, 0.12);
    color: var(--success);
    border-color: rgba(128, 128, 128, 0.35);
}

/* =====================================
   WIKI PRINT
===================================== */
.wiki-print-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-sm);
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 0, 0, 0.06), transparent 36%),
    radial-gradient(circle at 82% 12%, rgba(0, 0, 0, 0.05), transparent 32%),
    var(--paper);
}
.wiki-print-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(280px, 420px);
  gap: var(--space-xl);
  align-items: flex-start;
}
.wiki-surface {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  box-shadow: 0 24px 72px rgba(12, 12, 12, 0.12);
  padding: var(--space-xl);
}
.wiki-print-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.wiki-print-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
}
.wiki-title-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.wiki-print-titles h1,
.wiki-print-header h1 {
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.02em;
}

.wiki-print-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin: var(--space-2xs) 0 0;
}
.wiki-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-800);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.wiki-chip.ghost {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-600, #505050);
  border-color: rgba(0, 0, 0, 0.06);
}
.wiki-chip.muted {
  background: rgba(0, 0, 0, 0.03);
  color: var(--ink-600, #505050);
  border-style: dashed;
}
.wiki-chip.status-draft {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink-700);
}
.wiki-chip.status-pending {
  background: rgba(192, 192, 192, 0.16);
  color: var(--warning);
  border-color: rgba(192, 192, 192, 0.3);
}
.wiki-chip.status-rejected {
  background: rgba(144, 144, 144, 0.14);
  color: var(--danger);
  border-color: rgba(144, 144, 144, 0.26);
}
.wiki-chip.status-published {
  background: rgba(128, 128, 128, 0.14);
  color: var(--success);
  border-color: rgba(128, 128, 128, 0.26);
}
.wiki-status-context {
  margin: 0;
  color: var(--ink-400);
  font-size: 14px;
}
.wiki-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.04));
}
.wiki-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: flex-end;
}
.wiki-action-row.header-actions { gap: var(--space-sm); }
.wiki-action-row.align-start { justify-content: flex-start; }
.wiki-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-800);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease, background 0.2s ease;
}
.wiki-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.wiki-btn.primary {
  background: var(--ink-900);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 16px 32px rgba(12, 12, 12, 0.26);
}
.wiki-btn.positive {
  background: var(--success);
  color: #fff;
  border-color: rgba(0, 0, 0, 0.05);
}
.wiki-btn.danger {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}
.wiki-btn.subtle { background: var(--surface-muted); }
.wiki-flash {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.92);
  margin: var(--space-md) 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.wiki-flash.error {
  background: rgba(144, 144, 144, 0.12);
  border-color: rgba(144, 144, 144, 0.35);
  color: var(--ink-900);
}
.wiki-flash.success {
  background: rgba(128, 128, 128, 0.12);
  border-color: rgba(128, 128, 128, 0.32);
  color: var(--ink-900);
}
.wiki-flash.note {
  background: rgba(192, 192, 192, 0.12);
  border-color: rgba(192, 192, 192, 0.28);
}
.wiki-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}
.wiki-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
}
.wiki-meta-card {
  background: var(--surface-muted);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.wiki-label {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink-400);
}
.wiki-value {
  margin: 0;
  font-weight: 700;
  color: var(--ink-900);
}
.wiki-section { margin-bottom: var(--space-lg); }
.wiki-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.wiki-content-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 240, 240, 0.92));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: calc(var(--space-lg) + 4px);
  box-shadow: var(--shadow-sm);
}
.wiki-block {
  margin-top: var(--space-lg);
  padding: calc(var(--space-lg) + 2px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 36px rgba(12, 12, 12, 0.08);
}
.wiki-block-head h3 { margin: 0; }
.wiki-muted {
  color: var(--ink-400);
  margin: 4px 0 0;
}
.wiki-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.wiki-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wiki-input,
.wiki-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(240, 240, 240, 0.8);
  font-size: 14px;
}
.wiki-textarea {
  min-height: 92px;
  resize: vertical;
}
.wiki-dual-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}
.wiki-reviewer-search { position: relative; }
.wiki-reviewer-selected {
  min-height: 18px;
  font-weight: 700;
  color: var(--accent-strong, var(--accent));
}
.wiki-reviewer-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 240px;
  overflow: auto;
  display: none;
  z-index: 4;
}
.wiki-reviewer-results.is-visible { display: block; }
.wiki-reviewer-option {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-800);
}
.wiki-reviewer-option:hover { background: var(--surface-muted); }
.wiki-reviewer-empty {
  padding: 10px 12px;
  color: var(--ink-400);
}
.wiki-print-side {
  position: sticky;
  top: 32px;
}
.wiki-side-head h3 { margin: 0; }
.wiki-side-group {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.wiki-side-label {
  margin: 0 0 var(--space-xs);
  font-weight: 700;
  color: var(--ink-800);
}
.wiki-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.wiki-side-link {
  color: var(--ink-800);
  font-weight: 600;
  text-decoration: none;
}
.wiki-side-link:hover { color: var(--accent-strong); }
.wiki-side-current {
  color: var(--ink-400);
  font-weight: 700;
}
.wiki-empty {
  color: var(--ink-400);
  margin: 0;
}

/* =====================================
   WIKI REACTIVATE
===================================== */
.wiki-reactivate-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-sm);
}
.wiki-reactivate-card {
  display: grid;
  gap: var(--space-md);
}

.wiki-reactivate-title {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.02em;
}
.wiki-reactivate-meta {
  margin: 0;
  color: var(--ink-400);
  max-width: 640px;
}
.wiki-reactivate-summary {
  padding: var(--space-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: grid;
  gap: 6px;
}
.wiki-reactivate-status {
  margin: 0;
  font-weight: 700;
  color: var(--ink-800);
}
.wiki-reactivate-status.muted { color: var(--ink-400); }
.wiki-reactivate-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* =====================================
   WORKFLOW ASSIGN
===================================== */
.wf-assign-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-sm);
  background:
    radial-gradient(circle at 12% 12%, rgba(0, 0, 0, 0.04), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(0, 0, 0, 0.03), transparent 28%),
    var(--paper);
}
.wf-assign-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.wf-assign-headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.wf-assign-subtitle {
  margin: 0;
  color: var(--ink-400);
  max-width: 640px;
}
.wf-assign-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 400px);
  gap: var(--space-lg);
  align-items: start;
}
.wf-panel {
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  padding: var(--space-xl);
  box-shadow: 0 22px 62px rgba(12, 12, 12, 0.1);
}
.wf-assign-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.wf-assign-grid-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.wf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wf-field label {
  font-weight: 700;
  color: var(--ink-800);
}
.wf-input,
.wf-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.86);
  font-size: 14px;
}
.wf-input.is-disabled { opacity: 0.55; }
.wf-help {
  margin: 0;
  color: var(--ink-400);
  font-size: 13px;
}
.wf-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-xs);
}
.wf-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink-700);
  margin-top: 4px;
}
.wf-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  min-height: 24px;
}
.wf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(96, 96, 96, 0.28);
}
.wf-chip button {
  border: none;
  background: transparent;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.wf-search { position: relative; }
.wf-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: none;
  max-height: 240px;
  overflow: auto;
  z-index: 10;
}
.wf-search-option {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-800);
}
.wf-search-option:hover { background: var(--surface-muted); }
.wf-search-empty {
  padding: 10px 12px;
  color: var(--ink-400);
}
.wf-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}
.wf-btn {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-900);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.wf-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.wf-btn.primary {
  background: var(--ink-900);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 16px 32px rgba(12, 12, 12, 0.24);
}
.wf-btn.ghost { background: var(--surface-muted); }
.wf-assign-flash {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.9);
  font-weight: 700;
}
.wf-assign-flash.success {
  color: var(--success);
  border-color: rgba(128, 128, 128, 0.32);
  background: rgba(128, 128, 128, 0.12);
}
.wf-assign-flash.error {
  color: var(--danger);
  border-color: rgba(144, 144, 144, 0.32);
  background: rgba(144, 144, 144, 0.12);
}
.wf-assign-side {
  position: sticky;
  top: 28px;
  display: grid;
  gap: var(--space-md);
}
.wf-side-head h3 { margin: 0; }
.wf-side-section {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: var(--space-sm);
}
.wf-side-label {
  margin: 0 0 var(--space-xs);
  font-weight: 700;
  color: var(--ink-800);
}
.wf-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.wf-side-link {
  color: var(--ink-800);
  font-weight: 600;
  text-decoration: none;
}
.wf-side-link:hover { color: var(--accent-strong); }

/* =====================================
   WORKFLOW LIST
===================================== */
.wf-list-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-sm);
}
.wf-list-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.wf-list-headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.wf-list-headline h1 {
  margin: 0;
  letter-spacing: -0.02em;
}
.wf-list-sub {
  margin: 0;
  color: var(--ink-400);
}
.wf-list-pill {
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 700;
}
.wf-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.wf-toggle-label {
  font-weight: 700;
  color: var(--ink-900);
}
.wf-toggle-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink-700);
}
.wf-list-empty {
  color: var(--ink-400);
  margin: 0;
}

/* =====================================
   WORKFLOW MINE
===================================== */
.wf-mine-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.wf-mine-headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.wf-mine-headline h1 {
  margin: 0;
  letter-spacing: -0.02em;
}
.wf-mine-sub {
  margin: 0;
  color: var(--ink-400);
}
.wf-mine-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.wf-mine-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

/* =====================================
   WORKFLOW CREATE
===================================== */
.wf-create-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.wf-create-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.wf-create-headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
  .wf-create-headline h1 {
    margin: 0;
    letter-spacing: -0.02em;
  }
  .wf-create-sub {
    margin: 0;
    color: var(--ink-400);
  }
  @media (max-width: 1080px) {
    .wiki-print-grid { grid-template-columns: 1fr; }
    .wiki-print-side {
      position: relative;
      top: auto;
    }
    .wf-assign-grid { grid-template-columns: 1fr; }
    .wf-assign-side {
      position: relative;
      top: auto;
    }
    .wf-create-head {
      flex-direction: column;
      align-items: flex-start;
    }
  }

/* ========== Platform management (lux) ========== */
.pm-luxe {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}
.pm-luxe .console-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #e0e0e0;
  border-radius: 999px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.pm-luxe .console-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 18px 0 10px;
}
.pm-luxe .console-tab {
  border-radius: 14px;
  border: 1px solid #e0e0e0;
  background: #fff;
  padding: 12px;
  font-weight: 700;
  color: #181818;
  transition: all 0.18s ease;
  box-shadow: 0 12px 30px rgba(24, 24, 24, 0.08);
}
.pm-luxe .console-tab.is-active {
  background: linear-gradient(135deg, #181818, #282828);
  color: #fff;
  border-color: #181818;
}
.pm-luxe .console-panel {
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  padding: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(24, 24, 24, 0.06);
}
.pm-luxe .console-grid { gap: 16px; }
.pm-luxe .console-card,
.pm-luxe .console-table-wrap {
  border-radius: 16px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.pm-luxe .console-btn {
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #181818, #181818);
  color: #fff;
  border: none;
  box-shadow: 0 12px 28px rgba(24, 24, 24, 0.16);
}
.pm-luxe .console-btn-ghost {
  border-radius: 12px;
  padding: 10px 16px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #181818;
}
.pm-luxe .console-input,
.pm-luxe .console-select,
.pm-luxe textarea {
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 12px 12px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pm-luxe .console-input:focus,
.pm-luxe .console-select:focus,
.pm-luxe textarea:focus {
  border-color: #808080;
  box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.16);
}
.pm-luxe .console-alert {
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.pm-luxe .console-alert.console-success {
  background: linear-gradient(135deg, #505050, #808080);
  color: #ffffff;
}
.pm-luxe .console-alert.console-error {
  background: linear-gradient(135deg, #505050, #707070);
  color: #ffffff;
}
.pm-luxe .console-panel h3 {
  font-size: 18px;
  color: #181818;
}
.pm-luxe .console-muted { color: #707070; }
.pm-luxe .console-table thead th {
  background: #181818;
  color: #fff;
  border-color: #181818;
}
.pm-luxe .console-table tbody tr:nth-child(odd) { background: #ffffff; }
.pm-luxe .console-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 14px 0;
}

/* =====================================
   Role editor (roles.edit.php)
===================================== */
.role-canvas {
  background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 30%, #ffffff 100%);
  padding: var(--space-xl) 0;
}
.role-shell {
  width: min(1580px, 96vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.role-rail {
  position: sticky;
  top: calc(var(--space-lg) + 50px);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: var(--space-lg) var(--space-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.04);
  display: grid;
  gap: var(--space-md);
}
.role-rail__brand h2 {
  margin: 4px 0 0;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.role-eyebrow {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--ink-400);
}
.role-rail__hint {
  margin: 6px 0 0;
  color: var(--ink-400);
  line-height: 1.4;
}
.role-rail__meta {
  display: grid;
  gap: 6px;
}
.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid rgba(12, 12, 12, 0.08);
  font-weight: 600;
  color: var(--ink-700);
}
.role-meta-line {
  margin: 0;
  color: var(--ink-400);
  font-size: 13px;
}
.role-rail__links {
  display: grid;
  gap: 6px;
}
.role-rail__link {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px 12px;
  font-weight: 700;
  color: var(--ink-700);
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}
.role-rail__link:hover {
  border-color: rgba(96, 96, 96, 0.22);
  color: var(--ink-900);
}
.role-rail__link.is-active {
  background: #f0f0f0;
  border-color: rgba(96, 96, 96, 0.3);
  box-shadow: none;
  color: #181818;
}
.role-rail__back {
  color: var(--ink-600);
  font-weight: 600;
  text-decoration: none;
}
.role-rail__back:hover { color: var(--ink-900); }
.role-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.role-title {
  margin: 4px 0 6px;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.role-subtitle {
  margin: 0;
  color: var(--ink-400);
  max-width: 760px;
}
.role-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(12, 12, 12, 0.06);
  background: #ffffff;
}
.role-chip__label {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ink-400);
}
.role-chip__value {
  font-weight: 700;
  color: var(--ink-800);
}
.role-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}
.role-metric {
  background: var(--surface);
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: 14px;
  padding: var(--space-sm);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
  display: grid;
  gap: 6px;
}
.role-metric__label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--ink-400);
}
.role-metric__value {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-900);
}
.role-metric__note {
  margin: 0;
  color: var(--ink-400);
}
.role-flashes {
  display: grid;
  gap: var(--space-sm);
}
.role-alert {
  border-radius: 14px;
  padding: var(--space-sm);
  border: 1px solid rgba(12, 12, 12, 0.08);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink-800);
}
.role-alert--success {
  border-color: rgba(128, 128, 128, 0.4);
  background: linear-gradient(135deg, #f0f0f0, #ffffff);
  color: #606060;
}
.role-alert--error {
  border-color: rgba(144, 144, 144, 0.35);
  background: linear-gradient(135deg, #f0f0f0, #ffffff);
  color: #505050;
}
.role-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.role-panel {
  background: var(--surface);
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: 18px;
  padding: var(--space-lg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.04);
  display: grid;
  gap: var(--space-md);
}
.role-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.role-panel__title {
  margin: 0;
  font-size: 22px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.role-panel__lead {
  margin: 6px 0 0;
  color: var(--ink-400);
}

.role-section.is-active { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.05); }
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
}
.field-grid--two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field-label {
  font-weight: 700;
  color: var(--ink-800);
  letter-spacing: 0.01em;
}
.role-input {
  width: 100%;
  border: 1px solid rgba(12, 12, 12, 0.08);
  border-radius: 12px;
  padding: 11px 12px;
  background: #ffffff;
  font-size: 14px;
  color: var(--ink-800);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.role-input:focus {
  border-color: rgba(96, 96, 96, 0.6);
  box-shadow: 0 0 0 2px var(--accent-soft);
  outline: none;
}
.role-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-400) 50%), linear-gradient(135deg, var(--ink-400) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: 12px;
  background: #ffffff;
}
.checkbox-row input { margin-top: 4px; }
.muted {
  color: var(--ink-400);
  margin: 0;
}
.permission-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: var(--space-md);
  align-items: start;
}
.permission-card {
  border: 1px solid rgba(12, 12, 12, 0.05);
  border-radius: 16px;
  background: #ffffff;
  padding: var(--space-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  align-content: start;
}
.permission-card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  flex-wrap: wrap;
  grid-column: 1 / -1;
}
.permission-sub {
  margin: 0;
  color: var(--ink-400);
  font-size: 13px;
}
.permission-card__item {
  display: grid;
  gap: 6px;
}
.permission-card__item label {
  font-weight: 700;
  color: var(--ink-800);
}
.console-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.console-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink-700);
}
.console-muted {
  color: var(--ink-400);
  font-size: 13px;
}
.role-form-actions {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  bottom: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95));
  padding: 10px 0;
  z-index: 5;
}
.role-btn {
  border: 1px solid rgba(12, 12, 12, 0.08);
  border-radius: 12px;
  padding: 11px 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  background: #181818;
  color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
}
.role-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}
.role-btn--ghost {
  background: #ffffff;
  color: var(--ink-800);
  border-color: rgba(12, 12, 12, 0.08);
  box-shadow: none;
}
.role-btn--danger {
  color: var(--danger);
  border-color: rgba(144, 144, 144, 0.25);
}
.role-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.role-table th,
.role-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(12, 12, 12, 0.06);
  text-align: left;
}
.role-table th {
  text-transform: none;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: var(--ink-500, #606060);
  background: #f0f0f0;
}
.table-shell {
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.break-form {
  border: 1px solid rgba(12, 12, 12, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-md);
}
.break-form--new {
  border-style: dashed;
  background: #ffffff;
}
.break-form__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.break-form__buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.task-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 12px 14px;
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}
.task-list__label {
  font-weight: 700;
  color: var(--ink-800);
}
.task-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.policy-legend {
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: linear-gradient(180deg, #ffffff, #ffffff);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-sm);
}
.policy-legend__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.policy-legend__title {
  margin: 0;
  font-size: 18px;
  color: var(--ink-900);
}
.policy-legend__hint {
  margin: 0;
  color: var(--ink-400);
}
.policy-legend__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}
.policy-card {
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: #fff;
  box-shadow: var(--shadow-xs, 0 4px 10px rgba(0, 0, 0, 0.05));
  display: grid;
  gap: 6px;
}
.policy-card__eyebrow {
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  font-size: 11px;
}
.policy-card__name {
  margin: 0;
  font-weight: 700;
  color: var(--ink-800);
}
.policy-card__text {
  margin: 0;
  color: var(--ink-500, #606060);
  line-height: 1.5;
}
.role-link {
  border: none;
  background: transparent;
  color: var(--ink-700);
  font-weight: 700;
  cursor: pointer;
}
.role-link--danger { color: var(--danger); }
.inline-form { margin: 0; }
.approval-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-500);
}
.approval-legend span strong { color: var(--ink-800); }
.approval-guide { display: none; }
.required-text {
  color: var(--danger);
  font-weight: 600;
}

/* =====================================
   Capability lab (roles.edit.php redesign)
===================================== */
.capability-lab {
  width: min(1620px, 96vw);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) calc(var(--space-xl) + var(--space-md));
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: relative;
  isolation: isolate;
}
.capability-lab::before {
  content: '';
  position: absolute;
  inset: -160px -10% auto;
  height: 320px;
  background:
    radial-gradient(circle at 20% 40%, rgba(96, 96, 96, 0.14), transparent 45%),
    radial-gradient(circle at 82% 18%, rgba(24, 24, 24, 0.12), transparent 42%);
  z-index: -1;
}
.lab-header {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-lg);
  align-items: stretch;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, #f0f0f0 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-panel);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}
.lab-header::after {
  content: '';
  position: absolute;
  inset: -18% 18% auto;
  height: 320px;
  background: radial-gradient(circle, rgba(96, 96, 96, 0.1), transparent 60%);
  z-index: 0;
}
.lab-header > * {
  position: relative;
  z-index: 1;
}
.lab-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.lab-eyebrow {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--ink-400);
}
.lab-title {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.lab-subtitle {
  margin: 0;
  color: var(--ink-400);
  max-width: 720px;
  line-height: 1.5;
}
.lab-header__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lab-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.lab-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
  border: 1px solid rgba(12, 12, 12, 0.06);
  box-shadow: var(--shadow-md);
  min-width: 140px;
}
.lab-chip__label {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--ink-400);
}
.lab-chip__value {
  font-weight: 700;
  color: var(--ink-900);
}
.lab-meter {
  align-self: stretch;
  background: linear-gradient(135deg, #181818 0%, #121212 100%);
  color: #ffffff;
  border-radius: var(--radius-panel);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.lab-meter__label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.lab-meter__items {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.lab-meter__item {
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 4px;
  min-height: 120px;
}
.lab-meter__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.6);
}
.lab-meter__title {
  margin: 0;
  font-weight: 700;
  color: #ffffff;
}
.lab-meter__state {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}
.lab-meter__footer {
  margin-top: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.lab-flash-stack {
  display: grid;
  gap: var(--space-sm);
}
.lab-alert {
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  border: 1px solid rgba(12, 12, 12, 0.08);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  color: var(--ink-800);
}
.lab-alert--success {
  border-color: rgba(128, 128, 128, 0.3);
  background: linear-gradient(135deg, #f0f0f0, #ffffff);
  color: #606060;
}
.lab-alert--error {
  border-color: rgba(144, 144, 144, 0.25);
  background: linear-gradient(135deg, #f0f0f0, #ffffff);
  color: #505050;
}
.lab-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.lab-block {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #ffffff 100%);
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: var(--radius-panel);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.lab-block--primary {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #ffffff 100%);
  border-color: rgba(12, 12, 12, 0.08);
  box-shadow: var(--shadow-lg);
}
.lab-block__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.lab-block__title {
  margin: 4px 0;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.lab-block__lede {
  margin: 0;
  color: var(--ink-400);
  max-width: 760px;
}
.lab-head-meta {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  flex-wrap: wrap;
}
.lab-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: #f0f0f0;
  color: #181818;
  font-weight: 700;
  border: 1px solid rgba(96, 96, 96, 0.25);
}
.lab-mini-chip--muted {
  background: #f0f0f0;
  color: var(--ink-600);
  border-color: rgba(12, 12, 12, 0.08);
}
.lab-grid {
  display: grid;
  gap: var(--space-sm);
}
.lab-grid--two {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-sm);
}
.lab-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lab-label {
  font-weight: 700;
  color: var(--ink-800);
  letter-spacing: 0.01em;
}
.lab-input {
  width: 100%;
  border: 1px solid rgba(12, 12, 12, 0.12);
  border-radius: 14px;
  padding: 11px 12px;
  font-size: 14px;
  background: #f0f0f0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.lab-input:focus {
  border-color: rgba(96, 96, 96, 0.6);
  box-shadow: 0 0 0 2px var(--accent-soft);
  outline: none;
  background: #ffffff;
}
.lab-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-400) 50%), linear-gradient(135deg, var(--ink-400) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.lab-hint {
  margin: 0;
  color: var(--ink-400);
  font-size: 13px;
}
.lab-inline-reveal {
  border: 1px dashed rgba(12, 12, 12, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-sm);
  background: #ffffff;
}
.lab-inline-reveal summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-700);
}
.lab-inline-reveal[open] { background: #ffffff; }
.lab-policy-list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.lab-policy-list li {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-sm);
  box-shadow: var(--shadow-sm);
}
.lab-policy-list small {
  color: var(--ink-400);
  display: block;
}
.lab-policy-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: #181818;
  color: #ffffff;
  font-weight: 700;
}
.lab-guardrails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-sm);
  background: #ffffff;
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}
.lab-guardrails__title {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--ink-800);
}
.lab-guardrails ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-500);
}
.lab-pill-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}
.lab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: #f0f0f0;
  border: 1px solid rgba(96, 96, 96, 0.25);
  color: #181818;
  font-weight: 700;
}
.lab-pill--muted {
  background: #f0f0f0;
  color: var(--ink-600);
  border-color: rgba(12, 12, 12, 0.08);
}
.lab-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
  align-items: start;
}
.lab-lane {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.lane-label {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--ink-400);
}
.lab-lanes--flat .lab-lane { display: contents; }
.lab-lanes--flat .lane-label { display: none; }
.module-card {
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-left: 4px solid var(--accent);
  border-radius: 18px;
  padding: var(--space-md);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-sm);
  position: relative;
  overflow: hidden;
}
.module-card[data-complexity="medium"] { border-left-color: var(--warning); }
.module-card[data-complexity="low"] { border-left-color: var(--ink-200); }
.module-card--compact { padding: var(--space-sm); }
.module-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  opacity: 0;
  transition: none;
  z-index: 0;
}
.module-card:hover::before { opacity: 0; }
.module-card > * {
  position: relative;
  z-index: 1;
}
.module-card__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  align-items: flex-start;
}
.module-tag {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--ink-400);
}
.module-tag--critical { color: var(--danger); }
.module-title {
  margin: 2px 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.module-note {
  margin: 0;
  color: var(--ink-400);
  max-width: 420px;
}
.module-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.module-state {
  font-weight: 700;
  color: var(--ink-600);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: #f0f0f0;
}
.module-card.is-configured .module-state {
  background: #f0f0f0;
  color: #606060;
}
.module-trigger {
  border: 1px solid rgba(12, 12, 12, 0.12);
  background: linear-gradient(135deg, #181818 0%, #121212 100%);
  color: #ffffff;
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.module-trigger:hover { transform: translateY(-1px); }
.module-card__body {
  border-top: 1px dashed rgba(12, 12, 12, 0.08);
  padding-top: var(--space-sm);
  display: grid;
  gap: var(--space-sm);
}
.module-card__body[hidden] { display: none; }
.module-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}
.lab-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.lab-switch input {
  appearance: none;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #d0d0d0;
  background: #e0e0e0;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  order: 2;
  margin-left: auto;
}
.lab-switch input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}
.lab-switch input:checked {
  background: #181818;
  border-color: #181818;
}
.lab-switch input:checked::after { transform: translateX(18px); }
.lab-form-actions {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  bottom: 12px;
  padding: var(--space-sm) 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.98));
  border-top: 1px solid rgba(12, 12, 12, 0.06);
  box-shadow: 0 -12px 34px rgba(12, 12, 12, 0.08);
  z-index: 5;
}
.lab-btn {
  border: 1px solid rgba(12, 12, 12, 0.12);
  border-radius: var(--radius-pill);
  padding: 12px 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  background: #181818;
  color: #ffffff;
  box-shadow: var(--shadow-md);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lab-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.lab-btn--ghost {
  background: #ffffff;
  color: var(--ink-800);
  box-shadow: none;
}
.lab-link {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.break-stack {
  display: grid;
  gap: var(--space-md);
}
.break-tile {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 50px -32px rgba(0, 0, 0, 0.25);
  padding: 18px 20px;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.break-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 60px -30px rgba(0, 0, 0, 0.28);
}
.break-tile[open] {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 70px -32px rgba(0, 0, 0, 0.32);
}
.break-tile summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.break-summary {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
}
.break-title {
  margin: 0;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.break-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.break-meta {
  margin: 2px 0 0;
  color: var(--ink-400);
  font-size: 13px;
}
.break-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  border: 1px solid #f0f0f0;
  color: var(--ink-700);
  font-weight: 700;
  box-shadow: inset 0 1px 0 #fff;
}
.break-body {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.break-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}
.break-form-group {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  display: grid;
  gap: 12px;
  align-content: start;
}
.break-form-group .lab-mini-chip {
  background: transparent;
  color: #808080;
  padding: 0;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
  font-size: 11px;
}
.break-form-actions {
  background: transparent;
  box-shadow: none;
  padding: 0;
  align-content: end;
  justify-items: end;
}
.break-form-actions .lab-mini-chip { text-align: right; }
.break-form-actions .lab-btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
}
.break-form-actions .lab-btn--ghost:hover { border-color: rgba(0, 0, 0, 0.2); }
.break-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.break-add {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 18px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.break-add summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-900);
}
.task-stack {
  display: grid;
  gap: var(--space-xs);
}
.task-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 10px 12px;
  border: 1px solid rgba(12, 12, 12, 0.08);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}
.task-chip__label {
  font-weight: 700;
  color: var(--ink-800);
}
.task-chip__action { margin: 0; }
.task-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-end;
}
.lab-ghost {
  margin: 0;
  color: var(--ink-400);
}
@media (max-width: 1180px) {
  .capability-lab {
    width: 100%;
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }
  .lab-header { grid-template-columns: 1fr; }
  .lab-meter { order: -1; }
  .lab-lanes { grid-template-columns: 1fr; }
  .module-actions { flex-wrap: wrap; }
  .lab-form-actions { position: static; }
}
@media (max-width: 720px) {
  .lab-header { padding: var(--space-lg); }
  .lab-block { padding: var(--space-lg) var(--space-md); }
  .lab-btn {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 1180px) {
  .role-shell {
    width: 100%;
    padding: 0 var(--space-md);
  }
  .role-rail {
    position: relative;
    top: 0;
  }
}
@media (max-width: 720px) {
  .role-btn {
    width: 100%;
    text-align: center;
  }
}

/* Full-width page containers */
body > main,
body > div,
body > section,
body > article,
.main_logged > main,
.main_logged > div,
.main_logged > section,
.main_logged > article {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Unified layout: single continuous surface across pages */
body.ui-unified { background: var(--surface); }

body.ui-unified .card,
body.ui-unified .panel,
body.ui-unified .box,
body.ui-unified [class*="-card"],
body.ui-unified [class*="-panel"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

body.ui-unified .eval-panel-head,
body.ui-unified .eval-filter-actions,
body.ui-unified .voe-filter-header,
body.ui-unified .assess-section-header,
body.ui-unified .assess-card-header,
body.ui-unified .panel-head {
  border: 0;
  padding-bottom: 0;
}

body.ui-unified .eval-filter-actions { padding-top: 0; }

body.ui-unified hr {
  border: 0;
  height: 0;
  margin: 0;
}

.unified-surface {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.unified-surface .assess-section-header { margin-bottom: 0; }

.unified-surface .eval-panel-head {
  border-bottom: 0;
  padding-bottom: 0;
}

.unified-surface .voe-results-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

/* flat ui overrides to enforce solid colors and remove depth */
:root {
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-muted: #ffffff;
  --surface-tint: #ffffff;
  --border: #d6d6d6;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

*,
*::before,
*::after {
  box-shadow: none !important;
  background-image: none !important;
}

button,
.btn,
input[type="submit"],
input[type="button"],
.agenda-btn,
.btn-primary,
.btn-danger {
  background: #111111 !important;
  background-image: none !important;
  border: 1px solid #111111 !important;
  box-shadow: none !important;
  min-height: 44px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.12s ease !important;
}

.btn-secondary,
.btn-ghost,
.agenda-btn-ghost {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-700) !important;
  transition: background 0.15s ease !important;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.agenda-btn:hover,
.btn-primary:hover,
.btn-danger:hover {
  background: #222222 !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
.agenda-btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  box-shadow: none !important;
  transform: none !important;
}

button:active,
.btn:active,
input[type="submit"]:active,
input[type="button"]:active,
.agenda-btn:active,
.btn-primary:active,
.btn-danger:active {
  background: #2e2e2e !important;
  opacity: 0.9 !important;
  transform: scale(0.98) !important;
}

button:disabled,
.btn:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.agenda-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ─── MANAGEMENT CONSOLE BUTTON SYSTEM ──────────────────────────────
   Overrides the generic button rule above.
   Sidebar tabs keep a white nav appearance; action buttons use the
   black-background + semantic text-color system.
─────────────────────────────────────────────────────────────────── */

/* Sidebar navigation tabs — white, not black */
.console-tab {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  min-height: 40px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  width: 100% !important;
  text-align: left !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.console-tab:hover {
  background: #f5f5f5 !important;
  border-color: #b0b0b0 !important;
  transform: none !important;
}
.console-tab.is-active {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

/* Primary action buttons (Add, Create, Save) — black + green text */
.console-btn {
  background: #111111 !important;
  background-image: none !important;
  border: 1px solid #111111 !important;
  color: #4ade80 !important;
  box-shadow: none !important;
  min-height: 40px !important;
  padding: 10px 18px !important;
}
.console-btn:hover { background: #222222 !important; color: #4ade80 !important; transform: none !important; }
.console-btn:active { background: #2e2e2e !important; opacity: 0.9 !important; transform: scale(0.98) !important; }

/* Ghost / secondary action buttons (Rename, Set manager, Open editor) — black + white text */
.console-btn.console-btn-ghost,
a.console-btn,
a.console-btn-ghost {
  background: #111111 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
.console-btn.console-btn-ghost:hover,
a.console-btn:hover,
a.console-btn-ghost:hover {
  background: #222222 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  transform: none !important;
}

/* Danger / negative actions (Deactivate, Delete) — black + red text */
.console-btn.console-danger,
.console-btn.console-btn-ghost.console-danger,
a.console-btn.console-danger,
a.console-btn-ghost.console-danger {
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
}
.console-btn.console-danger:hover,
.console-btn.console-btn-ghost.console-danger:hover {
  background: #1f0808 !important;
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
}

/* Inline remove links — minimal, no black block */
.console-link {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  padding: 2px 4px !important;
  color: #f87171 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

select {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
}

table,
.assess-table,
.agenda-table,
.listing-table {
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

th,
.assess-table th,
.agenda-table th {
  background: #f3f3f3 !important;
  background-image: none !important;
}

tbody tr:hover td,
.assess-table tr:hover td,
.agenda-table tr:hover td { background: transparent !important; }

.mc-bar,
.mc-drop,
.mc-user-drop {
  background: #111111 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mc-item-label,
.mc-user-btn { background: transparent !important; }

.mc-header.fixed { backdrop-filter: none !important; }

.pill,
.badge,
.tag,
.agenda-chip,
.dispatch-pill,
.mc-badge,
.assess-pill,
.assess-chip {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Table standardization */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--table-radius) !important;
}

table th,
table td {
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x) !important;
  text-align: center !important;
  vertical-align: middle !important;
}

table tr:first-child th:first-child,
table tr:first-child td:first-child { border-top-left-radius: var(--table-radius) !important; }

table tr:first-child th:last-child,
table tr:first-child td:last-child { border-top-right-radius: var(--table-radius) !important; }

table tr:last-child th:first-child,
table tr:last-child td:first-child { border-bottom-left-radius: var(--table-radius) !important; }

table tr:last-child th:last-child,
table tr:last-child td:last-child { border-bottom-right-radius: var(--table-radius) !important; }

table .actions,
table .actions-cell,
table .users-actions-col,
table .users-action-group,
table .users-role,
table .agent-cell {
  text-align: center !important;
  justify-content: center !important;
}

table .actions-cell,
table .users-action-group,
table .users-role,
table .agent-cell { align-items: center !important; }

.table-wrap,
.table-shell,
.table-card,
.table-container,
.table-scroll,
.assess-table-card,
.assess-table-wrap,
.agenda-table-wrap,
.agenda-table-card,
.break-table-wrap,
.break-table-card,
.coach-table-card,
.daily-table-wrap,
.daily-table-card,
.dayoff-table-wrap,
.eval-table-card,
.users-table-wrap,
.wiki-list-table-wrap,
.wiki-deactivated-table-wrap,
.wiki-approvals-table-wrap,
.console-table-wrap,
.workflow-table-wrap,
.wf-table-wrap,
.send-table-wrap { border-radius: var(--table-radius) !important; }

/* =====================================
   UTILITY
===================================== */
.text-center { text-align: center; }

/* =====================================
   COACHING — HEADER FLEX LAYOUT
===================================== */
.coach-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.coach-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* =====================================
   COACHING NEW — COMPACT PANEL
===================================== */
.coach-compact-panel {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

/* =====================================
   ASSESSMENTS LIST — TABLE CENTER
===================================== */
.assess-table-center th,
.assess-table-center td { text-align: center; }

/* =====================================
   ASSESSMENTS EVALUATE — PILL STATES
===================================== */
.assess-evaluate .assess-option .assess-pill.success {
  background: #e6f4ea;
  border: 1px solid #bcdccb;
  color: #1f5a2d;
}
.assess-evaluate .assess-option .assess-pill.pending {
  background: #e7f0ff;
  border: 1px solid #c4d8f7;
  color: #1b4d91;
}
.assess-evaluate .assess-option .assess-pill.danger {
  background: #ffe7e7;
  border: 1px solid #f2baba;
  color: #8a1f1f;
}
.assess-evaluate .assess-field-label {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* =====================================
   ASSESSMENTS LIST EVALUATE
===================================== */
.assess-evaluate-list .assess-meta { margin: 0; }
.assess-evaluate-list .assess-table-wrap {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.assess-evaluate-list .assess-table {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: transparent;
}
.assess-evaluate-list .assess-table th {
  text-transform: none;
  letter-spacing: 0.02em;
  background: transparent;
  color: var(--ink-600);
}
.assess-evaluate-list .assess-row { cursor: pointer; }
.assess-evaluate-list .empty-state { text-align: left; }
.assess-evaluate-list .assess-actions.assess-pagination {
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
}
.assess-evaluate-list .assess-page-form {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
@media (max-width: 768px) {
  .assess-evaluate-list .assess-actions.assess-pagination { justify-content: flex-start; }
  .assess-evaluate-list .assess-page-form { flex-wrap: wrap; }
}

/* =====================================
   DASHBOARD (main.php)
===================================== */
.dashboard {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.dash-header { text-align: center; }
.dash-welcome { margin: 0 0 var(--space-sm); font-size: 1.6rem; font-weight: 700; color: var(--ink-900); letter-spacing: -0.02em; }

/* Search bar */
.dash-search {
  display: grid;
  grid-template-columns: 9fr 1fr;
  gap: 10px;
  align-items: center;
  border-radius: 12px;
  padding: 10px;
  width: 90%;
  margin: 8px auto 0;
}
.dash-search input { border: none; padding: 10px 12px; outline: none; border-radius: 10px; }
.dash-search button { width: 100%; border: none; background: #2d2d2d; color: #f5f5f5; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.dash-search button:hover { background: #444444; color: #ffffff; }

/* Two-column grid for the four cards */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* Card shell — reuses .page-card visual language */
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}
.dash-card-header h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink-900); text-transform: none; letter-spacing: 0.06em; }
.dash-card-link { font-size: 12px; color: var(--ink-400); text-decoration: none; white-space: nowrap; }
.dash-card-link:hover { color: var(--ink-800); text-decoration: underline; }

/* Feed list (notifications + memos) */
.dash-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.dash-feed-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.dash-feed-item:last-child { border-bottom: none; }
.dash-feed-title { font-size: 13px; color: var(--ink-700); text-decoration: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.dash-feed-title:hover { color: var(--ink-900); text-decoration: underline; }
.dash-feed-meta { font-size: 11px; color: var(--ink-300); white-space: nowrap; flex-shrink: 0; }

/* Shortcuts (favorites) */
.dash-shortcuts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-shortcut-row { display: flex; align-items: center; gap: 2px; }
.dash-shortcut-row .dash-shortcut { flex: 1; min-width: 0; }
.dash-unfav-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-200);
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.dash-shortcut-row:hover .dash-unfav-btn { opacity: 1; }
.dash-unfav-btn:hover { color: var(--ink-700); }
.dash-unfav-btn:disabled { cursor: wait; }
.dash-shortcut {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 13px;
  color: var(--ink-700);
  transition: background 0.12s;
}
.dash-shortcut:hover { background: var(--surface-muted); color: var(--ink-900); }
.dash-shortcut-star { font-size: 14px; color: var(--favorite-star-filled); flex-shrink: 0; }
.dash-empty-hint { font-size: 13px; color: var(--ink-300); line-height: 1.5; margin: 0; }
.dash-star-hint { font-size: 15px; }

/* Profile snapshot */
.dash-profile-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-md); align-items: baseline; }
.dash-profile-dl dt { font-size: 11px; text-transform: none; letter-spacing: 0.07em; color: var(--ink-300); white-space: nowrap; }
.dash-profile-dl dd { margin: 0; font-size: 13px; color: var(--ink-700); font-weight: 600; }

/* Responsive: collapse to single column on narrow screens */
@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dashboard { padding: 0 14px; }
  .dash-search { grid-template-columns: 1fr; width: 100%; }
}

/* =====================================
   DASHBOARD (main.php — accordion + sidebar)
===================================== */

/* Outer wrapper */
.dh-wrap {
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header */
.dh-header { text-align: center; }
.dh-welcome { margin: 0 0 10px; font-size: 1.45rem; font-weight: 700; color: var(--ink-900); letter-spacing: -0.02em; }
.dh-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 60%; margin: 0 auto; }
.dh-search input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--ink-800); outline: none; background: var(--surface); }
.dh-search input:focus { border-color: var(--ink-500); }
.dh-search button { padding: 8px 18px; border: none; background: #1a1a1a; color: #fff; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dh-search button:hover { background: #333; }

/* Body: 65 / 35 — named areas */
.dh-body {
  display: grid;
  grid-template-columns: 65% 35%;
  grid-template-rows: auto auto;
  grid-template-areas:
    "history  side"
    "notifs   side";
  column-gap: 24px;
  row-gap: 16px;
  align-items: start;
}
.dh-card--history { grid-area: history; }
.dh-card--notifs  { grid-area: notifs; }
.dh-side          { grid-area: side; position: sticky; top: 24px; }

/* ── Accordion (left) ── */
.dh-accordion {
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  overflow: hidden;
}

.dh-acc-group { border-bottom: 1px solid #e2e2e2; }
.dh-acc-group:last-child { border-bottom: none; }

/* Remove default <details> marker */
.dh-acc-group summary { list-style: none; }
.dh-acc-group summary::-webkit-details-marker { display: none; }

.dh-acc-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  user-select: none;
  background: #fafafa;
  transition: background 0.12s;
}
.dh-acc-summary:hover { background: #f2f2f2; }
.dh-acc-group[open] .dh-acc-summary { background: #f2f2f2; }

.dh-acc-label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-800);
  letter-spacing: 0.01em;
}
.dh-acc-count {
  font-size: 11px;
  color: var(--ink-300);
  background: #ebebeb;
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 500;
}
.dh-acc-chevron {
  width: 14px;
  height: 14px;
  color: var(--ink-300);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.dh-acc-group[open] .dh-acc-chevron { transform: rotate(180deg); }

/* Links inside each open group */
.dh-acc-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 6px 0;
  background: #fff;
}
.dh-acc-link {
  display: block;
  padding: 7px 20px;
  font-size: 13px;
  color: var(--ink-600);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
  border-radius: 4px;
}
.dh-acc-link:hover { background: #f4f4f4; color: var(--ink-900); }

/* ── Sidebar (right) ── */
.dh-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 24px; }
.dh-widget { border: 1px solid #e2e2e2; border-radius: 10px; overflow: hidden; }
.dh-widget-head {
  background: #fafafa;
  border-bottom: 1px solid #e2e2e2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--ink-500);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dh-widget-action { font-size: 10px; color: var(--ink-300); text-decoration: none; font-weight: 400; letter-spacing: 0; text-transform: none; }
.dh-widget-action:hover { color: var(--ink-700); }
.dh-widget-empty { display: block; padding: 10px 12px; font-size: 12px; color: var(--ink-300); }
.dh-widget-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--ink-700);
  text-decoration: none;
  background: #fff;
  transition: background 0.1s;
}
a.dh-widget-row:hover { background: #f7f7f7; color: var(--ink-900); }
.dh-widget-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-widget-time { font-size: 10px; color: var(--ink-300); white-space: nowrap; flex-shrink: 0; }
.dh-widget-badge { font-size: 10px; color: var(--ink-400); background: #f0f0f0; border-radius: 10px; padding: 1px 6px; flex-shrink: 0; }
.dh-star { font-size: 12px; color: var(--ink-300); flex-shrink: 0; }

/* ── Cards (left column and right column) ── */
.dh-card { border: 1px solid #e2e2e2; border-radius: 10px; overflow: hidden; background: #fff; }
.dh-card-head {
  background: #fafafa;
  border-bottom: 1px solid #e2e2e2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--ink-500);
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dh-card-action { font-size: 11px; color: var(--ink-400); text-decoration: none; font-weight: 500; letter-spacing: 0; text-transform: none; }
.dh-card-action:hover { color: var(--ink-800); }
.dh-card-empty { display: block; padding: 14px; font-size: 12px; color: var(--ink-300); }
.dh-card-empty a { color: var(--ink-500); text-decoration: underline; }
.dh-card-footer { border-top: 1px solid #f0f0f0; padding: 8px 14px; background: #fafafa; }
.dh-card-footer-link { font-size: 11px; color: var(--ink-400); text-decoration: none; }
.dh-card-footer-link:hover { color: var(--ink-700); }

/* ── Recent Search History list ── */
.dh-history-list { list-style: none; margin: 0; padding: 0; }
.dh-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #f3f3f3;
  transition: background 0.15s ease, color 0.15s ease;
}
.dh-history-item:last-child { border-bottom: none; }
.dh-history-item:hover { background: #f7f7f7; }
.dh-history-query {
  font-size: 13px;
  color: var(--ink-800);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dh-history-item:hover .dh-history-query { color: var(--ink-900); }
.dh-history-query:hover { color: var(--ink-900); text-decoration: underline; }
.dh-history-time { font-size: 11px; color: var(--ink-300); white-space: nowrap; flex-shrink: 0; }
.dh-history-item:hover .dh-history-time { color: var(--ink-500); }

/* ── Notifications list ── */
.dh-notif-list { list-style: none; margin: 0; padding: 0; }
.dh-notif-item { border-bottom: 1px solid #f3f3f3; }
.dh-notif-item:last-child { border-bottom: none; }
.dh-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 14px;
  font-size: 12px;
  color: var(--ink-700);
  text-decoration: none;
  background: #fff;
  transition: background 0.1s;
}
.dh-notif-row:hover { background: #f7f7f7; color: var(--ink-900); }
.dh-notif-dot { width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; flex-shrink: 0; margin-top: 4px; }
.dh-notif-text { flex: 1; min-width: 0; line-height: 1.4; }
.dh-notif-time { font-size: 10px; color: var(--ink-300); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }

/* ── Shortcuts: stacked tiles ── */
.dh-shortcut-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.dh-shortcut-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  background: #fafafa;
  font-size: 13px;
  color: var(--ink-700);
  text-decoration: none;
  transition: background 0.1s, border-color 0.1s;
}
.dh-shortcut-tile:hover { background: #f0f0f0; border-color: #d8d8d8; color: var(--ink-900); }
.dh-shortcut-star { font-size: 12px; color: var(--favorite-star-filled); flex-shrink: 0; }
.dh-shortcut-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Responsive */
@media (max-width: 900px) {
  .dh-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "history"
      "side"
      "notifs";
  }
  .dh-side { position: static; }
}
@media (max-width: 640px) {
  .dh-acc-body { grid-template-columns: repeat(2, 1fr); }
  .dh-search { width: 100%; grid-template-columns: 1fr; }
}

/* =====================================
   MEMO CREATE
===================================== */
.memo-container{padding:30px 18px;min-height:100vh;display:flex;justify-content:center;}
.memo-card{width:100%;max-width:980px;background:#fff;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,0.08);padding:28px 30px;display:flex;flex-direction:column;gap:18px;border:1px solid #e7e7e7;}
.memo-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px;}
.memo-title{margin:0;font-size:24px;color:#0f172a;}
.memo-sub{margin:6px 0 0;color:#475569;font-size:14px;}
.memo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.memo-field{display:flex;flex-direction:column;gap:8px;}
.memo-field label{font-weight:700;color:#0f172a;}
.memo-input,.memo-select,.memo-textarea{border:1px solid #e5e7eb;border-radius:12px;padding:12px;font-size:14px;background:#f9fafb;transition:all .15s ease;}
.memo-input:focus,.memo-select:focus,.memo-textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6;outline:none;}
.memo-checkbox{display:flex;align-items:center;gap:10px;font-weight:600;color:#0f172a;}
.memo-checkbox input{width:16px;height:16px;accent-color:#111827;}
.memo-editor{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;}
.memo-toolbar{display:flex;gap:8px;padding:8px 10px;background:#f5f6f8;border-bottom:1px solid #e5e7eb;}
.memo-toolbar button{border:1px solid #e5e7eb;background:#fff;padding:7px 12px;border-radius:10px;cursor:pointer;font-weight:700;color:#0f172a;transition:all .15s ease;}
.memo-toolbar button:hover{background:#0f172a;color:#fff;transform:translateY(-1px);}
.memo-editor-body{min-height:200px;padding:14px;font-size:14px;}
.memo-product-grid{display:flex;flex-wrap:wrap;gap:10px;padding:14px;border:1px solid #e5e7eb;border-radius:12px;background:#f8fafc;}
.memo-product-grid label{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;font-weight:600;color:#0f172a;}
.memo-product-grid input{width:16px;height:16px;}
.memo-search-wrap{position:relative;}
.memo-search-results{display:none;border:1px solid #e5e7eb;border-radius:12px;margin-top:6px;max-height:210px;overflow:auto;position:absolute;left:0;right:0;background:#fff;z-index:10;box-shadow:0 16px 30px rgba(0,0,0,0.12);}
.memo-search-item{padding:10px 12px;cursor:pointer;border-bottom:1px solid #f1f5f9;font-weight:600;color:#0f172a;}
.memo-search-item:hover{background:#f8fafc;}
.memo-search-item:last-child{border-bottom:none;}
.memo-search-item.muted{color:#6b7280;font-weight:500;}
.memo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.memo-user-chip{background:var(--accent);color:#fff;padding:5px 12px;min-height:30px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;}
.memo-chip-close{background:transparent;border:none;color:#fff;font-size:1rem;line-height:1;cursor:pointer;padding:0;opacity:.75;transition:opacity .15s ease;}
.memo-chip-close:hover{opacity:1;}
.memo-actions{display:flex;justify-content:flex-end;margin-top:var(--space-sm);}
.memo-submit{background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:var(--radius-pill);padding:10px 24px;min-height:44px;font-weight:700;font-size:14px;letter-spacing:.02em;cursor:pointer;transition:background .15s ease,opacity .15s ease;}
.memo-submit:hover{background:var(--accent-strong);}
.memo-submit:active{opacity:.85;transform:scale(0.97);}
.memo-alert{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:12px;padding:12px 14px;}

/* =====================================
   USERS VIEW (iv-* grid)
===================================== */
/* Apple-inspired minimal profile styling */
:root {
    --iv-bg: #f8f8f8;
    --iv-surface: rgba(255, 255, 255, 0.96);
    --iv-border: #e5e5e7;
    --iv-muted: #8e8e93;
    --iv-strong: #1c1c1e;
    --iv-accent: #0b84ff;
    --iv-soft-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
}
.iv-shell {
    background: var(--iv-bg);
    min-height: 100vh;
    padding: 32px 24px 48px;
    color: var(--iv-strong);
    font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.iv-shell.print-mode { background: #fff; }
.iv-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
}
.iv-col-12 { grid-column: span 12; }
.iv-col-8 { grid-column: span 8; }
.iv-col-6 { grid-column: span 6; }
.iv-col-4 { grid-column: span 4; }
.iv-col-3 { grid-column: span 3; }
@media (max-width: 960px){ .iv-col-8, .iv-col-6, .iv-col-4, .iv-col-3 { grid-column: span 12; } }
.iv-top { align-items: center; }
.iv-identity {
    display: flex;
    align-items: center;
    gap: 24px;
}
.iv-meta-stack { display: grid; gap: 6px; }
.iv-name { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.iv-role { color: var(--iv-muted); margin: 2px 0; font-size: 15px; }
.iv-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--iv-muted);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0.08em;
}
.iv-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--iv-border);
    background: rgba(255,255,255,0.7);
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    font-weight: 600;
}
.iv-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.iv-ghost {
    border: 1px solid var(--iv-border);
    background: #fff;
    border-radius: 14px;
    padding: 10px 14px;
    font-weight: 600;
    color: var(--iv-strong);
    text-decoration: none;
}
.iv-ghost:hover { border-color: #d1d1d6; }
.iv-section {
    background: var(--iv-surface);
    border: 1px solid var(--iv-border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--iv-soft-shadow);
}
.iv-section h3 {
    margin: 0 0 12px;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: none;
    color: var(--iv-muted);
}
.iv-pairs { display: grid; gap: 10px; }
.iv-pair-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: none;
    color: var(--iv-muted);
}
.iv-pair-value {
    font-size: 16px;
    font-weight: 600;
}
.iv-tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-tag {
    padding: 8px 12px;
    border-radius: 12px;
    background: #f0f0f2;
    color: var(--iv-strong);
    font-weight: 600;
}
.iv-note { color: var(--iv-muted); font-size: 14px; }
.iv-avatar-form, .iv-avatar-display {
    position: relative;
    width: 132px;
    height: 132px;
}
.iv-avatar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.iv-avatar-button, .iv-avatar-static {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 1px solid var(--iv-border);
    background: linear-gradient(135deg, #ffffff, #f8f8f8);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.iv-avatar-button:hover {
    transform: scale(1.02);
    box-shadow: 0 18px 36px rgba(0,0,0,0.12);
}
.iv-avatar-static { cursor: default; }
.iv-avatar-button img, .iv-avatar-static img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.iv-avatar-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--iv-muted);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.iv-add-label {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--iv-muted);
}
.iv-edit-icon {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 26px;
    height: 26px;
    border-radius: 12px;
    background: rgba(255,255,255,0.82);
    border: 1px solid var(--iv-border);
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--iv-strong);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    pointer-events: none;
}
.iv-inline-feedback { margin-top: 10px; font-size: 13px; }
.iv-inline-feedback.error { color: #c0392b; }
.iv-inline-feedback.ok { color: #0a7f2e; }
.iv-divider { height: 1px; background: var(--iv-border); margin: 6px 0 14px; opacity: 0.7; }
.iv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.iv-list li { color: var(--iv-strong); font-weight: 600; }
.iv-360 {
    margin-top: 16px;
    background: var(--iv-surface);
    border: 1px solid var(--iv-border);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--iv-soft-shadow);
}
.iv-360 h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: -0.01em; }
.iv-360-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.iv-360-card {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--iv-border);
    background: rgba(255,255,255,0.86);
}
.iv-metric { font-size: 28px; font-weight: 700; margin: 0 0 6px; }
.iv-submeta { color: var(--iv-muted); font-size: 13px; }
.iv-empty { color: var(--iv-muted); }
@media print {
    .iv-shell { padding: 0; background: #fff; }
    .iv-actions, .iv-avatar-input, .iv-edit-icon, .iv-add-label { display: none !important; }
    .iv-section, .iv-360 { box-shadow: none; }
}

/* =====================================
   ASSESSMENTS SEND
===================================== */
        .assess-shell {
            --sd-ink:    #101010;
            --sd-muted:  #5f5f5f;
            --sd-line:   #e1e1e1;
            --sd-accent: #111111;
            --sd-card:   #ffffff;
            --sd-soft:   #f6f6f6;
            background: linear-gradient(180deg,#f7f7f7 0%,#ffffff 24%);
            padding: 32px clamp(20px, 3vw, 32px) 64px;
            width: 100%;
            min-height: 100%;
            color: var(--sd-ink);
            font-family: "Space Grotesk","Sora","IBM Plex Sans","Helvetica Neue",sans-serif;
        }

        .assess-shell * { box-sizing: border-box; }

        /* ── Shell inputs ── */
        .sd-shell .assess-input,
        .sd-shell .assess-select,
        .sd-shell .assess-textarea {
            width: 100%;
            min-height: 44px;
            border-radius: 12px;
            border: 1px solid var(--sd-line);
            background: #fff;
            padding: 10px 14px;
            font-size: 0.94rem;
            color: var(--sd-ink);
            transition: border-color .18s, box-shadow .18s;
            font-family: inherit;
        }
        .sd-shell .assess-input:focus,
        .sd-shell .assess-select:focus,
        .sd-shell .assess-textarea:focus {
            border-color: var(--sd-accent);
            outline: none;
            box-shadow: 0 0 0 3px rgba(17,17,17,.1);
        }
        .sd-shell .assess-textarea { min-height: 88px; resize: vertical; }
        .sd-shell .assess-input::placeholder,
        .sd-shell .assess-textarea::placeholder { color: #9a9a9a; }

        /* ── Page shell ── */
        .sd-shell { box-sizing: border-box; }

        /* ── Centered content body ── */
        .sd-body {
            max-width: 900px;
            width: 100%;
            margin: 0 auto;
            padding: 8px clamp(16px, 4vw, 32px) 56px;
            display: grid;
            gap: 20px;
            box-sizing: border-box;
        }

        /* ── Header ── */
        .sd-header {
            max-width: 48rem;
            margin: 0 auto;
            text-align: center;
            padding-bottom: 6px;
        }
        .sd-header__title { margin: 0 0 8px; font-size: clamp(1.5rem,2.4vw,2rem); letter-spacing: -.02em; line-height: 1.12; }
        .sd-header__sub { margin: 0; color: var(--sd-muted); font-size: .93rem; line-height: 1.5; }

        /* ── Form ── */
        .sd-form { display: grid; gap: 14px; }

        /* ── Section card — fieldset reset + card style ── */
        .sd-section {
            /* reset browser fieldset defaults */
            margin: 0;
            padding: 20px 22px 22px;
            min-width: 0;
            /* card style */
            border: 1px solid var(--sd-line);
            border-radius: 16px;
            background: var(--sd-card);
            box-shadow: 0 4px 18px rgba(16,16,16,.05);
        }
        /* legend: make it behave as a block header above the grid */
        .sd-section__legend {
            display: block;
            width: calc(100% + 44px);       /* bleed past the padding */
            margin: -20px -22px 18px;       /* pull to card edges */
            padding: 14px 22px;
            border-bottom: 1px solid var(--sd-line);
            border-radius: 16px 16px 0 0;
            background: var(--sd-soft);
            font-size: .9rem;
            font-weight: 700;
            letter-spacing: -.01em;
            color: var(--sd-ink);
        }
        .sd-section__legend .sd-hint { font-weight: 400; color: var(--sd-muted); font-size: .82rem; }

        /* ── Grid ── */
        .sd-grid { display: grid; gap: 14px; }
        .sd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

        /* ── Label ── */
        .sd-label {
            display: flex;
            flex-direction: column;
            gap: 6px;
            font-size: .84rem;
            font-weight: 600;
            color: var(--sd-ink);
        }
        .sd-label--mode { max-width: 320px; }
        .sd-req { color: #c44; font-weight: 700; }
        .sd-hint { font-weight: 400; color: var(--sd-muted); font-size: .8rem; }
        .sd-hint--field { line-height: 1.45; }
        .sd-settings-note {
            max-width: 78ch;
            margin: 10px 0 0;
            color: var(--sd-muted);
            font-size: .82rem;
            line-height: 1.55;
        }

        /* ── Mode pills ── */
        .sd-mode-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 18px;
        }
        .sd-pill {
            display: inline-flex;
            align-items: center;
            padding: 7px 18px;
            border-radius: 999px;
            border: 1px solid var(--sd-line);
            background: var(--sd-card);
            font-size: .85rem;
            font-weight: 500;
            color: var(--sd-muted);
            cursor: pointer;
            user-select: none;
            transition: border-color .15s, background .15s, color .15s;
        }
        .sd-pill input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
        .sd-pill:hover { border-color: var(--sd-accent); color: var(--sd-ink); }
        .sd-pill.is-disabled {
            opacity: .45;
            cursor: not-allowed;
        }
        .sd-pill.is-disabled:hover {
            border-color: var(--sd-line);
            color: var(--sd-muted);
        }
        .sd-pill.is-active,
        .sd-pill:has(input:checked) {
            border-color: var(--sd-accent);
            background: var(--sd-accent);
            color: #fff;
            font-weight: 600;
        }

        /* ── Panel (shown/hidden per mode) ── */
        .sd-panel { display: flex; flex-direction: column; gap: 12px; }
        .sd-panel[hidden] { display: none !important; }

        /* ── User chips ── */
        .sd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
        .sd-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            border-radius: 999px;
            border: 1px solid var(--sd-line);
            background: var(--sd-soft);
            font-size: .82rem;
        }
        .sd-chip__link {
            color: var(--sd-accent);
            text-decoration: none;
            font-weight: 600;
        }
        .sd-chip__remove {
            border: none;
            background: transparent;
            color: var(--sd-muted);
            cursor: pointer;
            font-size: .95rem;
            line-height: 1;
            padding: 0 1px;
            flex-shrink: 0;
        }
        .sd-chip__remove:hover { color: #c04010; }

        /* ── Query builder ── */
        .sd-qb-label {
            margin: 0;
            font-size: .82rem;
            font-weight: 600;
            color: var(--sd-ink);
        }
        .sd-qb { display: flex; flex-direction: column; gap: 8px; }

        .sd-qb-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            border: 1px solid var(--sd-line);
            border-radius: 12px;
            background: #fff;
        }

        .sd-qb-dim { flex: 0 0 180px; min-width: 0; }
        .sd-qb-val-wrap { flex: 1 1 0; min-width: 0; display: flex; }
        .sd-qb-val-wrap .sd-qb-val { flex: 1 1 0; min-width: 0; }

        .sd-qb-remove {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            min-height: 28px !important;
            padding: 0 !important;
            border: 1px solid transparent !important;
            border-radius: 8px;
            background: transparent !important;
            box-shadow: none !important;
            color: var(--sd-muted) !important;
            font-size: .92rem;
            line-height: 1;
            cursor: pointer;
            opacity: .72;
            transition: border-color .15s, color .15s, background .15s, opacity .15s;
        }
        .sd-qb-remove:hover {
            border-color: rgba(192,64,16,.15);
            color: #c04010;
            background: rgba(192,64,16,.06);
            opacity: 1;
        }

        .sd-qb-conn {
            display: flex;
            align-items: center;
            padding-left: 188px;
            margin: -2px 0;
        }
        .sd-qb-conn-sel {
            width: 74px;
            min-height: 30px;
            font-size: .74rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 999px;
            background: var(--sd-soft);
        }

        .sd-qb-footer {
            display: flex;
            justify-content: flex-end;
            padding-top: 2px;
        }
        .sd-qb-add {
            display: inline-flex;
            align-items: center;
            min-height: auto !important;
            padding: 6px 14px !important;
            border: 1px solid var(--sd-line) !important;
            border-radius: 999px;
            background: #fff !important;
            box-shadow: none !important;
            color: var(--sd-ink) !important;
            font-size: .82rem;
            font-weight: 600;
            cursor: pointer;
            transition: border-color .15s, color .15s, background .15s;
        }
        .sd-qb-add:hover { border-color: var(--sd-accent) !important; color: var(--sd-accent) !important; background: var(--sd-soft) !important; }

        .sd-filter-meta {
            display: grid;
            gap: 10px;
        }
        .sd-filter-card {
            display: grid;
            gap: 8px;
            padding: 12px 14px;
            border: 1px solid var(--sd-line);
            border-radius: 12px;
            background: var(--sd-soft);
        }
        .sd-filter-card__label {
            margin: 0;
            font-size: .75rem;
            font-weight: 700;
            color: var(--sd-muted);
            letter-spacing: .02em;
        }
        .sd-filter-summary {
            margin: 0;
            color: var(--sd-ink);
            font-size: .88rem;
            line-height: 1.5;
        }
        .sd-filter-preview__count {
            margin: 0;
            color: var(--sd-ink);
            font-size: .96rem;
            font-weight: 700;
            line-height: 1.3;
        }
        .sd-filter-preview__meta {
            min-height: 18px;
            margin: -2px 0 0;
            color: var(--sd-muted);
            font-size: .78rem;
            line-height: 1.45;
        }
        .sd-filter-preview__list {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 6px;
            height: 136px;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 8px;
            border: 1px solid var(--sd-line);
            border-radius: 10px;
            background: #fff;
        }
        .sd-filter-preview__chip {
            display: inline-flex;
            align-items: center;
            padding: 4px 9px;
            border-radius: 999px;
            border: 1px solid var(--sd-line);
            background: #fff;
            color: var(--sd-ink);
            font-size: .8rem;
            line-height: 1.35;
        }
        .sd-filter-preview__empty {
            width: 100%;
            margin: 0;
            color: var(--sd-muted);
            font-size: .82rem;
            line-height: 1.5;
        }

        /* ── Notice (team / call-center info box) ── */
        .sd-notice {
            margin: 0;
            padding: 13px 16px;
            border-radius: 10px;
            background: var(--sd-soft);
            border: 1px solid var(--sd-line);
            color: var(--sd-muted);
            font-size: .91rem;
            line-height: 1.55;
        }
        .sd-notice strong { color: var(--sd-ink); font-weight: 600; }
        .sd-note {
            margin: 14px 0 0;
            color: var(--sd-muted);
            font-size: 12px;
            line-height: 1.55;
        }
        .sd-note + .sd-note { margin-top: 6px; }

        /* ── Actions bar ── */
        .sd-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            justify-content: flex-end;
            padding: 14px 18px;
            border: 1px solid var(--sd-line);
            border-radius: 14px;
            background: rgba(255,255,255,.96);
            box-shadow: 0 4px 16px rgba(16,16,16,.05);
        }

        /* ── Recent dispatches ── */
        .sd-recent {
            border: 1px solid var(--sd-line);
            border-radius: 16px;
            background: var(--sd-card);
            padding: 20px 22px;
            box-shadow: 0 4px 18px rgba(16,16,16,.05);
        }
        .sd-recent__title { margin: 0 0 14px; font-size: .95rem; font-weight: 700; }

        .sd-table { width: 100%; border-collapse: collapse; }
        .sd-table th {
            background: var(--sd-soft);
            color: var(--sd-muted);
            font-size: .77rem;
            font-weight: 600;
            padding: 9px 12px;
            text-align: left;
            border-bottom: 1px solid var(--sd-line);
        }
        .sd-table td {
            padding: 10px 12px;
            border-top: 1px solid var(--sd-line);
            font-size: .87rem;
            vertical-align: middle;
        }
        .sd-col-num { text-align: center; }

        /* ── Responsive ── */
        @media (max-width: 980px) {
            .sd-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        @media (max-width: 720px) {
            .sd-body { padding: 4px 16px 40px; gap: 12px; }
            .sd-section { padding: 0 14px 16px; border-radius: 12px; }
            .sd-section__legend { width: calc(100% + 28px); margin: 0 -14px 14px; border-radius: 12px 12px 0 0; }
            .sd-mode-bar { gap: 5px; }
            .sd-pill { padding: 6px 14px; font-size: .82rem; }
            .sd-grid--2, .sd-grid--3 { grid-template-columns: 1fr; }
            .sd-qb-row { flex-wrap: wrap; }
            .sd-qb-dim { flex: 1 1 100%; }
            .sd-qb-val-wrap { flex: 1 1 0; }
            .sd-qb-conn { padding-left: 0; margin: 0; }
            .sd-filter-preview__list { height: 124px; }
            .sd-actions { justify-content: stretch; padding: 12px; }
            .sd-actions .btn-primary,
            .sd-actions .btn-secondary { flex: 1 1 auto; justify-content: center; text-align: center; }
        }

/* =====================================
   AUTH REGISTER (wizard)
===================================== */

/* ── Step progress bar ── */
.auth-steps {
  display: flex;
  align-items: flex-start;
}
.auth-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
}
.auth-step-num {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-200);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.auth-step.active .auth-step-num,
.auth-step.done .auth-step-num {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.auth-step-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-200);
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.auth-step.active .auth-step-label,
.auth-step.done .auth-step-label { color: var(--ink-700); }
.auth-step-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-top: 16px; /* align with dot center (32px / 2) */
}

/* ── Wizard panels ── */
.auth-wizard-panels { position: relative; }
.auth-wizard-step {
  display: none;
  flex-direction: column;
  gap: var(--space-md);
  animation: auth-step-in 0.18s ease;
}
.auth-wizard-step.active { display: flex; }
@keyframes auth-step-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.auth-wizard-step-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-800);
}
.auth-wizard-step-desc {
  margin: 0;
  color: var(--ink-400);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ── Static (readonly) display field ── */
.auth-input-static {
  background: var(--surface-muted);
  color: var(--ink-400);
  cursor: default;
  user-select: none;
}

/* ── Role preview grid (step 4) ── */
.auth-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
}
.auth-role-card {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.auth-role-details { display: block; }
.auth-role-details[open] .auth-role-summary { border-bottom: 1px solid var(--border); }
.auth-role-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.auth-role-summary::-webkit-details-marker { display: none; }
.auth-role-summary::after {
  content: '+';
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-200);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.auth-role-details[open] .auth-role-summary::after {
  content: '\2212'; /* − */
}
.auth-role-summary:hover { background: var(--surface-muted); }
.auth-role-card-list { padding: var(--space-sm) var(--space-md) var(--space-md); }
.auth-role-card-name {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-800);
}
.auth-role-card-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-300);
  white-space: nowrap;
}
.auth-role-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth-role-card-list li {
  font-size: 0.75rem;
  color: var(--ink-500);
  padding: 3px 7px;
  background: var(--surface-muted);
  border-radius: var(--radius-xs);
}
.auth-role-card-scope {
  display: inline-block;
  margin-left: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-300);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.auth-role-card-more {
  color: var(--ink-200);
  font-size: 0.75rem;
  padding-left: 0;
  background: transparent !important;
}

/* ── Wizard nav (back / next / submit group) ── */
.auth-wizard-nav {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}
.auth-wizard-nav .auth-button {
  min-width: 110px;
}
.auth-wizard-nav .auth-button.ghost {
  background: var(--surface-muted);
  color: var(--ink-500);
  border-color: var(--border);
}
.auth-wizard-nav .auth-button.primary {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}
.auth-wizard-nav .auth-button.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.auth-wizard-nav .auth-button.ghost:hover {
  background: var(--surface-tint);
  color: var(--ink-800);
}

@media (max-width: 560px) {
  .auth-steps { gap: var(--space-2xs); }
  .auth-step-line { display: none; }
  .auth-step-label { display: none; }
}


/* =====================================
   PLATFORM MANAGEMENT
===================================== */
/* Platform Studio: bold, fresh layout with a left rail and elevated cards */
.platform-studio {
    --ink: #0b1220;
    --muted: #5f6b7a;
    --line: #e4e8f1;
    --panel: #ffffff;
    --accent: #0f766e;
    --accent-2: #f59e0b;
    --warn: #dc2626;
    --shadow-lg: 0 22px 50px rgba(15, 23, 42, 0.12);
    font-family: "Space Grotesk", "Sora", "Segoe UI", sans-serif;
    background: radial-gradient(circle at 12% 18%, #f0f7ff 0, #f8fafc 45%, #fff7ed 100%);
    color: var(--ink);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
.platform-studio::before {
    content: "";
    position: absolute;
    inset: -18% -10% auto -10%;
    height: 55%;
    background:
        radial-gradient(circle at 12% 30%, rgba(15, 118, 110, 0.16), transparent 55%),
        radial-gradient(circle at 88% 10%, rgba(245, 158, 11, 0.16), transparent 45%);
    pointer-events: none;
    z-index: 0;
}
.platform-grid {
    max-width: min(1560px, 94vw);
    margin: 0 auto;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 20px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.platform-nav {
    position: sticky;
    top: 84px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}
.nav-brand { display: grid; gap: 6px; margin-bottom: 12px; }
.nav-brand small { text-transform: none; letter-spacing: 0.12em; color: var(--muted); }
.nav-brand h2 { margin: 0; font-size: 22px; color: var(--ink); }
.nav-brand .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(15, 118, 110, 0.12);
    border: 1px solid rgba(15, 118, 110, 0.2);
    color: var(--accent);
    font-size: 13px;
}
.nav-group { margin-top: 14px; }
.nav-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--muted);
    margin: 0 0 6px;
}
.console-tab {
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink);
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 6px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.console-tab small { color: var(--muted); font-weight: 500; }
.console-tab:focus,
.console-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
}
.console-tab:hover { transform: translateX(2px); border-color: rgba(15, 118, 110, 0.35); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08); }
.console-tab.is-active {
    background: rgba(15, 118, 110, 0.12);
    border-color: rgba(15, 118, 110, 0.4);
}
.platform-main { display: grid; gap: 20px; }
.platform-hero {
    background: linear-gradient(135deg, #ffffff, #f7f9fc);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.platform-hero::after {
    content: "";
    position: absolute;
    top: -45%;
    right: -10%;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.16), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.platform-hero__inner {
    display: grid;
    grid-template-columns: minmax(280px, 1.2fr) minmax(240px, 1fr);
    gap: 18px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.platform-hero__intro { display: grid; gap: 8px; }
.platform-hero__eyebrow {
    margin: 0;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.18em;
    color: var(--muted);
}
.platform-hero__title {
    margin: 0;
    font-size: 32px;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.platform-hero__desc {
    margin: 0;
    color: var(--muted);
    max-width: 62ch;
}
.platform-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.metric-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    display: grid;
    gap: 4px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.metric-label { font-size: 12px; letter-spacing: 0.06em; text-transform: none; color: var(--muted); }
.metric-value { font-size: 20px; font-weight: 700; color: var(--ink); }
.metric-note { color: var(--muted); font-size: 12px; }
.platform-alerts { display: grid; gap: 10px; }
.console-alert {
    border-radius: 14px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}
.console-success { border-color: rgba(15, 118, 110, 0.2); border-left-color: rgba(15, 118, 110, 0.6); background: #ecfdfb; color: #0f766e; }
.console-error { border-color: rgba(220, 38, 38, 0.25); border-left-color: rgba(220, 38, 38, 0.55); background: #fef2f2; color: #b91c1c; }
.console-section { display: block; scroll-margin-top: 80px; }
.console-section.is-active { }
.platform-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 16px;
    position: relative;
    overflow: hidden;
}
.platform-panel::before { 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(15, 118, 110, 0.6), rgba(245, 158, 11, 0.6));
    opacity: 0.7;
    pointer-events: none;
}
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.panel-head h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.panel-head p { margin: 2px 0 0; color: var(--muted); }
.panel-grid { display: grid; gap: 12px; }
.panel-grid.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.console-stack { display: grid; gap: 10px; }
.console-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.console-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.console-input,
.console-select,
textarea.console-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 14px;
    background: #fff;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.console-input:focus,
.console-select:focus,
textarea.console-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
}
.console-btn {
    border-radius: var(--radius-pill);
    border: 1px solid #111111;
    background: #111111;
    color: #4ade80;
    padding: 10px 18px;
    min-height: 40px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.console-btn:hover { background: #222222; }
.console-btn-ghost { background: #111111; color: #ffffff; border-color: rgba(255, 255, 255, 0.15); box-shadow: none; }
.console-btn-ghost:hover { background: #222222; border-color: rgba(255, 255, 255, 0.25); }
.console-danger { color: #f87171 !important; border-color: rgba(248, 113, 113, 0.3) !important; }
.console-form-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.console-inline-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.console-flex-1 { flex: 1; }
.console-heading { margin: 0; color: var(--ink); }
.console-label { font-size: 12px; text-transform: none; letter-spacing: 0.08em; color: var(--muted); }
.console-check { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.console-table-wrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.console-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.console-table th, .console-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.console-table th { text-transform: none; letter-spacing: 0.08em; font-size: 12px; color: var(--muted); background: #f8fafc; }
.console-table tbody tr:last-child td { border-bottom: none; }
.console-list-row { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.console-list-row:last-child { border-bottom: none; }
.console-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.console-pill { padding: 7px 12px; border-radius: 16px; border: 1px solid var(--line); background: #f6f7fb; font-weight: 600; color: var(--ink); }
.console-pill-action { display: inline-flex; align-items: center; gap: 6px; }
.console-link { background: none; border: none; color: #f87171; cursor: pointer; transition: color 0.15s ease; }
.console-link:hover { color: #fca5a5; }
.console-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; box-shadow: 0 12px 30px rgba(17,24,39,0.04); display: grid; gap: 10px; }
.console-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.console-stat { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.console-muted { color: var(--muted); font-size: 13px; }
.console-scroll { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: #fff; }
.console-list-card { display: flex; justify-content: space-between; align-items: center; }
.console-divider { height: 1px; background: var(--line); margin: 2px 0 6px; }
@keyframes platform-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.platform-nav,
.platform-hero,
.platform-alerts,
.platform-panel { animation: platform-fade-up 0.6s ease both; }
.platform-main > .platform-panel:nth-of-type(1) { animation-delay: 0.08s; }
.platform-main > .platform-panel:nth-of-type(2) { animation-delay: 0.12s; }
.platform-main > .platform-panel:nth-of-type(3) { animation-delay: 0.16s; }
.platform-main > .platform-panel:nth-of-type(4) { animation-delay: 0.2s; }
.platform-main > .platform-panel:nth-of-type(5) { animation-delay: 0.24s; }
.platform-main > .platform-panel:nth-of-type(6) { animation-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) {
    .platform-nav,
    .platform-hero,
    .platform-alerts,
    .platform-panel,
    .console-tab,
    .console-btn {
        animation: none;
        transition: none;
    }
}
@media (max-width: 1080px) {
    .platform-grid { grid-template-columns: 1fr; }
    .platform-nav { position: relative; top: 0; }
    .platform-hero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .platform-grid { padding: 16px; }
    .console-form-inline { flex-direction: column; align-items: stretch; }
    .console-tab { text-align: center; justify-content: center; }
    .platform-hero { padding: 18px; }
}

/* ─── Training Badges ─────────────────────────────────────────────── */
.tb-badge-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding: 4px 0; }
.tb-badge-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; max-width: 72px; }
.tb-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: linear-gradient(155deg, #111111 0%, #141414 40%, #383838 100%);
    color: #cecece;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: none;
    user-select: none;
    cursor: default;
    transition: transform 0.18s ease, filter 0.18s ease;
}
.tb-star:hover { transform: scale(1.15); filter: brightness(1.25); }
.tb-badge-label {
    font-size: 0.62rem;
    color: var(--text-muted, #888888);
    text-align: center;
    line-height: 1.35;
    max-width: 72px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
}

/* ── Favorites Edit User (favorites.edit.user.php) ──────────────────────── */
.feu-shell { max-width: 1040px; margin: 0 auto; padding: 2rem 1.25rem 2.75rem; }
.feu-header { margin-bottom: 1.5rem; }
.feu-title { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.25rem; color: #222; }
.feu-meta { font-size: 0.84rem; color: var(--text-muted, #7f7f7f); margin: 0; line-height: 1.5; }
.feu-form { display: grid; gap: 1.15rem; }
.feu-banner {
    padding: 0.95rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    font-size: 0.88rem;
    box-shadow: 0 10px 28px rgba(17, 17, 17, 0.04);
}
.feu-banner--success { background: #f2faf4; border-color: #b8dfc2; color: #22543d; }
.feu-banner--error { background: #fff5f5; border-color: #f1c1c1; color: #9b2c2c; }
.feu-banner--warning { background: #fffaf0; border-color: #f1d7a6; color: #8a5a12; }
.feu-card {
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fdfdfd 100%);
    box-shadow: 0 14px 36px rgba(17, 17, 17, 0.04);
}
.feu-settings { padding: 1.3rem 1.35rem; }
.feu-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 1.5rem;
    align-items: start;
}
.feu-settings-main {
    min-width: 0;
}
.feu-settings-side {
    display: grid;
    justify-items: stretch;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #fcfcfc 0%, #f6f6f6 100%);
    border: 1px solid rgba(17, 17, 17, 0.06);
}
.feu-settings-head {
    margin-bottom: 0.95rem;
}
.feu-kicker {
    display: inline-block;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7b7b7b;
}
.feu-settings-title {
    margin: 0 0 0.3rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #1b1b1b;
}
.feu-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: #ececec;
    color: #3d3d3d;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.feu-pill-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 1rem;
}
.feu-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid #d7d7d7;
    border-radius: 999px;
    background: #fff;
    color: #555;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.feu-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.feu-pill span {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 1.05rem;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.feu-pill:hover {
    border-color: #b9b9b9;
    color: #222;
    transform: translateY(-1px);
}
.feu-pill.is-active {
    border-color: #111;
    background: #111;
    color: #fff;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.12);
}
.feu-pill.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.feu-pill.is-disabled span { cursor: not-allowed; }
.feu-settings-note-card {
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: #f7f7f7;
    border: 1px solid rgba(17, 17, 17, 0.05);
}
.feu-settings-note,
.feu-settings-empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted, #6f6f6f);
    line-height: 1.5;
}
.feu-settings-empty {
    margin-top: 0.45rem;
}
.feu-settings-caption {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: #777;
    text-align: left;
}
.feu-validation {
    margin: 0.8rem 0 0;
    color: #b42318;
    font-size: 0.83rem;
    font-weight: 600;
}
.feu-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.15rem;
}
.feu-actions--footer {
    display: none;
    margin-top: 0.15rem;
    padding-bottom: 0.2rem;
}
.feu-form.is-selecting .feu-actions--footer {
    display: flex;
}
.feu-save-btn {
    min-height: 2.8rem;
    border-radius: 999px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 28px rgba(17, 17, 17, 0.12);
}
.feu-save-btn:hover {
    background: #222;
    border-color: #222;
}
.feu-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
.feu-save-btn--panel {
    width: 100%;
}
.feu-save-btn--footer {
    width: auto;
    min-width: 13rem;
    padding: 0 1.2rem;
}
.feu-empty {
    padding: 2.25rem 1rem;
    text-align: center;
    color: var(--text-muted, #888);
    border: 1px dashed #d7d7d7;
    border-radius: 18px;
    background: #fcfcfc;
}
.feu-empty p { margin: 0.35rem 0; font-size: 0.88rem; }
.feu-star-hint { font-size: 1rem; color: var(--accent, #f5a623); }
.feu-groups { display: grid; gap: 1rem; }
.feu-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 4.6rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    background: linear-gradient(180deg, #fcfcfc 0%, #f7f7f7 100%);
}
.feu-group-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1e1e1e;
}
.feu-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.95rem;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: #fff;
    color: #666;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid rgba(17, 17, 17, 0.06);
    white-space: nowrap;
}
.feu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.6rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.feu-row:last-child { border-bottom: none; }
.feu-row:hover {
    background: #fbfbfb;
    transform: translateY(-1px);
}
.feu-row.is-picked {
    background: #f7faf7;
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.04);
}
.feu-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    font-size: 0.91rem;
    font-weight: 600;
    line-height: 1.35;
}
.feu-link:hover { text-decoration: underline; }
.feu-star { color: var(--favorite-star-filled); font-size: 0.9rem; flex-shrink: 0; }
.feu-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feu-row-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-shrink: 0;
}
.feu-date {
    font-size: 0.74rem;
    color: var(--text-muted, #888);
    white-space: nowrap;
    flex-shrink: 0;
}
.feu-select-control { display: none; align-items: center; }
.feu-form.is-selecting .feu-select-control { display: inline-flex; }
.feu-select-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.feu-select-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.82rem;
    border: 1px solid #d4d4d4;
    border-radius: 999px;
    background: #fff;
    color: #555;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}
.feu-select-pill:hover {
    border-color: #a8a8a8;
    color: #111;
}
.feu-select-input:checked + .feu-select-pill {
    border-color: #111;
    background: #111;
    color: #fff;
}
.feu-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: #fff;
    border: 1px solid rgba(17, 17, 17, 0.12);
    cursor: pointer;
    padding: 0;
    font-size: 0.92rem;
    color: #6f6f6f;
    border-radius: 999px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.feu-remove-btn:hover {
    color: #b42318;
    background: #fff3f2;
    border-color: rgba(180, 35, 24, 0.22);
    transform: translateY(-1px);
}
.feu-remove-btn:disabled { opacity: 0.4; cursor: default; }
.feu-counter[hidden],
.feu-validation[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .feu-shell { padding: 1.35rem 0.85rem 2rem; }
    .feu-title { font-size: 1.55rem; }
    .feu-settings { padding: 1rem; }
    .feu-settings-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .feu-settings-side {
        padding: 0.9rem;
    }
    .feu-counter {
        min-width: 0;
    }
    .feu-group-head {
        min-height: 0;
        padding: 0.9rem 1rem;
    }
    .feu-group-count {
        padding: 0.2rem 0.6rem;
    }
    .feu-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.65rem;
        padding: 0.9rem 1rem;
    }
    .feu-link {
        width: 100%;
    }
    .feu-row-tools {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.55rem;
    }
    .feu-date {
        order: 2;
    }
    .feu-select-control {
        order: 1;
    }
    .feu-remove-btn {
        order: 3;
        margin-left: auto;
    }
    .feu-actions,
    .feu-actions--footer {
        justify-content: stretch;
    }
    .feu-save-btn,
    .feu-save-btn--footer,
    .feu-save-btn--panel {
        width: 100%;
    }
}

/* ── Back-to-list navigation row ─────────────────────────────────────────── */
.mc-back-row {
    display: flex;
    align-items: center;
    padding-bottom: .6rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ebebeb;
}
/* button always snaps right — works whether it is alone or alongside a title */
.mc-back-row .btn-back { margin-left: auto; flex-shrink: 0; }
/* title wrapper — takes all remaining left space */
.mc-back-row-title { flex: 1; min-width: 0; padding-right: 1.25rem; }
.mc-back-row-title h1,
.mc-back-row-title h2,
.mc-back-row-title h3 { margin: 0; }
.mc-back-row-title p { margin: .15rem 0 0; font-size: .85rem; color: var(--text-muted, #888); }
@media print { .mc-back-row { display: none !important; } }
@media print { .btn-back { display: none !important; } }
/* wiki: right-side header column containing both action buttons and back link */
.wiki-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }

/* Back button — compact navigation style, distinct from action btn-secondary */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 500;
    color: #999;
    text-decoration: none;
    padding: .28rem .72rem;
    border-radius: 999px;
    border: 1px solid #e0e0e0;
    background: transparent;
    transition: color .15s, border-color .15s, background .15s;
    white-space: nowrap;
    letter-spacing: .01em;
}
.btn-back:hover {
    color: #111;
    border-color: #aaa;
    background: #f5f5f5;
}
.btn-back-arrow { display: inline-block; transition: transform .15s; }
.btn-back:hover .btn-back-arrow { transform: translateX(-3px); }

/* ── Consistent timestamp display ────────────────────────────────────────── */
.mc-timestamp {
    font-size: .75rem;
    color: var(--text-muted, #888);
    white-space: nowrap;
}
/* Comments, notification cards, small feed items — date anchored bottom-right */
.mc-timestamp--bottom-right { display: block; text-align: right; margin-top: .4rem; }
/* View/print page headers and meta sections — date floated top-right */
.mc-timestamp--top-right { float: right; margin-left: 1rem; line-height: 1.4; }


/* ═══════════════════════════════════════════════════════════════════════════
   Landing page  (landing.main.php)  — lp-* namespace
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ────────────────────────────────────────────────────────── */
.lp-header, .lp-hero, .lp-section, .lp-stats-section,
.lp-modules-section, .lp-cta-section, .lp-footer {
    --lp-ink-900:  #0a0a0a;
    --lp-ink-800:  #141414;
    --lp-ink-700:  #1e1e1e;
    --lp-ink-600:  #2a2a2a;
    --lp-ink-400:  #575757;
    --lp-ink-300:  #7a7a7a;
    --lp-ink-200:  #9d9d9d;
    --lp-ink-100:  #d0d0d0;
    --lp-surface:        #ffffff;
    --lp-surface-muted:  #f2f2f2;
    --lp-surface-tint:   #f8f8f8;
    --lp-border:         #e0e0e0;
    --lp-accent:         #111111;
    --lp-accent-strong:  #1c1c1c;
    --lp-accent-soft:    rgba(0,0,0,0.08);
    --lp-shadow-md: 0 14px 32px rgba(0,0,0,0.07);
    --lp-shadow-lg: 0 26px 60px rgba(0,0,0,0.12);
    --lp-radius-xs:    6px;
    --lp-radius-sm:    10px;
    --lp-radius-md:    16px;
    --lp-radius-lg:    24px;
    --lp-radius-panel: 32px;
    --lp-radius-pill:  999px;
}

/* ── Container ────────────────────────────────────────────────────────────── */
.lp-container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) { .lp-container { padding: 0 20px; } }

/* ── Landing header link hover — prevent global a:hover (#1c1c1c) on dark bg ── */
.mc-bar a.mc-item-label:hover { color: #ffffff; }
.mc-bar a.mc-link:hover { color: #e0e0e0; }
.mc-bar a.btn:hover { color: #ffffff; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.lp-hero { padding-top: 120px; padding-bottom: 56px; text-align: center; background: var(--lp-surface); }
.lp-hero h1 {
    font-size: clamp(36px, 5.5vw, 68px); font-weight: 700; color: var(--lp-ink-900);
    letter-spacing: -0.03em; line-height: 1.08; max-width: 820px; margin: 0 auto 24px;
}
.lp-hero h1 em { font-style: normal; color: var(--lp-ink-300); }
.lp-hero-sub {
    font-size: clamp(16px, 2vw, 19px); color: var(--lp-ink-300);
    max-width: 560px; margin: 0 auto 44px; font-weight: 400; line-height: 1.65;
}
.lp-hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.lp-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: #ffffff;
    background: var(--lp-accent); padding: 13px 28px;
    border-radius: var(--lp-radius-pill); border: none; cursor: pointer;
    transition: background 0.15s, transform 0.1s; letter-spacing: -0.01em; text-decoration: none;
}
.lp-btn-primary:hover { background: var(--lp-accent-strong); color: #ffffff; transform: translateY(-1px); }
.lp-btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 500; color: var(--lp-ink-600);
    background: var(--lp-surface); padding: 13px 28px;
    border-radius: var(--lp-radius-pill); border: 1px solid var(--lp-border);
    cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.lp-btn-secondary:hover { border-color: var(--lp-ink-200); color: var(--lp-ink-800); background: var(--lp-surface-tint); }
.lp-arrow-icon { font-size: 16px; transition: transform 0.15s; }
.lp-btn-primary:hover .lp-arrow-icon { transform: translateX(3px); }

/* ── Section shared ───────────────────────────────────────────────────────── */
.lp-section { padding: 100px 0; background: var(--lp-surface); }
.lp-section-header { margin-bottom: 60px; }
.lp-section-header.lp-centered { text-align: center; }
.lp-section-title {
    font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; color: var(--lp-ink-900);
    letter-spacing: -0.03em; line-height: 1.1; max-width: 600px; margin-bottom: 16px;
}
.lp-centered .lp-section-title { max-width: none; }
.lp-section-sub { font-size: 16px; color: var(--lp-ink-300); max-width: 500px; line-height: 1.7; }
.lp-centered .lp-section-sub { max-width: none; }
.lp-section-title.lp-light { color: #ffffff; }
.lp-section-sub.lp-light { color: rgba(255,255,255,0.45); }

/* ── Features grid ────────────────────────────────────────────────────────── */
.lp-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .lp-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .lp-features-grid { grid-template-columns: 1fr; } }
.lp-feature-card {
    background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-panel); padding: 32px;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}
.lp-feature-card:hover { box-shadow: var(--lp-shadow-md); transform: translateY(-3px); border-color: var(--lp-ink-100); }
.lp-feature-card h3 { font-size: 17px; font-weight: 700; color: var(--lp-ink-800); letter-spacing: -0.02em; margin-bottom: 10px; }
.lp-feature-card p { font-size: 14px; color: var(--lp-ink-300); line-height: 1.7; }

/* ── Stats ────────────────────────────────────────────────────────────────── */
.lp-stats-section {
    background: var(--lp-surface-tint);
    border-top: 1px solid var(--lp-border); border-bottom: 1px solid var(--lp-border);
    padding: 80px 0;
}
.lp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
@media (max-width: 768px) { .lp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
.lp-stat-item { text-align: center; }
.lp-stat-phrase {
    font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: var(--lp-ink-900);
    letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 8px;
}
.lp-stat-label { font-size: 14px; color: var(--lp-ink-300); font-weight: 500; }

/* ── How It Works ─────────────────────────────────────────────────────────── */
.lp-how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
@media (max-width: 768px) { .lp-how-grid { grid-template-columns: 1fr; gap: 48px; } }
.lp-how-steps { display: flex; flex-direction: column; gap: 0; }
.lp-how-step { display: flex; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--lp-border); cursor: default; }
.lp-how-step:last-child { border-bottom: none; }
.lp-how-step-num {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: var(--lp-surface-muted); border: 1.5px solid var(--lp-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--lp-ink-400); margin-top: 2px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.lp-how-step:hover .lp-how-step-num { background: var(--lp-ink-800); color: #fff; border-color: var(--lp-ink-800); }
.lp-how-step-body h4 { font-size: 16px; font-weight: 700; color: var(--lp-ink-800); letter-spacing: -0.02em; margin-bottom: 6px; }
.lp-how-step-body p { font-size: 14px; color: var(--lp-ink-300); line-height: 1.7; }
.lp-how-visual {
    display: flex; flex-direction: column; justify-content: flex-start;
    gap: 0; padding: 8px 0; position: sticky; top: 88px;
}
@media (max-width: 768px) { .lp-how-visual { position: static; } }
.lp-hv-step { display: flex; gap: 20px; align-items: stretch; }
.lp-hv-spine { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 36px; }
.lp-hv-node {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--lp-surface); border: 1.5px solid var(--lp-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--lp-ink-400);
    flex-shrink: 0; position: relative; z-index: 1;
}
.lp-hv-node.lp-hv-active { background: var(--lp-ink-800); border-color: var(--lp-ink-800); color: #ffffff; }
.lp-hv-line { width: 1.5px; flex: 1; background: var(--lp-border); margin: 4px 0; }
.lp-hv-body { padding: 4px 0 22px; }
.lp-hv-step:last-child .lp-hv-body { padding-bottom: 0; }
.lp-hv-body h5 { font-size: 14px; font-weight: 700; color: var(--lp-ink-800); letter-spacing: -0.01em; margin-bottom: 4px; line-height: 1.3; }

/* ── Modules ──────────────────────────────────────────────────────────────── */
.lp-modules-section { background: var(--lp-ink-900); padding: 100px 0; }
.lp-modules-section .lp-section-header { margin-bottom: 60px; }
.lp-modules-categories { display: flex; flex-direction: column; gap: 56px; }
.lp-modules-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: rgba(255,255,255,0.06);
    border-radius: var(--lp-radius-md); overflow: hidden;
}
@media (max-width: 900px) { .lp-modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lp-modules-grid { grid-template-columns: 1fr; } }
.lp-module-item {
    background: var(--lp-ink-900); padding: 24px 28px;
    display: flex; flex-direction: column; gap: 6px; transition: background 0.15s;
}
.lp-module-item:hover { background: rgba(255,255,255,0.04); }
.lp-module-title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: -0.01em; }
.lp-module-desc { font-size: 12.5px; color: rgba(255,255,255,0.35); line-height: 1.6; }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.lp-cta-section { padding: 120px 0; background: var(--lp-surface); text-align: center; }
.lp-cta-box {
    background: var(--lp-ink-900); border-radius: var(--lp-radius-panel);
    padding: 72px 48px; position: relative; overflow: hidden;
}
.lp-cta-box::before {
    content: ''; position: absolute; top: -80px; right: -80px;
    width: 320px; height: 320px; border-radius: 50%;
    background: rgba(255,255,255,0.025); pointer-events: none;
}
.lp-cta-box::after {
    content: ''; position: absolute; bottom: -100px; left: -60px;
    width: 280px; height: 280px; border-radius: 50%;
    background: rgba(255,255,255,0.02); pointer-events: none;
}
.lp-cta-box h2 {
    font-size: clamp(30px, 4vw, 52px); font-weight: 700; color: #ffffff;
    letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 16px; position: relative;
}
.lp-cta-box p { font-size: 17px; color: rgba(255,255,255,0.45); margin-bottom: 44px; position: relative; }
.lp-cta-actions {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap; position: relative;
}
.lp-btn-cta-primary {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: var(--lp-ink-800);
    background: #ffffff; padding: 14px 30px; border-radius: var(--lp-radius-pill);
    border: none; cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.lp-btn-cta-primary:hover { background: #f0f0f0; transform: translateY(-1px); }
.lp-btn-cta-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.6);
    background: transparent; padding: 14px 30px; border-radius: var(--lp-radius-pill);
    border: 1px solid rgba(255,255,255,0.18); cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.lp-btn-cta-ghost:hover { color: #ffffff; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); }

/* ── Macros ──────────────────────────────────────────────────────────────── */
.macro-shell { display: flex; flex-direction: column; gap: 20px; }
.macro-shell .page-header { padding-bottom: 16px; border-bottom: 1px solid #e5e7eb; }
.macro-library-shell .page-header { padding-bottom: 0; border-bottom: 0; }
.macro-library-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    gap: 20px;
    align-items: start;
}
.macro-library-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.macro-library-side {
    min-width: 0;
    min-height: 0;
}
.macro-library-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.macro-form { display: flex; flex-direction: column; gap: 20px; }
.macro-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
    gap: 20px;
}
.macro-form-grid .macro-form-row { grid-template-columns: 1fr; }
.macro-form-grid .macro-field--grow { grid-column: auto; }
.macro-auto-rules { grid-column: 1 / -1; }
.macro-card {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.macro-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.macro-card-head h3 { margin: 0; font-size: 1.05rem; }
.macro-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.macro-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.macro-field--grow { grid-column: span 2; }
.macro-field > span, .macro-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}
.macro-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    padding: 9px 12px;
    background: #fff;
    color: #0f172a;
}
.macro-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}
.macro-check {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 12px;
    background: #f8fafc;
}
.macro-check--stack { align-items: flex-start; }
.macro-check-copy {
    display: grid;
    gap: 2px;
}
.macro-check-copy strong {
    color: #0f172a;
    font-size: 0.92rem;
}
.macro-check-copy small {
    color: #64748b;
    font-size: 0.82rem;
}
.macro-editor-wrap { position: relative; }
.macro-editor {
    min-height: 280px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
}
.macro-editor--workspace { min-height: 460px; }
.macro-editor-wrap--workspace { min-height: 460px; }
.macro-autocomplete {
    position: absolute;
    top: 14px;
    right: 14px;
    width: min(360px, calc(100% - 28px));
    max-height: 260px;
    overflow: auto;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    z-index: 12;
}
.macro-autocomplete-item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    text-align: left;
    border: none;
    border-bottom: 1px solid #eff2f7;
    background: transparent;
    padding: 11px 14px;
    cursor: pointer;
}
.macro-autocomplete-item:last-child { border-bottom: none; }
.macro-autocomplete-item strong { color: #0f172a; font-size: 0.95rem; }
.macro-autocomplete-item span { color: #475569; font-size: 0.88rem; }
.macro-autocomplete-item em { color: #94a3b8; font-size: 0.8rem; font-style: normal; text-transform: capitalize; }
.macro-rules-list { display: grid; gap: 12px; }
.macro-rule-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}
.macro-inline-switch { margin-bottom: 14px; }
.macro-submit-bar { display: flex; justify-content: flex-end; }
/* ── Filter bar (list / archive) ──────────────────────────── */
.macro-filter-form { display: flex; flex-direction: column; gap: 10px; }
.macro-filter-form--side { gap: 12px; }
.macro-library-panel-head { margin-bottom: 0; align-items: center; }
.macro-filter-bar { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.macro-filter-bar-main { display: flex; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.macro-filter-bar-main > input[type="text"] { flex: 1 1 180px; min-width: 0; }
.macro-filter-bar-main > select { min-width: 120px; }
.macro-filter-bar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.macro-filter-form--side .macro-filter-bar-actions { justify-content: flex-end; }
.macro-filter-toggle-btn.is-active { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.macro-filter-advanced {
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.macro-filter-adv-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.macro-filter-adv-footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* ── Workspace meta strip ──────────────────────────────────── */
.macro-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    padding: 9px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.87rem;
}
.macro-meta-strip-item { color: #64748b; }
.macro-meta-strip-item strong { color: #334155; font-weight: 600; }
/* ── Table ─────────────────────────────────────────────────── */
.macro-table code {
    font-size: 0.86rem;
    color: #0f172a;
    background: #f8fafc;
    border-radius: 6px;
    padding: 3px 7px;
}
.macro-table-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.macro-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.04em;
}
.macro-type-pill--macro { background: #dbeafe; color: #1d4ed8; }
.macro-type-pill--block { background: #dcfce7; color: #15803d; }
.macro-visibility-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: none;
    vertical-align: middle;
}
/* ── Workspace layout ──────────────────────────────────────── */
.macro-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 20px;
}
.macro-workspace-side { display: flex; flex-direction: column; gap: 20px; }
.macro-warning-stack { display: grid; gap: 10px; margin-bottom: 12px; }
.macro-copy-feedback { font-size: 0.85rem; color: #64748b; min-height: 18px; margin-bottom: 8px; }
.macro-library-scroll {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.macro-library-empty { margin: 0; }
.macro-library-head {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr) minmax(100px, 0.9fr);
    gap: 10px;
    padding: 0 12px 2px;
    color: #94a3b8;
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.04em;
}
.macro-library-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.macro-library-item.is-selected {
    border-color: #93c5fd;
    background: #eff6ff;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.08);
}
.macro-library-item-main {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr) minmax(100px, 0.9fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
}
.macro-library-item-main.is-disabled { cursor: default; }
.macro-library-item-main:hover { text-decoration: none; background: rgba(255, 255, 255, 0.3); }
.macro-library-cell {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #64748b;
    font-size: 0.87rem;
}
.macro-library-cell--title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.93rem;
    font-weight: 600;
    color: #334155;
}
.macro-library-title-text { min-width: 0; }
.macro-library-cell--code {
    overflow: visible;
}
.macro-library-cell--code code {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 7px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8rem;
    color: #1e293b;
}
.iv-signature-block { margin-top: 18px; }
.iv-signature-form { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 1180px) {
    .macro-library-layout { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); }
    .macro-filter-adv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .macro-rule-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .macro-library-layout { grid-template-columns: 1fr; }
    .macro-library-panel {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .macro-library-head { display: none; }
    .macro-library-item-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
    }
    .macro-library-cell {
        display: grid;
        gap: 2px;
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }
    .macro-library-cell::before {
        content: attr(data-label);
        font-size: 0.73rem;
        font-weight: 700;
        text-transform: none;
        letter-spacing: 0.04em;
        color: #94a3b8;
    }
    .macro-library-cell--code code { max-width: 100%; }
    .macro-form-grid { grid-template-columns: 1fr; }
    .macro-form-row { grid-template-columns: 1fr; }
    .macro-field--grow { grid-column: auto; }
    .macro-workspace-grid { grid-template-columns: 1fr; }
    .macro-filter-adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .macro-library-item-main { grid-template-columns: 1fr; }
    .macro-filter-adv-grid { grid-template-columns: 1fr; }
    .macro-rule-row { grid-template-columns: 1fr; }
    .macro-card-head { flex-direction: column; }
    .macro-table-actions { flex-direction: column; align-items: flex-start; }
}
.normal-text {
  font-weight: normal;
}

/* =====================================
   Header refresh
===================================== */
:root {
  --mc-header-offset: 72px;
}

body {
  padding-top: var(--mc-header-offset);
}

.mc-header.fixed {
  backdrop-filter: saturate(160%) blur(18px) !important;
}

.mc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 20px;
  background: rgba(17, 17, 17, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mc-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.mc-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.mc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 2px;
  border-radius: 6px;
  line-height: 1;
}

.mc-brand,
.mc-user-btn,
.mc-mgmt-btn,
.mc-fav-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  box-shadow: none;
  color: #f5f5f5;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  min-height: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  border-radius: 6px;
}

.mc-brand:hover,
.mc-user-btn:hover,
.mc-mgmt-btn:hover,
.mc-fav-btn:hover {
  background: transparent;
  color: #ffffff;
}
/* Override the global `button { … !important }` flat-UI block — that block stomps every
   <button> with background:#111, border, padding, and min-height all flagged !important.
   .mc-brand / .mc-mgmt-btn / .mc-user-btn are <a>/<span> so they're unaffected; only
   .mc-fav-btn is a <button> and needs matching !important overrides here. */
.mc-fav-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
.mc-fav-btn:hover,
.mc-fav-btn:active {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.mc-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mc-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mc-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.mc-item-label {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.92);
}

.mc-item-label b {
  font-weight: 600;
}

.mc-item:hover .mc-item-label,
.mc-item.open .mc-item-label {
  background: rgba(255, 255, 255, 0.08);
}

.mc-mgmt {
  position: relative;
}

.mc-mgmt-drop {
  left: auto;
  right: 0;
}

.mc-user {
  position: relative;
}

.mc-user-btn {
  position: relative;
}

.mc-notification-dot {
  position: absolute;
  top: 3px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d4f;
  box-shadow: 0 0 0 1.5px rgba(17, 17, 17, 0.96);
}

/* ── Favorites inline header component ─────────────────────────────────── */

/* Star toggle button — base reset inherited from .mc-brand/.mc-mgmt-btn group above */
.mc-fav-btn--active { color: var(--favorite-star-filled); }
.mc-fav-btn--active .mc-icon svg { fill: currentColor; stroke: currentColor; }
.mc-fav-btn--active:hover { color: var(--favorite-star-filled); }
.mc-fav-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

@keyframes mc-fav-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  70%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}
.mc-fav-btn--pop { animation: mc-fav-pop 0.28s ease forwards; }

/* Dropdown panel */
.mc-fav-drop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 220px;
  max-width: 280px;
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  z-index: 90;
  overflow: hidden;
}
.mc-item.open .mc-fav-drop,
.mc-fav:hover .mc-fav-drop { display: block; }

.mc-fav-drop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mc-fav-drop-head > span {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.35);
}

.mc-fav-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.mc-fav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: #e0e0e0;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.1s;
}
.mc-fav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.mc-fav-star {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--favorite-star-filled);
  line-height: 1;
}

.mc-fav-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-fav-empty {
  padding: 14px;
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
  text-align: center;
}
.mc-fav-empty span { font-size: 11px; color: rgba(255, 255, 255, 0.25); }

.mc-fav-drop-footer {
  padding: 6px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.mc-fav-manage-link {
  display: block;
  padding: 7px 8px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 12px;
  text-align: center;
  transition: background 0.1s, color 0.1s;
}
.mc-fav-manage-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

@media (max-width: 1100px) {
  .mc-bar { padding: 10px 16px; }
  .mc-left { flex-wrap: wrap; }
  .mc-menu { order: 2; flex-basis: 100%; }
  .main_logged { padding: 20px var(--space-xl) var(--space-xxl); }
}

@media (max-width: 768px) {
  .mc-bar { align-items: flex-start; padding: 10px 14px; }
  .mc-icon-btn { width: 28px; height: 28px; min-width: 28px; }
  .mc-menu { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .mc-menu::-webkit-scrollbar { display: none; }
  .main_logged { padding: 18px var(--space-lg) var(--space-xl); }
}

/* ── Search History ─────────────────────────────────────────────────────── */
.sh-shell { max-width: 680px; margin: 0 auto; padding: 32px 16px; }
.sh-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 32px; }
.sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sh-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 2px; color: var(--ink-900); }
.sh-meta { font-size: 0.82rem; color: var(--ink-400); margin: 0; }
.sh-cta { font-size: 0.82rem; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; padding: 6px 14px; border: 1px solid var(--accent); border-radius: var(--radius-pill); }
.sh-cta:hover { background: var(--accent); color: #fff; }
.sh-empty { color: var(--ink-400); font-size: 0.88rem; margin: 0; }
.sh-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); }
.sh-item:hover { background: var(--surface-tint); }
.sh-query { font-size: 0.9rem; color: var(--accent); text-decoration: none; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-query:hover { text-decoration: underline; }
.sh-info { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sh-times { font-size: 0.78rem; color: var(--ink-400); }
.sh-time { font-size: 0.78rem; color: var(--ink-300); }
.sh-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.sh-pager-info { font-size: 0.8rem; color: var(--ink-400); }
.sh-pager { display: flex; gap: 4px; }
.sh-page-btn { font-size: 0.82rem; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--ink-700); text-decoration: none; }
.sh-page-btn:hover { background: var(--surface-tint); }
.sh-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sh-page-btn.disabled { opacity: 0.4; pointer-events: none; }

/* =====================================
   CENTRALIZED UTILITIES & SYSTEM SCREENS
===================================== */
.u-display-contents { display: contents; }
.u-hidden { display: none !important; }
.u-m-0 { margin: 0 !important; }
.u-mt-6 { margin-top: 6px !important; }
.u-mt-10 { margin-top: 10px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mt-16 { margin-top: 16px !important; }
.u-mb-24 { margin-bottom: 24px !important; }
.u-mb-50 { margin-bottom: 50px !important; }
.u-list-offset { margin: 6px 0 0 18px; }
.u-flex-col-gap-18 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.u-justify-center { justify-content: center !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-text-center { text-align: center !important; }
.u-grid-span-full { grid-column: 1 / -1 !important; }
.u-grid-single-column { grid-template-columns: 1fr !important; }
.u-pre-line { white-space: pre-line; }
.u-text-success { color: #15803d !important; }
.u-text-muted { color: #475569 !important; }
.u-cursor-pointer { cursor: pointer; }
.u-w-80 { width: 80px !important; }
.u-w-100 { width: 100px !important; }
.u-w-150 { width: 150px !important; }
.u-w-200 { width: 200px !important; }
.u-align-self-end { align-self: flex-end !important; }

body.gate-screen,
body.system-screen {
  min-height: 100vh;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

body.gate-screen {
  display: grid;
  place-items: center;
  background: #111111;
  color: #e5e7eb;
}

.gate-card {
  width: min(360px, calc(100vw - 32px));
  padding: 28px;
  border-radius: 12px;
  background: #1f2937;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.gate-title {
  margin: 0 0 14px;
  font-size: 20px;
  color: #ffffff;
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gate-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #f3f4f6;
}

.gate-input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #4b5563;
  background: #111111;
  color: #e5e7eb;
}

.gate-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
  outline: none;
}

.gate-submit {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.gate-submit:hover { background: #1d4ed8; }

.gate-error {
  margin: 0;
  color: #f87171;
  font-size: 14px;
}

body.system-screen {
  --system-accent: #1d4ed8;
  --system-accent-soft: #dbeafe;
  --system-card-border: rgba(15, 23, 42, 0.12);
  --system-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  --system-copy: #475569;
  --system-bg-start: #ffffff;
  --system-bg-middle: #f2f5ff;
  --system-bg-end: #e7ecf6;
  --system-glow: rgba(29, 78, 216, 0.18);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 15% 20%, var(--system-bg-start) 0%, var(--system-bg-middle) 45%, var(--system-bg-end) 100%);
  color: var(--ink-900);
  font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}

body.system-screen--missing {
  --system-accent: #0f766e;
  --system-accent-soft: #ccfbf1;
  --system-bg-middle: #f1f7f6;
  --system-bg-end: #d9eeea;
  --system-glow: rgba(15, 118, 110, 0.18);
}

body.system-screen--limited {
  --system-accent: #111111;
  --system-accent-soft: rgba(17, 17, 17, 0.08);
  --system-bg-middle: #f5f5f5;
  --system-bg-end: #ececec;
  --system-glow: rgba(17, 17, 17, 0.12);
}

.system-card {
  width: min(720px, 92vw);
  margin: 0;
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
  display: block;
  background: #ffffff;
  border: 1px solid var(--system-card-border);
  border-radius: 22px;
  box-shadow: var(--system-shadow);
}

.system-card::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, var(--system-glow), transparent 70%);
}

.system-card--compact {
  width: min(420px, 92vw);
  text-align: center;
}

.system-code {
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 800;
  margin: 14px 0 6px;
  letter-spacing: 0.04em;
}

.system-screen h1 {
  margin: 18px 0 8px;
  font-size: clamp(28px, 4vw, 36px);
}

body.system-screen--missing h1 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.5vw, 32px);
}

.system-screen p {
  margin: 0 0 18px;
  color: var(--system-copy);
  line-height: 1.6;
}

.system-note {
  font-size: 0.92rem;
  color: #64748b;
  margin-top: 16px;
}

.system-actions {
  margin-top: 12px;
}

body.ui-unified.has-tour-dock { padding-bottom: 56px !important; }

#tour-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  font-family: inherit;
  background: #1c1400;
  border-top: 2px solid #b07d10;
}

#tour-dock .tour-dock-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-right: 10px;
  padding-right: 14px;
  border-right: 1px solid #3a2800;
}

#tour-dock .tour-dock-pill {
  padding: 3px 7px;
  border-radius: 3px;
  line-height: 1.5;
  flex-shrink: 0;
  background: #b07d10;
  color: #fff8e6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: none;
}

#tour-dock .tour-dock-label {
  color: #c49a3a;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

#tour-dock .tour-dock-roles {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

#tour-dock .tour-dock-roles::-webkit-scrollbar { display: none; }

#tour-dock button.tour-role-btn {
  padding: 5px 13px;
  border-radius: 6px;
  border: 1px solid #3d2c08;
  background: none;
  color: #9a7c38;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

#tour-dock button.tour-role-btn:hover {
  border-color: #b07d10;
  color: #f5c842;
  background: #251c00;
}

#tour-dock button.tour-role-btn.active {
  background: #b07d10;
  border-color: #f5d060;
  color: #fff8e6;
  font-weight: 600;
  cursor: default;
}

#tour-dock button.tour-exit-btn {
  margin-left: 10px;
  padding: 5px 13px;
  border-radius: 6px;
  border: 1px solid #5c2a2a;
  background: none;
  color: #c07070;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#tour-dock button.tour-exit-btn:hover {
  background: #3d1010;
  border-color: #ee8888;
  color: #ffaaaa;
}

.voe-filter-form {
  width: 100%;
  margin: 0 auto;
}

.form-builder-card--spaced { margin-top: 16px; }
.form-filter-actions--mt-sm { margin-top: 12px; }
.form-filter-actions--mt-md { margin-top: 16px; }
.ijp-actions--spaced { margin-bottom: 50px; }
.eval-delete-confirm { width: 200px; align-self: flex-end; }
.notif-inline-form { margin: 0; }
.notif-meta--spaced { margin-top: 6px; }
.memo-success { color: #15803d; }
.memo-alert-list { margin: 6px 0 0 18px; }
.memo-form { display: flex; flex-direction: column; gap: 18px; }
.memo-textarea-hidden { display: none; }
.memo-empty-state { color: #475569; }
.lab-required { color: #cc0000; }
.iv-grid--spaced { margin-bottom: 24px; }
.iv-pair-value--multiline { white-space: pre-line; }
.assess-option-label--correct { color: #2e7d32; }
.assess-option-label--incorrect { color: #c62828; }
.auth-button[hidden] { display: none !important; }

.mc-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

.mc-list-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.mc-list-summary,
.mc-list-page-meta {
  font-size: 0.82rem;
  color: var(--ink-400);
}

.mc-list-per-page {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-500);
}

.mc-list-per-page select {
  min-width: 80px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-700);
  font-size: 0.82rem;
}

.mc-list-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.mc-list-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-700);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mc-list-page-link:hover {
  border-color: var(--ink-300);
  color: var(--ink-900);
}

.mc-list-page-link.is-active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

.mc-list-page-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.mc-list-page-ellipsis {
  color: var(--ink-400);
  font-size: 0.84rem;
  padding: 0 2px;
}

@media (max-width: 640px) {
  .mc-list-toolbar {
    align-items: flex-start;
  }

  .mc-list-toolbar-main {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .mc-list-per-page {
    width: 100%;
    justify-content: space-between;
  }

  .mc-list-pagination {
    gap: 6px;
  }

  .mc-list-page-link {
    min-height: 34px;
    padding: 0 12px;
  }
}

/* =====================================
   FAVORITES EDIT PAGE
===================================== */
.fem-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2rem 1.2rem 2.5rem;
}

.fem-header {
  margin-bottom: 1rem;
}

.fem-title {
  margin: 0 0 0.25rem;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #222;
}

.fem-meta {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #7f7f7f;
}

.fem-alert {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  font-size: 0.87rem;
}

.fem-alert--success {
  background: #f3faf4;
  border-color: #b7dfc0;
  color: #1f5a32;
}

.fem-alert--error {
  background: #fff5f5;
  border-color: #efc3c3;
  color: #9c2c2c;
}

.fem-alert--warning {
  background: #fff9ef;
  border-color: #eed6a7;
  color: #8b5c17;
}

.fem-panel {
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.04);
  overflow: hidden;
}

.fem-panel-inner {
  padding: 1.35rem;
}

.fem-form.is-latest-mode .fem-col-mainpage {
  display: none;
}

.fem-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1rem;
}

.fem-toolbar-title {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #202020;
}

.fem-kicker {
  display: inline-block;
  margin-bottom: 0.4rem;
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #818181;
}

.fem-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}

.fem-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  background: #fff;
  color: #555;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.fem-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fem-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 2.45rem;
  padding: 0 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.fem-pill:hover {
  border-color: #b8b8b8;
  color: #222;
}

.fem-pill.is-active {
  border-color: #111;
  background: #111;
  color: #fff;
}

.fem-pill.is-disabled {
  opacity: 0.55;
}

.fem-pill.is-disabled span {
  cursor: not-allowed;
}

.fem-toolbar-side {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfcfc 0%, #f6f6f6 100%);
}

.fem-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: #ececec;
  color: #3d3d3d;
  font-size: 0.79rem;
  font-weight: 700;
}

.fem-counter[hidden],
.fem-validation[hidden] {
  display: none !important;
}

.fem-save-btn {
  min-height: 2.7rem;
  border: 1px solid #111;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.fem-save-btn:hover {
  background: #232323;
  border-color: #232323;
}

.fem-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fem-side-note {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #777;
}

.fem-helper {
  margin: 0 0 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 14px;
  background: #f7f7f7;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #6d6d6d;
}

.fem-validation {
  margin: 0 0 1rem;
  color: #b42318;
  font-size: 0.83rem;
  font-weight: 600;
}

.fem-table-wrap {
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.fem-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  background: #fafafa;
}

.fem-table-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.fem-table-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.fem-per-page {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.79rem;
  color: #666;
}

.fem-per-page select {
  min-width: 5.25rem;
  height: 2.1rem;
  padding: 0 0.7rem;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  background: #fff;
  color: #333;
  font-size: 0.82rem;
}

.fem-table-summary,
.fem-table-page {
  font-size: 0.79rem;
  color: #727272;
}

.fem-table-scroll {
  overflow-x: auto;
}

.fem-table {
  width: 100%;
  border-collapse: collapse;
}

.fem-table thead th {
  padding: 0.8rem 1rem;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #555;
  background: #f5f5f5;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.fem-table thead th.is-center,
.fem-table tbody td.is-center {
  text-align: center;
}

.fem-table tbody td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  vertical-align: middle;
}

.fem-table tbody tr:last-child td {
  border-bottom: none;
}

.fem-table tbody tr:hover {
  background: #fafafa;
}

.fem-row-number {
  font-size: 0.84rem;
  font-weight: 700;
  color: #555;
}

.fem-shortcut-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: #222;
}

.fem-shortcut-name a {
  color: inherit;
  text-decoration: none;
}

.fem-shortcut-name a:hover {
  text-decoration: underline;
}

.fem-shortcut-meta {
  margin-top: 0.25rem;
  font-size: 0.77rem;
  color: #7c7c7c;
}

.fem-category-cell,
.fem-date-cell {
  font-size: 0.84rem;
  color: #4f4f4f;
  white-space: nowrap;
}

.fem-category-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: #f4f4f4;
  color: #555;
  font-size: 0.76rem;
  font-weight: 700;
}

.fem-check-cell {
  width: 170px;
}

.fem-actions-cell {
  width: 86px;
}

.fem-check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fem-main-checkbox {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #111;
  cursor: pointer;
}

.fem-main-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.fem-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(180, 35, 24, 0.4);
  border-radius: 8px;
  background: #b42318;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.fem-delete-btn:hover {
  background: #991f16;
  border-color: rgba(153, 31, 22, 0.65);
  transform: translateY(-1px);
}

.fem-delete-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.fem-empty {
  padding: 2.4rem 1.2rem;
  text-align: center;
  border: 1px dashed #d7d7d7;
  border-radius: 16px;
  background: #fcfcfc;
  color: #7d7d7d;
}

.fem-empty p {
  margin: 0.35rem 0;
  font-size: 0.88rem;
}

.fem-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1rem;
}

.fem-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.7rem;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  background: #fff;
  color: #555;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.fem-page-link:hover {
  border-color: #b8b8b8;
  color: #222;
}

.fem-page-link.is-active {
  border-color: #111;
  background: #111;
  color: #fff;
}

@media (max-width: 860px) {
  .fem-shell {
    padding: 1.4rem 0.85rem 2rem;
  }

  .fem-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .fem-panel-inner {
    padding: 1rem;
  }

  .fem-title {
    font-size: 1.45rem;
  }

  .fem-toolbar-title {
    font-size: 1.15rem;
  }

  .fem-table thead th,
  .fem-table tbody td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .fem-table-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .fem-table-toolbar-main {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .fem-table-controls {
    width: 100%;
  }

  .fem-per-page {
    width: 100%;
    justify-content: space-between;
  }
}

/* iq questions: toolbar, sort, pagination */
.iq-table-toolbar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; gap:12px; flex-wrap:wrap; }
.iq-per-page { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted,#888); }
.iq-pp-link { font-size:13px; color:var(--link-color,#4a9eff); text-decoration:none; padding:2px 6px; border-radius:4px; }
.iq-pp-link:hover { background:rgba(74,158,255,.12); }
.iq-pp-active { font-size:13px; font-weight:700; color:var(--text-primary,#eee); padding:2px 6px; border-radius:4px; background:rgba(255,255,255,.08); }
.iq-pagination-info { font-size:13px; color:var(--text-muted,#888); }
.iq-sort-link { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:3px; }
.iq-sort-link:hover { color:var(--link-color,#4a9eff); }
.iq-sort-icon { font-size:11px; opacity:.45; }
.iq-sort-icon.iq-sort-active { opacity:1; color:var(--link-color,#4a9eff); }
.iq-pagination { display:flex; align-items:center; justify-content:center; gap:4px; padding:12px 16px; flex-wrap:wrap; }
.iq-page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; border-radius:6px; font-size:13px; text-decoration:none; color:var(--text-primary,#eee); background:rgba(255,255,255,.06); }
.iq-page-btn:hover { background:rgba(74,158,255,.18); color:var(--link-color,#4a9eff); }
.iq-page-btn.iq-page-active { background:var(--link-color,#4a9eff); color:#fff; font-weight:700; pointer-events:none; }
.iq-page-ellipsis { font-size:13px; color:var(--text-muted,#888); padding:0 4px; }

.assess-list .assess-filter-panel {
  width: min(100%, 1480px);
  margin: 28px auto 18px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f6f7f9;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.assess-list .voe-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  align-items: start;
}
.assess-list .eval-label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #171717;
}
.assess-list .assess-check-trigger {
  width: 100%;
  min-height: 48px;
  border: 1px solid #d9dde3 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #171717 !important;
  box-shadow: none !important;
  padding: 11px 13px !important;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.25;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}
.assess-list .assess-check-trigger span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assess-list .assess-check-trigger:hover {
  border-color: #bfc5cf !important;
  background: #ffffff !important;
}
.assess-list .assess-check-trigger:focus {
  border-color: #111827 !important;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12) !important;
  outline: none;
}
.assess-list .assess-checkbox-group.assess-check-menu {
  top: calc(100% + 8px);
  border: 1px solid #d9dde3;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}
.assess-list .assess-filter-check {
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 8px;
  color: #1f2937;
}
.assess-list .assess-filter-check:hover {
  background: #f3f4f6;
}
.assess-list .assess-filter-check input {
  accent-color: #111827;
}
.assess-list .assess-filter-check input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
}
.assess-list .assess-input,
.assess-list .assess-select {
  min-height: 48px;
  border-radius: 12px;
  border-color: #d9dde3;
  background: #ffffff;
}
.assess-list .voe-filter-actions {
  padding-top: 4px;
}