:root {
  --tech-bg: #090a08;
  --tech-bg-deep: #030403;
  --tech-panel: rgba(17, 19, 16, .9);
  --tech-panel-solid: #11130f;
  --tech-panel-soft: rgba(24, 27, 21, .82);
  --tech-line: rgba(193, 230, 122, .14);
  --tech-line-strong: rgba(202, 238, 130, .3);
  --tech-text: #edf2e8;
  --tech-muted: #8c9485;
  --accent: #cfff69;
  --accent-rgb: 207, 255, 105;
  --accent-2: #e1a847;
  --accent-2-rgb: 225, 168, 71;
  --success-tech: #54e9a8;
  --warning-tech: #ffbf59;
  --danger-tech: #ff657c;
  color-scheme: dark;
}

body[data-role="supervisor"] {
  --accent: #d6ff63;
  --accent-rgb: 214, 255, 99;
  --accent-2: #f0a842;
  --accent-2-rgb: 240, 168, 66;
}

body[data-role="staff"] {
  --accent: #4ff0ad;
  --accent-rgb: 79, 240, 173;
  --accent-2: #d6aa58;
  --accent-2-rgb: 214, 170, 88;
}

body[data-role="system_admin"] {
  --accent: #f2c15e;
  --accent-rgb: 242, 193, 94;
  --accent-2: #a879ff;
  --accent-2-rgb: 168, 121, 255;
}

html,
body {
  min-height: 100%;
  background: var(--tech-bg-deep);
}

body {
  color: var(--tech-text);
  overflow-x: hidden;
}

::selection {
  color: #fff;
  background: rgba(var(--accent-rgb), .38);
}

.tech-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 15%, rgba(var(--accent-2-rgb), .19), transparent 29%),
    radial-gradient(circle at 28% 88%, rgba(var(--accent-rgb), .13), transparent 32%),
    linear-gradient(145deg, #030403 0%, #0b0d09 52%, #050604 100%);
}

.tech-grid {
  position: absolute;
  inset: 0;
  opacity: .46;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), .035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95), transparent 90%);
  transform: perspective(700px) rotateX(58deg) scale(1.6) translateY(13%);
  transform-origin: center bottom;
}

.tech-atmosphere::after {
  content: "";
  position: absolute;
  inset: -35% 0 auto;
  height: 34%;
  opacity: .3;
  background: linear-gradient(to bottom, transparent, rgba(var(--accent-rgb), .12), transparent);
  animation: tech-global-scan 10s linear infinite;
}

.tech-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .52;
  animation: tech-orb-float 11s ease-in-out infinite alternate;
}

.tech-orb::before,
.tech-orb::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.tech-orb::before {
  inset: 12%;
  border: 1px solid rgba(var(--accent-rgb), .2);
}

.tech-orb::after {
  inset: 28%;
  border: 1px dashed rgba(var(--accent-rgb), .28);
  animation: tech-spin 18s linear infinite;
}

.tech-orb-one {
  width: 420px;
  height: 420px;
  right: -150px;
  top: -150px;
  border: 1px solid rgba(var(--accent-rgb), .13);
  box-shadow: inset 0 0 90px rgba(var(--accent-rgb), .05), 0 0 80px rgba(var(--accent-rgb), .05);
}

.tech-orb-two {
  width: 300px;
  height: 300px;
  left: 12%;
  bottom: -190px;
  border: 1px solid rgba(var(--accent-2-rgb), .18);
  animation-delay: -5s;
}

.particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tech-particle {
  position: absolute;
  top: -10vh;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: var(--opacity);
  background: rgba(241, 249, 225, .92);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .7), 0 0 18px rgba(var(--accent-rgb), .28);
  animation: tech-snow-fall var(--duration) linear var(--delay) infinite;
}

.login-shell,
.app-shell {
  position: relative;
  z-index: 2;
}

.login-shell {
  background: transparent;
}

.login-card {
  border: 1px solid rgba(var(--accent-rgb), .28);
  background: rgba(10, 11, 9, .9);
  box-shadow: 0 35px 100px rgba(0, 0, 0, .58), 0 0 70px rgba(var(--accent-rgb), .08);
  backdrop-filter: blur(24px);
}

