body.phase1-ui {
  --paper: #eef4ff;
  --paper-2: #f6f9ff;
  --paper-3: #d7e3f4;
  --white: rgba(255,255,255,0.74);
  --ink: #10253d;
  --ink-2: #35506e;
  --ink-3: #6d8298;
  --ink-4: #98a8b9;
  --accent: #0b4f8a;
  --accent-2: #3977ad;
  --accent-light: rgba(11,79,138,0.10);
  --gold: #b27b22;
  --gold-light: rgba(229,181,91,0.18);
  --danger: #b64b46;
  --danger-light: rgba(182,75,70,0.12);
  --info: #1f6ea6;
  --info-light: rgba(31,110,166,0.12);
  --purple: #6477c8;
  --purple-light: rgba(100,119,200,0.12);
  --border: rgba(125, 148, 176, 0.20);
  --border-strong: rgba(87, 116, 148, 0.28);
  --shadow: 0 14px 42px rgba(31, 54, 86, 0.08), 0 2px 8px rgba(31, 54, 86, 0.05);
  --shadow-lg: 0 22px 60px rgba(25, 46, 79, 0.14), 0 8px 22px rgba(25, 46, 79, 0.08);
  --radius: 14px;
  --radius-lg: 24px;
  --nav-width: 252px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.96), rgba(240,246,255,0.92) 30%, rgba(226,236,248,0.94) 70%, rgba(244,247,252,1) 100%);
  color: var(--ink);
}

body.phase1-ui::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,0.9), transparent 26%),
    radial-gradient(circle at 85% 15%, rgba(170,205,255,0.18), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(193,220,255,0.18), transparent 30%);
  z-index: 0;
}

body.phase1-ui,
body.phase1-ui button,
body.phase1-ui input,
body.phase1-ui textarea,
body.phase1-ui select {
  font-family: 'DM Sans', system-ui, sans-serif;
}

body.phase1-ui #app-wrapper {
  z-index: 1;
}

body.phase1-ui .app {
  gap: 16px;
  padding: 14px;
  background: transparent;
}

body.phase1-ui .sidebar {
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.90), rgba(15, 35, 63, 0.82));
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 60px rgba(8,20,38,0.28);
  border-radius: 30px;
  height: calc(100vh - 28px);
}

body.phase1-ui .sidebar-brand {
  padding: 22px 18px 16px;
  margin: 8px 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border-radius: 24px 24px 18px 18px;
}

body.phase1-ui .sidebar-brand .tagline,
body.phase1-ui .nav-section,
body.phase1-ui .sidebar-footer,
body.phase1-ui #workspace-id-chip {
  color: rgba(231, 239, 249, 0.66) !important;
}

body.phase1-ui .sidebar-logo {
  width: 176px;
  filter: brightness(1.05) drop-shadow(0 6px 22px rgba(0,0,0,0.16));
}

body.phase1-ui .sidebar-nav {
  padding: 12px 10px 16px;
}

body.phase1-ui .nav-section {
  padding: 14px 14px 8px;
  letter-spacing: 1.25px;
  font-size: 10px;
  font-weight: 700;
}

body.phase1-ui .nav-item {
  margin: 2px 0;
  padding: 11px 14px;
  border-radius: 18px;
  border-left: none;
  color: rgba(241,247,255,0.74);
  font-size: 13px;
  font-weight: 500;
}

body.phase1-ui .nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  transform: translateX(2px);
}

body.phase1-ui .nav-item.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 18px rgba(0,0,0,0.10);
}

body.phase1-ui .nav-icon {
  opacity: 0.9;
}

body.phase1-ui .nav-badge,
body.phase1-ui .nav-badge-alert {
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

body.phase1-ui .sidebar-footer {
  margin: 0 12px 12px;
  padding: 14px 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
}

body.phase1-ui .main {
  background: transparent;
  min-height: calc(100vh - 28px);
}

body.phase1-ui .topbar {
  height: auto;
  min-height: 64px;
  margin: 0 0 8px;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.60);
  border-radius: 26px;
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: 0 18px 50px rgba(27, 54, 86, 0.08);
}

body.phase1-ui .topbar-title {
  color: var(--ink);
  font-size: 24px;
  letter-spacing: -0.5px;
}

