/*
 * Selective Liquid Glass web approximation.
 * Apple documents Liquid Glass for Apple platforms; this file uses native CSS
 * materials for the shell and overlays while keeping evidence surfaces opaque.
 */
:root {
  --canvas: #edf2f6;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-2: rgba(247, 250, 252, 0.86);
  --surface-3: rgba(232, 238, 244, 0.86);
  --line: rgba(101, 120, 139, 0.2);
  --line-strong: rgba(78, 98, 119, 0.34);
  --sidebar: rgba(19, 27, 35, 0.9);
  --sidebar-hover: rgba(255, 255, 255, 0.1);
  --radius: 8px;
  --glass-border: rgba(255, 255, 255, 0.58);
  --glass-shadow: 0 16px 36px rgba(34, 51, 69, 0.1);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(71, 92, 113, 0.08);
  --focus: 0 0 0 3px rgba(39, 110, 241, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.8);
  --topbar-height: 58px;
}

html {
  background: var(--canvas);
}

body {
  background: linear-gradient(145deg, #e9eff4 0%, #f5f7f9 46%, #e9eff4 100%);
}

.loading-screen {
  background: linear-gradient(145deg, #e9eff4 0%, #f7f9fb 100%);
}

.loading-screen .brand-mark {
  border-color: rgba(35, 99, 76, 0.22);
  background: rgba(247, 251, 249, 0.94);
  box-shadow: var(--glass-inset), 0 12px 28px rgba(26, 74, 56, 0.16);
}

.sidebar {
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(155deg, rgba(30, 41, 51, 0.94), rgba(13, 19, 26, 0.92));
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
  box-shadow: 14px 0 38px rgba(19, 31, 43, 0.14), inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

.sidebar::after,
.topbar::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  content: "";
  pointer-events: none;
}

.sidebar::after {
  top: 0;
}

.brand {
  min-height: var(--topbar-height);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.brand-mark {
  border-color: rgba(123, 202, 163, 0.28);
  border-radius: 10px;
  background: rgba(247, 251, 249, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px rgba(8, 20, 15, 0.24);
}

.primary-nav {
  gap: 5px;
  padding: 14px 9px;
}

.primary-nav a {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(235, 241, 246, 0.68);
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.primary-nav a:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateX(1px);
}

.primary-nav a.active {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 18px rgba(9, 16, 23, 0.18);
  color: #fff;
}

.primary-nav a.active::before {
  left: -9px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #75c99d;
  box-shadow: 0 0 12px rgba(117, 201, 157, 0.44);
}

.nav-count {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.84);
}

.nav-count.warning {
  border-color: rgba(255, 202, 111, 0.26);
  background: rgba(157, 101, 30, 0.34);
  color: #ffd995;
}

.sidebar-footer {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.topbar {
  min-height: var(--topbar-height);
  border-bottom-color: rgba(102, 122, 141, 0.2);
  background: rgba(247, 250, 252, 0.72);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
  box-shadow: 0 8px 24px rgba(43, 61, 79, 0.07), var(--glass-inset);
}

.topbar::after {
  bottom: 0;
}

.topbar-context strong {
  letter-spacing: -0.01em;
}

.business-date {
  border-color: rgba(101, 120, 139, 0.24);
  background: rgba(255, 255, 255, 0.64);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--glass-inset);
}

.business-date:hover {
  border-color: rgba(77, 104, 131, 0.42);
  background: rgba(255, 255, 255, 0.82);
}

.page {
  padding: 24px 26px 44px;
}

.button,
.icon-button,
.action-icon {
  border-color: rgba(91, 111, 130, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--glass-inset);
}

.button:hover,
.icon-button:hover,
.action-icon:hover {
  border-color: rgba(69, 96, 121, 0.46);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--glass-inset), 0 6px 14px rgba(45, 65, 84, 0.08);
}

.button.primary {
  border-color: #2164d7;
  background: linear-gradient(145deg, #2c76ed, #1e5fcf);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 7px 16px rgba(36, 102, 218, 0.2);
}

.button.primary:hover {
  border-color: #174fae;
  background: linear-gradient(145deg, #347ff2, #1d58bf);
}

.button.danger,
.button.success {
  box-shadow: var(--glass-inset);
}

.segmented {
  border-color: rgba(96, 116, 135, 0.22);
  border-radius: 10px;
  background: rgba(224, 232, 239, 0.72);
  box-shadow: var(--glass-inset);
}

.segmented button {
  border-radius: 7px;
}

.segmented button.active {
  border: 1px solid rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 3px 10px rgba(49, 69, 89, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.badge,
.status-badge,
.eyebrow-badge {
  border-radius: 999px;
}

.surface {
  border-color: rgba(101, 120, 139, 0.2);
  background: #ffffff;
  box-shadow: var(--glass-inset);
}

.section-head {
  border-bottom-color: rgba(101, 120, 139, 0.16);
}

.metrics-strip,
.summary-band {
  border-color: rgba(101, 120, 139, 0.2);
  background: #ffffff;
  box-shadow: var(--glass-inset), 0 8px 20px rgba(43, 61, 79, 0.06);
}

.metric {
  border-right-color: rgba(101, 120, 139, 0.16);
}

.data-table th {
  background: rgba(235, 241, 246, 0.76);
  border-bottom-color: rgba(101, 120, 139, 0.2);
}

.data-table td {
  border-bottom-color: rgba(101, 120, 139, 0.12);
}

.data-table tbody tr:hover {
  background: rgba(232, 240, 247, 0.58);
}

.progress-track {
  background: rgba(150, 169, 185, 0.24);
}

/* Audit shell: glass around the workflow, opaque evidence for legibility. */
.audit-page {
  background: rgba(255, 255, 255, 0.64);
}

.task-rail {
  border-right-color: rgba(101, 120, 139, 0.18);
  background: #f3f6f8;
}

.task-rail-head,
.task-rail-foot {
  border-color: rgba(101, 120, 139, 0.16);
}

.task-filter button.active,
.task-item.active {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--glass-inset), 0 5px 14px rgba(45, 65, 84, 0.07);
}

.task-item:hover {
  background: rgba(255, 255, 255, 0.6);
}

.task-item.active::before {
  background: var(--blue);
  box-shadow: 0 0 12px rgba(39, 110, 241, 0.34);
}

.audit-workspace {
  background: rgba(255, 255, 255, 0.74);
}

.audit-context {
  border-bottom-color: rgba(101, 120, 139, 0.18);
  background: #ffffff;
  box-shadow: var(--glass-inset);
}

.path-summary {
  border-color: rgba(208, 157, 58, 0.38);
  background: rgba(255, 249, 234, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 4px 12px rgba(160, 111, 28, 0.06);
}

.photo-work-area {
  background: rgba(231, 237, 242, 0.66);
}

.photo-card {
  border-color: rgba(93, 114, 133, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 12px rgba(42, 61, 79, 0.06), var(--glass-inset);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.photo-card:hover {
  border-color: rgba(56, 93, 126, 0.46);
  box-shadow: 0 10px 22px rgba(42, 61, 79, 0.12), var(--glass-inset);
}

.photo-frame {
  border-bottom-color: rgba(93, 114, 133, 0.22);
}

.photo-index,
.photo-engine {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

.photo-actions {
  border-top-color: rgba(93, 114, 133, 0.18);
}

.photo-actions button {
  background: rgba(255, 255, 255, 0.9);
}

.photo-actions button:hover[data-status="approved"],
.photo-actions button.selected[data-status="approved"] {
  background: rgba(229, 247, 237, 0.92);
}

.photo-actions button:hover[data-status="rejected"],
.photo-actions button.selected[data-status="rejected"] {
  background: rgba(253, 237, 235, 0.94);
}

.photo-actions button:hover[data-status="suspect"],
.photo-actions button.selected[data-status="suspect"] {
  background: rgba(255, 246, 222, 0.94);
}

/* Inputs stay dense and opaque enough to keep labels and values readable. */
.input,
.select,
.textarea {
  border-color: rgba(87, 108, 128, 0.32);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 2px rgba(41, 57, 72, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: rgba(67, 95, 119, 0.48);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: rgba(39, 110, 241, 0.72);
  box-shadow: var(--focus);
}

.drop-zone {
  border-color: rgba(82, 112, 138, 0.42);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--glass-inset);
}

.drop-zone.dragover {
  border-color: rgba(39, 110, 241, 0.74);
  background: rgba(237, 244, 255, 0.88);
  box-shadow: var(--glass-inset), 0 10px 24px rgba(39, 110, 241, 0.1);
}

/* Drawers and modals are the strongest glass surfaces. */
.overlay,
.drawer-overlay {
  background: rgba(18, 27, 36, 0.38);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  backdrop-filter: blur(6px) saturate(110%);
}

.modal,
.drawer {
  border: 1px solid rgba(255, 255, 255, 0.64);
  background: rgba(247, 250, 252, 0.86);
  -webkit-backdrop-filter: blur(32px) saturate(145%);
  backdrop-filter: blur(32px) saturate(145%);
  box-shadow: 0 26px 70px rgba(15, 27, 39, 0.24), var(--glass-inset);
}

.modal-head,
.drawer-head,
.modal-foot {
  border-color: rgba(101, 120, 139, 0.18);
}

.modal-foot {
  background: rgba(231, 238, 244, 0.58);
}

.viewer-tools .icon-button,
.viewer-nav {
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.viewer-tools .icon-button:hover,
.viewer-nav:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.18);
}

.viewer-side {
  border-left-color: rgba(255, 255, 255, 0.14);
  background: #1b222a;
}

.toast {
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background: rgba(27, 35, 43, 0.86);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow: 0 16px 34px rgba(13, 23, 33, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sidebar-scrim {
  background: rgba(19, 27, 35, 0.42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #0b57d0;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #ffffff;
}

.photo-card:focus-within {
  outline: 3px solid #0b57d0;
  outline-offset: 2px;
}

/* Qingflow-inspired enterprise theme: visual-only refinement. */
:root {
  --ink: #2b3441;
  --ink-strong: #1f2937;
  --muted: #606266;
  --muted-2: #909399;
  --canvas: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #ebeef5;
  --line: #e4e7ed;
  --line-strong: #dcdfe6;
  --blue: #268bfb;
  --blue-soft: #ecf5ff;
  --green: #67c23a;
  --green-soft: #f0f9eb;
  --amber: #e6a23c;
  --amber-soft: #fdf6ec;
  --red: #f56c6c;
  --red-soft: #fef0f0;
  --cyan: #26a2a9;
  --cyan-soft: #eaf7f7;
  --violet: #7b61d1;
  --violet-soft: #f2effc;
  --sidebar: #ffffff;
  --sidebar-hover: #f2f7ff;
  --radius: 6px;
  --glass-border: rgba(255, 255, 255, 0.88);
  --glass-shadow: 0 10px 28px rgba(31, 54, 88, 0.08);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --focus: 0 0 0 3px rgba(64, 158, 255, 0.2);
}

html,
body {
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.brand-mark {
  position: relative;
  border-color: #d9e9fb;
  background: #f6faff;
}

.brand-mark img {
  opacity: 0;
}

.brand-mark::before {
  position: absolute;
  inset: 18%;
  background: #184bd7;
  content: "";
  -webkit-mask: url('/assets/brand/jianwei-logo.png') center / contain no-repeat;
  mask: url('/assets/brand/jianwei-logo.png') center / contain no-repeat;
}

body,
.loading-screen {
  background: #f5f7fa;
}

.auth-screen {
  position: relative;
  justify-items: end;
  overflow: hidden;
  padding-right: max(7vw, 72px);
  background: #f5f7fa;
}

.auth-screen::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 52, 106, 0.16), transparent 45%, rgba(245, 247, 250, 0.92) 72%);
  content: "";
  pointer-events: none;
}

.auth-panel {
  position: relative;
  z-index: 1;
  border-color: rgba(220, 223, 230, 0.92);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(31, 54, 88, 0.18), inset 0 1px 0 #ffffff;
}

.auth-brand {
  gap: 13px;
}

.auth-brand .brand-mark {
  border-color: #d9e8fb;
  background: #f6faff;
  box-shadow: 0 6px 16px rgba(38, 139, 251, 0.14), inset 0 1px 0 #ffffff;
}

.auth-brand strong {
  color: var(--ink-strong);
  font-size: 19px;
  font-weight: 720;
}

.auth-brand span {
  color: var(--muted);
  font-size: 11px;
}

.auth-heading {
  margin-top: 32px;
}

.auth-heading > span {
  color: #184bd7;
  font-size: 11px;
}

.auth-heading h1 {
  color: var(--ink-strong);
  font-size: 25px;
  font-weight: 730;
}

.auth-heading p,
.auth-safety {
  color: var(--muted);
}

.auth-input {
  border-color: var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(31, 54, 88, 0.035);
}

.auth-input:hover {
  border-color: #a9c9ec;
}

.auth-input:focus-within {
  border-color: #409eff;
  box-shadow: var(--focus);
}

.auth-submit,
.auth-guest {
  border-radius: 6px;
}

.sidebar {
  border-right-color: var(--line);
  background: #ffffff;
  box-shadow: 6px 0 24px rgba(31, 54, 88, 0.055);
  color: var(--ink);
}

.brand {
  border-bottom-color: var(--line);
  background: #ffffff;
}

.brand-copy strong {
  color: var(--ink-strong);
  font-weight: 700;
}

.brand-copy span {
  color: var(--muted-2);
}

.primary-nav a {
  border-radius: 6px;
  color: #596273;
  font-weight: 560;
}

.primary-nav a:hover {
  border-color: #d9e9fb;
  background: #f2f7ff;
  color: #184bd7;
  transform: none;
}

.primary-nav a.active {
  border-color: #c7e1ff;
  background: #ecf5ff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 3px 10px rgba(38, 139, 251, 0.1);
  color: #184bd7;
  font-weight: 700;
}

.primary-nav a.active::before {
  width: 3px;
  background: #268bfb;
  box-shadow: 0 0 9px rgba(38, 139, 251, 0.25);
}

.primary-nav a:nth-child(2):not(.active) svg { color: #e6a23c; }
.primary-nav a:nth-child(3):not(.active) svg { color: #26a2a9; }
.primary-nav a:nth-child(4):not(.active) svg { color: #7b61d1; }
.primary-nav a:nth-child(5):not(.active) svg { color: #67c23a; }
.primary-nav a:nth-child(6):not(.active) svg { color: #718096; }

.primary-nav a.active svg {
  color: #268bfb;
}

.sidebar-toggle {
  border-color: var(--line);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
}

.sidebar-toggle:hover {
  border-color: #c7e1ff;
  background: #ecf5ff;
  color: #184bd7;
}

.sidebar-footer {
  border-top-color: var(--line);
  color: var(--muted-2);
}

.nav-count {
  border-color: var(--line);
  background: #f4f6f8;
  color: var(--muted);
}

.nav-count.warning {
  border-color: #f3d19e;
  background: var(--amber-soft);
  color: #b7791f;
}

.topbar {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(31, 54, 88, 0.055), inset 0 1px #ffffff;
}

.topbar::before {
  display: none;
}

.topbar-context strong {
  color: var(--ink-strong);
  font-weight: 700;
  letter-spacing: 0;
}

.business-date,
.data-status,
.account-status {
  border-color: var(--line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: inset 0 1px #ffffff;
}

.data-status.ready,
.account-status.admin {
  border-color: #c2e7b0;
  background: #f0f9eb;
  color: #4c9d2f;
}

.data-status.awaiting,
.data-status.warning {
  border-color: #f3d19e;
  background: #fdf6ec;
  color: #b7791f;
}

.data-status.blocked {
  border-color: #fbc4c4;
  background: #fef0f0;
  color: #e64f4f;
}

.button,
.icon-button,
.action-icon,
.input,
.select,
.textarea,
.drop-zone {
  border-radius: 6px;
}

.button.primary {
  border-color: #268bfb;
  background: #268bfb;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.24), 0 4px 10px rgba(38, 139, 251, 0.2);
}

.button.primary:hover {
  border-color: #184bd7;
  background: #3a8ee6;
}

.button:not(.primary):not(.danger):not(.success):hover,
.icon-button:hover,
.action-icon:hover {
  border-color: #a9c9ec;
  background: #f5f9ff;
  color: #184bd7;
}

.input,
.select,
.textarea {
  border-color: var(--line-strong);
  background: #ffffff;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: #a9c9ec;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: #409eff;
  box-shadow: var(--focus);
}

.progress-track,
.progress-inline,
.archive-progress,
.dashboard-dimension-track,
.dashboard-distribution-row > div:last-child,
.dashboard-aging-row > div:last-child {
  background: #ebeef5;
}

.surface,
.metrics-strip,
.summary-band,
.audit-project-header {
  border-color: var(--line);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(31, 54, 88, 0.045), var(--glass-inset);
}

.page:not(.flush) > .page-head {
  position: relative;
  min-height: 88px;
  align-items: center;
  overflow: hidden;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 3px 12px rgba(31, 54, 88, 0.05);
}

.page:not(.flush) > .page-head::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #268bfb;
  content: "";
}

.page:not(.flush) > .page-head::after {
  position: absolute;
  top: 0;
  right: 0;
  width: min(34%, 420px);
  height: 100%;
  background-position: center;
  background-size: cover;
  content: "";
  opacity: 0.11;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 54%);
  mask-image: linear-gradient(90deg, transparent, #000 54%);
}

.page:has(.followup-table-wrap) > .page-head::before { background: #e6a23c; }
.page:has(.project-archive-list) > .page-head::before { background: #26a2a9; }
.page:has(.dashboard-command) > .page-head::before { background: #7b61d1; }
.page:has(.rule-library) > .page-head::before { background: #67c23a; }
.page:has(.engine-events-panel) > .page-head::before { background: #718096; }

.page:not(.flush) > .page-head > * {
  position: relative;
  z-index: 1;
}

.page-head h1,
.workspace-head h1 {
  color: var(--ink-strong);
  font-weight: 700;
  letter-spacing: 0;
}

.filter-bar {
  border-color: var(--line);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(31, 54, 88, 0.035);
}

.segmented {
  border-color: var(--line);
  border-radius: 6px;
  background: #f5f7fa;
  box-shadow: none;
}

.segmented button {
  border-radius: 4px;
}

.segmented button.active {
  border-color: #b8d9ff;
  background: #ffffff;
  color: #184bd7;
  box-shadow: 0 2px 7px rgba(38, 139, 251, 0.12), inset 0 0 0 1px #c7e1ff;
}

.badge.blue,
.status-badge.blue { border-color: #b8d9ff; background: #ecf5ff; color: #184bd7; }
.badge.green,
.status-badge.green { border-color: #c2e7b0; background: #f0f9eb; color: #4c9d2f; }
.badge.amber,
.status-badge.amber { border-color: #f3d19e; background: #fdf6ec; color: #b7791f; }
.badge.red,
.status-badge.red { border-color: #fbc4c4; background: #fef0f0; color: #e64f4f; }
.badge.cyan,
.status-badge.cyan { border-color: #bce3e5; background: #eaf7f7; color: #187f86; }
.badge.violet,
.status-badge.violet { border-color: #d9d0f4; background: #f2effc; color: #694db8; }

.section-head {
  border-bottom-color: var(--line);
  background: #fbfcfe;
}

.section-head h2,
.section-title {
  color: var(--ink-strong);
  font-weight: 680;
}

.data-table th,
.project-archive-columns {
  border-bottom-color: var(--line);
  background: #f5f7fa;
  color: #606b79;
  font-weight: 680;
}

.data-table td {
  border-bottom-color: #edf0f4;
}

.data-table tbody tr:hover,
.project-archive-row:hover {
  background: #f5f9ff;
}

.empty-state .empty-icon,
.archive-list-empty > svg,
.audit-rail-placeholder .empty-icon {
  border-color: #d9e9fb;
  background: #ecf5ff;
  color: #268bfb;
}

.audit-project-rail,
.task-rail {
  background: #f5f7fa;
}

.audit-project-search input,
.photo-filter-search,
.photo-filter-control,
.photo-filter-reset {
  border-color: var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: inset 0 1px #ffffff;
}

.audit-project-tab {
  border-color: var(--line);
  border-radius: 6px;
  background: #ffffff;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.audit-project-tab:hover {
  border-color: #b8d9ff;
  background: #f6faff;
}

.audit-project-tab.active {
  border-color: #8cc4ff;
  background: #ecf5ff;
  box-shadow: inset 4px 0 0 #268bfb, 0 3px 10px rgba(38, 139, 251, 0.13);
}

.audit-project-tab.readonly.active {
  border-color: #9ed8db;
  background: #eaf7f7;
  box-shadow: inset 4px 0 0 #26a2a9, 0 3px 10px rgba(38, 162, 169, 0.11);
}

.audit-project-tab > strong {
  color: #4e5968;
  font-weight: 660;
}

.audit-project-tab.active > strong {
  color: var(--ink-strong);
}

.audit-project-summary {
  border-top-color: var(--line);
  background: #ffffff;
}

.audit-project-summary > div:nth-child(1) {
  background: #f6faff;
}

.audit-project-summary > div:nth-child(2) {
  background: #f0f9eb;
}

.audit-project-summary > div:nth-child(3) {
  background: #f5f7fa;
}

.audit-project-summary > div:nth-child(4) {
  background: #fdf6ec;
}

.audit-project-summary > div {
  border-right-color: var(--line);
}

.audit-project-summary > div > span {
  color: #6d7a87;
  font-size: 10px;
  font-weight: 560;
}

.audit-progress-value,
.audit-count-summary strong,
.audit-material-metric > strong {
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.audit-rule-summary .project-rule-mini.named-rules > span {
  border-color: var(--line);
  border-radius: 6px;
  background-color: #fbfcfe;
}

.photo-list-toolbar {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 12px rgba(31, 54, 88, 0.055);
}

.photo-status-filter button,
.photo-status-filter button b {
  border-radius: 6px;
}

.photo-status-filter button.active {
  box-shadow: inset 0 0 0 1px currentColor, 0 2px 6px rgba(31, 54, 88, 0.09);
}

.photo-work-area {
  background: #f1f4f8;
}

.photo-card {
  border-color: var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(31, 54, 88, 0.075), var(--glass-inset);
}

.photo-card:hover {
  border-color: #8cc4ff;
  box-shadow: 0 8px 20px rgba(31, 75, 132, 0.13), var(--glass-inset);
}

.photo-card.is-current {
  border-color: #268bfb;
  background: #f6faff;
  box-shadow: 0 0 0 2px rgba(38, 139, 251, 0.24), 0 8px 22px rgba(38, 139, 251, 0.14);
}

.data-table th {
  background: #f5f7fa;
  color: #606b79;
  font-weight: 680;
}

.data-table tbody tr:hover {
  background: #f5f9ff;
}

.project-archive-row.is-current,
.project-archive-row.is-current:hover {
  background: #ecf5ff;
  box-shadow: inset 5px 0 0 #268bfb, inset 0 0 0 2px #8cc4ff, 0 5px 14px rgba(38, 139, 251, 0.12);
}

.project-archive-row.lifecycle-archived,
.project-archive-row.lifecycle-archived:hover,
.project-archive-row.lifecycle-archived.is-current,
.project-archive-row.lifecycle-archived.is-current:hover {
  box-shadow: inset 5px 0 0 #67c23a, inset 0 0 0 2px #8cc4ff, 0 5px 14px rgba(38, 139, 251, 0.11);
}

.project-rule-mini .complete,
.archive-rule-matrix .complete {
  border-color: #c2e7b0;
  background: #f0f9eb;
}

.project-rule-mini .partial,
.archive-rule-matrix .partial {
  border-color: #f3d19e;
  background: #fdf6ec;
}

.dashboard-command {
  border-color: #d9e9fb;
  background: linear-gradient(100deg, #ffffff, #f5f9ff);
  box-shadow: 0 4px 16px rgba(31, 54, 88, 0.065);
}

.dashboard-command::after {
  position: absolute;
  top: -26px;
  right: 310px;
  width: 180px;
  height: 180px;
  border: 28px solid rgba(38, 139, 251, 0.045);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.dashboard-command-icon,
.dashboard-health-icon,
.pipeline-icon,
.drop-symbol {
  border: 1px solid #d9e9fb;
  background: #ecf5ff;
  color: #268bfb;
}

.dashboard-dimension {
  position: relative;
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.dashboard-dimension:hover {
  border-color: #c7e1ff;
  box-shadow: 0 6px 18px rgba(31, 75, 132, 0.08);
}

.dashboard-dimension::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--blue);
  content: "";
}

.dashboard-dimension.green::before { background: var(--green); }
.dashboard-dimension.cyan::before { background: var(--cyan); }
.dashboard-dimension.amber::before { background: var(--amber); }
.dashboard-dimension.red::before { background: var(--red); }

.dashboard-risk-row:hover,
.dashboard-health-item:hover {
  background: #f6faff;
}

.dashboard-priority-badge {
  border: 1px solid transparent;
  border-radius: 4px;
}

.dashboard-priority-badge.critical { border-color: #fbc4c4; }
.dashboard-priority-badge.attention { border-color: #f3d19e; }
.dashboard-priority-badge.stable { border-color: #c2e7b0; }

.gantt-axis,
.gantt-project-row {
  background: #f8fafc;
}

.gantt-project-window {
  background: rgba(38, 139, 251, 0.11);
}

.gantt-bar.planned,
.gantt-swatch.plan {
  border-color: #9ab6d5;
  background: #f5f9ff;
}

.process-rule-row.enabled {
  box-shadow: inset 3px 0 0 #67c23a;
}

.process-rule-row.disabled {
  background: #fafbfc;
  box-shadow: inset 3px 0 0 #dcdfe6;
}

.process-rule-code strong,
.rule-code {
  color: #694db8;
}

.rule-governance-warning,
.rule-edit-danger,
.rule-config-notice.warning {
  border-color: #fbc4c4;
  border-left-color: #f56c6c;
  background: #fef0f0;
  color: #a93d3d;
}

.rule-project-scope {
  border-color: #d9e9fb;
  background: linear-gradient(90deg, #ffffff, #f6faff);
}

.drop-zone {
  border-color: #a9c9ec;
  background: #fbfdff;
}

.drop-zone:hover,
.drop-zone.dragover,
.drop-zone.uploading {
  border-color: #268bfb;
  background: #ecf5ff;
}

.import-issues-summary:hover,
.import-issue.resolved {
  background: #f8fafc;
}

.event-row::before {
  background: #26a2a9;
  box-shadow: 0 0 0 1px #9ed8db;
}

.modal,
.drawer {
  border-color: var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 28px 72px rgba(20, 42, 72, 0.24), inset 0 1px #ffffff;
}

.modal-head,
.drawer-head,
.modal-foot,
.drawer-foot {
  border-color: var(--line);
}

.modal-head,
.drawer-head {
  background: #fbfcfe;
}

.modal-foot,
.drawer-foot {
  background: #f5f7fa;
}

.toast {
  border-radius: 6px;
  background: rgba(43, 52, 65, 0.96);
}

#app,
.task-list,
.photo-work-area,
.drawer-body,
.viewer-side-body {
  overscroll-behavior: contain;
}

@media (max-width: 767px) {
  :root {
    --topbar-height: 56px;
  }

  .topbar {
    background: rgba(255, 255, 255, 0.96);
  }

  .page {
    padding: 18px 12px 38px;
  }

  .page:not(.flush) > .page-head {
    min-height: 76px;
    padding: 13px 14px 13px 17px;
  }

  .page:not(.flush) > .page-head::after {
    width: 42%;
    opacity: 0.07;
  }

  .auth-screen {
    justify-items: center;
    padding: 20px;
    background: #f5f7fa;
  }

  .auth-screen::before {
    display: none;
  }

  .auth-panel {
    display: flex;
    min-height: calc(100dvh - 40px);
    align-self: center;
    flex-direction: column;
    justify-content: center;
    padding: 24px 22px;
    background: rgba(255, 255, 255, 0.96);
  }

  .auth-heading {
    margin-top: 30px;
  }

  .audit-mobile-switch {
    border-bottom-color: var(--line);
    background: #f5f7fa;
  }

  .photo-work-area {
    background: #f1f4f8;
  }

  .photo-card {
    box-shadow: 0 3px 10px rgba(42, 61, 79, 0.08), var(--glass-inset);
  }

  .drawer {
    border-right: 0;
    border-left: 1px solid var(--line);
  }

  .input,
  .select,
  .textarea {
    font-size: 16px;
  }

  .topbar {
    padding-top: env(safe-area-inset-top);
  }

  .toast-region {
    top: calc(var(--topbar-height) + env(safe-area-inset-top) + 9px);
    right: max(9px, env(safe-area-inset-right));
    bottom: auto;
    left: max(9px, env(safe-area-inset-left));
    width: auto;
  }
}

@media (pointer: coarse) {
  .button.small,
  .button.compact,
  .photo-actions button,
  .viewer-tools .icon-button,
  .viewer-nav {
    min-width: 44px;
    min-height: 44px;
  }

  .primary-nav a,
  .task-filter button,
  .segmented button,
  .tabs button,
  .check-option,
  .import-mode label,
  .toast button,
  .breadcrumb button {
    min-height: 44px;
  }

  .segmented {
    min-height: 48px;
    align-items: center;
  }

  .segmented button {
    min-height: 40px;
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  body,
  .loading-screen {
    background: var(--canvas);
  }

  .sidebar,
  .topbar,
  .task-rail,
  .audit-context,
  .surface,
  .metrics-strip,
  .summary-band,
  .drop-zone,
  .modal,
  .drawer,
  .toast,
  .audit-mobile-switch {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .sidebar {
    background: #ffffff;
  }

  .topbar,
  .surface,
  .metrics-strip,
  .summary-band,
  .modal,
  .drawer,
  .drop-zone,
  .audit-mobile-switch {
    background: #ffffff;
  }

  .overlay,
  .drawer-overlay,
  .sidebar-scrim {
    background: rgba(18, 27, 36, 0.84);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Hybrid ERP theme: dark navigation and media viewers, light operational content. */
:root {
  color-scheme: light;
  --ink: #2c394b;
  --ink-strong: #172235;
  --muted: #68778b;
  --muted-2: #8a97a8;
  --canvas: #edf1f5;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #e8edf3;
  --line: #d6dee8;
  --line-strong: #c1ccd9;
  --blue: #1677e8;
  --blue-soft: #e7f1ff;
  --green: #23845a;
  --green-soft: #e8f5ee;
  --amber: #a86c13;
  --amber-soft: #fff3dc;
  --red: #c74a46;
  --red-soft: #fdebea;
  --cyan: #168b98;
  --cyan-soft: #e5f4f5;
  --violet: #765cc4;
  --violet-soft: #f0ecfb;
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 12px 30px rgba(31, 50, 74, 0.1);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --focus: 0 0 0 3px rgba(22, 119, 232, 0.2);
}

html,
body,
.loading-screen,
.workspace,
#app,
.page,
.audit-page,
.audit-project-page,
.photo-work-area {
  background: var(--canvas);
  color: var(--ink);
}

* {
  scrollbar-color: #aeb9c7 #edf1f5;
}

*::-webkit-scrollbar-track { background: #edf1f5; }
*::-webkit-scrollbar-thumb {
  border-color: #edf1f5;
  background: #aeb9c7;
}

.surface,
.metrics-strip,
.summary-band,
.audit-project-header,
.filter-bar,
.followup-table-wrap,
.project-archive-list,
.dashboard-command,
.dashboard-dimension,
.dashboard-risk-panel,
.dashboard-health-panel,
.dashboard-chart-panel,
.dashboard-photographer-panel,
.dashboard-aging-panel,
.gantt-panel,
.rule-library,
.rule-project-scope,
.engine-events-panel,
.import-management,
.import-history,
.user-management,
.empty-state {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 3px 11px rgba(31, 50, 74, 0.07), var(--glass-inset);
  color: var(--ink);
}

.page:not(.flush) > .page-head,
.page:has(.dashboard-command) > .page-head,
.page:has(.project-archive-list) > .page-head,
.page:has(.rule-library) > .page-head {
  border-color: #33465c;
  background: linear-gradient(105deg, #172538 0%, #1c334b 62%, #183b4c 100%);
  box-shadow: 0 8px 20px rgba(24, 43, 66, 0.17), inset 0 1px rgba(255, 255, 255, 0.08);
  color: #e9f0f8;
}

.page:not(.flush) > .page-head h1,
.page:not(.flush) > .page-head p {
  color: #f5f8fc;
}

.page:not(.flush) > .page-head p {
  color: #aebdce;
}

.section-head,
.panel-head,
.table-head {
  border-color: var(--line);
  background: #f7f9fc;
  color: var(--ink);
}

.page-head h1,
.workspace-head h1,
.section-head h2,
.surface h2,
.surface h3 {
  color: var(--ink-strong);
}

.page-head p,
.workspace-head p,
.section-head p,
.surface p,
.cell-sub,
.muted {
  color: var(--muted);
}

.button,
.icon-button,
.action-icon {
  border-color: #c4cfdb;
  background: #ffffff;
  color: #425168;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.85);
}

.button:hover,
.icon-button:hover,
.action-icon:hover {
  border-color: #79ace7;
  background: #f1f7ff;
  color: #0f62bd;
}

.button.primary {
  border-color: #126bd0;
  background: #1677e8;
  color: #ffffff;
}

.button.primary:hover {
  border-color: #0e5db7;
  background: #0f69cf;
}

.button.success {
  border-color: #72b28f;
  background: #e8f5ee;
  color: #1d704b;
}

.button.danger {
  border-color: #df8f8b;
  background: #fdebea;
  color: #a93632;
}

.input,
.select,
.textarea,
.photo-filter-search,
.photo-filter-control,
.photo-filter-reset,
.audit-project-search input {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(31, 50, 74, 0.045);
}

.input:hover,
.select:hover,
.textarea:hover,
.photo-filter-search:hover,
.photo-filter-control:hover,
.audit-project-search input:hover {
  border-color: #91acd0;
}

input::placeholder,
textarea::placeholder {
  color: #95a1b1;
}

.segmented {
  border-color: #cbd5e1;
  background: #e7ecf2;
}

.segmented button { color: #59687b; }
.segmented button:hover { color: #193e68; }
.segmented button.active {
  border-color: #7eafe7;
  background: #ffffff;
  color: #0e5cae;
  box-shadow: 0 3px 9px rgba(22, 119, 232, 0.13), inset 0 0 0 1px rgba(22, 119, 232, 0.09);
}

.badge,
.status-badge {
  border-color: #cbd5e0;
  background: #f3f6f9;
  color: #59687b;
}

.badge.blue,
.status-badge.blue { border-color: #9bc3ee; background: #e7f1ff; color: #0d5eb8; }
.badge.green,
.status-badge.green { border-color: #91c9aa; background: #e8f5ee; color: #1d704b; }
.badge.amber,
.status-badge.amber { border-color: #e2bd7d; background: #fff3dc; color: #87520a; }
.badge.red,
.status-badge.red { border-color: #e5a09d; background: #fdebea; color: #a93632; }
.badge.cyan,
.status-badge.cyan { border-color: #8bc8cd; background: #e5f4f5; color: #0c6f79; }
.badge.violet,
.status-badge.violet { border-color: #b7a8e1; background: #f0ecfb; color: #5a43a2; }

.progress-track,
.progress-inline,
.archive-progress,
.dashboard-dimension-track,
.dashboard-distribution-row > div:last-child,
.dashboard-aging-row > div:last-child,
.audit-live-progress-track {
  background: #e4e9ef;
}

.filter-bar,
.photo-list-toolbar {
  border-color: #ccd6e1;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 16px rgba(31, 50, 74, 0.09);
}

.photo-status-filter button {
  border-color: #c6d0dc;
  background: #f7f9fb;
  color: #526176;
}

.photo-status-filter button.active {
  border-color: #73a9e5;
  background: #e5f1ff;
  color: #0d5eb8;
}

.photo-status-filter button[data-photo-filter-value="approved"].active {
  border-color: #78bb97;
  background: #e5f4eb;
  color: #1d704b;
}

.photo-status-filter button[data-photo-filter-value="rejected"].active {
  border-color: #df8a86;
  background: #fde6e5;
  color: #a93632;
}

.photo-status-filter button[data-photo-filter-value="suspect"].active {
  border-color: #d7a956;
  background: #ffefcf;
  color: #84520b;
}

.audit-project-rail,
.audit-project-panel,
.audit-project-workspace,
.audit-context {
  border-color: var(--line);
  background: #ffffff;
}

.audit-project-search {
  border-bottom-color: var(--line);
  background: #f7f9fb;
}

.audit-project-tab {
  border-color: #d3dbe5;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(31, 50, 74, 0.045);
}

.audit-project-tab:hover {
  border-color: #91b9e4;
  background: #f2f7fd;
}

.audit-project-tab.active {
  border-color: #75a9df;
  background: #e7f2ff;
  box-shadow: inset 5px 0 0 #1677e8, inset 0 0 0 1px rgba(22, 119, 232, 0.09), 0 5px 14px rgba(31, 75, 124, 0.13);
}

.audit-project-tab.readonly.active {
  border-color: #78bbc2;
  background: #e5f4f5;
  box-shadow: inset 5px 0 0 #168b98, inset 0 0 0 1px rgba(22, 139, 152, 0.08), 0 5px 14px rgba(31, 75, 124, 0.12);
}

.audit-project-tab > strong { color: #354359; }
.audit-project-tab.active > strong { color: #17395e; }
.audit-project-summary { border-top-color: #d3dbe5; }
.audit-project-summary > div:nth-child(1) { background: #e8f2ff; }
.audit-project-summary > div:nth-child(2) { background: #e8f5ee; }
.audit-project-summary > div:nth-child(3) { background: #eff3f7; }
.audit-project-summary > div:nth-child(4) { background: #fff3dc; }
.audit-project-summary > div > span { color: #647287; }

.audit-rule-summary .project-rule-mini.named-rules > span,
.project-rule-mini.named-rules > span,
.project-rule-row,
.project-rule-config-row,
.audit-material-item,
.issue-record,
.problem-reply-history > li {
  border-color: var(--line);
  background: #f8fafc;
  color: var(--ink);
}

.rule-governance-warning,
.rule-edit-danger,
.rule-config-notice.warning,
.import-resolution-warning {
  border-color: #e39b98;
  background: #fdebea;
  color: #9f3531;
}

.photo-card {
  border-color: #c7d1dd;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(31, 50, 74, 0.1), inset 0 1px #ffffff;
}

.photo-card:hover {
  border-color: #5b9ee5;
  box-shadow: 0 10px 24px rgba(31, 75, 124, 0.16), 0 0 0 1px rgba(22, 119, 232, 0.08);
}

.photo-card.is-current {
  border-color: #1677e8;
  background: #eaf3ff;
  box-shadow: 0 0 0 3px rgba(22, 119, 232, 0.23), 0 10px 24px rgba(31, 75, 124, 0.18);
}

.photo-meta,
.audit-photo-meta {
  border-top-color: #d3dbe5;
  background: #ffffff;
  color: var(--ink);
}

.photo-actions {
  border-top-color: #d3dbe5;
  background: #f8fafc;
}

.project-archive-columns {
  border-color: var(--line);
  background: #f4f7fa;
  color: #69788b;
}

.project-archive-row {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
}

.project-archive-row:hover { background: #f4f8fc; }
.project-archive-row.is-current,
.project-archive-row.is-current:hover {
  background: #e7f2ff;
  box-shadow: inset 6px 0 0 #1677e8, inset 0 0 0 1px #79abe1, 0 6px 16px rgba(31, 75, 124, 0.13);
}

.project-archive-row.lifecycle-archived,
.project-archive-row.lifecycle-archived:hover,
.project-archive-row.lifecycle-archived.is-current,
.project-archive-row.lifecycle-archived.is-current:hover {
  background: #e9f5ee;
}

.data-table,
.followup-table {
  background: #ffffff;
  color: var(--ink);
}

.data-table th,
.followup-table th {
  border-color: var(--line);
  background: #f4f7fa;
  color: #68778a;
}

.data-table td,
.followup-table td {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
}

.data-table tbody tr:hover td,
.followup-table tbody tr:hover td {
  background: #f4f8fc;
}

.dashboard-command {
  border-color: #b8c9dc;
  background: linear-gradient(115deg, #f8fbff, #eef5fc 72%, #edf8f7);
}

.dashboard-command-stats > div,
.dashboard-health-item,
.dashboard-risk-row,
.dashboard-distribution-row,
.dashboard-aging-row {
  border-color: var(--line);
  background: #ffffff;
}

.dashboard-dimension:hover,
.dashboard-risk-row:hover,
.dashboard-health-item:hover {
  background: #f4f8fc;
}

.dashboard-command-icon,
.dashboard-health-icon {
  border-color: #9bc1ea;
  background: #e8f2ff;
  color: #176fcf;
}

.dashboard-footnote,
.dashboard-list-foot,
.dashboard-health-note {
  border-color: var(--line);
  background: #f7f9fb;
  color: #718095;
}

.gantt-board,
.gantt-scroll,
.gantt-grid,
.gantt-track,
.gantt-axis-track {
  border-color: var(--line);
  background-color: #ffffff;
}

.gantt-project-row,
.gantt-path-row { border-color: #dfe5ec; }

.rule-row,
.rule-profile-summary,
.rule-backup-summary,
.rule-admin-auth,
.import-issues-summary,
.import-issue,
.import-issue.resolved,
.import-issue-source,
.pipeline-step,
.drop-zone,
.account-session-state {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
}

.rule-row:hover,
.import-issues-summary:hover,
.pipeline-step:hover { background: #f4f8fc; }
.rule-code { color: #684fc0; }

.import-issue-explanation {
  border-color: #e6b2af;
  background: #fff5f4;
  color: #9f4a46;
}

.modal,
.drawer {
  border-color: #bfcbd8;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(18, 34, 53, 0.28), inset 0 1px #ffffff;
  color: var(--ink);
}

.modal-head,
.drawer-head,
.modal-foot,
.drawer-foot {
  border-color: var(--line);
  background: #f7f9fb;
}

.modal-body,
.drawer-body { background: #ffffff; }

/* Media inspection remains intentionally dark. */
.photo-detail-workspace,
.photo-detail-drawer,
.photo-detail-body,
.photo-detail-info,
.photo-evidence-panel,
.photo-evidence-panel-body,
.viewer-overlay,
.viewer-main,
.viewer-review-actions,
.photo-filmstrip {
  color-scheme: dark;
}

.photo-detail-workspace .drawer-head,
.photo-detail-workspace .drawer-body,
.photo-detail-workspace .drawer-foot,
.photo-detail-drawer,
.photo-detail-body,
.photo-detail-info {
  border-color: #334357;
  background: #18222e;
  color: #dce5ef;
}

.auth-screen {
  justify-items: end;
  padding-right: max(7vw, 72px);
  background:
    linear-gradient(90deg, rgba(8, 23, 36, 0.04) 0%, rgba(8, 23, 36, 0.06) 48%, rgba(8, 15, 23, 0.76) 73%, #090d13 100%),
    url('/assets/concepts/jianwei-erp-ecosystem-v1.png') center / cover no-repeat;
}

.audit-unavailable-page .audit-workspace {
  background: #ffffff;
}

@media (max-width: 767px) {
  .auth-screen {
    padding: 20px;
    background:
      linear-gradient(180deg, rgba(10, 30, 46, 0.68), rgba(8, 14, 22, 0.94)),
      url('/assets/concepts/jianwei-erp-ecosystem-v1.png') 34% center / cover no-repeat;
  }

  .audit-mobile-switch {
    border-bottom-color: var(--line);
    background: #ffffff;
  }
}

@supports not ((backdrop-filter: blur(1px))) {
  .sidebar {
    background: #ffffff;
  }

  .topbar,
  .surface,
  .metrics-strip,
  .summary-band,
  .modal,
  .drawer,
  .drop-zone {
    background: #ffffff;
  }
}

@media (forced-colors: active) {
  button:focus-visible,
  a:focus-visible,
  select:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  .photo-card:focus-within {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* Contrast pass: preserve the Qingflow-style density while restoring hierarchy. */
:root {
  --ink: #243044;
  --ink-strong: #111c2f;
  --muted: #536174;
  --muted-2: #768397;
  --canvas: #edf2f7;
  --surface-2: #f5f8fc;
  --surface-3: #e6ecf4;
  --line: #d4dce8;
  --line-strong: #bcc8d8;
  --blue: #1677e8;
  --blue-soft: #e8f2ff;
  --green: #2f9f63;
  --green-soft: #e9f7ef;
  --amber: #d88914;
  --amber-soft: #fff4df;
  --red: #df4d48;
  --red-soft: #ffeded;
  --cyan: #168b98;
  --cyan-soft: #e6f6f8;
  --violet: #6c55c7;
  --violet-soft: #efecfb;
  --focus: 0 0 0 3px rgba(22, 119, 232, 0.22);
}

body,
.loading-screen,
.photo-work-area,
.audit-project-rail,
.task-rail {
  background-color: var(--canvas);
}

.sidebar {
  border-right-color: #cbd5e2;
  box-shadow: 8px 0 28px rgba(27, 47, 76, 0.09);
}

.brand {
  border-bottom-color: #d2dae6;
}

.brand-mark {
  border-color: #bfd3cc;
  background: #f5faf8;
  box-shadow: 0 4px 12px rgba(18, 92, 72, 0.12);
}

.brand-mark img {
  position: relative;
  z-index: 1;
  opacity: 1;
}

.brand-mark::before {
  display: none;
}

.brand-copy strong {
  color: #101c30;
}

.brand-copy span,
.sidebar-footer {
  color: #68778b;
}

.primary-nav a {
  color: #435269;
}

.primary-nav a:hover {
  border-color: #b9d5f5;
  background: #edf5ff;
  color: #0c5ebd;
}

.primary-nav a.active {
  border-color: #9fc8f7;
  background: #e2efff;
  box-shadow: inset 4px 0 0 #1677e8, inset 0 0 0 1px rgba(22, 119, 232, 0.08), 0 4px 12px rgba(22, 119, 232, 0.13);
  color: #084f9f;
}

.primary-nav a.active::before {
  display: none;
}

.nav-count {
  border-color: #c7d1df;
  background: #e9eef5;
  color: #3d4b5f;
}

.nav-count.warning {
  border-color: #e9b95f;
  background: #ffedc9;
  color: #8a5100;
}

.topbar {
  border-bottom-color: #cbd5e2;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 5px 18px rgba(28, 48, 75, 0.08);
}

.business-date,
.data-status,
.account-status {
  border-color: #c7d1df;
  background: #f8fafc;
  color: #415066;
}

.data-status.ready,
.account-status.admin {
  border-color: #72c496;
  background: #e6f6ed;
  color: #176a3e;
}

.data-status.awaiting,
.data-status.warning {
  border-color: #e8b45c;
  background: #fff0d2;
  color: #855000;
}

.data-status.blocked {
  border-color: #ee9996;
  background: #ffe9e8;
  color: #a92c28;
}

.button.primary {
  border-color: #0f67cf;
  background: #1677e8;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.22), 0 5px 13px rgba(22, 119, 232, 0.27);
}

.button.primary:hover {
  border-color: #0958b4;
  background: #0d68d2;
}

.surface,
.metrics-strip,
.summary-band,
.audit-project-header,
.filter-bar {
  border-color: #ccd6e3;
  box-shadow: 0 3px 10px rgba(26, 47, 77, 0.075), inset 0 1px #ffffff;
}

/* Use a quiet brand watermark until the matching concept-image set is generated. */
.page:not(.flush) > .page-head {
  border-color: #c9d4e2;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(26, 47, 77, 0.08);
}

.page:not(.flush) > .page-head::before {
  width: 5px;
  background: #1677e8;
}

.page:not(.flush) > .page-head::after,
.page:has(.followup-table-wrap) > .page-head::after,
.page:has(.project-archive-list) > .page-head::after,
.page:has(.dashboard-command) > .page-head::after,
.page:has(.rule-library) > .page-head::after,
.page:has(.engine-events-panel) > .page-head::after {
  right: 18px;
  width: 86px;
  background: #1677e8;
  opacity: 0.085;
  -webkit-mask: url('/assets/brand/jianwei-logo.png') center / 58px 58px no-repeat;
  mask: url('/assets/brand/jianwei-logo.png') center / 58px 58px no-repeat;
}

.page:has(.followup-table-wrap) > .page-head::before { background: #d88914; }
.page:has(.project-archive-list) > .page-head::before { background: #168b98; }
.page:has(.dashboard-command) > .page-head::before { background: #6c55c7; }
.page:has(.rule-library) > .page-head::before { background: #2f9f63; }
.page:has(.engine-events-panel) > .page-head::before { background: #66758a; }

.segmented {
  border-color: #cbd5e2;
  background: #e9eef5;
}

.segmented button {
  color: #4b5a6e;
}

.segmented button.active {
  border-color: #8ebcf1;
  background: #ffffff;
  color: #0756ae;
  box-shadow: 0 2px 8px rgba(22, 119, 232, 0.17), inset 0 0 0 1px #9fc8f7;
}

.badge.blue,
.status-badge.blue { border-color: #8ebcf1; background: #e2efff; color: #0756ae; }
.badge.green,
.status-badge.green { border-color: #85cba4; background: #e4f5eb; color: #176a3e; }
.badge.amber,
.status-badge.amber { border-color: #e7b45c; background: #ffefcf; color: #855000; }
.badge.red,
.status-badge.red { border-color: #eb918e; background: #ffe7e6; color: #a82d29; }
.badge.cyan,
.status-badge.cyan { border-color: #7bc1c8; background: #e0f3f5; color: #096b75; }
.badge.violet,
.status-badge.violet { border-color: #ab9cdd; background: #ece8fa; color: #5038a7; }

.audit-project-tab {
  border-color: #ccd6e3;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(26, 47, 77, 0.04);
}

.audit-project-tab:hover {
  border-color: #91bdef;
  background: #eef6ff;
}

.audit-project-tab.active {
  border-color: #69a6eb;
  background: #e3f0ff;
  box-shadow: inset 5px 0 0 #1677e8, inset 0 0 0 1px rgba(22, 119, 232, 0.12), 0 5px 14px rgba(22, 119, 232, 0.18);
}

.audit-project-tab.readonly.active {
  border-color: #6eb9c2;
  background: #def2f4;
  box-shadow: inset 5px 0 0 #168b98, inset 0 0 0 1px rgba(22, 139, 152, 0.12), 0 5px 14px rgba(22, 139, 152, 0.16);
}

.audit-project-tab > strong {
  color: #334258;
}

.audit-project-tab.active > strong {
  color: #0e315c;
}

.audit-project-summary {
  border-top-color: #cbd5e2;
}

.audit-project-summary > div:nth-child(1) { background: #eaf3ff; }
.audit-project-summary > div:nth-child(2) { background: #e8f6ee; }
.audit-project-summary > div:nth-child(3) { background: #edf1f6; }
.audit-project-summary > div:nth-child(4) { background: #fff0d3; }

.audit-project-summary > div > span {
  color: #536174;
  font-weight: 640;
}

.photo-list-toolbar {
  border-bottom-color: #c5d0de;
  background: rgba(255, 255, 255, 0.985);
  box-shadow: 0 5px 14px rgba(26, 47, 77, 0.09);
}

.photo-status-filter button {
  border-color: #c4cfdd;
  background: #f5f8fc;
  color: #435269;
}

.photo-status-filter button.active {
  border-color: #72a9e7;
  background: #dfeeff;
  color: #0756ae;
  box-shadow: inset 0 0 0 1px #72a9e7, 0 3px 9px rgba(22, 119, 232, 0.16);
}

.photo-status-filter button[data-photo-filter-value="approved"].active {
  border-color: #69ba8c;
  background: #ddf3e7;
  color: #176a3e;
}

.photo-status-filter button[data-photo-filter-value="rejected"].active {
  border-color: #e47b77;
  background: #ffe1df;
  color: #a82d29;
}

.photo-status-filter button[data-photo-filter-value="suspect"].active {
  border-color: #dea448;
  background: #ffebc4;
  color: #7b4900;
}

.photo-filter-search,
.photo-filter-control,
.photo-filter-reset,
.audit-project-search input {
  border-color: #bcc8d8;
  background: #ffffff;
  color: #415066;
}

.photo-filter-search:focus-within,
.photo-filter-control:focus-within,
.audit-project-search input:focus {
  border-color: #4b98ed;
  box-shadow: var(--focus);
}

.photo-card {
  border-color: #bdc9d8;
  box-shadow: 0 4px 12px rgba(26, 47, 77, 0.11), inset 0 1px #ffffff;
}

.photo-card:hover {
  border-color: #559ce9;
  box-shadow: 0 10px 24px rgba(23, 77, 140, 0.18), inset 0 1px #ffffff;
  transform: translateY(-1px);
}

.photo-card.is-current {
  border-color: #0868d5;
  background: #e9f3ff;
  box-shadow: 0 0 0 3px rgba(22, 119, 232, 0.3), 0 10px 26px rgba(22, 119, 232, 0.2);
}

.project-archive-row.is-current,
.project-archive-row.is-current:hover {
  background: #e1efff;
  box-shadow: inset 6px 0 0 #1677e8, inset 0 0 0 2px #72a9e7, 0 6px 16px rgba(22, 119, 232, 0.16);
}

.auth-screen {
  background: linear-gradient(120deg, #dcecff 0%, #eef5fd 48%, #f7f9fc 48%, #f7f9fc 100%);
}

.auth-screen::before {
  background: linear-gradient(130deg, rgba(22, 119, 232, 0.2), rgba(22, 119, 232, 0.03) 54%, transparent 54%);
}

.auth-screen::after {
  display: none;
}

.auth-panel {
  border-color: #bfcbd9;
  box-shadow: 0 28px 72px rgba(22, 52, 88, 0.22), inset 0 1px #ffffff;
}

/* Photo detail: clearer image, evidence, controls and decision hierarchy. */
.photo-detail-overlay {
  padding: 36px;
  background: rgba(8, 15, 25, 0.58);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  backdrop-filter: blur(10px) saturate(112%);
}

.photo-detail-workspace {
  width: min(1060px, calc(100vw - 72px));
  height: min(820px, calc(100dvh - 56px));
  border-color: rgba(151, 175, 205, 0.46);
  background: #111923;
  box-shadow: 0 36px 100px rgba(4, 12, 24, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.photo-detail-drawer {
  background: #121a24;
}

.photo-detail-head {
  min-height: 64px;
  border-bottom-color: #334357;
  background: #1b2633;
}

.photo-detail-head h2 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 720;
}

.photo-detail-head span,
.photo-position,
.viewer-counter {
  color: #b7c5d5;
}

.photo-position b {
  border-color: #71839a;
  background: #263547;
  color: #ffffff;
}

.photo-detail-tools .icon-button,
.photo-detail-image-tools .icon-button,
.viewer-tools .icon-button,
.viewer-nav {
  border-color: #53657b;
  background: #263445;
  color: #f7fbff;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.22);
}

.photo-detail-tools .icon-button:hover,
.photo-detail-image-tools .icon-button:hover,
.photo-detail-image-tools .icon-button.active,
.viewer-tools .icon-button:hover,
.viewer-nav:hover,
.viewer-tools .icon-button.active {
  border-color: #75b2f5;
  background: #155da9;
  color: #ffffff;
}

.photo-detail-image {
  border-bottom-color: #334357;
  background: #080d13;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.42);
}

.photo-detail-image-tools {
  top: 12px;
  right: 12px;
  padding: 6px;
  border-color: rgba(151, 175, 205, 0.42);
  background: rgba(20, 31, 44, 0.9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.photo-detail-info {
  border-top: 1px solid rgba(255, 255, 255, 0.025);
  background: #18222e;
}

.photo-detail-byline {
  color: #dbe4ee;
}

.photo-detail-byline i,
.photo-detail-copy i {
  color: #708197;
}

.photo-detail-copy strong {
  color: #ffffff;
}

.photo-detail-copy span {
  color: #adbac9;
}

.photo-detail-workspace > .photo-evidence-panel,
.photo-detail-workspace > .viewer-reject-panel {
  width: min(300px, 29vw);
  flex-basis: min(300px, 29vw);
}

.photo-evidence-panel {
  border-left-color: #3a4b60;
  background: #1d2835;
}

.photo-evidence-panel-head {
  min-height: 64px;
  border-bottom-color: #3a4b60;
  background: #233142;
}

.photo-evidence-panel-head strong {
  color: #ffffff;
  font-size: 15px;
}

.photo-evidence-panel-head small {
  color: #aebdce;
}

.photo-evidence-panel-icon {
  border: 1px solid #4785c7;
  border-radius: 7px;
  background: #173f68;
  color: #8bc3ff;
}

.photo-evidence-panel-body {
  padding: 14px;
  background: #1a2531;
}

.photo-rule-readiness {
  border-top-color: #405267;
}

.photo-rule-readiness details,
.photo-rule-readiness-group,
.photo-rule-mapping-editor {
  border-color: #485b72;
  background: #222f3e;
}

.photo-rule-readiness summary,
.photo-rule-readiness-group > header {
  color: #f4f8fc;
}

.photo-rule-readiness li strong {
  color: #e5edf6;
}

.photo-filmstrip {
  padding: 10px 12px;
  border-top-color: #35465a;
  background: #0c121a;
}

.photo-filmstrip-track {
  gap: 9px;
}

.photo-filmstrip-item {
  width: 82px;
  height: 60px;
  border-color: #506177;
  background: #1d2937;
}

.photo-filmstrip-item:hover {
  border-color: #81b9f5;
}

.photo-filmstrip-item.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px #1677e8, 0 9px 22px rgba(0, 82, 180, 0.5);
}

.photo-filmstrip-item img {
  opacity: 0.74;
}

.photo-filmstrip-status {
  width: 10px;
  height: 10px;
  border-width: 2px;
}

.photo-detail-drawer .viewer-review-actions,
.viewer-review-actions {
  border-top-color: #3a4a5e;
  background: #1b2633;
}

.viewer-review-actions > div {
  gap: 8px;
}

.viewer-review-actions button {
  min-height: 50px;
  border-color: #53657b;
  background: #263445;
  color: #ffffff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045);
}

.viewer-review-actions button[data-viewer-review="approved"] {
  border-color: #478c67;
  background: #1d4b35;
}

.viewer-review-actions button[data-viewer-review="rejected"] {
  border-color: #a85854;
  background: #542c2c;
}

.viewer-review-actions button[data-viewer-review="suspect"] {
  border-color: #a97932;
  background: #4e3a1f;
}

.viewer-review-actions button:hover[data-viewer-review="approved"] {
  border-color: #70d39a;
  background: #256545;
}

.viewer-review-actions button:hover[data-viewer-review="rejected"] {
  border-color: #f08079;
  background: #753834;
}

.viewer-review-actions button:hover[data-viewer-review="suspect"] {
  border-color: #f0ba61;
  background: #684a21;
}

.viewer-review-actions kbd {
  border-color: #73849a;
  background: rgba(8, 14, 22, 0.68);
  color: #ffffff;
}

.viewer-overlay {
  background: #080e16;
}

.viewer-topbar {
  padding: 8px;
  border: 1px solid rgba(132, 157, 187, 0.3);
  border-radius: 8px;
  background: rgba(20, 31, 44, 0.76);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

@media (max-width: 767px) {
  .auth-screen {
    background: #e9f2fc;
  }

  .auth-screen::after {
    display: none;
  }

  .photo-detail-overlay {
    padding: 0;
    background: #0b1119;
  }

  .photo-detail-workspace {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .photo-detail-head {
    min-height: 58px;
  }

  .photo-detail-workspace > .photo-evidence-panel,
  .photo-detail-workspace > .viewer-reject-panel {
    width: 100%;
    flex-basis: auto;
  }

  .photo-filmstrip-item {
    width: 70px;
    height: 52px;
  }
}

/* Project imagery: soften uncertain equipment details and keep data surfaces primary. */
.auth-screen {
  background:
    linear-gradient(90deg, rgba(9, 25, 43, 0.18) 0%, rgba(15, 43, 69, 0.04) 44%, rgba(242, 247, 252, 0.86) 68%, rgba(248, 250, 253, 0.98) 100%),
    url('/assets/concepts/jianwei-login-yiview-derived-v2.jpg') center / cover no-repeat;
}

.auth-screen::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(10, 35, 57, 0.16));
}

.auth-panel {
  border-color: rgba(210, 222, 234, 0.86);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 28px 72px rgba(12, 34, 57, 0.24), inset 0 1px #ffffff;
  -webkit-backdrop-filter: blur(24px) saturate(118%);
  backdrop-filter: blur(24px) saturate(118%);
}

.page:has(.dashboard-command) > .page-head,
.page:has(.project-archive-list) > .page-head,
.page:has(.rule-library) > .page-head {
  position: relative;
  isolation: isolate;
  min-height: 104px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.page:has(.dashboard-command) > .page-head,
.page:has(.project-archive-list) > .page-head {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 42%, rgba(245, 249, 252, 0.77) 65%, rgba(235, 243, 249, 0.58) 100%),
    url('/assets/concepts/jianwei-platform-yiview-derived-v2.jpg');
}

.page:has(.rule-library) > .page-head {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 48%, rgba(244, 249, 251, 0.82) 69%, rgba(232, 244, 246, 0.62) 100%),
    url('/assets/concepts/jianwei-rules-yiview-derived-v2.jpg');
}

.page:has(.dashboard-command) > .page-head > *,
.page:has(.project-archive-list) > .page-head > *,
.page:has(.rule-library) > .page-head > * {
  position: relative;
  z-index: 1;
}

.audit-unavailable-page .audit-workspace {
  background:
    linear-gradient(90deg, rgba(248, 251, 253, 0.96) 0%, rgba(248, 251, 253, 0.91) 48%, rgba(241, 247, 250, 0.76) 72%, rgba(239, 246, 249, 0.86) 100%),
    url('/assets/concepts/jianwei-evidence-yiview-derived-v2.jpg') center / cover no-repeat;
}

@media (max-width: 767px) {
  .auth-screen {
    padding: 20px;
    background:
      linear-gradient(180deg, rgba(232, 242, 250, 0.78), rgba(244, 248, 251, 0.96)),
      url('/assets/concepts/jianwei-login-yiview-derived-v2.jpg') center / cover no-repeat;
  }

  .auth-panel {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(18px) saturate(112%);
    backdrop-filter: blur(18px) saturate(112%);
  }

  .page:has(.dashboard-command) > .page-head,
  .page:has(.project-archive-list) > .page-head,
  .page:has(.rule-library) > .page-head {
    min-height: auto;
    background-position: 72% center;
  }

  .audit-unavailable-page .audit-workspace {
    background-position: 60% center;
  }
}

/* Dark enterprise workspace: dense ERP hierarchy with restrained status color. */
:root {
  color-scheme: dark;
  --ink: #d5dde8;
  --ink-strong: #f4f7fb;
  --muted: #98a6b7;
  --muted-2: #6f7d8e;
  --canvas: #0b0f14;
  --surface: #151b23;
  --surface-2: #111720;
  --surface-3: #1c2530;
  --line: #273241;
  --line-strong: #354459;
  --sidebar: #0c1118;
  --sidebar-hover: #151f2b;
  --blue: #5aa7ff;
  --blue-soft: #172a42;
  --green: #52c58b;
  --green-soft: #142d24;
  --amber: #e3aa52;
  --amber-soft: #332713;
  --red: #f17672;
  --red-soft: #351d20;
  --cyan: #4bc1ca;
  --cyan-soft: #142d31;
  --violet: #a98bea;
  --violet-soft: #251f3a;
  --glass-border: rgba(139, 164, 194, 0.18);
  --glass-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --focus: 0 0 0 3px rgba(90, 167, 255, 0.24);
}

html,
body,
.loading-screen {
  background: var(--canvas);
  color: var(--ink);
}

* {
  scrollbar-color: #3a4a5f #111720;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #111720; }
*::-webkit-scrollbar-thumb {
  border: 2px solid #111720;
  border-radius: 8px;
  background: #3a4a5f;
}

::selection {
  background: rgba(90, 167, 255, 0.34);
  color: #ffffff;
}

.workspace,
#app,
.page,
.audit-page,
.audit-project-page,
.photo-work-area {
  background: var(--canvas);
}

.sidebar {
  border-right-color: #202a37;
  background: #0c1118;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.24);
  color: var(--ink);
}

.brand {
  border-bottom-color: #202a37;
  background: #0c1118;
}

.brand-mark,
.auth-brand .brand-mark {
  border-color: #2a4650;
  background: #111d23;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 7px 20px rgba(0, 0, 0, 0.25);
}

.brand-mark::before {
  background: #69cec0;
}

.brand-copy strong,
.auth-brand strong {
  color: #f4f7fb;
}

.brand-copy span,
.auth-brand span {
  color: #7f8d9d;
}

.primary-nav a {
  border-color: transparent;
  color: #8795a6;
}

.primary-nav a:hover {
  border-color: #28384a;
  background: #141d28;
  color: #dce5f0;
}

.primary-nav a.active {
  border-color: #315f8f;
  background: #17283a;
  box-shadow: inset 0 0 0 1px rgba(90, 167, 255, 0.08), 0 5px 16px rgba(0, 0, 0, 0.2);
  color: #eef6ff;
}

.primary-nav a.active::before {
  background: #5aa7ff;
  box-shadow: 0 0 12px rgba(90, 167, 255, 0.44);
}

.primary-nav a.active svg { color: #69b0ff; }
.primary-nav a:nth-child(2):not(.active) svg { color: #d9a24e; }
.primary-nav a:nth-child(3):not(.active) svg { color: #4ab8bf; }
.primary-nav a:nth-child(4):not(.active) svg { color: #9a82d6; }
.primary-nav a:nth-child(5):not(.active) svg { color: #57b77f; }
.primary-nav a:nth-child(6):not(.active) svg { color: #7c8da2; }

.nav-count {
  border-color: #334054;
  background: #202a36;
  color: #b8c4d2;
}

.nav-count.warning {
  border-color: #684c22;
  background: #352816;
  color: #e8b665;
}

.sidebar-footer {
  border-top-color: #202a37;
}

.sidebar-toggle {
  border-color: #2a3544;
  background: #111821;
  color: #8f9daf;
}

.sidebar-toggle:hover {
  border-color: #3d6c9c;
  background: #172638;
  color: #dfeeff;
}

.topbar {
  border-bottom-color: #263140;
  background: rgba(13, 18, 25, 0.94);
  box-shadow: 0 7px 24px rgba(0, 0, 0, 0.26), inset 0 1px rgba(255, 255, 255, 0.025);
  -webkit-backdrop-filter: blur(20px) saturate(118%);
  backdrop-filter: blur(20px) saturate(118%);
}

.topbar-context strong { color: #edf2f8; }

.business-date,
.data-status,
.account-status {
  border-color: #303d4e;
  background: #151c25;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  color: #9facbc;
}

.data-status.ready,
.account-status.admin {
  border-color: #296444;
  background: #13291f;
  color: #6bd49a;
}

.data-status.awaiting,
.data-status.warning,
.account-status.guest {
  border-color: #6a4d25;
  background: #302313;
  color: #e8b25d;
}

.data-status.processing {
  border-color: #315f8f;
  background: #172a42;
  color: #73b5ff;
}

.data-status.blocked {
  border-color: #743a3d;
  background: #321b1e;
  color: #f58a86;
}

.surface,
.metrics-strip,
.summary-band,
.audit-project-header,
.filter-bar,
.followup-table-wrap,
.project-archive-list,
.dashboard-command,
.dashboard-dimension,
.dashboard-risk-panel,
.dashboard-health-panel,
.dashboard-chart-panel,
.dashboard-photographer-panel,
.dashboard-aging-panel,
.gantt-panel,
.rule-library,
.rule-project-scope,
.engine-events-panel,
.import-management,
.import-history,
.user-management,
.empty-state {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.18), var(--glass-inset);
  color: var(--ink);
}

.page:not(.flush) > .page-head,
.page:has(.dashboard-command) > .page-head,
.page:has(.project-archive-list) > .page-head,
.page:has(.rule-library) > .page-head {
  min-height: 96px;
  border-color: #2b3b4e;
  background-image:
    linear-gradient(90deg, rgba(18, 25, 34, 0.98) 0%, rgba(18, 25, 34, 0.93) 44%, rgba(15, 23, 33, 0.67) 72%, rgba(10, 16, 24, 0.45) 100%),
    url('/assets/concepts/jianwei-erp-dark-workspace-v1.jpg');
  background-position: center;
  background-size: cover;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.035);
}

.page:not(.flush) > .page-head::after,
.page:has(.followup-table-wrap) > .page-head::after,
.page:has(.project-archive-list) > .page-head::after,
.page:has(.dashboard-command) > .page-head::after,
.page:has(.rule-library) > .page-head::after,
.page:has(.engine-events-panel) > .page-head::after {
  display: none;
}

.page-head h1,
.workspace-head h1,
.section-head h2,
.surface h2,
.surface h3 {
  color: var(--ink-strong);
}

.section-head,
.panel-head,
.table-head {
  border-color: #2b3746;
  background: #111821;
  color: var(--ink);
}

.page-head p,
.workspace-head p,
.section-head p,
.surface p,
.cell-sub,
.muted {
  color: var(--muted);
}

.button,
.icon-button,
.action-icon {
  border-color: #344255;
  background: #18202a;
  color: #c8d3df;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.button:hover,
.icon-button:hover,
.action-icon:hover {
  border-color: #467bb1;
  background: #1b2b3d;
  color: #e8f3ff;
}

.button.primary {
  border-color: #347fd2;
  background: #2677cf;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 6px 16px rgba(16, 86, 163, 0.32);
  color: #ffffff;
}

.button.primary:hover {
  border-color: #62adff;
  background: #3289e6;
}

.button.success {
  border-color: #397d59;
  background: #1b4b35;
  color: #b9f0d0;
}

.button.danger {
  border-color: #864549;
  background: #52272a;
  color: #ffd4d1;
}

.input,
.select,
.textarea,
.auth-input,
.photo-filter-search,
.photo-filter-control,
.photo-filter-reset,
.audit-project-search input {
  border-color: var(--line-strong);
  background: #10161e;
  color: #dce4ee;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
}

.input:hover,
.select:hover,
.textarea:hover,
.auth-input:hover,
.photo-filter-search:hover,
.photo-filter-control:hover,
.audit-project-search input:hover {
  border-color: #49617e;
}

.input:focus,
.select:focus,
.textarea:focus,
.auth-input:focus-within,
.photo-filter-search:focus-within,
.photo-filter-control:focus-within,
.audit-project-search input:focus {
  border-color: #5aa7ff;
  box-shadow: var(--focus);
}

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

.segmented {
  border-color: #303c4c;
  background: #10161e;
}

.segmented button {
  color: #8f9daf;
}

.segmented button:hover {
  color: #dce6f2;
}

.segmented button.active {
  border-color: #3d73a8;
  background: #1b3046;
  color: #d9ecff;
  box-shadow: inset 0 0 0 1px rgba(90, 167, 255, 0.13), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.badge,
.status-badge {
  border-color: #3a4759;
  background: #1b2430;
  color: #b7c3d0;
}

.badge.blue,
.status-badge.blue { border-color: #315f8f; background: #172a42; color: #78b8ff; }
.badge.green,
.status-badge.green { border-color: #2e6a49; background: #142d24; color: #72d49d; }
.badge.amber,
.status-badge.amber { border-color: #6a4e25; background: #332713; color: #e5b25f; }
.badge.red,
.status-badge.red { border-color: #743b3e; background: #351d20; color: #f48a86; }
.badge.cyan,
.status-badge.cyan { border-color: #2d6870; background: #142d31; color: #68cbd2; }
.badge.violet,
.status-badge.violet { border-color: #55467d; background: #251f3a; color: #b79bf1; }

.progress-track,
.progress-inline,
.archive-progress,
.dashboard-dimension-track,
.dashboard-distribution-row > div:last-child,
.dashboard-aging-row > div:last-child,
.audit-live-progress-track {
  background: #26313f;
}

.filter-bar,
.photo-list-toolbar {
  border-color: #2b3746;
  background: rgba(17, 23, 32, 0.97);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.photo-status-filter button {
  border-color: #344255;
  background: #151d27;
  color: #a5b2c1;
}

.photo-status-filter button.active {
  border-color: #4d8ed0;
  background: #1a3450;
  color: #cde6ff;
  box-shadow: inset 0 0 0 1px rgba(90, 167, 255, 0.18), 0 4px 11px rgba(0, 0, 0, 0.2);
}

.photo-status-filter button[data-photo-filter-value="approved"].active {
  border-color: #3b875d;
  background: #163c2a;
  color: #9ee3ba;
}

.photo-status-filter button[data-photo-filter-value="rejected"].active {
  border-color: #915054;
  background: #452326;
  color: #ffaaa5;
}

.photo-status-filter button[data-photo-filter-value="suspect"].active {
  border-color: #8b662f;
  background: #493619;
  color: #f2c36f;
}

.audit-project-rail,
.audit-project-panel,
.audit-project-workspace,
.audit-context {
  border-color: #263241;
  background: #111720;
}

.audit-project-search {
  border-bottom-color: #263241;
  background: #111720;
}

.audit-project-tab {
  border-color: #293647;
  background: #151c25;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.13);
}

.audit-project-tab:hover {
  border-color: #3d648b;
  background: #182638;
}

.audit-project-tab.active {
  border-color: #3f7ebd;
  background: #1a3048;
  box-shadow: inset 5px 0 0 #5aa7ff, inset 0 0 0 1px rgba(90, 167, 255, 0.13), 0 8px 18px rgba(0, 0, 0, 0.24);
}

.audit-project-tab.readonly.active {
  border-color: #35727a;
  background: #173238;
  box-shadow: inset 5px 0 0 #4bc1ca, inset 0 0 0 1px rgba(75, 193, 202, 0.12), 0 8px 18px rgba(0, 0, 0, 0.24);
}

.audit-project-tab > strong { color: #c7d1dd; }
.audit-project-tab.active > strong { color: #ffffff; }
.audit-project-summary { border-top-color: #2b3746; }
.audit-project-summary > div:nth-child(1) { background: #172a42; }
.audit-project-summary > div:nth-child(2) { background: #142d24; }
.audit-project-summary > div:nth-child(3) { background: #1b2430; }
.audit-project-summary > div:nth-child(4) { background: #332713; }
.audit-project-summary > div > span { color: #93a2b4; }

.audit-rule-summary .project-rule-mini.named-rules > span,
.project-rule-mini.named-rules > span,
.project-rule-row,
.project-rule-config-row,
.audit-material-item,
.issue-record,
.problem-reply-history > li {
  border-color: #2b3746;
  background: #171f29;
  color: var(--ink);
}

.rule-governance-warning,
.rule-edit-danger,
.rule-config-notice.warning,
.import-resolution-warning {
  border-color: #7b4245;
  background: #321c1f;
  color: #f3a19c;
}

.photo-card {
  border-color: #2e3b4b;
  background: #151c25;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.025);
}

.photo-card:hover {
  border-color: #4e8bc8;
  box-shadow: 0 13px 28px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(90, 167, 255, 0.12);
}

.photo-card.is-current {
  border-color: #61adf8;
  background: #192c40;
  box-shadow: 0 0 0 3px rgba(90, 167, 255, 0.29), 0 14px 30px rgba(0, 0, 0, 0.36);
}

.photo-frame,
.photo-detail-image,
.viewer-main {
  background: #070a0f;
}

.photo-meta,
.audit-photo-meta {
  border-top-color: #2b3746;
  background: #151c25;
  color: var(--ink);
}

.photo-actions,
.viewer-review-actions {
  border-top-color: #2b3746;
  background: #121923;
}

.photo-review-reason-chip,
.photo-rule-tag {
  border-color: #743b3e;
  background: #351d20;
  color: #f5a09a;
}

.project-archive-columns {
  border-color: #2b3746;
  background: #10161e;
  color: #8492a4;
}

.project-archive-row {
  border-color: #2b3746;
  background: #151c25;
  color: var(--ink);
}

.project-archive-row:hover {
  background: #192431;
}

.project-archive-row.is-current,
.project-archive-row.is-current:hover {
  background: #1a3048;
  box-shadow: inset 6px 0 0 #5aa7ff, inset 0 0 0 1px #3f7ebd, 0 8px 20px rgba(0, 0, 0, 0.24);
}

.project-archive-row.lifecycle-archived,
.project-archive-row.lifecycle-archived:hover,
.project-archive-row.lifecycle-archived.is-current,
.project-archive-row.lifecycle-archived.is-current:hover {
  background: #14281f;
}

.data-table,
.followup-table {
  background: var(--surface);
  color: var(--ink);
}

.data-table th,
.followup-table th {
  border-color: #2d3948;
  background: #10161e;
  color: #8e9bac;
}

.data-table td,
.followup-table td {
  border-color: #293544;
  background: #151c25;
  color: var(--ink);
}

.data-table tbody tr:hover td,
.followup-table tbody tr:hover td {
  background: #192431;
}

.dashboard-command {
  border-color: #334356;
  background: linear-gradient(115deg, #151d28, #172435 72%, #132a2e);
}

.dashboard-command::after {
  background: rgba(90, 167, 255, 0.08);
}

.dashboard-command-stats > div,
.dashboard-health-item,
.dashboard-risk-row,
.dashboard-distribution-row,
.dashboard-aging-row {
  border-color: #2c3847;
  background: #151d27;
}

.dashboard-dimension:hover,
.dashboard-risk-row:hover,
.dashboard-health-item:hover {
  background: #192532;
}

.dashboard-command-icon,
.dashboard-health-icon {
  border-color: #345a82;
  background: #172b42;
  color: #75b6ff;
}

.dashboard-footnote,
.dashboard-list-foot,
.dashboard-health-note {
  border-color: #2b3746;
  background: #111821;
  color: #7f8d9e;
}

.gantt-board,
.gantt-scroll,
.gantt-grid,
.gantt-track,
.gantt-axis-track {
  border-color: #2b3746;
  background-color: #121922;
}

.gantt-project-row,
.gantt-path-row {
  border-color: #26313f;
}

.rule-row,
.rule-profile-summary,
.rule-backup-summary,
.rule-admin-auth,
.import-issues-summary,
.import-issue,
.import-issue-source,
.pipeline-step,
.drop-zone,
.account-session-state {
  border-color: #2d3949;
  background: #151d27;
  color: var(--ink);
}

.import-issue.resolved {
  border-color: #2b3746;
  background: #151d27;
}

.import-issue-explanation {
  border-color: #604043;
  background: #2b1d20;
  color: #dca4a0;
}

.rule-row:hover,
.import-issues-summary:hover,
.pipeline-step:hover {
  background: #192532;
}

.rule-code {
  color: #8f9cf3;
}

.rule-required,
.rule-lines,
.engine-note,
.pipeline-copy,
.import-issue-meta,
.import-issue-explanation,
.import-issue-technical {
  color: var(--muted);
}

.import-result-banner.success {
  border-color: #2e6a49;
  background: #142d24;
  color: #72d49d;
}

.modal,
.drawer {
  border-color: #354459;
  background: #151c25;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.035);
  color: var(--ink);
}

.modal-head,
.drawer-head,
.modal-foot,
.drawer-foot {
  border-color: #2b3746;
  background: #111821;
}

.modal-body,
.drawer-body {
  background: #151c25;
}

.overlay,
.drawer-overlay,
.sidebar-scrim {
  background: rgba(2, 5, 9, 0.76);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.auth-screen {
  justify-items: end;
  padding-right: max(7vw, 72px);
  background:
    linear-gradient(90deg, rgba(4, 8, 14, 0.1) 0%, rgba(5, 10, 17, 0.22) 48%, rgba(7, 11, 17, 0.84) 74%, #090d13 100%),
    url('/assets/concepts/jianwei-erp-dark-workspace-v1.jpg') center / cover no-repeat;
}

.auth-screen::before {
  background: linear-gradient(180deg, rgba(20, 76, 122, 0.08), rgba(2, 5, 10, 0.22));
}

.auth-panel {
  border-color: rgba(100, 130, 163, 0.36);
  background: rgba(16, 22, 30, 0.91);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.56), inset 0 1px rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(26px) saturate(116%);
  backdrop-filter: blur(26px) saturate(116%);
}

.auth-heading > span { color: #6fb5ff; }
.auth-heading h1 { color: #f4f7fb; }
.auth-heading p,
.auth-safety,
.auth-form > label { color: #96a4b5; }
.auth-safety { border-top-color: #2c3948; }
.auth-guest { background: #151d27; }

.audit-unavailable-page .audit-workspace {
  background:
    linear-gradient(90deg, rgba(15, 21, 29, 0.96) 0%, rgba(15, 21, 29, 0.91) 48%, rgba(13, 20, 29, 0.72) 74%, rgba(11, 17, 25, 0.88) 100%),
    url('/assets/concepts/jianwei-erp-dark-workspace-v1.jpg') center / cover no-repeat;
}

@media (max-width: 767px) {
  .auth-screen {
    padding: 20px;
    background:
      linear-gradient(180deg, rgba(7, 12, 19, 0.74), rgba(8, 13, 20, 0.96)),
      url('/assets/concepts/jianwei-erp-dark-workspace-v1.jpg') 38% center / cover no-repeat;
  }

  .auth-panel {
    background: rgba(16, 22, 30, 0.94);
  }

  .page:not(.flush) > .page-head,
  .page:has(.dashboard-command) > .page-head,
  .page:has(.project-archive-list) > .page-head,
  .page:has(.rule-library) > .page-head {
    min-height: auto;
    background-position: 64% center;
  }

  .audit-mobile-switch {
    border-bottom-color: #2b3746;
    background: #111821;
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .topbar,
  .auth-panel,
  .filter-bar,
  .photo-list-toolbar,
  .modal,
  .drawer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}