.login-card::before,
.login-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.login-card::before {
  inset: 0;
  opacity: .34;
  background: linear-gradient(110deg, transparent 0 42%, rgba(var(--accent-rgb), .12) 48%, transparent 54%);
  transform: translateX(-100%);
  animation: tech-card-sweep 8s ease-in-out infinite;
}

.login-card::after {
  right: 22px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success-tech);
  box-shadow: 0 0 14px var(--success-tech), -20px 0 0 rgba(255, 255, 255, .12), -40px 0 0 rgba(255, 255, 255, .08);
}

.login-copy {
  position: relative;
  background:
    linear-gradient(145deg, rgba(19, 22, 16, .96), rgba(6, 7, 6, .95)),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(var(--accent-rgb), .05) 35px);
}

.login-copy::after {
  content: "SECURE COMPLAINT INTELLIGENCE / 2026";
  position: absolute;
  left: 56px;
  bottom: 38px;
  color: rgba(var(--accent-rgb), .42);
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
}

.login-copy .eyebrow,
.eyebrow {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), .34);
}

.login-copy h1 {
  color: #f4f9ff;
  text-shadow: 0 0 28px rgba(var(--accent-rgb), .13);
}

.login-copy p {
  color: #8ea0bd;
}

.login-form {
  position: relative;
  z-index: 1;
  background: rgba(9, 10, 8, .58);
}

.login-form label,
.stack-form label,
.filters label {
  color: #98a9c4;
}

.login-form input,
.stack-form input,
.stack-form select,
.stack-form textarea,
.filters input,
.filters select,
.inline-rule-select,
.page-size-control select,
.page-jump input,
.action-card textarea,
.action-card select {
  border-color: var(--tech-line);
  background: rgba(7, 8, 6, .9);
  color: var(--tech-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

input::placeholder,
textarea::placeholder {
  color: #566985;
}

.login-form input:focus,
.stack-form :is(input, select, textarea):focus,
.filters :is(input, select):focus,
.inline-rule-select:focus,
.page-size-control select:focus,
.page-jump input:focus {
  border-color: rgba(var(--accent-rgb), .8);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1), 0 0 22px rgba(var(--accent-rgb), .09);
}

.primary-button {
  position: relative;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(var(--accent-rgb), .5);
  background: linear-gradient(135deg, rgba(var(--accent-2-rgb), .98), rgba(var(--accent-rgb), .75));
  box-shadow: 0 10px 28px rgba(var(--accent-2-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.primary-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .28) 48%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .55s ease;
}

.primary-button:hover::after {
  transform: translateX(130%);
}

.primary-button:hover {
  border-color: rgba(var(--accent-rgb), .85);
  box-shadow: 0 12px 34px rgba(var(--accent-rgb), .24), 0 0 22px rgba(var(--accent-rgb), .12);
}

.secondary-button {
  color: #bbcae1;
  border-color: var(--tech-line);
  background: rgba(24, 27, 21, .84);
}

.secondary-button:hover {
  color: #fff;
  border-color: rgba(var(--accent-rgb), .45);
  background: rgba(var(--accent-rgb), .1);
}

.form-note,
.breadcrumb,
.panel-heading p,
.inline-rule-status,
.page-size-control,
.pagination,
.page-jump {
  color: var(--tech-muted);
}

.sidebar {
  width: 270px;
  padding: 24px 18px;
  border-right: 1px solid rgba(var(--accent-rgb), .18);
  background: linear-gradient(180deg, rgba(10, 11, 9, .98), rgba(5, 6, 5, .97));
  box-shadow: 18px 0 60px rgba(0, 0, 0, .22), inset -1px 0 rgba(255, 255, 255, .018);
  backdrop-filter: blur(24px);
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 180px;
  opacity: .5;
  background: radial-gradient(circle at 25% 0, rgba(var(--accent-rgb), .28), transparent 66%);
  pointer-events: none;
}

.sidebar-brand {
  position: relative;
  z-index: 1;
}

.sidebar-brand b {
  color: #f1f7ff;
  letter-spacing: .02em;
}

.sidebar-brand small {
  color: #7084a3;
  letter-spacing: .08em;
}

.brand-mark,
.brand-mark.small {
  border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(145deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .06), 0 12px 30px rgba(var(--accent-rgb), .25);
}

.sidebar-signal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -8px 8px 22px;
  padding: 9px 10px;
  border: 1px solid rgba(var(--accent-rgb), .12);
  border-radius: 9px;
  color: #647896;
  background: rgba(var(--accent-rgb), .035);
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

.sidebar-signal i,
.system-status i,
.live-chip i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success-tech);
  box-shadow: 0 0 10px var(--success-tech);
  animation: tech-pulse 1.8s ease-in-out infinite;
}