body.phase1-ui .topbar-context-actions,
body.phase1-ui .topbar-utility-actions,
body.phase1-ui .topbar-status-region,
body.phase1-ui .topbar-actions {
  gap: 10px;
}

body.phase1-ui .topbar-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

body.phase1-ui .topbar-tools-toggle {
  display: none;
}

body.phase1-ui .topbar-tools-tray {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

body.phase1-ui .proposal-attachment-draft-list,
body.phase1-ui .proposal-attachment-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.phase1-ui .proposal-attachment-chip,
body.phase1-ui .proposal-attachment-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(117,143,174,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  font-size: 12px;
}

body.phase1-ui .proposal-attachment-chip.staged {
  border-style: dashed;
}

body.phase1-ui .proposal-attachment-links {
  margin-top: 8px;
}

body.phase1-ui .proposal-attachment-links a {
  color: var(--accent);
  text-decoration: none;
}

body.phase1-ui .status-pill,
body.phase1-ui .rate-pill,
body.phase1-ui .badge,
body.phase1-ui .section-tag {
  border-radius: 999px;
  padding: 5px 10px;
}

body.phase1-ui .status-pill,
body.phase1-ui .rate-pill {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(117,143,174,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

body.phase1-ui .page {
  padding: 10px 6px 18px;
}

body.phase1-ui .card,
body.phase1-ui .stat-card,
body.phase1-ui .dash-widget,
body.phase1-ui .detail-hero,
body.phase1-ui .pipeline-col,
body.phase1-ui .modal,
body.phase1-ui .invoice-preview,
body.phase1-ui .focus-item,
body.phase1-ui .tax-category,
body.phase1-ui .exp-commitments,
body.phase1-ui .timeline-card,
body.phase1-ui .widget-shell,
body.phase1-ui #ai-panel {
  background: rgba(255,255,255,0.66);
  backdrop-filter: blur(20px) saturate(1.08);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: var(--shadow);
}

body.phase1-ui .card,
body.phase1-ui .stat-card,
body.phase1-ui .dash-widget,
body.phase1-ui .detail-hero,
body.phase1-ui .pipeline-col,
body.phase1-ui .invoice-preview,
body.phase1-ui .tax-category,
body.phase1-ui .modal {
  border-radius: 26px;
}

body.phase1-ui .card,
body.phase1-ui .detail-hero,
body.phase1-ui .dash-widget,
body.phase1-ui .invoice-preview,
body.phase1-ui .modal {
  padding: 20px 22px;
}

body.phase1-ui .card-header,
body.phase1-ui .widget-handle,
body.phase1-ui .detail-hero-top,
body.phase1-ui .invoice-header {
  margin-bottom: 16px;
}

body.phase1-ui .card-title,
body.phase1-ui .section-tag,
body.phase1-ui .nav-section,
body.phase1-ui .form-section,
body.phase1-ui th {
  letter-spacing: 0.9px;
}

body.phase1-ui .btn {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 16px;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(34,58,90,0.08);
}

body.phase1-ui .btn-primary {
  background: linear-gradient(180deg, #165f9f, #0b4f8a);
  color: white;
}

body.phase1-ui .btn-primary:hover {
  background: linear-gradient(180deg, #1d6bae, #0d5896);
  transform: translateY(-1px);
}

body.phase1-ui .btn-ghost,
body.phase1-ui .btn-danger,
body.phase1-ui .btn-purple,
body.phase1-ui .btn-secondary {
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(125,148,176,0.22);
}

body.phase1-ui .btn-ghost:hover,
body.phase1-ui .btn-danger:hover,
body.phase1-ui .btn-purple:hover,
body.phase1-ui .btn-secondary:hover {
  background: rgba(255,255,255,0.85);
}

body.phase1-ui .form-input,
body.phase1-ui input[type="search"],
body.phase1-ui input[type="text"],
body.phase1-ui input[type="email"],
body.phase1-ui input[type="password"],
body.phase1-ui select,
body.phase1-ui textarea {
  border-radius: 16px;
  border: 1px solid rgba(118, 144, 173, 0.24);
  background: rgba(255,255,255,0.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

body.phase1-ui .form-input:focus,
body.phase1-ui input:focus,
body.phase1-ui textarea:focus,
body.phase1-ui select:focus {
  border-color: rgba(11,79,138,0.42);
  box-shadow: 0 0 0 4px rgba(11,79,138,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
}

body.phase1-ui .stats-grid,
body.phase1-ui .dash-grid,
body.phase1-ui .dash-widget-grid,
body.phase1-ui .pipeline-cols,
body.phase1-ui .form-grid,
body.phase1-ui .form-grid-2,
body.phase1-ui .form-grid-3 {
  gap: 16px;
}

body.phase1-ui .stat-card {
  padding: 18px 20px;
}

body.phase1-ui .stat-value {
  font-size: 30px;
}

body.phase1-ui .table-wrap,
body.phase1-ui table {
  border-radius: 18px;
}

body.phase1-ui table {
  overflow: hidden;
}

body.phase1-ui th {
  font-size: 10px;
  padding: 10px 12px;
  color: #56708d;
  background: rgba(245,249,255,0.82);
}

body.phase1-ui td {
  padding: 12px;
  background: rgba(255,255,255,0.32);
}

body.phase1-ui tr:hover td {
  background: rgba(236, 244, 255, 0.72);
}

body.phase1-ui .pipeline-col {
  padding: 14px;
  background: rgba(248,251,255,0.70);
}

body.phase1-ui .pipeline-col-header,
body.phase1-ui .col-count {
  font-weight: 700;
}

body.phase1-ui .pipeline-card,
body.phase1-ui .focus-item,
body.phase1-ui .exp-commit-row,
body.phase1-ui .tax-cat-item,
body.phase1-ui .activity-item,
body.phase1-ui .client-row {
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(126, 148, 175, 0.18);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(32, 56, 88, 0.05);
}

body.phase1-ui .pipeline-card,
body.phase1-ui .focus-item,
body.phase1-ui .client-row,
body.phase1-ui .activity-item,
body.phase1-ui .tax-cat-item,
body.phase1-ui .exp-commit-row {
  padding: 12px 14px;
}

body.phase1-ui .pipeline-card:hover,
body.phase1-ui .client-chip-link:hover,
body.phase1-ui .linklike-name:hover,
body.phase1-ui .client-row-name:hover {
  transform: translateY(-1px);
}

body.phase1-ui .detail-stage-control,
body.phase1-ui .invoice-footer,
body.phase1-ui .invoice-parties,
body.phase1-ui .tax-cat-header,
body.phase1-ui .exp-commitments-header {
  border-color: rgba(118, 144, 173, 0.18);
}

body.phase1-ui .detail-back,
body.phase1-ui .linklike-name,
body.phase1-ui .client-row-name,
body.phase1-ui .topbar-title,
body.phase1-ui .invoice-number,
body.phase1-ui .pipeline-card-value {
  color: var(--accent);
}

body.phase1-ui .modal-backdrop {
  background: rgba(18, 34, 58, 0.35);
  backdrop-filter: blur(10px);
}

body.phase1-ui #save-indicator {
  background: rgba(8, 20, 38, 0.88) !important;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 40px rgba(8,20,38,0.18);
  padding: 8px 16px !important;
}

body.phase1-ui #login-screen {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.98), rgba(239,246,255,0.94) 34%, rgba(225,235,248,0.92) 100%) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

body.phase1-ui #login-screen .login-panel {
  width: min(440px, calc(100vw - 28px)) !important;
  padding: 34px 34px 30px !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,0.76) !important;
  backdrop-filter: blur(20px) saturate(1.08);
  border: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow: 0 24px 70px rgba(27, 54, 86, 0.12) !important;
}

body.phase1-ui #login-screen label,
body.phase1-ui #login-brand-subtitle,
body.phase1-ui #signup-section > div:first-child {
  color: var(--ink-3) !important;
}

body.phase1-ui #login-email,
body.phase1-ui #login-pass,
body.phase1-ui #signup-email,
body.phase1-ui #signup-pass {
  border-radius: 16px !important;
  border: 1px solid rgba(118, 144, 173, 0.22) !important;
  background: rgba(255,255,255,0.90) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

body.phase1-ui #login-btn,
body.phase1-ui #signup-section button {
  border-radius: 16px !important;
  background: linear-gradient(180deg, #165f9f, #0b4f8a) !important;
  box-shadow: 0 12px 24px rgba(22,95,159,0.18);
}

body.phase1-ui #login-screen .login-inline-action {
  display: inline;
  margin-left: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

body.phase1-ui #login-screen .login-inline-action:hover {
  text-decoration: underline;
}

body.phase1-ui .login-card-title {
  color: var(--ink);
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

body.phase1-ui .login-brand img {
  filter: drop-shadow(0 10px 26px rgba(12,32,58,0.12));
}

body.phase1-ui .login-panel > div[style*="border-top:1px solid"] {
  border-top-color: rgba(118, 144, 173, 0.14) !important;
}

@media (max-width: 560px) {
  body.phase1-ui #login-screen {
    align-items: flex-start !important;
    padding: 24px 14px !important;
    overflow-y: auto;
  }
  body.phase1-ui #login-screen .login-panel {
    width: 100% !important;
    padding: 26px 20px 22px !important;
    border-radius: 24px !important;
  }
  body.phase1-ui .login-card-title {
    font-size: 28px;
  }
  body.phase1-ui #login-brand-subtitle {
    margin-bottom: 22px !important;
    line-height: 1.45;
  }
  body.phase1-ui #login-email,
  body.phase1-ui #login-pass,
  body.phase1-ui #signup-email,
  body.phase1-ui #signup-pass,
  body.phase1-ui #login-btn,
  body.phase1-ui #signup-section button {
    min-height: 44px;
  }
}

@media (max-width: 900px) {
  body.phase1-ui .app {
    padding: 10px;
    gap: 10px;
  }

  body.phase1-ui .sidebar {
    height: calc(100vh - 20px);
    border-radius: 24px;
  }

  body.phase1-ui .topbar {
    min-height: 58px;
    padding: 10px 12px;
    border-radius: 20px;
  }

  body.phase1-ui .page {
    padding: 6px 2px 14px;
  }

  body.phase1-ui .card,
  body.phase1-ui .stat-card,
  body.phase1-ui .dash-widget,
  body.phase1-ui .detail-hero,
  body.phase1-ui .pipeline-col,
  body.phase1-ui .modal,
  body.phase1-ui .invoice-preview {
    border-radius: 20px;
  }
}

@media (max-width: 768px) {
  body.phase1-ui .sidebar {
    left: -280px;
    top: 10px;
    bottom: 10px;
    height: auto;
  }

  body.phase1-ui .sidebar.mobile-open {
    left: 10px;
  }

  body.phase1-ui .main {
    min-height: auto;
  }

  body.phase1-ui .topbar {
    gap: 10px;
  }

  body.phase1-ui .topbar-title {
    font-size: 15px;
    line-height: 1.15;
    max-width: 180px;
  }

  body.phase1-ui .topbar-tools-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
  }

  body.phase1-ui .topbar-tools-tray {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(20px) saturate(1.08);
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow: 0 18px 50px rgba(27, 54, 86, 0.16);
    flex-direction: column;
    align-items: stretch;
    z-index: 60;
  }

  body.phase1-ui .topbar-tools-tray.open {
    display: flex;
  }

  body.phase1-ui .topbar-tools-tray .topbar-context-actions,
  body.phase1-ui .topbar-tools-tray .topbar-utility-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  body.phase1-ui .topbar-tools-tray .topbar-status-region {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  body.phase1-ui .topbar-tools-tray .btn,
  body.phase1-ui .topbar-tools-tray button[id='dark-mode-toggle'] {
    width: 100%;
  }

  body.phase1-ui .btn {
    min-height: 34px;
    border-radius: 14px;
  }

  body.phase1-ui .pipeline-cols {
    grid-template-columns: repeat(4, 280px);
  }
}