.sidebar-signal b {
  margin-left: auto;
  color: var(--success-tech);
  font-size: 8px;
}

.nav-list {
  gap: 9px;
}

.nav-item {
  position: relative;
  border: 1px solid transparent;
  color: #7184a3;
  letter-spacing: .02em;
  transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease;
}

.nav-item::after {
  content: "";
  position: absolute;
  right: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 transparent;
}

.nav-item:hover {
  color: #dceaff;
  border-color: rgba(var(--accent-rgb), .1);
  background: rgba(var(--accent-rgb), .045);
  transform: translateX(2px);
}

.nav-item.active {
  color: #f4fbff;
  border-color: rgba(var(--accent-rgb), .22);
  background: linear-gradient(100deg, rgba(var(--accent-2-rgb), .2), rgba(var(--accent-rgb), .09));
  box-shadow: inset 3px 0 var(--accent), 0 10px 30px rgba(0, 0, 0, .12), 0 0 24px rgba(var(--accent-rgb), .045);
}

.nav-item.active span {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), .55);
}

.nav-item.active::after {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.staff-quick-nav {
  display: grid;
  gap: 6px;
  margin: 5px 4px 0;
  padding: 14px 3px 2px;
  border-top: 1px solid rgba(var(--accent-rgb), .12);
}

.staff-quick-title {
  padding: 0 9px 4px;
  color: #536784;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}

.staff-quick-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: #7184a3;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

.staff-quick-item span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  font-size: 11px;
  font-weight: 900;
}

.staff-quick-item em {
  overflow: hidden;
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-quick-item b {
  min-width: 27px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #b9c8dc;
  background: rgba(255, 255, 255, .06);
  font-size: 11px;
  text-align: center;
}

.staff-quick-item:hover,
.staff-quick-item.active {
  color: #f4fbff;
  border-color: rgba(var(--accent-rgb), .2);
  background: rgba(var(--accent-rgb), .09);
  transform: translateX(2px);
}

.staff-quick-item.active {
  box-shadow: inset 3px 0 var(--accent);
}

.staff-quick-item.active b {
  color: #fff;
  background: rgba(var(--accent-rgb), .3);
}

.staff-quick-item.overdue span,
.staff-quick-item.overdue.active b {
  color: #ff8794;
  background: rgba(211, 58, 73, .16);
}

.staff-quick-item.completed span {
  color: #6ce0b6;
  background: rgba(15, 159, 110, .14);
}

.sidebar-foot {
  border-color: rgba(var(--accent-rgb), .12);
}

.role-pill {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .28);
  background: rgba(var(--accent-rgb), .08);
  box-shadow: inset 0 0 15px rgba(var(--accent-rgb), .04);
}

.sidebar-user {
  color: #edf6ff;
}

.text-button.light {
  color: #7084a3;
}

.text-button.light:hover {
  color: var(--accent);
}

.main-area {
  margin-left: 270px;
  position: relative;
  z-index: 1;
  background: transparent;
}

.topbar {
  height: 92px;
  color: var(--tech-text);
  border-color: rgba(var(--accent-rgb), .12);
  background: rgba(8, 9, 7, .84);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
  backdrop-filter: blur(22px);
}

.topbar h2 {
  color: #f4f9ff;
  font-size: 22px;
  letter-spacing: .02em;
}

.breadcrumb {
  color: var(--accent);
  font: 700 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.topbar-statuses {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 10px;
  color: #ced9ca;
  background: rgba(var(--accent-rgb), .055);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.theme-toggle:hover {
  color: #fff;
  border-color: rgba(var(--accent-rgb), .46);
  background: rgba(var(--accent-rgb), .11);
  transform: translateY(-1px);
}

.theme-toggle-icon {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
  font-size: 13px;
  line-height: 1;
}

.system-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--accent-rgb), .13);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), .045);
}

.system-status span,
.system-status b,
.system-status small {
  display: block;
}