[data-theme="dark"] body.phase1-ui .card,
[data-theme="dark"] body.phase1-ui .dash-widget,
[data-theme="dark"] body.phase1-ui .detail-hero,
[data-theme="dark"] body.phase1-ui .pipeline-col,
[data-theme="dark"] body.phase1-ui .modal {
  backdrop-filter: blur(20px);
}

body.phase1-ui .pipeline-toolbar {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

body.phase1-ui .pipeline-toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.phase1-ui .pipeline-search-wrap {
  min-width: 260px;
  flex: 1 1 320px;
}

body.phase1-ui .pipeline-toolbar-filters,
body.phase1-ui .pipeline-quickviews,
body.phase1-ui .pipeline-view-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

body.phase1-ui .pipeline-chip {
  border: 1px solid rgba(117,143,174,0.22);
  background: rgba(255,255,255,0.72);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

body.phase1-ui .pipeline-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(27, 54, 86, 0.08);
}

body.phase1-ui .pipeline-chip.active {
  background: linear-gradient(180deg, rgba(11,79,138,0.94), rgba(25,109,182,0.88));
  color: white;
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(31, 78, 124, 0.18);
}

body.phase1-ui .pipeline-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

body.phase1-ui .pipeline-summary-card {
  padding: 12px 14px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(117,143,174,0.18);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}

body.phase1-ui .pipeline-summary-label {
  color: var(--ink-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}

body.phase1-ui .pipeline-summary-value {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

body.phase1-ui .pipeline-results-meta {
  margin: 0 0 14px;
  color: var(--ink-3);
  font-size: 12px;
}

body.phase1-ui .pipeline-col-subhead {
  font-size: 11px;
  color: var(--ink-3);
  margin: -4px 0 10px;
  font-family: var(--font-mono);
}

body.phase1-ui .pipeline-table th,
body.phase1-ui .pipeline-table td {
  vertical-align: top;
}

body.phase1-ui .pipeline-table tbody tr:hover {
  background: rgba(255,255,255,0.48);
}

@media (max-width: 1080px) {
  body.phase1-ui .pipeline-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.phase1-ui .pipeline-summary-strip {
    grid-template-columns: 1fr;
  }

  body.phase1-ui .pipeline-toolbar-row {
    align-items: stretch;
  }

  body.phase1-ui .pipeline-search-wrap,
  body.phase1-ui .pipeline-toolbar-filters {
    width: 100%;
  }
}


body.phase1-ui #loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(255,255,255,0.98), rgba(235,243,252,0.96) 36%, rgba(223,234,247,0.94) 100%);
  backdrop-filter: blur(18px) saturate(1.05);
  transition: opacity 0.18s ease;
}

[data-theme="dark"] body.phase1-ui #loading-overlay {
  background: radial-gradient(circle at top, rgba(10,20,36,0.98), rgba(8,16,30,0.96) 36%, rgba(6,13,24,0.96) 100%);
}

body.phase1-ui #loading-overlay.done { opacity: 0; }

body.phase1-ui .loading-shell {
  width: min(460px, calc(100vw - 32px));
  padding: 34px 30px 28px;
  border-radius: 32px;
  text-align: center;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow: 0 30px 80px rgba(18,48,82,0.16);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] body.phase1-ui .loading-shell {
  background: rgba(12,20,34,0.78);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.38);
}

body.phase1-ui .loading-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 34%, rgba(111,159,212,0.10) 72%, rgba(255,255,255,0.14));
  pointer-events: none;
}

body.phase1-ui .loading-orb {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  margin: 0 auto 14px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.96), rgba(110,165,224,0.78) 40%, rgba(18,92,161,0.95));
  box-shadow: 0 18px 40px rgba(17,80,143,0.26);
  animation: fpPulse 2.2s ease-in-out infinite;
}

body.phase1-ui .loading-logo-wrap { position: relative; z-index: 1; }
body.phase1-ui .loading-logo { max-width: 220px; max-height: 58px; object-fit: contain; margin: 0 auto 10px; display: block; }
body.phase1-ui .loading-logo-fallback,
body.phase1-ui .loading-title { font-family: var(--font-display); letter-spacing: -0.02em; }
body.phase1-ui .loading-kicker { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; position: relative; z-index: 1; }
body.phase1-ui .loading-title { font-size: 28px; color: var(--ink); position: relative; z-index: 1; }
body.phase1-ui .loading-subtitle { font-size: 14px; color: var(--ink-3); margin-top: 6px; position: relative; z-index: 1; }
body.phase1-ui .loading-progress { width: min(240px, 100%); height: 8px; margin: 18px auto 12px; border-radius: 999px; background: rgba(22,95,159,0.10); overflow: hidden; position: relative; z-index: 1; }
body.phase1-ui .loading-progress span { display: block; width: 42%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0b4f8a, #4e89c9, #9ac6f5); animation: fpLoad 1.4s ease-in-out infinite; }
body.phase1-ui .loading-msg { font-size: 13px; color: var(--ink-2); position: relative; z-index: 1; }

body.phase1-ui .quick-find-modal {
  max-width: 760px;
  overflow: hidden;
}
body.phase1-ui .quick-find-input-wrap { margin-bottom: 12px; }
body.phase1-ui .quick-find-input { height: 50px; border-radius: 18px; font-size: 15px; }
body.phase1-ui .quick-find-suggestions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
body.phase1-ui .quick-find-summary { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
body.phase1-ui .quick-find-results { display: grid; gap: 10px; max-height: 52vh; overflow: auto; padding-right: 2px; }
body.phase1-ui .quick-find-row {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(118,144,173,0.18);
  background: rgba(255,255,255,0.86);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
body.phase1-ui .quick-find-row:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(18,48,82,0.08); }
body.phase1-ui .quick-find-row-kind { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
body.phase1-ui .quick-find-row-label { font-weight: 600; color: var(--ink); }
body.phase1-ui .quick-find-row-meta { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
body.phase1-ui .quick-find-row-arrow { color: var(--accent); font-size: 18px; }
body.phase1-ui .quick-find-empty { padding: 28px 14px; text-align: center; color: var(--ink-3); border: 1px dashed rgba(118,144,173,0.28); border-radius: 18px; background: rgba(255,255,255,0.72); }
body.phase1-ui #quick-find-trigger { min-height: 34px; }

@keyframes fpPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 18px 40px rgba(17,80,143,0.26); }
  50% { transform: scale(1.05); box-shadow: 0 24px 50px rgba(17,80,143,0.34); }
}

@keyframes fpLoad {
  0% { transform: translateX(-10%); }
  50% { transform: translateX(140%); }
  100% { transform: translateX(-10%); }
}


/* ── v6.7.0 dark mode parity ─────────────────────────────── */
[data-theme="dark"] body.phase1-ui {
  --paper: #071221;
  --paper-2: #0f1a2c;
  --paper-3: #16243a;
  --white: rgba(12,20,34,0.86);
  --ink: #e7eef8;
  --ink-2: #bfd0e6;
  --ink-3: #90a5bf;
  --ink-4: #6d7f95;
  --accent: #5fa7e7;
  --accent-2: #8ec2ef;
  --accent-light: rgba(95,167,231,0.16);
  --gold: #e0b15c;
  --gold-light: rgba(224,177,92,0.14);
  --danger: #f07f7a;
  --danger-light: rgba(240,127,122,0.14);
  --info: #8ec2ef;
  --info-light: rgba(142,194,239,0.14);
  --purple: #9a8bf0;
  --purple-light: rgba(154,139,240,0.15);
  --border: rgba(143,168,198,0.20);
  --border-strong: rgba(170,192,219,0.28);
  --shadow: 0 16px 40px rgba(0,0,0,0.34), 0 4px 16px rgba(0,0,0,0.22);
  --shadow-lg: 0 28px 70px rgba(0,0,0,0.45);
  background: radial-gradient(circle at top, rgba(10,20,36,0.98), rgba(8,16,30,0.96) 36%, rgba(6,13,24,0.98) 100%);
  color: var(--ink);
}
[data-theme="dark"] body.phase1-ui::before {
  background:
    radial-gradient(circle at 10% 10%, rgba(64,119,184,0.16), transparent 26%),
    radial-gradient(circle at 85% 15%, rgba(92,143,206,0.12), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(26,58,104,0.24), transparent 30%);
}
[data-theme="dark"] body.phase1-ui .sidebar {
  background: linear-gradient(180deg, rgba(5, 11, 22, 0.94), rgba(9, 20, 36, 0.90));
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.42);
}
[data-theme="dark"] body.phase1-ui .sidebar-brand {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border-bottom-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] body.phase1-ui .topbar {
  background: rgba(11,20,34,0.84);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}
[data-theme="dark"] body.phase1-ui .card,
[data-theme="dark"] body.phase1-ui .stat-card,
[data-theme="dark"] body.phase1-ui .dash-widget,
[data-theme="dark"] body.phase1-ui .detail-hero,
[data-theme="dark"] body.phase1-ui .pipeline-col,
[data-theme="dark"] body.phase1-ui .modal,
[data-theme="dark"] body.phase1-ui .invoice-preview,
[data-theme="dark"] body.phase1-ui .focus-item,
[data-theme="dark"] body.phase1-ui .tax-category,
[data-theme="dark"] body.phase1-ui .exp-commitments,
[data-theme="dark"] body.phase1-ui .timeline-card,
[data-theme="dark"] body.phase1-ui .widget-shell,
[data-theme="dark"] body.phase1-ui #ai-panel,
[data-theme="dark"] body.phase1-ui .pipeline-card,
[data-theme="dark"] body.phase1-ui .exp-commit-row,
[data-theme="dark"] body.phase1-ui .tax-cat-item,
[data-theme="dark"] body.phase1-ui .activity-item,
[data-theme="dark"] body.phase1-ui .client-row,
[data-theme="dark"] body.phase1-ui .status-pill,
[data-theme="dark"] body.phase1-ui .rate-pill,
[data-theme="dark"] body.phase1-ui .btn-ghost,
[data-theme="dark"] body.phase1-ui .btn-danger,
[data-theme="dark"] body.phase1-ui .btn-purple,
[data-theme="dark"] body.phase1-ui .btn-secondary,
[data-theme="dark"] body.phase1-ui .focus-summary-card,
[data-theme="dark"] body.phase1-ui .focus-agenda-panel,
[data-theme="dark"] body.phase1-ui .focus-calendar-shell,
[data-theme="dark"] body.phase1-ui .focus-queue-card,
[data-theme="dark"] body.phase1-ui .focus-day-card,
[data-theme="dark"] body.phase1-ui .focus-calendar-item,
[data-theme="dark"] body.phase1-ui .focus-mini-stat,
[data-theme="dark"] body.phase1-ui .focus-summary-row,
[data-theme="dark"] body.phase1-ui .focus-agenda-empty {
  background: rgba(12,20,34,0.82) !important;
  border-color: rgba(150,175,205,0.14) !important;
  color: var(--ink);
}
[data-theme="dark"] body.phase1-ui .btn-ghost:hover,
[data-theme="dark"] body.phase1-ui .btn-danger:hover,
[data-theme="dark"] body.phase1-ui .btn-purple:hover,
[data-theme="dark"] body.phase1-ui .btn-secondary:hover,
[data-theme="dark"] body.phase1-ui .focus-day-card:hover,
[data-theme="dark"] body.phase1-ui .focus-calendar-item:hover {
  background: rgba(18,29,48,0.92) !important;
}
[data-theme="dark"] body.phase1-ui .form-input,
[data-theme="dark"] body.phase1-ui input[type="search"],
[data-theme="dark"] body.phase1-ui input[type="text"],
[data-theme="dark"] body.phase1-ui input[type="email"],
[data-theme="dark"] body.phase1-ui input[type="password"],
[data-theme="dark"] body.phase1-ui select,
[data-theme="dark"] body.phase1-ui textarea,
[data-theme="dark"] body.phase1-ui .focus-day-log {
  background: rgba(15,24,40,0.94) !important;
  border-color: rgba(145,168,198,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  color: var(--ink);
}
[data-theme="dark"] body.phase1-ui th {
  color: var(--ink-3);
  background: rgba(15,24,40,0.94);
}
[data-theme="dark"] body.phase1-ui td {
  background: rgba(9,17,30,0.56);
}
[data-theme="dark"] body.phase1-ui tr:hover td {
  background: rgba(17,29,48,0.88);
}
[data-theme="dark"] body.phase1-ui .pipeline-col {
  background: rgba(9,17,30,0.74) !important;
}
[data-theme="dark"] body.phase1-ui .detail-back,
[data-theme="dark"] body.phase1-ui .linklike-name,
[data-theme="dark"] body.phase1-ui .client-row-name,
[data-theme="dark"] body.phase1-ui .topbar-title,
[data-theme="dark"] body.phase1-ui .invoice-number,
[data-theme="dark"] body.phase1-ui .pipeline-card-value {
  color: var(--accent-2);
}
[data-theme="dark"] body.phase1-ui #save-indicator {
  background: rgba(8, 14, 24, 0.94) !important;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.34);
}
[data-theme="dark"] body.phase1-ui #login-screen {
  background: radial-gradient(circle at top, rgba(9,18,32,0.98), rgba(11,20,35,0.96) 34%, rgba(8,14,26,0.96) 100%) !important;
}
[data-theme="dark"] body.phase1-ui #login-screen .login-panel {
  background: rgba(12,20,34,0.82) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.42) !important;
}
[data-theme="dark"] body.phase1-ui #login-email,
[data-theme="dark"] body.phase1-ui #login-pass,
[data-theme="dark"] body.phase1-ui #signup-email,
[data-theme="dark"] body.phase1-ui #signup-pass {
  background: rgba(15,24,40,0.94) !important;
  border-color: rgba(145,168,198,0.18) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] body.phase1-ui .quick-find-empty,