.system-status b {
  color: #dceaff;
  font-size: 10px;
}

.system-status small {
  margin-top: 3px;
  color: #607593;
  font-size: 8px;
}

.cutoff-note {
  color: #8ca0bc;
  border-color: var(--tech-line);
  background: rgba(24, 27, 21, .76);
}

.content-view {
  position: relative;
  padding: 30px 34px 54px;
}

.content-view:not(.hidden) {
  animation: tech-view-enter .42s ease both;
}

.role-command-strip,
.overview-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .28);
  background:
    radial-gradient(circle at 85% 20%, rgba(var(--accent-rgb), .2), transparent 25%),
    linear-gradient(128deg, rgba(27, 31, 22, .96), rgba(13, 15, 12, .94) 54%, rgba(var(--accent-2-rgb), .14));
  box-shadow: 0 20px 52px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .04), 0 0 38px rgba(var(--accent-rgb), .055);
}

.role-command-strip::before,
.overview-hero::before {
  content: "";
  position: absolute;
  right: -60px;
  top: 50%;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: inset 0 0 0 28px rgba(var(--accent-rgb), .018), inset 0 0 0 58px rgba(var(--accent-rgb), .018);
  animation: tech-radar 7s linear infinite;
}

.role-command-strip::after,
.overview-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: tech-line-glow 3.2s ease-in-out infinite;
}

.role-command-strip {
  min-height: 146px;
  margin-bottom: 18px;
  padding: 24px 27px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.command-copy,
.command-telemetry,
.overview-hero > * {
  position: relative;
  z-index: 1;
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--success-tech);
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
}

.command-copy h3 {
  margin: 12px 0 7px;
  color: #f4f9ff;
  font-size: 23px;
}

.command-copy p {
  margin: 0;
  color: #8ea1bf;
  font-size: 12px;
}

.command-telemetry {
  display: grid;
  grid-template-columns: repeat(3, minmax(85px, 1fr));
  gap: 1px;
  overflow: hidden;
  min-width: 330px;
  border: 1px solid rgba(var(--accent-rgb), .14);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), .11);
}

.command-telemetry > div {
  padding: 14px 15px;
  background: rgba(10, 12, 9, .8);
}

.command-telemetry small,
.command-telemetry b {
  display: block;
}

.command-telemetry small {
  color: #637794;
  font-size: 9px;
}

.command-telemetry b {
  margin-top: 7px;
  color: var(--accent);
  font-size: 12px;
}

.overview-hero {
  background:
    radial-gradient(circle at 82% 20%, rgba(var(--accent-rgb), .18), transparent 28%),
    linear-gradient(128deg, rgba(28, 32, 22, .97), rgba(13, 16, 11, .95) 55%, rgba(var(--accent-2-rgb), .15));
}

.overview-hero p {
  color: #91a7c7;
}

.motivation-banner {
  border-color: rgba(255, 83, 107, .78);
  border-left-color: #ff536b;
  background:
    radial-gradient(circle at 88% 22%, rgba(var(--accent-2-rgb), .16), transparent 30%),
    linear-gradient(120deg, rgba(23, 28, 19, .98), rgba(12, 15, 10, .96));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .2), 0 0 28px rgba(255, 83, 107, .09);
}

.motivation-copy p {
  color: var(--tech-text);
  text-shadow: 0 0 22px rgba(var(--accent-rgb), .1);
}

.motivation-copy > span { color: var(--accent); }
.motivation-copy strong { color: var(--accent-2); }

.stat-grid,
.overview-stat-grid {
  gap: 15px;
}

.stat-card,
.overview-stat-card,
.panel {
  color: var(--tech-text);
  border-color: var(--tech-line);
  background: linear-gradient(145deg, rgba(24, 27, 21, .92), rgba(10, 12, 9, .94));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(16px);
}

.stat-card,
.overview-stat-card {
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.stat-card:hover,
.overview-stat-card:hover {
  z-index: 1;
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .36);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .24), 0 0 26px rgba(var(--accent-rgb), .07);
}

.stat-card::before,
.overview-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .75), transparent);
}

.stat-card .stat-label,
.overview-stat-card span,
.overview-stat-card small {
  color: #7d90ad;
}