[data-theme="dark"] body.phase1-ui .editable-row,
[data-theme="dark"] body.phase1-ui .access-area-item,
[data-theme="dark"] body.phase1-ui .access-client-item,
[data-theme="dark"] body.phase1-ui .task-card {
  background: rgba(12,20,34,0.82) !important;
  border-color: rgba(150,175,205,0.14) !important;
  color: var(--ink);
}


/* ── v6.10.0 dark mode polish ─────────────────────────────── */
[data-theme="dark"] body.phase1-ui .table-wrap,
[data-theme="dark"] body.phase1-ui table,
[data-theme="dark"] body.phase1-ui .project-kanban-mount,
[data-theme="dark"] body.phase1-ui .project-card-actions,
[data-theme="dark"] body.phase1-ui .project-card-meta,
[data-theme="dark"] body.phase1-ui .detail-health-signals,
[data-theme="dark"] body.phase1-ui .storage-status,
[data-theme="dark"] body.phase1-ui .foundation-row,
[data-theme="dark"] body.phase1-ui .foundation-issue-row,
[data-theme="dark"] body.phase1-ui .calendar-wrap,
[data-theme="dark"] body.phase1-ui .calendar-shell,
[data-theme="dark"] body.phase1-ui .calendar-day,
[data-theme="dark"] body.phase1-ui .calendar-agenda,
[data-theme="dark"] body.phase1-ui .calendar-summary {
  background: rgba(10,18,31,0.88) !important;
  border-color: rgba(150,175,205,0.14) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] body.phase1-ui .foundation-row.good,