.stat-card .stat-value,
.overview-stat-card b,
.overview-number {
  color: #eef8ff;
  text-shadow: 0 0 22px rgba(var(--accent-rgb), .15);
}

.staff-rhythm-card {
  color: var(--tech-text);
  border-color: var(--tech-line);
  border-left-color: var(--accent);
  background: linear-gradient(135deg, rgba(24, 27, 21, .94), rgba(10, 12, 9, .96));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .025);
}

.staff-rhythm-card h3,
.staff-rhythm-progress > b {
  color: var(--tech-text);
}

.staff-rhythm-card p,
.staff-rhythm-progress > span,
.trend-legend {
  color: var(--tech-muted);
}

.staff-rhythm-card[data-pace="overdue"] { border-left-color: var(--danger-tech); }
.staff-rhythm-card[data-pace="due_soon"] { border-left-color: var(--warning-tech); }
.staff-rhythm-card[data-pace="clear"] { border-left-color: var(--success-tech); }

#staffOverviewOperations .operation-metric {
  color: var(--tech-text);
  border-color: var(--tech-line);
  background: linear-gradient(145deg, rgba(24, 27, 21, .92), rgba(10, 12, 9, .94));
}

#staffOverviewOperations .operation-metric b {
  color: var(--tech-text);
}

#staffOverviewOperations .operation-metric span,
#staffOverviewOperations .operation-metric small {
  color: var(--tech-muted);
}

.stat-card.primary {
  border-color: rgba(var(--accent-rgb), .32);
  background: linear-gradient(145deg, rgba(var(--accent-2-rgb), .18), rgba(var(--accent-rgb), .075)), rgba(12, 14, 10, .95);
}

.overview-stat-card.primary,
.overview-stat-card.warning,
.overview-stat-card.info,
.overview-stat-card.success {
  border-top-width: 1px;
}

.overview-stat-card.primary { color: var(--accent); border-color: rgba(var(--accent-rgb), .32); }
.overview-stat-card.warning { color: var(--warning-tech); border-color: rgba(255, 191, 89, .25); }
.overview-stat-card.info { color: #b9a0ff; border-color: rgba(185, 160, 255, .25); }
.overview-stat-card.success { color: var(--success-tech); border-color: rgba(60, 230, 176, .25); }
.overview-number.pending { color: var(--warning-tech); }
.overview-number.completed { color: var(--success-tech); }

.panel {
  position: relative;
}

.panel::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .56), transparent);
  pointer-events: none;
}

.panel-heading,
.drawer-head,
.dialog-head {
  border-color: var(--tech-line);
}

.panel-heading h3,
.drawer-head h3,
.dialog-head h3,
.detail-section h4 {
  color: #eff7ff;
}

.filters {
  border-color: var(--tech-line);
  background: rgba(8, 10, 7, .68);
}

.bulk-bar,
.info-strip {
  color: #b9d9ff;
  border-color: rgba(var(--accent-rgb), .28);
  background: rgba(var(--accent-rgb), .08);
}

.table-shell {
  scrollbar-color: rgba(var(--accent-rgb), .35) rgba(3, 8, 19, .6);
}

.table-shell::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-shell::-webkit-scrollbar-track,
.drawer-body::-webkit-scrollbar-track {
  background: rgba(5, 6, 5, .7);
}

.table-shell::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .28);
}

.table-shell th {
  color: #7e91af;
  border-color: var(--tech-line);
  background: rgba(13, 15, 11, .98);
  letter-spacing: .04em;
}

.table-shell td {
  color: #b9c8dc;
  border-color: rgba(112, 163, 212, .09);
}

.table-shell tbody tr {
  transition: background .18s ease, box-shadow .18s ease;
}

.table-shell tbody tr:hover {
  background: rgba(var(--accent-rgb), .045);
  box-shadow: inset 3px 0 rgba(var(--accent-rgb), .55);
}

.cell-main,
.timeline-item b {
  color: #dce9f8;
}

.cell-sub,
.detail-key,
.empty-cell {
  color: #6f829f;
}

.tag-blue {
  color: var(--accent-2);
  background: rgba(var(--accent-2-rgb), .1);
  border: 1px solid rgba(var(--accent-2-rgb), .15);
}

.tag-green {
  color: var(--success-tech);
  background: rgba(60, 230, 176, .1);
  border: 1px solid rgba(60, 230, 176, .14);
}

.tag-amber {
  color: var(--warning-tech);
  background: rgba(255, 191, 89, .1);
  border: 1px solid rgba(255, 191, 89, .14);
}

.tag-red {
  color: #ff8192;
  background: rgba(255, 101, 124, .1);
  border: 1px solid rgba(255, 101, 124, .14);
}

.tag-gray {
  color: #92a0b5;
  background: rgba(127, 145, 175, .1);
  border: 1px solid rgba(127, 145, 175, .12);
}

.row-action {
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .16);
  background: rgba(var(--accent-rgb), .075);
}

.row-action:hover {
  border-color: rgba(var(--accent-rgb), .4);
  background: rgba(var(--accent-rgb), .13);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), .08);
}

.return-button {
  color: #ff8596;
  border-color: rgba(255, 101, 124, .3);
  background: rgba(255, 101, 124, .07);
}

.return-button:hover {
  background: rgba(255, 101, 124, .13);
}

.returned-note {
  color: #ff8495;
  background: rgba(255, 101, 124, .09);
}

.progress-track {
  background: rgba(99, 122, 153, .18);
}

.progress-track i {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .34);
}

.progress-label {
  color: #8ca0bd;
}

.page-jump input,
.page-size-control select {
  height: 36px;
}

.toast {
  border: 1px solid rgba(var(--accent-rgb), .3);
  background: rgba(15, 18, 12, .97);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .34), 0 0 24px rgba(var(--accent-rgb), .09);
  backdrop-filter: blur(18px);
}

.toast.error {
  border-color: rgba(255, 101, 124, .35);
  background: rgba(83, 18, 34, .96);
}

.modal-backdrop {
  background: rgba(2, 3, 2, .8);
  backdrop-filter: blur(7px);
}

.drawer,
.dialog-card {
  color: var(--tech-text);
  border: 1px solid var(--tech-line-strong);
  background: rgba(10, 12, 9, .98);
  box-shadow: -30px 0 90px rgba(0, 0, 0, .5), 0 0 45px rgba(var(--accent-rgb), .07);
  backdrop-filter: blur(24px);
}

.dialog-card {
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 45px rgba(var(--accent-rgb), .07);
}

.close-button {
  color: #8fa3c0;
  border: 1px solid var(--tech-line);
  background: rgba(25, 29, 21, .92);
}

.close-button:hover {
  color: #fff;
  border-color: rgba(var(--accent-rgb), .45);
}

.detail-grid,
.detail-item,
.action-card {
  border-color: var(--tech-line);
}

.detail-item {
  background: rgba(20, 23, 17, .58);
}

.detail-value {
  color: #bdcbe0;
}

.assignment-card {
  color: #d5e4f8;
  border-color: var(--tech-line);
  background: rgba(var(--accent-rgb), .05);
}

.assignment-card p {
  color: var(--tech-muted);
}

.timeline-item {
  color: #879ab6;
  border-color: rgba(var(--accent-rgb), .2);
}

.timeline-item::before {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.watermark-grid {
  color: rgba(134, 181, 229, .065);
}

.menu-button {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), .25);
  background: rgba(var(--accent-rgb), .07);
}

@keyframes tech-snow-fall {
  0% { transform: translate3d(0, -12vh, 0) rotate(0deg); }
  55% { transform: translate3d(var(--drift), 55vh, 0) rotate(170deg); }
  100% { transform: translate3d(var(--drift-end), 115vh, 0) rotate(360deg); }
}

@keyframes tech-global-scan {
  from { transform: translateY(-20%); }
  to { transform: translateY(400%); }
}

@keyframes tech-orb-float {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-24px, 28px, 0) rotate(9deg); }
}

@keyframes tech-spin {
  to { transform: rotate(360deg); }
}

@keyframes tech-card-sweep {
  0%, 55% { transform: translateX(-110%); }
  82%, 100% { transform: translateX(115%); }
}

@keyframes tech-pulse {
  0%, 100% { opacity: .5; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.16); }
}