[data-theme="dark"] body.phase1-ui .foundation-row.warn,
[data-theme="dark"] body.phase1-ui .foundation-row.neutral,
[data-theme="dark"] body.phase1-ui .foundation-issue-row.warn,
[data-theme="dark"] body.phase1-ui .foundation-issue-row.good {
  background: rgba(12,20,34,0.9) !important;
}
[data-theme="dark"] body.phase1-ui .modal-body [style*="background:white"],
[data-theme="dark"] body.phase1-ui .modal-body [style*="background: white"],
[data-theme="dark"] body.phase1-ui .modal-body [style*="background:#fff"],
[data-theme="dark"] body.phase1-ui .modal-body [style*="background: #fff"],
[data-theme="dark"] body.phase1-ui .modal-body [style*="background:rgb(255,255,255)"],
[data-theme="dark"] body.phase1-ui .modal-body [style*="background: rgb(255,255,255)"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="background:white"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="background: white"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="background:#fff"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="background: #fff"] {
  background: rgba(10,18,31,0.96) !important;
  color: var(--ink) !important;
  border-color: rgba(150,175,205,0.14) !important;
}
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="color:#555"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="color: #555"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="color:#666"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="color: #666"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="color:#444"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="color: #444"] {
  color: rgba(220,232,246,0.82) !important;
}
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="border-top:1px solid #e0e0e0"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="border-top: 1px solid #e0e0e0"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="border-top:1px solid #ddd"],
[data-theme="dark"] body.phase1-ui #preview-modal-body [style*="border-top: 1px solid #ddd"] {
  border-top-color: rgba(150,175,205,0.18) !important;
}

[data-theme="dark"] body.phase1-ui .topbar-tools-tray,
[data-theme="dark"] body.phase1-ui .proposal-attachment-chip,
[data-theme="dark"] body.phase1-ui .proposal-attachment-links a {
  background: rgba(15, 23, 38, 0.9);
  border-color: rgba(148, 163, 184, 0.2);
  color: #e5edf8;
}

[data-theme="dark"] body.phase1-ui .proposal-attachment-links a {
  color: #9ac6f5;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* Sortable table headers */
th[onclick] { transition: background 0.1s; }
th[onclick]:hover { background: var(--paper-2); }