@keyframes tech-view-enter {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tech-radar {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes tech-line-glow {
  0%, 100% { opacity: .25; transform: scaleX(.35); }
  50% { opacity: .9; transform: scaleX(1); }
}

@media (max-width: 1180px) {
  .command-telemetry {
    min-width: 290px;
  }

  .system-status {
    display: none;
  }
}

@media (max-width: 780px) {
  .tech-grid {
    background-size: 38px 38px;
  }

  .tech-particle:nth-child(n + 19) {
    display: none;
  }

  .sidebar {
    width: min(292px, 86vw);
  }

  .main-area {
    margin-left: 0;
  }

  .topbar {
    background: rgba(8, 9, 7, .94);
  }

  .topbar-statuses {
    margin-left: auto;
  }

  .theme-toggle {
    padding: 7px 9px;
  }

  .theme-toggle > span:last-child {
    display: none;
  }

  .content-view {
    padding: 18px;
  }

  .role-command-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .command-telemetry {
    width: 100%;
    min-width: 0;
  }

  .role-command-strip::before,
  .overview-hero::before {
    opacity: .55;
  }
}

@media (max-width: 480px) {
  .login-shell {
    padding: 12px;
  }

  .login-copy::after {
    left: 30px;
    bottom: 22px;
    font-size: 8px;
  }

  .content-view {
    padding: 14px 12px 34px;
  }

  .role-command-strip {
    min-height: 0;
    padding: 20px;
    border-radius: 15px;
  }

  .command-copy h3 {
    font-size: 20px;
  }

  .command-telemetry {
    grid-template-columns: repeat(3, 1fr);
  }

  .command-telemetry > div {
    padding: 12px 8px;
  }

  .command-telemetry b {
    font-size: 10px;
  }

  .overview-hero {
    border-radius: 15px;
  }

  .stat-card,
  .overview-stat-card,
  .panel {
    border-radius: 13px;
  }
}

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

  .particle-field,
  .tech-atmosphere::after {
    display: none;
  }
}

/* Readability scale: keep dense operations data comfortable without changing layout semantics. */
body {
  font-size: 15px;
  line-height: 1.5;
}

.login-form label,
.stack-form label,
.filters label {
  font-size: 13px;
}

.login-form input,
.stack-form input,
.stack-form select,
.stack-form textarea,
.filters input,
.filters select,
.action-card textarea,
.action-card select {
  font-size: 14px;
}

.primary-button,
.secondary-button {
  font-size: 14px;
}

.form-note,
.panel-heading p,
.bulk-bar,
.info-strip {
  font-size: 13px;
}

.sidebar-brand b {
  font-size: 18px;
}

.sidebar-brand small {
  font-size: 12px;
}

.nav-item {
  font-size: 15px;
}

.nav-item span,
.role-pill,
.sidebar-signal,
.sidebar-signal b {
  font-size: 10px;
}

.sidebar-user {
  font-size: 15px;
}

.text-button,
.theme-toggle,
.breadcrumb {
  font-size: 12px;
}

.system-status b {
  font-size: 11px;
}

.system-status small {
  font-size: 10px;
}

.cutoff-note {
  font-size: 13px;
}

.eyebrow,
.live-chip {
  font-size: 11px;
}

.command-copy p,
.overview-hero p {
  font-size: 14px;
  line-height: 1.7;
}

.command-telemetry small {
  font-size: 11px;
}

.command-telemetry b {
  font-size: 14px;
}

.stat-card .stat-label,
.overview-stat-card span {
  font-size: 13px;
}

.overview-stat-card small,
.progress-label {
  font-size: 12px;
}

.panel-heading h3 {
  font-size: 21px;
}

.table-shell th {
  font-size: 13px;
}

.table-shell td {
  font-size: 14px;
  line-height: 1.55;
}

.cell-sub,
.mono,
.tag,
.returned-note {
  font-size: 12px;
}

.row-action,
.return-button {
  font-size: 12px;
}

.inline-rule-select,
.pagination,
.page-size-control,
.page-size-control select,
.page-jump,
.page-jump input {
  font-size: 13px;
}

.inline-rule-status {
  font-size: 12px;
}

.detail-section h4 {
  font-size: 15px;
}

.detail-key {
  font-size: 12px;
}

.detail-value {
  font-size: 14px;
  line-height: 1.65;
}

.assignment-card p,
.timeline-item {
  font-size: 13px;
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .table-shell th {
    font-size: 12px;
  }

  .table-shell td,
  .detail-value {
    font-size: 13px;
  }
}