:root {
  --cockpit-bg: #07111f;
  --cockpit-surface: rgba(14, 28, 46, 0.72);
  --cockpit-surface-strong: rgba(17, 34, 55, 0.9);
  --cockpit-line: rgba(143, 188, 229, 0.16);
  --cockpit-line-strong: rgba(143, 188, 229, 0.32);
  --cockpit-accent: #d7b66d;
  --cockpit-data: #6ec8d6;
  --cockpit-text: #edf4fb;
  --cockpit-muted: #91a7bf;
  --font-sans: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --bg: #0b0c0e;
  --bg-soft: #121315;
  --panel: #171719;
  --panel-soft: #1d1d20;
  --panel-hover: #252529;
  --line: #2c2c2e;
  --line-strong: #454449;
  --text: #f5f2ea;
  --muted: #a5a29c;
  --gold: #d3ad62;
  --gold-soft: rgba(211, 173, 98, 0.14);
  --green: #4caf85;
  --red: #ef7775;
  --blue: #8eaaa8;
  --purple: #9ea59d;
  --radius: 8px;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

body {
  min-width: 320px;
}

html {
  scrollbar-color: rgba(91, 156, 188, .52) rgba(4, 14, 25, .72);
  scrollbar-width: thin;
}

html::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track {
  background: rgba(4, 14, 25, .72);
}

html::-webkit-scrollbar-thumb {
  border: 2px solid rgba(4, 14, 25, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(122, 192, 217, .58), rgba(45, 96, 130, .72));
  background-clip: padding-box;
  box-shadow: inset 0 1px rgba(232, 250, 255, .13);
}

html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(145, 214, 234, .7), rgba(58, 116, 151, .82));
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.button,
.icon-button,
.segmented-button,
.nav-button,
.nav-link,
.role-option {
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--gold);
  color: #19150f;
  font-weight: 700;
}

.button-primary:hover {
  background: #e5bc69;
}

.button-secondary {
  background: #202637;
  color: var(--text);
  border-color: var(--line-strong);
}

.button-secondary:hover {
  background: #273047;
}

.button-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}

.button-ghost:hover {
  color: var(--gold);
  border-color: #5d4a27;
}

.icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1d2231;
  color: var(--muted);
}

.icon-button:hover {
  color: var(--gold);
  border-color: #5d4a27;
}

.text-input,
.select-input,
.text-area {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #121725;
  color: var(--text);
}

.text-input,
.select-input {
  min-height: 42px;
  padding: 0 12px;
}

.text-area {
  padding: 10px 12px;
  resize: vertical;
}

.compact {
  min-height: 38px;
}

.field-label,
.inline-label {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.field-label {
  margin-bottom: 8px;
}

.inline-label {
  margin-bottom: 6px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-head h2,
.panel-head h3 {
  margin: 0;
}

.panel-note {
  color: var(--muted);
  font-size: 12px;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}

.auth-wrap {
  width: min(100%, 560px);
}

.auth-brand {
  text-align: center;
  margin-bottom: 26px;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #564220;
  border-radius: 12px;
  background: #201c15;
  color: var(--gold);
  font-size: 22px;
  font-weight: 700;
}

.auth-brand h1 {
  margin: 14px 0 6px;
  font-size: 28px;
}

.auth-brand p {
  margin: 0;
  color: var(--muted);
}

.auth-card {
  padding: 28px;
}

.auth-card h2 {
  margin: 0 0 18px;
}

.section-label {
  margin-top: 18px;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.role-option {
  min-height: 84px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1a1f2d;
  color: #c8ccda;
  text-align: left;
}

.role-option strong,
.role-option span {
  display: block;
}

.role-option span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.role-option.is-active,
.role-option:hover {
  border-color: #694f24;
  background: #252116;
  color: #f5d58e;
}

.button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.button-row.single {
  grid-template-columns: 1fr;
}

.confirm-avatar {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  border: 2px solid #6a5125;
  border-radius: 50%;
  color: var(--gold);
  font-size: 32px;
}

.confirm-grid {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 10px;
  background: #121725;
}

.confirm-grid div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.confirm-grid span {
  color: var(--muted);
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px 14px 16px;
  border-right: 1px solid var(--line);
  background: rgba(12, 15, 22, 0.96);
  backdrop-filter: blur(16px);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 0 10px;
}

.sidebar-title {
  font-size: 19px;
  font-weight: 700;
}

.sidebar-subtitle,
.sidebar-user-meta {
  color: var(--muted);
  font-size: 12px;
}

.sidebar-nav {
  display: grid;
  gap: 6px;
}

.nav-button,
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.nav-button:hover,
.nav-link:hover {
  background: #1a2030;
  color: var(--text);
}

.nav-button.is-active,
.nav-link.is-active {
  border-color: #5b4723;
  background: #262115;
  color: var(--gold);
}

.nav-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: 700;
}

.nav-badge {
  position: absolute;
  right: 14px;
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 14px 10px 0;
  border-top: 1px solid var(--line);
}

.sidebar-user {
  font-weight: 600;
}

.main-shell {
  min-width: 0;
  padding: 30px 32px 44px;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

.view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.view-header h1 {
  margin: 0;
  font-size: 28px;
}

.view-header p {
  margin: 8px 0 0;
  color: var(--muted);
}

.header-actions {
  display: flex;
  gap: 10px;
}

.header-actions.wrap {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric-card {
  padding: 18px;
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.metric-tag {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
}

.metric-card strong {
  display: block;
  font-size: 28px;
}

.metric-card span {
  color: var(--muted);
}

.metric-card button {
  width: 100%;
  margin-top: 16px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.overview-panel,
.toolbar-panel,
.org-browser,
.detail-panel {
  padding: 22px;
}

.structure-summary {
  display: grid;
  gap: 12px;
}

.structure-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.structure-row small {
  color: var(--muted);
}

.structure-pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 12px;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.action-tile {
  min-height: 76px;
}

.stack-list {
  display: grid;
  gap: 10px;
}

.stack-item {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.stack-item strong,
.stack-item span,
.stack-item small {
  display: block;
}

.stack-item span,
.stack-item small {
  color: var(--muted);
}

.stack-item small {
  margin-top: 6px;
  font-size: 12px;
}

.toolbar-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  justify-content: space-between;
}

.toolbar-row + .toolbar-row {
  margin-top: 14px;
}

.toolbar-group {
  min-width: 120px;
}

.toolbar-group.grow {
  flex: 1 1 auto;
}

.segmented {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #111624;
}

.segmented-button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

.segmented-button.is-active {
  background: #1e2434;
  color: var(--gold);
}

.tab-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #121725;
  color: var(--muted);
}

.tab-button.is-active {
  border-color: #5c4926;
  background: #261f14;
  color: var(--gold);
}

.organization-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr);
  gap: 18px;
}

.organization-list {
  display: grid;
  gap: 10px;
}

.org-row {
  display: grid;
  grid-template-columns: 34px 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.org-row.is-selected {
  border-color: #6b5327;
  background: rgba(213, 172, 87, 0.08);
}

.org-row.drag-over {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(69, 184, 240, 0.45);
}

.org-toggle,
.row-action {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #171c28;
  color: var(--muted);
}

.org-toggle:hover,
.row-action:hover {
  color: var(--gold);
  border-color: #5d4a27;
}

.org-badge {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 700;
}

.org-badge.kind-ceo {
  background: rgba(213, 172, 87, 0.16);
  color: var(--gold);
}

.org-badge.kind-group {
  background: rgba(69, 184, 240, 0.16);
  color: var(--blue);
}

.org-badge.kind-area {
  background: rgba(45, 207, 128, 0.16);
  color: var(--green);
}

.org-badge.kind-unit {
  background: rgba(157, 122, 255, 0.16);
  color: var(--purple);
}

.org-main strong,
.detail-section strong {
  display: block;
}

.org-main span,
.detail-section span {
  color: var(--muted);
}

.org-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 12px;
}

.meta-chip.coordination {
  background: rgba(157, 122, 255, 0.18);
  color: #d3c4ff;
}

.detail-empty {
  color: var(--muted);
  line-height: 1.7;
}

.detail-head h3 {
  margin: 0 0 8px;
  font-size: 24px;
}

.detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.detail-grid {
  display: grid;
  gap: 12px;
}

.detail-grid.compact {
  gap: 10px;
}

.detail-grid div,
.detail-section {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.detail-grid span {
  display: block;
  color: var(--muted);
  margin-bottom: 4px;
}

.detail-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 7, 11, 0.76);
  backdrop-filter: blur(6px);
}

.modal-card {
  width: min(100%, 560px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #151a26;
  box-shadow: var(--shadow);
}

.modal-card.wide {
  width: min(100%, 980px);
}

.form-grid {
  display: grid;
  gap: 10px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  margin-top: 6px;
}

.approval-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.approval-item {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.approval-item.pending {
  border-color: #6b5327;
}

.approval-item.approved {
  border-color: rgba(45, 207, 128, 0.3);
}

.approval-item.rejected {
  border-color: rgba(239, 91, 99, 0.3);
}

.approval-item strong,
.approval-item span,
.approval-item small {
  display: block;
}

.approval-item span,
.approval-item small {
  color: var(--muted);
}

.approval-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 40;
  max-width: min(360px, calc(100vw - 44px));
  padding: 14px 16px;
  border: 1px solid #5d4a27;
  border-radius: 10px;
  background: #272014;
  color: #f4d692;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-grid,
  .organization-layout,
  .approval-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .auth-card,
  .overview-panel,
  .toolbar-panel,
  .org-browser,
  .detail-panel {
    padding: 18px;
  }

  .auth-wrap {
    width: 100%;
  }

  .role-grid,
  .action-grid,
  .button-row,
  .detail-actions {
    grid-template-columns: 1fr;
  }

  .app-shell {
    display: block;
    padding-bottom: 82px;
  }

  .sidebar {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    height: auto;
    padding: 8px;
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .sidebar-brand,
  .sidebar-footer {
    display: none;
  }

  .sidebar-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .nav-button,
  .nav-link {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 60px;
    padding: 6px 4px;
    text-align: center;
    font-size: 11px;
  }

  .nav-badge {
    right: 6px;
    top: 6px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
  }

  .main-shell {
    padding: 22px 14px 24px;
  }

  .view-header,
  .toolbar-row {
    display: grid;
  }

  .header-actions {
    flex-wrap: wrap;
  }

  .org-row {
    grid-template-columns: 34px 40px minmax(0, 1fr);
  }

  .org-meta,
  .row-action {
    display: none;
  }
}

/* Phase one: data-backed role workspaces. */
.phase-body { min-height: 100vh; background: #0b0d12; }
.phase-app { min-height: 100vh; }
.phase-auth-shell { min-height: 100vh; display: grid; place-items: center; gap: 22px; padding: 24px; background: radial-gradient(circle at 80% 10%, rgba(213, 172, 87, .14), transparent 28%), #0b0d12; }
.phase-auth-brand { width: min(100%, 440px); text-align: center; }
.phase-auth-brand .brand-mark { margin-bottom: 16px; }
.phase-auth-brand p, .phase-auth-brand span { display: block; color: var(--muted); }
.phase-auth-brand h1 { margin: 8px 0; font-size: 30px; }
.phase-auth-card { width: min(100%, 440px); display: grid; gap: 14px; padding: 24px; }
.phase-auth-card label, .phase-form label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.phase-auth-card input, .phase-form input, .phase-form select, .phase-progress-form input { min-height: 40px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; background: #111624; color: var(--text); }
.phase-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); }
.phase-sidebar { display: flex; flex-direction: column; padding: 22px 14px; border-right: 1px solid var(--line); background: #0d1017; }
.phase-logo { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #5d4a27; border-radius: 10px; background: #211b12; color: var(--gold); font-weight: 700; font-size: 22px; }
.phase-user-summary { display: grid; gap: 5px; margin: 28px 8px; }
.phase-user-summary span, .phase-user-summary small { color: var(--muted); }
.phase-nav { display: grid; gap: 7px; }
.phase-nav button, .phase-logout { min-height: 42px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; }
.phase-nav button.is-active, .phase-nav button:hover { border-color: #5d4a27; background: #211b12; color: var(--gold); }
.phase-logout { margin-top: auto; border-color: var(--line); }
.phase-main { min-width: 0; padding: 28px; }
.phase-header { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 22px; }
.phase-header p { margin: 0 0 8px; color: var(--muted); }
.phase-header h1 { margin: 0; font-size: 30px; }
.phase-scope { padding: 8px 12px; border: 1px solid #5d4a27; border-radius: 999px; color: var(--gold); background: var(--gold-soft); white-space: nowrap; }
.phase-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.phase-metric-grid article { min-height: 108px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #151923; }
.phase-metric-grid span { display: block; color: var(--muted); margin-bottom: 12px; }
.phase-metric-grid strong { font-size: 30px; color: var(--gold); }
.phase-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.phase-panel { padding: 20px; }
.phase-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.phase-panel-head h2 { margin: 0; font-size: 18px; }
.phase-panel-head span { color: var(--muted); font-size: 13px; }
.phase-actions { display: grid; gap: 18px; }
.phase-form { display: grid; gap: 12px; }
.phase-task-list { display: grid; gap: 10px; }
.phase-task-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: 14px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
.phase-task-row strong, .phase-task-row span { display: block; }
.phase-task-row span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.phase-task-progress > div { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.phase-task-progress i { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.phase-progress-form { display: flex; gap: 8px; }
.phase-progress-form input { width: 64px; }
.phase-empty, .phase-error { padding: 28px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); text-align: center; }
.phase-error { margin: 40px auto; width: min(100% - 32px, 620px); }
.phase-org-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.phase-org-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.phase-org-list span, .phase-org-list small { color: var(--muted); }
.toast.is-error { border-color: rgba(239, 91, 99, .5); background: #2a171b; color: #ffadb2; }

.button-danger {
  border-color: rgba(239, 91, 99, .38);
  background: rgba(239, 91, 99, .1);
  color: #ffadb2;
}

.button-danger:hover { background: rgba(239, 91, 99, .18); }

.phase-form textarea {
  width: 100%;
  resize: vertical;
}

.organization-tree,
.organization-tree ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.organization-tree ul { margin: 10px 0 0 18px; }

.organization-node details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .018);
}

.organization-node summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  cursor: pointer;
  color: var(--muted);
}

.organization-node-name { display: flex; align-items: center; gap: 10px; color: var(--text); }
.organization-node-name small { color: var(--gold); }
.organization-node-actions { display: flex; gap: 8px; align-items: center; padding: 0 14px 12px; flex-wrap: wrap; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { min-width: 118px; }

.people-list,
.classification-list,
.position-list { display: grid; gap: 12px; }

.person-card,
.classification-list article,
.position-list details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #151923;
}

.person-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px; }
.person-card strong, .person-card span, .person-card small { display: block; }
.person-card span, .person-card small, .classification-list span { color: var(--muted); margin-top: 5px; }
.person-card-actions { display: flex; align-items: start; }
.access-details { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; }
.access-details summary, .position-list summary { cursor: pointer; color: var(--gold); }

.capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.capability-option { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
.capability-option:has(input:checked) { border-color: #796137; color: var(--text); background: var(--gold-soft); }
.phase-form fieldset { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.phase-form legend { color: var(--gold); padding: 0 5px; }

.classification-grid,
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.classification-list article { display: grid; gap: 8px; padding: 15px; }
.position-list details { padding: 14px; }
.position-list form { margin-top: 14px; }
.people-create-area { margin-top: 18px; width: min(100%, 360px); }
.phase-task-row.is-waiting { grid-template-columns: minmax(0, 1fr) 130px minmax(240px, auto); border-color: rgba(239, 91, 99, .34); }
.phase-reassign-form { display: flex; gap: 8px; }

@media (max-width: 980px) {
  .classification-grid, .archive-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .person-card, .phase-task-row.is-waiting { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .inline-form, .phase-reassign-form { display: grid; grid-template-columns: 1fr; width: 100%; }
  .inline-form input, .inline-form select { width: 100%; }
}

/* Keep long operational forms usable on short desktop and mobile screens. */
.phase-dialog-card.phase-dialog-scrollable {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: hidden;
}

.phase-dialog-scrollable > header {
  padding: 20px 22px 15px;
  margin: 0;
  border-bottom: 1px solid rgba(160, 194, 235, .12);
}

.phase-dialog-scrollable > form {
  min-height: 0;
  margin: 0;
  padding: 18px 22px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.phase-dialog-scrollable .phase-dialog-actions {
  position: sticky;
  bottom: -16px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 10px -22px -16px;
  padding: 14px 22px;
  border-top: 1px solid rgba(160, 194, 235, .12);
  background: rgba(8, 20, 36, .94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Task rows respond to their own list width, without changing desktop navigation. */

.task-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: #91a5ba;
  font-size: 11px;
  line-height: 1.5;
}

.task-row-status { color: #a8ceff; }
.task-lifecycle-row.is-overdue .task-row-status { color: #f39789; }
.task-lifecycle-row.is-done .task-row-status { color: #85cda8; }
.task-row-progress { min-width: 0; }
.task-row-progress > span { margin-bottom: 7px; white-space: nowrap; }
.task-row-actions { align-items: center; }
.task-row-actions .button,
.task-row-actions .workbench-record-trigger { white-space: nowrap; }

.phase-message-panel .phase-panel-head > div { min-width: 0; }
.phase-message-edit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.phase-message-selection { display: grid; gap: 12px; }
.phase-message-item {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 14px;
}

.phase-message-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #91a7bf;
  font-size: 12px;
  white-space: nowrap;
}

.phase-message-select input { accent-color: #2d8cff; }
.phase-message-selection-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(160, 194, 235, .12);
  color: #91a7bf;
  font-size: 12px;
}

.phase-message-selection-actions.is-editing {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 14px 0 2px;
  background: linear-gradient(180deg, transparent, rgba(8, 18, 35, .94) 36%);
}

.drawer-relocate { width: 100%; margin-top: 16px; }

.phase-workspace-trigger {
  border-color: rgba(45, 140, 255, .62);
  background: linear-gradient(135deg, rgba(45, 140, 255, .28), rgba(16, 75, 154, .18)), rgba(7, 29, 57, .82);
  color: #eaf5ff;
  box-shadow: inset 0 1px rgba(203, 232, 255, .16), 0 10px 24px rgba(10, 76, 159, .2);
}

.phase-workspace-trigger:hover {
  border-color: rgba(89, 173, 255, .92);
  background: linear-gradient(135deg, rgba(45, 140, 255, .42), rgba(16, 75, 154, .26)), rgba(7, 29, 57, .9);
  box-shadow: inset 0 1px rgba(218, 240, 255, .22), 0 14px 28px rgba(10, 76, 159, .28);
}

@media (max-width: 680px) {
  .phase-dialog-card.phase-dialog-scrollable { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .phase-dialog-scrollable > header { padding-inline: 16px; }
  .phase-dialog-scrollable > form { padding-inline: 16px; }
  .phase-dialog-scrollable .phase-dialog-actions { bottom: -16px; margin-inline: -16px; padding-inline: 16px; }
  .phase-dialog-scrollable .phase-dialog-actions .button { flex: 1; }
  .phase-message-item { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .phase-message-edit-actions { justify-content: flex-start; }
  .phase-message-select, .phase-message-item .phase-record-open { grid-column: 2; justify-self: start; }
  .phase-message-selection-actions { align-items: stretch; flex-direction: column; }
}

@media (max-width: 980px) { .phase-shell { grid-template-columns: 1fr; } .phase-sidebar { position: static; min-height: auto; flex-direction: row; gap: 16px; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); } .phase-user-summary { margin: 0; } .phase-nav { margin-left: auto; display: flex; } .phase-logout { margin-top: 0; } .phase-layout { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .phase-main { padding: 18px 14px; } .phase-sidebar { align-items: start; flex-wrap: wrap; } .phase-nav { order: 3; width: 100%; margin-left: 0; } .phase-nav button { flex: 1; } .phase-header { display: grid; } .phase-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .phase-task-row { grid-template-columns: 1fr; } }

/* Organization-first phase layout. */
.phase-auth-shell {
  align-content: center;
  background: #0b0c11;
}

.phase-auth-brand .brand-mark {
  width: 58px;
  height: 58px;
  margin-inline: auto;
  border-color: rgba(215, 171, 76, .32);
  background: #201a10;
  color: #dfa93e;
}

.phase-identity-shell { grid-template-rows: auto auto; }
.phase-identity-card {
  width: min(100%, 480px);
  padding: 30px;
  border-color: rgba(255, 255, 255, .075);
  background: #14151e;
  animation: phase-rise .36s ease-out both;
}
.phase-identity-card h1 { margin: 0 0 24px; text-align: center; font-size: 22px; }
.phase-identity-avatar {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 20px;
  border: 2px solid rgba(215, 171, 76, .44);
  border-radius: 50%;
  background: #1a1b26;
  color: #dfae49;
  font-size: 32px;
  font-weight: 700;
}
.phase-identity-card dl { margin: 0; padding: 12px 16px; border-radius: 8px; background: #171822; }
.phase-identity-card dl div,
.drawer-facts div { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 38px; }
.phase-identity-card dt,
.drawer-facts dt { color: var(--muted); font-size: 13px; }
.phase-identity-card dd,
.drawer-facts dd { margin: 0; color: var(--text); text-align: right; }
.phase-identity-actions,
.phase-dialog-actions,
.drawer-actions { display: flex; gap: 10px; margin-top: 24px; }
.phase-identity-actions .button,
.phase-dialog-actions .button { flex: 1; }

.phase-sidebar { background: #0d0e14; }
.phase-logo { color: #e1ae47; }
.phase-nav button,
.phase-logout { position: relative; min-height: 44px; }
.phase-nav button.is-active::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -14px;
  width: 2px;
  background: var(--gold);
  content: "";
}
.phase-organization-header { margin-bottom: 16px; }
.phase-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.phase-topbar-actions { display: flex; align-items: center; gap: 8px; }
.organization-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #13141c;
}
.organization-tabs button {
  flex: 1;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}
.organization-tabs button:hover,
.organization-tabs button.is-active { border-color: rgba(215, 171, 76, .2); background: #211e18; color: var(--gold); }
.organization-panel { min-height: 440px; }
.organization-node details { overflow: hidden; transition: border-color .2s ease, background .2s ease; }
.organization-node details[open] { border-color: rgba(255, 255, 255, .1); background: #15161f; }
.organization-node summary { min-height: 54px; }
.organization-node-name b { font-size: 15px; }
.organization-node-count { color: var(--muted); font-size: 12px; }
.organization-node-actions { padding: 0 14px 12px; border-top: 1px solid rgba(255,255,255,.045); padding-top: 10px; }
.organization-members { display: grid; gap: 7px; padding: 0 14px 12px 30px; }
.organization-member {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 6px;
  background: #191a24;
  color: var(--text);
  text-align: left;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.organization-member:hover { border-color: rgba(215,171,76,.3); background: #201f25; transform: translateX(2px); }
.organization-member strong,
.organization-member small { display: block; }
.organization-member small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.organization-member-avatar {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #232331;
  color: #d8b15b;
  font-size: 13px;
}

.phase-drawer {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  width: min(100%, 420px);
  height: 100dvh;
  padding: 24px;
  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,.1);
  background: #14151d;
  box-shadow: -18px 0 48px rgba(0, 0, 0, .28);
  animation: phase-drawer-in .28s ease-out both;
}
.phase-drawer header,
.phase-dialog header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.phase-drawer header span,
.phase-dialog header span { color: var(--gold); font-size: 12px; }
.phase-drawer h2,
.phase-dialog h2 { margin: 5px 0 0; font-size: 22px; }
.drawer-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}
.drawer-close:hover { color: var(--gold); }
.drawer-facts { display: grid; gap: 6px; margin: 26px 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #191a23; }
.drawer-person { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.drawer-person .phase-identity-avatar { width: 52px; height: 52px; margin: 0; font-size: 18px; }
.drawer-person strong,
.drawer-person span { display: block; }
.drawer-person span { margin-top: 4px; color: var(--muted); font-size: 13px; }
.drawer-details { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.drawer-details summary { cursor: pointer; color: var(--gold); }
.drawer-details form { margin-top: 14px; }
.drawer-danger { width: 100%; margin-top: 24px; }
.phase-modal-backdrop {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 5, 8, .7);
  animation: phase-fade .18s ease-out both;
}
.phase-dialog { width: min(100%, 480px); padding: 24px; border-color: rgba(255,255,255,.1); background: #171820; animation: phase-rise .22s ease-out both; }
.phase-dialog p { margin: 24px 0 0; color: var(--muted); line-height: 1.7; }
.phase-dialog form { margin-top: 24px; }
.phase-dialog-member {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100dvh - 40px);
}
.phase-dialog-member .organization-member-form {
  align-content: start;
  min-height: 0;
  padding: 0 4px 4px 0;
  overflow-y: auto;
}
.phase-dialog-member .organization-member-form > .button {
  position: sticky;
  bottom: 0;
  z-index: 1;
  min-height: 42px;
  box-shadow: 0 -12px 18px #171820;
}

@keyframes phase-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes phase-drawer-in { from { transform: translateX(26px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
@keyframes phase-fade { from { opacity: 0; } to { opacity: 1; } }

.workbench-shell { min-width: 0; }
.workbench-tabs { display: flex; gap: 7px; margin: 0 0 22px; padding: 5px; overflow-x: auto; border: 1px solid rgba(226, 232, 225, 0.11); border-radius: 8px; background: rgba(9, 14, 19, 0.58); box-shadow: inset 0 1px rgba(255,255,255,.04); scrollbar-width: thin; }
.workbench-tabs button { position: relative; min-width: 76px; padding: 10px 14px; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font: inherit; font-size: 13px; font-weight: 650; letter-spacing: 0; cursor: pointer; transition: color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.workbench-tabs button:hover { color: var(--text); background: rgba(255,255,255,.05); transform: translateY(-1px); }
.workbench-tabs button.is-active { color: #111417; background: linear-gradient(135deg, #e2c77e, var(--gold)); box-shadow: 0 8px 20px rgba(201, 164, 89, .18), inset 0 1px rgba(255,255,255,.42); }
.workbench-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.phase-workspace-metrics > article.is-alert strong { color: #e6a05e; }
.phase-workspace-metrics > article.is-pushed strong { color: var(--cyan); }
.phase-workspace-metrics > article small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.workbench-digest-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .85fr); gap: 18px; align-items: start; }
.workbench-digest-side { display: grid; gap: 18px; }
.workbench-digest-project-list,
.workbench-digest-exception-list { display: grid; gap: 0; margin-top: 14px; }
.workbench-digest-project { display: grid; grid-template-columns: minmax(0, 1fr) 104px 82px max-content; gap: 13px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(226, 232, 225, .09); }
.workbench-digest-project:first-child { padding-top: 0; border-top: 0; }
.workbench-digest-project-main strong { display: block; font-size: 14px; }
.workbench-digest-project-main span,
.workbench-digest-exception span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.workbench-digest-progress { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(226, 232, 225, .11); }
.workbench-digest-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #88cfbb); }
.workbench-digest-freshness { color: #90cfae; font-size: 12px; text-align: right; white-space: nowrap; }
.workbench-digest-project.is-watch .workbench-digest-freshness { color: #e6c270; }
.workbench-digest-project.is-alert .workbench-digest-freshness { color: #e68b78; }
.workbench-digest-exception { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(226, 232, 225, .09); }
.workbench-digest-exception:first-child { padding-top: 0; border-top: 0; }
.workbench-digest-exception strong { display: block; font-size: 13px; }
.workbench-digest-exception.is-watch strong { color: #e5c77c; }
.workbench-digest-exception.is-alert strong { color: #e99b88; }
.workbench-deal-brief dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 0; }
.workbench-deal-brief dl div { padding: 12px 10px; border: 1px solid rgba(226, 232, 225, .08); border-radius: 6px; background: rgba(255, 255, 255, .025); }
.workbench-deal-brief dt { color: var(--muted); font-size: 11px; }
.workbench-deal-brief dd { margin: 8px 0 0; color: var(--text); font: 650 20px/1 "Segoe UI", sans-serif; }
.workbench-digest-empty { margin: 16px 0 0; }
.workbench-record-list { display: grid; gap: 10px; }
.workbench-record, .workbench-feed-item { padding: 14px 0; border-top: 1px solid rgba(226, 232, 225, 0.09); animation: workbench-record-in 420ms var(--ease-out) both; }
.workbench-record:first-child, .workbench-feed-item:first-child { border-top: 0; padding-top: 0; }
.workbench-record:last-child, .workbench-feed-item:last-child { padding-bottom: 0; }
.workbench-record-head, .workbench-feed-item > div { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.workbench-record strong, .workbench-feed-item strong { display: block; color: var(--text); font-size: 14px; line-height: 1.4; }
.workbench-record span, .workbench-feed-item span, .workbench-record time { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.workbench-record time { margin: 0; white-space: nowrap; }
.workbench-record p, .workbench-feed-item p { margin: 9px 0 0; color: #b5c0c9; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.workbench-record.is-risk, .workbench-feed-item.is-risk { border-left: 2px solid #e4a65e; padding-left: 12px; }
.workbench-record.is-pending { border-left: 2px solid var(--cyan); padding-left: 12px; }
.workbench-record details { margin-top: 11px; }
.workbench-record summary { color: var(--cyan); font-size: 12px; cursor: pointer; }
.workbench-responsibility-transfer { margin-top: 11px; }
.workbench-responsibility-transfer summary { color: var(--gold); font-size: 12px; cursor: pointer; }
.workbench-responsibility-transfer .workbench-inline-form > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.workbench-inline-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(226, 232, 225, 0.08); }
.workbench-inline-form label, .workbench-create-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.workbench-inline-form label:last-of-type { grid-column: 1 / -1; }
.workbench-inline-form .button { width: max-content; min-width: 108px; align-self: end; }
.workbench-inline-form .capability-option { display: flex; align-items: center; gap: 7px; grid-column: 1 / -1; }
.workbench-inline-form .capability-option input { width: auto; }
.workbench-create-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-bottom: 17px; padding: 0 0 17px; border-bottom: 1px solid rgba(226, 232, 225, 0.1); }
.workbench-create-form label:nth-last-of-type(1) { grid-column: 1 / -1; }
.workbench-create-form .button { width: max-content; min-width: 108px; }
.workbench-review-note { color: var(--cyan) !important; }
@keyframes workbench-record-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 980px) {
  .workbench-two-column { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .workbench-tabs { margin-inline: -2px; }
  .workbench-tabs button { min-width: 68px; padding-inline: 12px; }
  .workbench-inline-form, .workbench-create-form { grid-template-columns: 1fr; }
  .workbench-inline-form label:last-of-type, .workbench-create-form label:nth-last-of-type(1) { grid-column: auto; }
  .workbench-record-head, .workbench-feed-item > div { display: grid; }
  .workbench-record time { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .phase-identity-card,
  .phase-drawer,
  .phase-modal-backdrop,
  .phase-dialog { animation: none; }
  .organization-member { transition: none; }
}

@media (max-width: 680px) {
  .phase-header-actions { justify-content: flex-start; }
  .phase-header-actions .button { flex: 1; }
  .phase-scope { overflow: hidden; text-overflow: ellipsis; }
  .organization-tabs { overflow-x: auto; }
  .organization-tabs button { min-width: 96px; }
  .organization-node summary { align-items: start; padding-block: 13px; }
  .organization-node-count { white-space: nowrap; }
  .organization-members { padding-left: 14px; }
  .phase-drawer { width: 100%; padding: 20px; }
  .phase-identity-card { padding: 22px; }
  .phase-identity-actions,
  .phase-dialog-actions,
  .drawer-actions { flex-direction: column; }
}

.wb-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(41, 48, 78, 0.22), transparent 24%),
    radial-gradient(circle at top right, rgba(87, 64, 22, 0.2), transparent 20%),
    #090a10;
}

.wb-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
}

.wb-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 18px 8px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(15, 17, 24, 0.98), rgba(11, 12, 18, 0.98));
}

.wb-brand,
.wb-rail-link {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(213, 172, 87, 0.22);
  background: linear-gradient(180deg, rgba(55, 42, 22, 0.82), rgba(32, 26, 18, 0.82));
  color: var(--gold);
  font-size: 24px;
  font-weight: 700;
}

.wb-rail-nav {
  display: grid;
  gap: 12px;
}

.wb-rail-button {
  width: 56px;
  height: 58px;
  padding: 6px 0;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  color: #5d6378;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wb-rail-button:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #d5d8e5;
}

.wb-rail-button.is-active {
  border-color: rgba(213, 172, 87, 0.28);
  background: linear-gradient(180deg, rgba(57, 43, 21, 0.74), rgba(30, 24, 16, 0.74));
  color: var(--gold);
}

.wb-rail-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.wb-rail-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wb-rail-label {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.wb-rail-footer {
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.wb-rail-link {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 16px;
}

.wb-main {
  min-width: 0;
  padding: 28px 28px 44px;
}

.wb-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.wb-hero-copy h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0.01em;
}

.wb-hero-copy p {
  margin: 8px 0 0;
  color: #787d91;
  font-size: 15px;
}

.wb-hero-action,
.wb-mini-action,
.wb-status-pill,
.wb-inline-link {
  --tone-color: var(--gold);
  --tone-soft: rgba(213, 172, 87, 0.14);
  --tone-border: rgba(213, 172, 87, 0.22);
}

.tone-gold {
  --tone-color: #d5ac57;
  --tone-soft: rgba(213, 172, 87, 0.14);
  --tone-border: rgba(213, 172, 87, 0.24);
}

.tone-red {
  --tone-color: #ef5b63;
  --tone-soft: rgba(239, 91, 99, 0.12);
  --tone-border: rgba(239, 91, 99, 0.24);
}

.tone-green {
  --tone-color: #2dcf80;
  --tone-soft: rgba(45, 207, 128, 0.12);
  --tone-border: rgba(45, 207, 128, 0.24);
}

.tone-blue {
  --tone-color: #45b8f0;
  --tone-soft: rgba(69, 184, 240, 0.12);
  --tone-border: rgba(69, 184, 240, 0.24);
}

.tone-purple {
  --tone-color: #9d7aff;
  --tone-soft: rgba(157, 122, 255, 0.12);
  --tone-border: rgba(157, 122, 255, 0.24);
}

.tone-amber {
  --tone-color: #d8a63b;
  --tone-soft: rgba(216, 166, 59, 0.12);
  --tone-border: rgba(216, 166, 59, 0.24);
}

.tone-orange {
  --tone-color: #ff8a2b;
  --tone-soft: rgba(255, 138, 43, 0.12);
  --tone-border: rgba(255, 138, 43, 0.24);
}

.tone-pink {
  --tone-color: #f178b6;
  --tone-soft: rgba(241, 120, 182, 0.12);
  --tone-border: rgba(241, 120, 182, 0.24);
}

.tone-slate {
  --tone-color: #9096a8;
  --tone-soft: rgba(144, 150, 168, 0.1);
  --tone-border: rgba(144, 150, 168, 0.18);
}

.wb-hero-action {
  min-width: 144px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--tone-border);
  border-radius: 999px;
  background: var(--tone-soft);
  color: var(--tone-color);
  font-weight: 700;
}

.wb-mini-action {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--tone-border);
  border-radius: 999px;
  background: var(--tone-soft);
  color: var(--tone-color);
  font-size: 13px;
  font-weight: 700;
}

.wb-mini-action:hover,
.wb-hero-action:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.wb-view {
  display: none;
}

.wb-view.is-active {
  display: block;
}

.wb-panel {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(24, 26, 38, 0.96), rgba(20, 22, 32, 0.96));
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.24);
}

.wb-block {
  padding: 20px;
  margin-bottom: 18px;
}

.wb-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.wb-panel-head h2 {
  margin: 0;
  font-size: 18px;
}

.wb-stat-grid,
.wb-finance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.wb-stat-card,
.wb-finance-card {
  min-height: 144px;
  padding: 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(28, 30, 42, 0.94), rgba(22, 24, 34, 0.94));
}

.wb-finance-card {
  min-height: 104px;
}

.wb-stat-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--tone-soft);
  color: var(--tone-color);
  font-weight: 700;
  margin-bottom: 12px;
}

.wb-stat-value,
.wb-panorama-value {
  display: block;
  font-size: 20px;
  color: var(--text);
  margin-bottom: 6px;
}

.wb-stat-value {
  font-size: 42px;
  line-height: 1;
  color: var(--tone-color);
}

.wb-stat-label,
.wb-mini-label {
  display: block;
  color: #787d91;
}

.wb-delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tone-color);
  font-weight: 700;
}

.wb-delta small {
  color: #666d83;
  font-weight: 400;
}

.wb-project-list,
.wb-compact-list,
.wb-task-list,
.wb-decision-list {
  display: grid;
  gap: 12px;
}

.wb-project-row,
.wb-compact-row {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  text-align: left;
}

.wb-project-row {
  grid-template-columns: minmax(0, 1fr) 134px;
  padding: 16px 18px;
}

.wb-compact-row {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 16px 18px;
}

.wb-project-row:hover,
.wb-compact-row:hover,
.wb-chip-button:hover,
.wb-task-row:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.wb-project-title,
.wb-task-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.wb-project-title strong,
.wb-task-title strong {
  font-size: 18px;
}

.wb-project-region,
.wb-project-meta,
.wb-compact-row span,
.wb-task-meta,
.wb-task-empty,
.wb-decision-copy label,
.wb-step-block label {
  color: #70778b;
}

.wb-project-dot,
.wb-group-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--tone-color);
  flex: 0 0 auto;
}

.wb-project-side,
.wb-task-side {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.wb-progress,
.wb-funnel-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.wb-progress-fill,
.wb-funnel-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tone-color);
}

.wb-progress-value {
  color: #666d83;
  font-size: 12px;
}

.wb-compact-row strong,
.wb-compact-row b {
  font-size: 16px;
}

.wb-compact-row.tone-red b,
.wb-compact-row.tone-red strong {
  color: #ef8e94;
}

.wb-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.wb-dual-grid-panorama {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.wb-funnel-head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.wb-funnel-stat {
  text-align: center;
}

.wb-funnel-stat strong {
  display: block;
  font-size: 20px;
  margin-bottom: 4px;
  color: var(--tone-color);
}

.wb-funnel-bars {
  display: grid;
  gap: 14px;
}

.wb-funnel-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.wb-funnel-row label {
  color: #8a90a5;
}

.wb-funnel-tags {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.wb-funnel-tags span {
  color: var(--tone-color);
}

.wb-chart,
.wb-chart-large {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(16, 18, 28, 0.42), rgba(16, 18, 28, 0.12)),
    rgba(255, 255, 255, 0.01);
}

.wb-chart {
  padding-top: 12px;
}

.wb-chart-svg {
  width: 100%;
  display: block;
}

.wb-chart-grid {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-dasharray: 4 6;
}

.wb-chart-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wb-chart-compare {
  fill: none;
  stroke: rgba(130, 138, 164, 0.62);
  stroke-width: 2;
  stroke-dasharray: 6 8;
}

.wb-chart-y-label,
.wb-chart-x-label {
  fill: #5f667b;
  font-size: 12px;
}

.wb-decision-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.wb-summary-pill,
.wb-status-pill,
.wb-tiny-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--tone-border);
  background: var(--tone-soft);
  color: var(--tone-color);
}

.wb-summary-pill strong {
  font-size: 16px;
}

.wb-tiny-pill {
  padding: 6px 10px;
  color: var(--gold);
  border-color: rgba(213, 172, 87, 0.22);
  background: rgba(213, 172, 87, 0.1);
}

.wb-decision-card {
  border-radius: 22px;
}

.wb-decision-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.wb-decision-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.wb-decision-title h2 {
  margin: 0;
  font-size: 18px;
}

.wb-decision-copy {
  display: grid;
  gap: 18px;
}

.wb-decision-copy p,
.wb-modal-stack p {
  margin: 8px 0 0;
  line-height: 1.75;
  color: #c1c5d3;
}

.wb-decision-copy .emphasis {
  color: #f4f6fc;
  font-weight: 700;
}

.wb-decision-meta {
  display: flex;
  gap: 18px;
  color: #70778b;
  margin-top: 18px;
}

.wb-step-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.wb-step-block ol {
  margin: 12px 0 0;
  padding-left: 22px;
  color: #b8bdcc;
  display: grid;
  gap: 10px;
}

.wb-decision-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.wb-decision-actions.compact {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-start;
}

.wb-decision-button {
  min-height: 42px;
  border: 1px solid var(--tone-border);
  border-radius: 12px;
  background: var(--tone-soft);
  color: var(--tone-color);
  font-weight: 700;
}

.wb-chip-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wb-chip-button {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: #bcc2d2;
}

.wb-command-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px;
  gap: 12px;
}

.wb-command-input {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.wb-command-submit {
  min-height: 52px;
  border: 1px solid rgba(213, 172, 87, 0.22);
  border-radius: 14px;
  background: rgba(213, 172, 87, 0.55);
  color: #221c12;
  font-weight: 700;
}

.wb-insight {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(69, 184, 240, 0.16);
  border-radius: 16px;
  background: rgba(69, 184, 240, 0.08);
}

.wb-insight strong {
  display: block;
  margin-bottom: 6px;
}

.wb-insight p {
  margin: 0;
  color: #cbd5ea;
}

.wb-insight-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.wb-insight-tags span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #bfe7fa;
  font-size: 12px;
}

.wb-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tone-color);
  margin-bottom: 14px;
}

.wb-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.wb-task-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.wb-inline-link {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--tone-border);
  border-radius: 10px;
  background: var(--tone-soft);
  color: var(--tone-color);
  font-size: 12px;
}

.wb-modal-card {
  border-radius: 20px;
  border-color: rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(24, 27, 39, 0.98), rgba(19, 22, 33, 0.98));
}

.wb-modal-stack {
  display: grid;
  gap: 14px;
}

.wb-modal-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: #c1c7d7;
}

.wb-modal-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wb-modal-metrics div {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.03);
}

.wb-modal-metrics span {
  display: block;
  color: #70778b;
  margin-bottom: 4px;
}

@media (max-width: 1180px) {
  .wb-stat-grid,
  .wb-finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wb-dual-grid,
  .wb-dual-grid-panorama {
    grid-template-columns: 1fr;
  }

  .wb-task-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .wb-shell {
    display: block;
    padding-bottom: 86px;
  }

  .wb-rail {
    position: fixed;
    inset: auto 0 0;
    z-index: 20;
    height: auto;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  .wb-brand {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 22px;
  }

  .wb-rail-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    gap: 6px;
  }

  .wb-rail-button {
    width: 58px;
  }

  .wb-rail-footer {
    display: none;
  }

  .wb-main {
    padding: 20px 14px 24px;
  }

  .wb-hero,
  .wb-panel-head,
  .wb-command-entry {
    display: grid;
  }

  .wb-stat-grid,
  .wb-finance-grid,
  .wb-funnel-head,
  .wb-modal-metrics,
  .wb-decision-actions {
    grid-template-columns: 1fr;
  }

  .wb-project-row,
  .wb-compact-row {
    grid-template-columns: 1fr;
  }

  .wb-project-side,
  .wb-task-side {
    justify-items: start;
  }
}

/* Refined real-data workspace shell. */
.phase-body {
  background: var(--bg);
}

.phase-auth-shell {
  background: var(--bg);
}

.phase-auth-brand p {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0;
}

.phase-auth-brand h1,
.phase-header h1 {
  color: var(--text);
  font-weight: 650;
  letter-spacing: 0;
}

.phase-auth-card,
.phase-identity-card,
.phase-dialog {
  border-color: rgba(211, 173, 98, 0.16);
  background: #171717;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
}

.phase-auth-card input,
.phase-form input,
.phase-form select,
.phase-progress-form input {
  border-color: #3c3a37;
  background: #101112;
}

.phase-shell {
  background: rgba(10, 11, 13, 0.78);
}

.phase-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 24px 16px 18px;
  border-right-color: #2a2927;
  background: #111213;
}

.phase-logo {
  width: 44px;
  height: 44px;
  border-color: rgba(211, 173, 98, 0.45);
  border-radius: 8px;
  background: #1c1811;
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.phase-user-summary {
  gap: 6px;
  margin: 30px 8px 26px;
}

.phase-user-summary strong {
  font-size: 15px;
}

.phase-nav {
  gap: 6px;
}

.phase-nav button,
.phase-logout {
  min-height: 44px;
  border-radius: 6px;
  color: #aaa7a0;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.phase-nav button:hover,
.phase-nav button.is-active {
  border-color: rgba(211, 173, 98, 0.18);
  background: rgba(211, 173, 98, 0.09);
  color: #f0ce8d;
}

.phase-nav button.is-active::before {
  top: 12px;
  bottom: 12px;
  left: -16px;
  background: var(--gold);
}

.phase-logout {
  color: #817f79;
  border-color: #2e2d2b;
}

.phase-main {
  padding: 0 34px 34px;
}

.phase-topbar {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid #292826;
  color: var(--muted);
  font-size: 13px;
}

.phase-workspace-trigger {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border-color: rgba(211, 173, 98, 0.38);
  background: #201b12;
  color: #eed094;
  font-size: 13px;
}

.phase-workspace-trigger:hover {
  border-color: rgba(211, 173, 98, 0.68);
  background: #2a2215;
}

.phase-header {
  margin-bottom: 24px;
}

.phase-header p {
  color: #9f9b94;
  font-size: 13px;
}

.phase-header h1 {
  font-size: 32px;
}

.phase-scope {
  border-color: rgba(211, 173, 98, 0.28);
  border-radius: 6px;
  background: rgba(211, 173, 98, 0.08);
  color: #e4c17e;
  font-size: 13px;
}

.phase-metric-grid {
  gap: 10px;
  margin-bottom: 16px;
}

.phase-metric-grid article {
  min-height: 116px;
  padding: 18px;
  border-color: #2e2d2b;
  border-radius: 8px;
  background: #171718;
  box-shadow: none;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.phase-metric-grid article:hover {
  border-color: rgba(211, 173, 98, 0.32);
  background: #1b1b1b;
  transform: translateY(-2px);
}

.phase-metric-grid strong {
  color: #f0cd88;
  font-weight: 650;
}

.phase-panel,
.organization-node details,
.person-card,
.classification-list article,
.position-list details {
  border-color: #2e2d2b;
  background: #171718;
  box-shadow: none;
}

.phase-panel {
  padding: 22px;
}

.phase-panel-head h2 {
  font-size: 17px;
  font-weight: 650;
}

.phase-task-row {
  border-color: #2d2c2a;
  background: #141515;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.phase-task-row:hover {
  border-color: rgba(211, 173, 98, 0.28);
  background: #1a1a19;
}

.phase-task-progress > div {
  background: #2d2d2b;
}

.phase-task-progress i {
  background: var(--gold);
}

.organization-tabs {
  border-color: #2e2d2b;
  background: #141515;
}

.organization-tabs button:hover,
.organization-tabs button.is-active {
  border-color: rgba(211, 173, 98, 0.23);
  background: rgba(211, 173, 98, 0.09);
  color: #f0ce8d;
}

.organization-node details[open] {
  border-color: #3a3834;
  background: #191918;
}

.organization-member {
  border-color: #302f2c;
  background: #20201e;
}

.organization-member:hover {
  border-color: rgba(211, 173, 98, 0.34);
  background: #24231f;
}

.organization-member-avatar {
  background: #30281b;
  color: #e6c37d;
}

.phase-drawer {
  border-left-color: #3a3834;
  background: #161615;
  box-shadow: -22px 0 60px rgba(0, 0, 0, 0.42);
}

.drawer-facts,
.phase-identity-card dl {
  border-color: #302f2c;
  background: #1c1c1b;
}

.phase-modal-backdrop {
  background: rgba(4, 4, 4, 0.74);
}

.workspace-entry {
  display: grid;
  min-height: calc(100dvh - 130px);
  grid-template-rows: auto 1fr;
}

.workspace-entry-header {
  margin-bottom: 0;
}

.workspace-entry-card {
  position: relative;
  display: grid;
  width: min(100%, 590px);
  align-self: center;
  justify-self: center;
  gap: 14px;
  padding: 40px;
  margin: 38px 0 64px;
  overflow: hidden;
  border-color: rgba(211, 173, 98, 0.24);
  background: #171716;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.3);
}

.workspace-entry-card::before {
  position: absolute;
  top: 0;
  right: 32px;
  left: 32px;
  height: 2px;
  background: var(--gold);
  content: "";
}

.workspace-entry-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(211, 173, 98, 0.45);
  border-radius: 50%;
  background: #252016;
  color: #efcf8e;
  font-size: 19px;
  font-weight: 700;
}

.workspace-entry-eyebrow {
  margin: 8px 0 0;
  color: #d9b775;
  font-size: 13px;
}

.workspace-entry-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 26px;
  font-weight: 650;
}

.workspace-entry-copy {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.workspace-entry-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 12px 0 4px;
  border: 1px solid #302f2c;
  border-radius: 6px;
  background: #131413;
}

.workspace-entry-stats div {
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid #302f2c;
}

.workspace-entry-stats div:last-child {
  border-right: 0;
}

.workspace-entry-stats dt {
  color: var(--muted);
  font-size: 12px;
}

.workspace-entry-stats dd {
  margin: 7px 0 0;
  color: #f0cd88;
  font-size: 23px;
  font-weight: 650;
}

.workspace-entry-action {
  width: fit-content;
  min-height: 44px;
  margin-top: 6px;
  padding-inline: 22px;
}

.button:focus-visible,
.phase-nav button:focus-visible,
.phase-logout:focus-visible,
.organization-tabs button:focus-visible,
.organization-member:focus-visible,
.drawer-close:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #e5c27f;
  outline-offset: 3px;
}

.phase-main > :not(.phase-topbar) {
  animation: phase-page-in 240ms ease-out both;
}

@keyframes phase-page-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .phase-sidebar {
    position: static;
    height: auto;
  }

  .phase-main {
    padding: 0 22px 26px;
  }
}

@media (max-width: 680px) {
  .phase-main {
    padding: 0 14px 22px;
  }

  .phase-topbar {
    min-height: 64px;
    margin-bottom: 20px;
  }

  .phase-topbar > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .phase-workspace-trigger {
    flex: 0 0 auto;
  }

  .phase-header h1 {
    font-size: 28px;
  }

  .workspace-entry {
    min-height: calc(100dvh - 110px);
  }

  .workspace-entry-card {
    gap: 12px;
    padding: 30px 22px;
    margin: 26px 0 42px;
  }

  .workspace-entry-card h2 {
    font-size: 23px;
  }

  .workspace-entry-stats div {
    padding: 12px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phase-main > :not(.phase-topbar) {
    animation: none;
  }

  .phase-nav button,
  .phase-logout,
  .phase-metric-grid article,
  .phase-task-row {
    transition: none;
  }
}

/* CEO cockpit: restrained glass surfaces, gold wayfinding, and data-light accents. */
:root {
  --font-sans: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-numeric: "Bahnschrift", "Microsoft YaHei UI", sans-serif;
  --bg: #080a0d;
  --bg-soft: #0d1013;
  --panel: rgba(20, 23, 25, 0.76);
  --panel-soft: rgba(27, 31, 33, 0.72);
  --panel-hover: rgba(38, 42, 43, 0.78);
  --line: rgba(223, 229, 222, 0.12);
  --line-strong: rgba(223, 229, 222, 0.24);
  --text: #f1f3ed;
  --muted: #aeb4ad;
  --gold: #d6af68;
  --gold-soft: rgba(214, 175, 104, 0.12);
  --cyan: #77c8d1;
  --cyan-soft: rgba(119, 200, 209, 0.1);
  --radius: 10px;
  --glass-blur: blur(18px) saturate(118%);
  --shadow: 0 20px 56px rgba(0, 0, 0, 0.33);
  --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
}

.phase-body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  font-family: var(--font-sans);
  font-weight: 400;
  font-synthesis: none;
  background:
    linear-gradient(118deg, #07090c 0%, #0d1112 44%, #0a0d11 100%);
}

.phase-body::before,
.phase-body::after {
  position: fixed;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.phase-body::before {
  inset: -3%;
  opacity: 0.34;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(119, 200, 209, 0.045) 8.1%, transparent 8.2% 91%, rgba(214, 175, 104, 0.045) 91.1%, transparent 91.2%),
    linear-gradient(180deg, transparent 0 18%, rgba(241, 243, 237, 0.022) 18.1%, transparent 18.2% 74%, rgba(241, 243, 237, 0.018) 74.1%, transparent 74.2%);
}

.phase-body::after {
  top: 0;
  right: 6vw;
  width: min(38vw, 520px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(119, 200, 209, 0.68), transparent);
  box-shadow: 0 0 22px rgba(119, 200, 209, 0.24);
}

@media (prefers-reduced-motion: no-preference) {
  .phase-body::before {
    will-change: transform;
    animation: phase-ambient-shift 24s ease-in-out infinite alternate;
  }

  .phase-body::after {
    will-change: transform, opacity;
    animation: phase-signal-drift 8s var(--ease-out) infinite alternate;
  }
}

.phase-auth-shell {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(8, 10, 13, 0.98), rgba(15, 18, 19, 0.94));
}

.phase-auth-shell::before {
  position: absolute;
  top: 10%;
  left: 50%;
  width: min(86vw, 680px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 175, 104, 0.52), transparent);
  content: "";
  transform: translateX(-50%);
}

.phase-auth-brand,
.phase-identity-card,
.phase-auth-card {
  position: relative;
  z-index: 1;
}

.phase-auth-brand .brand-mark,
.phase-logo {
  position: relative;
  overflow: hidden;
  border-color: rgba(214, 175, 104, 0.58);
  background:
    linear-gradient(140deg, rgba(214, 175, 104, 0.2), rgba(214, 175, 104, 0.03)),
    rgba(19, 20, 19, 0.78);
  box-shadow: inset 0 1px rgba(255, 249, 232, 0.16), 0 10px 28px rgba(0, 0, 0, 0.26);
}

.phase-auth-brand .brand-mark::after,
.phase-logo::after {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(119, 200, 209, 0.78);
  content: "";
}

.phase-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 112px;
  padding: 0 11px;
  color: #f0d198;
  font-family: var(--font-numeric);
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.phase-logo-mark {
  display: inline-flex;
  align-items: end;
  gap: 2px;
  height: 16px;
}

.phase-logo-mark i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 8px rgba(214, 175, 104, 0.45);
}

.phase-logo-mark i:nth-child(1) { height: 7px; opacity: 0.72; }
.phase-logo-mark i:nth-child(2) { height: 12px; }
.phase-logo-mark i:nth-child(3) { height: 16px; }

.phase-shell {
  position: relative;
  background: transparent;
}

.phase-sidebar {
  border-right-color: rgba(226, 232, 225, 0.11);
  background:
    linear-gradient(180deg, rgba(18, 21, 22, 0.86), rgba(11, 13, 15, 0.76));
  box-shadow: 18px 0 48px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.phase-user-summary {
  position: relative;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(226, 232, 225, 0.09);
}

.phase-user-summary::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  width: 42px;
  height: 1px;
  background: var(--gold);
  content: "";
}

.phase-nav button,
.phase-logout {
  overflow: hidden;
  border-color: transparent;
  color: #a8afaa;
}

.phase-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 520;
}

.phase-nav-icon-wrap {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  color: #7f8a84;
  transition: color 180ms ease, transform 180ms var(--ease-out);
}

.phase-nav-icon {
  width: 17px;
  height: 17px;
}

.phase-nav button:hover,
.phase-nav button.is-active {
  border-color: rgba(214, 175, 104, 0.22);
  background:
    linear-gradient(90deg, rgba(214, 175, 104, 0.14), rgba(214, 175, 104, 0.035));
  color: #f1d394;
  box-shadow: inset 0 1px rgba(255, 248, 230, 0.05);
}

.phase-nav button:hover .phase-nav-icon-wrap,
.phase-nav button.is-active .phase-nav-icon-wrap {
  color: var(--cyan);
  transform: translateX(1px);
}

.phase-nav button.is-active::before {
  top: 11px;
  bottom: 11px;
  width: 2px;
  box-shadow: 0 0 12px rgba(214, 175, 104, 0.7);
}

.phase-main {
  position: relative;
  padding-inline: clamp(18px, 3vw, 42px);
}

.phase-main::before {
  position: absolute;
  top: 20px;
  right: clamp(18px, 3vw, 42px);
  width: 84px;
  height: 20px;
  border-top: 1px solid rgba(119, 200, 209, 0.22);
  border-right: 1px solid rgba(119, 200, 209, 0.22);
  content: "";
  pointer-events: none;
}

.phase-topbar {
  position: sticky;
  z-index: 3;
  top: 0;
  margin-inline: calc(clamp(18px, 3vw, 42px) * -1);
  padding-inline: clamp(18px, 3vw, 42px);
  border-bottom-color: rgba(226, 232, 225, 0.1);
  background: rgba(10, 12, 14, 0.74);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.phase-workspace-trigger {
  position: relative;
  overflow: hidden;
  border-color: rgba(45, 140, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(45, 140, 255, 0.24), rgba(16, 75, 154, 0.1)),
    rgba(7, 29, 57, 0.78);
  box-shadow: inset 0 1px rgba(218, 240, 255, 0.15), 0 8px 20px rgba(10, 76, 159, 0.2);
}

.phase-workspace-trigger:hover {
  border-color: rgba(89, 173, 255, 0.92);
  background: linear-gradient(135deg, rgba(45, 140, 255, 0.38), rgba(16, 75, 154, 0.2)), rgba(7, 29, 57, 0.9);
  box-shadow: inset 0 1px rgba(218, 240, 255, 0.22), 0 12px 24px rgba(10, 76, 159, 0.28);
}

.phase-button-icon {
  width: 17px;
  height: 17px;
  margin-left: 1px;
  transition: transform 180ms var(--ease-out);
}

.phase-workspace-trigger:hover .phase-button-icon {
  transform: translateX(2px);
}

.button:active,
.phase-nav button:active,
.phase-logout:active,
.organization-tabs button:active {
  transform: translateY(1px) scale(0.985);
}

@media (hover: hover) {
  .phase-workspace-trigger::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -38%;
    width: 26%;
    background: linear-gradient(90deg, transparent, rgba(218, 240, 255, 0.2), transparent);
    content: "";
    transform: skewX(-18deg);
    transition: transform 360ms var(--ease-out);
  }

  .phase-workspace-trigger:hover::after {
    transform: translateX(620%) skewX(-18deg);
  }
}

.phase-header h1 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.18;
  font-family: var(--font-sans);
  font-weight: 650;
  text-wrap: balance;
}

.phase-header h2,
.phase-panel-head h2,
.workspace-entry-card h2,
.phase-dialog h2,
.phase-identity-card h1 {
  font-family: var(--font-sans);
  font-weight: 620;
}

.phase-header p {
  max-width: 65ch;
  color: #aeb6b0;
}

.phase-scope {
  border-color: rgba(119, 200, 209, 0.28);
  background: rgba(119, 200, 209, 0.08);
  color: #a7e0e5;
  box-shadow: inset 0 1px rgba(210, 248, 250, 0.08);
}

.phase-metric-grid article,
.phase-panel,
.organization-node details,
.person-card,
.classification-list article,
.position-list details,
.workspace-entry-card,
.phase-auth-card,
.phase-identity-card,
.phase-dialog,
.phase-drawer {
  border-color: rgba(226, 232, 225, 0.13);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(19, 22, 23, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.075), var(--shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.phase-metric-grid article {
  position: relative;
  min-height: 122px;
  overflow: hidden;
  transition: transform 220ms var(--ease-out), border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.phase-metric-grid article::before {
  position: absolute;
  top: 0;
  right: 16px;
  left: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(119, 200, 209, 0.34), transparent);
  content: "";
}

.phase-metric-grid article:hover {
  border-color: rgba(119, 200, 209, 0.34);
  background: rgba(27, 31, 33, 0.82);
  transform: translateY(-3px);
}

.phase-metric-grid article:nth-child(2)::before,
.phase-metric-grid article:nth-child(4)::before {
  background: linear-gradient(90deg, transparent, rgba(214, 175, 104, 0.46), transparent);
}

.phase-metric-grid strong {
  font-family: var(--font-numeric);
  color: #f3d594;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(214, 175, 104, 0.14);
}

.phase-panel {
  overflow: hidden;
}

.phase-panel-head {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(226, 232, 225, 0.08);
}

.phase-panel-head h2 {
  color: #f5f6f1;
}

.phase-task-row {
  position: relative;
  border-color: rgba(226, 232, 225, 0.11);
  border-radius: 8px;
  background: rgba(8, 10, 12, 0.38);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
}

.phase-task-row:hover {
  border-color: rgba(119, 200, 209, 0.34);
  background: rgba(24, 29, 30, 0.68);
  box-shadow: inset 2px 0 var(--cyan), inset 0 1px rgba(255, 255, 255, 0.05);
}

.phase-task-progress > div {
  height: 7px;
  background: rgba(226, 232, 225, 0.11);
}

.phase-task-progress i {
  background: linear-gradient(90deg, #cda15d, #f0d08f);
  box-shadow: 0 0 16px rgba(214, 175, 104, 0.4);
  transform-origin: left center;
  animation: phase-progress-in 560ms var(--ease-out) both;
}

.organization-tabs,
.workspace-entry-stats {
  border-color: rgba(226, 232, 225, 0.13);
  background: rgba(10, 13, 14, 0.56);
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
}

.organization-tabs button:hover,
.organization-tabs button.is-active {
  border-color: rgba(119, 200, 209, 0.28);
  background: rgba(119, 200, 209, 0.1);
  color: #b3e8ec;
}

.organization-node details[open] {
  border-color: rgba(226, 232, 225, 0.16);
  background: rgba(26, 29, 30, 0.66);
}

.organization-member {
  border-color: rgba(226, 232, 225, 0.12);
  background: rgba(9, 12, 13, 0.36);
}

.organization-member:hover {
  border-color: rgba(119, 200, 209, 0.34);
  background: rgba(25, 30, 31, 0.72);
  transform: translateX(3px);
}

.organization-member-avatar,
.workspace-entry-mark,
.phase-identity-avatar {
  border-color: rgba(119, 200, 209, 0.42);
  background:
    linear-gradient(145deg, rgba(119, 200, 209, 0.17), rgba(119, 200, 209, 0.04)),
    rgba(16, 22, 23, 0.82);
  color: #c0f0f2;
  box-shadow: inset 0 1px rgba(218, 255, 255, 0.11), 0 0 0 4px rgba(119, 200, 209, 0.035);
}

.phase-drawer {
  border-left-color: rgba(226, 232, 225, 0.16);
}

.drawer-facts,
.phase-identity-card dl {
  border-color: rgba(226, 232, 225, 0.11);
  background: rgba(7, 9, 10, 0.36);
}

.phase-modal-backdrop {
  background: rgba(3, 5, 6, 0.7);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.workspace-entry-card {
  border-color: rgba(214, 175, 104, 0.32);
  background:
    linear-gradient(140deg, rgba(214, 175, 104, 0.1), rgba(119, 200, 209, 0.05) 55%, rgba(255, 255, 255, 0.025)),
    rgba(18, 21, 22, 0.77);
}

.workspace-entry-card::before {
  right: 24px;
  left: 24px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 18px rgba(214, 175, 104, 0.34);
}

.workspace-entry-stats div {
  border-right-color: rgba(226, 232, 225, 0.12);
}

.workspace-entry-stats dd {
  font-family: var(--font-numeric);
  color: #bfecef;
  font-variant-numeric: tabular-nums;
}

.phase-task-progress span,
.phase-panel-head > span,
.phase-scope {
  font-variant-numeric: tabular-nums;
}

.button-primary {
  border-color: rgba(245, 218, 157, 0.46);
  background: linear-gradient(135deg, #e2bc75, #cda05b);
  box-shadow: inset 0 1px rgba(255, 253, 242, 0.35), 0 8px 18px rgba(0, 0, 0, 0.18);
}

.button-primary:hover {
  background: #efcc85;
  box-shadow: inset 0 1px rgba(255, 253, 242, 0.4), 0 12px 24px rgba(0, 0, 0, 0.24);
}

.button-secondary,
.button-ghost,
.phase-form input,
.phase-form select,
.phase-form textarea,
.phase-auth-card input,
.phase-progress-form input {
  border-color: rgba(226, 232, 225, 0.17);
  background: rgba(8, 10, 12, 0.56);
  color: var(--text);
}

.button-secondary:hover,
.button-ghost:hover {
  border-color: rgba(119, 200, 209, 0.42);
  background: rgba(119, 200, 209, 0.09);
  color: #c6f1f3;
}

.button:focus-visible,
.phase-nav button:focus-visible,
.phase-logout:focus-visible,
.organization-tabs button:focus-visible,
.organization-member:focus-visible,
.drawer-close:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline-color: #9adce3;
  box-shadow: 0 0 0 4px rgba(119, 200, 209, 0.16);
}

.phase-main > :not(.phase-topbar) {
  animation: phase-page-in 360ms var(--ease-out) both;
}

.phase-metric-grid article {
  animation: phase-metric-in 460ms var(--ease-out) both;
}

.phase-metric-grid article:nth-child(2) { animation-delay: 50ms; }
.phase-metric-grid article:nth-child(3) { animation-delay: 100ms; }
.phase-metric-grid article:nth-child(4) { animation-delay: 150ms; }

.workspace-entry-card {
  animation: phase-entry-card 520ms var(--ease-out) both;
  transition: transform 240ms var(--ease-out), border-color 240ms ease, box-shadow 240ms ease;
}

@media (hover: hover) {
  .workspace-entry-card:hover {
    border-color: rgba(214, 175, 104, 0.56);
    box-shadow: inset 0 1px rgba(255, 248, 230, 0.12), 0 24px 48px rgba(0, 0, 0, 0.32);
    transform: translateY(-3px);
  }
}

.phase-reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 460ms var(--ease-out) var(--phase-reveal-delay, 0ms),
    transform 460ms var(--ease-out) var(--phase-reveal-delay, 0ms),
    filter 460ms var(--ease-out) var(--phase-reveal-delay, 0ms);
}

.phase-reveal.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

@keyframes phase-page-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes phase-metric-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes phase-progress-in {
  from { opacity: 0.35; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes phase-entry-card {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes phase-ambient-shift {
  from { transform: translate3d(-1.25%, -0.5%, 0); }
  to { transform: translate3d(1.25%, 0.5%, 0); }
}

@keyframes phase-signal-drift {
  from { opacity: 0.54; transform: translate3d(-14px, 0, 0); }
  to { opacity: 0.94; transform: translate3d(14px, 0, 0); }
}

@media (max-width: 980px) {
  .phase-sidebar {
    border-right: 0;
    border-bottom: 1px solid rgba(226, 232, 225, 0.1);
  }

  .phase-user-summary {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .phase-user-summary::after,
  .phase-main::before {
    display: none;
  }

  .phase-topbar {
    margin-inline: calc(clamp(18px, 3vw, 42px) * -1);
  }
}

@media (max-width: 680px) {
  .phase-body::after {
    right: 14px;
    width: 110px;
  }

  .phase-topbar {
    margin-inline: -14px;
    padding-inline: 14px;
  }

  .phase-header h1 {
    font-size: 28px;
  }

  .phase-metric-grid article {
    min-height: 108px;
  }

  .phase-logo {
    width: 44px;
    padding: 0;
    gap: 0;
  }

  .phase-logo > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .phase-panel,
  .workspace-entry-card {
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 14px 32px rgba(0, 0, 0, 0.22);
  }

  .phase-sidebar {
    gap: 12px;
    padding-block: 12px;
  }

  .phase-user-summary {
    min-width: 0;
  }

  .phase-nav {
    gap: 5px;
  }

  .phase-nav button {
    min-width: 0;
    gap: 6px;
    padding-inline: 8px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .phase-nav-icon-wrap {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }

  .phase-nav-icon {
    width: 15px;
    height: 15px;
  }

  .phase-topbar {
    gap: 10px;
  }

  .phase-topbar > span {
    min-width: 0;
  }

  .phase-workspace-trigger {
    min-width: 42px;
    padding-inline: 10px;
  }

  .phase-workspace-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .phase-workspace-trigger .phase-button-icon {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phase-main > :not(.phase-topbar),
  .phase-metric-grid article,
  .workspace-entry-card,
  .phase-task-progress i,
  .workbench-record,
  .workbench-feed-item {
    animation: none;
  }

  .phase-reveal {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .phase-nav button,
  .phase-logout,
  .phase-metric-grid article,
  .phase-task-row,
  .organization-member,
  .button {
    transition: none;
  }
}

/* Organization page: the tree carries the hierarchy, controls stay in the header. */
.phase-organization-header { margin-bottom: 18px; }
.phase-organization-header > div:first-child { max-width: 520px; }
.phase-organization-header p { max-width: 420px; font-size: 13px; line-height: 1.55; }
.phase-organization-header h1 { font-size: 30px; font-weight: 700; line-height: 1.2; }
.organization-header-actions { gap: 10px; }
.organization-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.organization-summary strong { color: var(--text); font-size: 14px; font-weight: 650; }
.organization-summary i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: .8; }
.organization-panel { min-height: 0; padding: 0; overflow: hidden; }
.organization-empty { padding: 64px 24px; border: 0; }
.organization-panel > .phase-panel-head { margin: 0; padding: 18px 20px 15px; border-bottom: 1px solid rgba(255, 255, 255, .075); }
.organization-panel > .phase-panel-head h2 { font-size: 18px; font-weight: 650; }
.organization-panel > .phase-panel-head span { font-size: 12px; }
.organization-tree { gap: 8px; padding: 14px; }
.organization-tree ul { gap: 7px; margin: 8px 0 0 22px; padding-left: 14px; border-left: 1px solid rgba(215, 171, 76, .16); }
.organization-node details { border-color: rgba(255, 255, 255, .075); background: rgba(255, 255, 255, .018); }
.organization-node details[open] { border-color: rgba(215, 171, 76, .24); background: rgba(19, 20, 28, .92); }
.organization-node summary {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 62px;
  padding: 11px 16px;
  list-style: none;
}
.organization-node summary::-webkit-details-marker { display: none; }
.organization-node summary::before {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  content: "";
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.organization-node details[open] > summary::before { margin-top: 2px; transform: rotate(45deg); }
.organization-node-name { display: grid; gap: 4px; min-width: 0; }
.organization-node-name b { overflow: hidden; color: var(--text); font-size: 16px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.organization-node-name small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.organization-node-count { align-self: center; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 5px; background: rgba(255, 255, 255, .025); color: var(--muted); font-size: 12px; white-space: nowrap; }
.organization-node-body { display: grid; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .055); }
.organization-node-actions { justify-content: flex-end; padding: 9px 16px 0; border: 0; }
.organization-node-actions .button { min-height: 32px; padding: 0 10px; font-size: 12px; }
.organization-members { gap: 6px; padding: 0 16px 12px 32px; }
.organization-member { padding: 9px 10px; border-color: rgba(255, 255, 255, .055); background: rgba(255, 255, 255, .026); }
.organization-member:hover { border-color: rgba(215, 171, 76, .34); background: rgba(215, 171, 76, .07); }
.organization-member strong { font-size: 13px; font-weight: 600; }
.organization-member small { font-size: 11px; }
.organization-member-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.organization-member-form .organization-form-destination,
.organization-member-form > .button { grid-column: 1 / -1; }
.organization-member-form label { min-width: 0; }
.organization-member-form .organization-form-destination { padding-bottom: 11px; border-bottom: 1px solid rgba(255, 255, 255, .075); color: var(--gold); }
.organization-member-form .organization-form-destination select { border-color: rgba(215, 171, 76, .28); }

/* Standalone workbench: shared data and controls, without dashboard navigation. */
.phase-workbench-standalone {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 90% -10%, rgba(211, 173, 98, .12), transparent 29%),
    radial-gradient(circle at 4% 0%, rgba(119, 200, 209, .08), transparent 23%),
    #111213;
}

.phase-workbench-standalone-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 68px;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(18px, 3vw, 42px);
  border-bottom: 1px solid rgba(226, 232, 225, .1);
  background: rgba(17, 18, 19, .82);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.phase-workbench-brand {
  display: inline-flex;
  width: max-content;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: #efcf8e;
  font-family: var(--font-numeric);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.phase-workbench-brand .phase-logo-mark { color: #efcf8e; }
.phase-workbench-identity { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.phase-workbench-identity strong { color: var(--text); font-size: 13px; font-weight: 650; }
.phase-workbench-identity span { max-width: 180px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.phase-workbench-header-actions { display: flex; justify-content: flex-end; gap: 8px; }
.phase-workbench-return, .phase-workbench-logout { min-height: 34px; padding-inline: 11px; font-size: 12px; }
.phase-workbench-logout { border: 1px solid rgba(226, 232, 225, .12); border-radius: 6px; background: transparent; color: var(--muted); }
.phase-workbench-logout:hover { border-color: rgba(211, 173, 98, .34); color: #f0ce8d; }
.phase-workbench-main { width: min(1440px, 100%); min-width: 0; margin: 0 auto; padding: clamp(24px, 3vw, 42px); }
.phase-workbench-main .workbench-shell { min-height: calc(100dvh - 152px); }

/* Two-column workbench: left navigation stays stable while the right pane changes by module. */
.phase-workbench-standalone .workbench-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.phase-workbench-standalone .workbench-sidebar {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 15px;
  padding: 12px;
  border: 1px solid rgba(226, 232, 225, .12);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)),
    rgba(18, 21, 22, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 18px 52px rgba(0, 0, 0, .15);
  -webkit-backdrop-filter: blur(18px) saturate(128%);
  backdrop-filter: blur(18px) saturate(128%);
}

.phase-workbench-standalone .workbench-sidebar-label {
  margin: 2px 8px 0;
  color: #8e9891;
  font-size: 11px;
  font-weight: 650;
}

.phase-workbench-standalone .workbench-sidebar-nav { display: grid; gap: 5px; }

.phase-workbench-standalone .workbench-sidebar-nav button {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-height: 62px;
  align-items: center;
  padding: 9px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #9ea8a1;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.phase-workbench-standalone .workbench-sidebar-nav button::before {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -1px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  content: "";
  transition: background-color 180ms ease;
}

.phase-workbench-standalone .workbench-sidebar-nav button:hover {
  border-color: rgba(119, 200, 209, .18);
  background: rgba(119, 200, 209, .055);
  color: #e0ebe3;
  transform: translateX(2px);
}

.phase-workbench-standalone .workbench-sidebar-nav button.is-active {
  border-color: rgba(214, 175, 104, .26);
  background:
    linear-gradient(100deg, rgba(214, 175, 104, .18), rgba(214, 175, 104, .035)),
    rgba(31, 29, 24, .7);
  color: #f1d499;
  box-shadow: inset 0 1px rgba(255, 247, 225, .1), 0 8px 18px rgba(0, 0, 0, .12);
}

.phase-workbench-standalone .workbench-sidebar-nav button.is-active::before { background: #e2bd72; box-shadow: 0 0 14px rgba(226, 189, 114, .68); }
.phase-workbench-standalone .workbench-tab-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(226, 232, 225, .12); border-radius: 50%; background: rgba(9, 12, 13, .42); color: #acc4c0; font-family: var(--font-numeric); font-size: 13px; font-weight: 700; transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.phase-workbench-standalone .workbench-sidebar-nav button.is-active .workbench-tab-mark { border-color: rgba(226, 189, 114, .6); background: rgba(85, 64, 30, .5); color: #f5d994; box-shadow: 0 0 18px rgba(214, 175, 104, .16); }
.phase-workbench-standalone .workbench-tab-copy { display: grid; gap: 3px; min-width: 0; }
.phase-workbench-standalone .workbench-tab-copy strong { overflow: hidden; font-size: 13px; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.phase-workbench-standalone .workbench-tab-copy small { overflow: hidden; color: #848e87; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.phase-workbench-standalone .workbench-sidebar-footer { display: grid; gap: 3px; padding: 13px 8px 3px; border-top: 1px solid rgba(226, 232, 225, .09); color: #89938c; font-size: 11px; }
.phase-workbench-standalone .workbench-sidebar-footer strong { color: #c3d8d6; font-size: 12px; font-weight: 600; }

.phase-workbench-standalone .workbench-content { min-width: 0; animation: workbench-content-in 280ms var(--ease-out) both; }
.phase-workbench-standalone .workbench-content-header { display: flex; min-height: 92px; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 9px 4px 18px; border-bottom: 1px solid rgba(226, 232, 225, .1); }
.phase-workbench-standalone .workbench-content-header p { max-width: 66ch; margin: 0 0 8px; color: #9fa9a2; font-size: 13px; line-height: 1.55; }
.phase-workbench-standalone .workbench-content-header h1 { margin: 0; color: #f4f5ef; font-size: 30px; font-weight: 650; line-height: 1.15; }
.phase-workbench-standalone .workbench-content-header .phase-scope { flex: 0 0 auto; margin-top: 3px; }
.phase-workbench-standalone .workbench-content-body { min-width: 0; }
@keyframes workbench-content-in { from { opacity: .1; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 680px) {
  .phase-workbench-standalone-header { grid-template-columns: minmax(0, 1fr) auto; min-height: 60px; gap: 10px; padding-inline: 14px; }
  .phase-workbench-identity { display: none; }
  .phase-workbench-brand { font-size: 13px; }
  .phase-workbench-header-actions { gap: 6px; }
  .phase-workbench-return, .phase-workbench-logout { min-height: 32px; padding-inline: 8px; font-size: 11px; }
  .phase-workbench-main { padding: 20px 14px 32px; }
  .phase-workbench-standalone .workbench-layout { grid-template-columns: 1fr; gap: 14px; }
  .phase-workbench-standalone .workbench-sidebar { position: static; padding: 8px; }
  .phase-workbench-standalone .workbench-sidebar-label, .phase-workbench-standalone .workbench-sidebar-footer { display: none; }
  .phase-workbench-standalone .workbench-sidebar-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .phase-workbench-standalone .workbench-sidebar-nav button { display: grid; min-height: 58px; place-items: center; padding: 6px; text-align: center; }
  .phase-workbench-standalone .workbench-sidebar-nav button::before { top: auto; right: 16px; bottom: -1px; left: 16px; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
  .phase-workbench-standalone .workbench-sidebar-nav button:hover { transform: translateY(-1px); }
  .phase-workbench-standalone .workbench-tab-copy { display: none; }
  .phase-workbench-standalone .workbench-content-header { display: grid; min-height: 0; gap: 10px; padding: 4px 0 15px; }
  .phase-workbench-standalone .workbench-content-header h1 { font-size: 26px; }
  .phase-workbench-standalone .workbench-content-header .phase-scope { width: max-content; margin: 0; }
}

@media (max-width: 680px) {
  .organization-header-actions { width: 100%; }
  .organization-summary { order: 3; width: 100%; justify-content: center; }
  .organization-node summary { grid-template-columns: 10px minmax(0, 1fr); }
  .organization-node-count { grid-column: 2; justify-self: start; }
  .organization-members { padding-left: 16px; }
  .organization-member-form { grid-template-columns: 1fr; }
  .organization-member-form .organization-form-destination,
  .organization-member-form > .button { grid-column: auto; }
}

/* Architecture V2: blue Liquid Glass tokens shared by dashboard, organization, and workbench. */
:root {
  --gold: #4b8eff;
  --gold-soft: rgba(75, 142, 255, .14);
  --blue: #4b8eff;
  --cyan: #78b8ff;
  --line-strong: rgba(148, 191, 255, .22);
}

.phase-body {
  background:
    radial-gradient(900px 520px at 100% -10%, rgba(75, 142, 255, .15), transparent 58%),
    radial-gradient(760px 430px at -12% 0%, rgba(68, 211, 178, .065), transparent 60%),
    #0a0f1a;
}

.phase-auth-shell,
.phase-workbench-standalone,
.phase-organization-standalone {
  background:
    radial-gradient(740px 420px at 100% -10%, rgba(75, 142, 255, .14), transparent 58%),
    radial-gradient(600px 360px at 4% 0%, rgba(119, 200, 209, .075), transparent 62%),
    #0a0f1a;
}

.phase-sidebar,
.phase-workbench-standalone-header {
  border-color: rgba(160, 194, 235, .12);
  background: rgba(10, 15, 26, .78);
}

.phase-logo,
.phase-auth-brand .brand-mark,
.phase-identity-avatar {
  border-color: rgba(75, 142, 255, .42);
  background: rgba(75, 142, 255, .11);
  color: #9bc4ff;
}

.phase-nav button.is-active,
.phase-nav button:hover,
.phase-nav button.is-active::before,
.phase-scope,
.organization-tabs button:hover,
.organization-tabs button.is-active {
  border-color: rgba(75, 142, 255, .3);
  background-color: rgba(75, 142, 255, .1);
  color: #a9cbff;
}

.phase-nav-count,
.workbench-tab-badge {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border: 1px solid rgba(75, 142, 255, .42);
  border-radius: 999px;
  background: rgba(75, 142, 255, .16);
  color: #c5dcff;
  font-family: var(--font-numeric);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.phase-nav-count { margin-left: auto; }
.workbench-tab-badge { position: absolute; top: 7px; right: 7px; }

.phase-panel,
.phase-metric-grid article,
.organization-node details,
.person-card,
.classification-list article,
.position-list details {
  border-color: rgba(160, 194, 235, .12);
  background: linear-gradient(145deg, rgba(24, 35, 56, .74), rgba(13, 20, 34, .66));
  box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 18px 44px rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.phase-metric-grid strong { color: #a9cbff; }
.phase-task-progress i { background: linear-gradient(90deg, #4b8eff, #80c6ff); }
.phase-task-row { grid-template-columns: minmax(0, 1fr) 150px auto auto; border-color: rgba(160, 194, 235, .1); background: rgba(255, 255, 255, .018); }

.button:focus-visible,
.workbench-sidebar-nav button:focus-visible,
.organization-member:focus-visible,
.workbench-record-trigger:focus-visible {
  outline: 2px solid #8dc1ff;
  outline-offset: 3px;
}

.organization-member:hover,
.organization-node details[open],
.organization-tabs button:hover,
.organization-tabs button.is-active {
  border-color: rgba(75, 142, 255, .3);
  background-color: rgba(75, 142, 255, .075);
}

.phase-message-list { display: grid; gap: 9px; }
.phase-message-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 88px;
  padding: 14px 4px;
  border-top: 1px solid rgba(160, 194, 235, .1);
}
.phase-message-item:first-child { border-top: 0; padding-top: 0; }
.phase-message-item:last-child { padding-bottom: 0; }
.phase-message-indicator { width: 8px; height: 8px; border-radius: 50%; background: #6ca7ff; box-shadow: 0 0 15px rgba(75, 142, 255, .58); }
.phase-message-item.tone-risk .phase-message-indicator { background: #ef626d; box-shadow: 0 0 15px rgba(239, 98, 109, .48); }
.phase-message-item.tone-warning .phase-message-indicator { background: #f6bb5a; box-shadow: 0 0 15px rgba(246, 187, 90, .44); }
.phase-message-item.tone-success .phase-message-indicator { background: #43d49a; box-shadow: 0 0 15px rgba(67, 212, 154, .42); }
.phase-message-item strong { display: block; font-size: 14px; }
.phase-message-item p { margin: 5px 0; color: #aab7c8; font-size: 13px; line-height: 1.55; }
.phase-message-item small { color: var(--muted); font-size: 11px; }
.phase-message-item.is-read { opacity: .62; }
.phase-message-item.is-editable { grid-template-columns: 10px minmax(0, 1fr) auto auto; }
.phase-message-item.is-selected { margin-inline: -8px; padding-inline: 12px; border-radius: 6px; background: rgba(45, 140, 255, .08); opacity: 1; }
.phase-message-item.is-read .phase-message-indicator { background: #708198; box-shadow: none; }
.phase-message-item.is-unread strong { color: #edf5ff; }
.phase-message-status { color: #89b8ff; font-weight: 700; }
.phase-message-item.is-read .phase-message-status { color: #8492a5; font-weight: 500; }
.phase-message-selection-actions .button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.phase-record-open,
.workbench-record-trigger {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #a4c9ff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.phase-record-open:hover,
.workbench-record-trigger:hover { border-color: rgba(75, 142, 255, .28); background: rgba(75, 142, 255, .09); color: #d5e5ff; transform: translateX(2px); }
.workbench-record-trigger { margin-top: 10px; padding-left: 0; }

.coverage-example {
  padding: 16px;
  border: 1px dashed rgba(111, 173, 255, .54);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(75, 142, 255, .105), rgba(75, 142, 255, .025));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}
.coverage-example-empty { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.coverage-example header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.coverage-example header span { color: #9bc6ff; font-size: 11px; font-weight: 700; }
.coverage-example header strong { color: #d7e8ff; font-size: 14px; }
.coverage-example header small { margin-left: auto; color: #8ea4c2; font-size: 11px; }
.coverage-example > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
.coverage-example article { min-height: 58px; padding: 10px 11px; border: 1px solid rgba(152, 193, 246, .12); border-radius: 5px; background: rgba(5, 15, 31, .22); }
.coverage-example b { display: block; color: #c7ddfc; font-size: 13px; font-weight: 600; }
.coverage-example article span { display: block; margin-top: 5px; color: #91a5c0; font-size: 12px; line-height: 1.5; }

.phase-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 18px; align-items: start; }
.phase-settings-grid > :last-child { grid-column: 1 / -1; }
.phase-settings-profile { display: flex; align-items: center; gap: 16px; min-height: 136px; }
.phase-settings-avatar { display: grid; flex: 0 0 70px; width: 70px; height: 70px; place-items: center; border: 1px solid rgba(75, 142, 255, .38); border-radius: 50%; background: rgba(75, 142, 255, .11); color: #b6d3ff; font-size: 26px; font-weight: 700; }
.phase-settings-eyebrow { margin: 0 0 6px; color: #8ba4c5; font-size: 12px; }
.phase-settings-profile h2 { margin: 0; font-size: 22px; }
.phase-settings-profile span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.phase-settings-facts { display: grid; gap: 7px; margin: 0; }
.phase-settings-facts div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; padding: 0 2px; border-bottom: 1px solid rgba(160, 194, 235, .1); }
.phase-settings-facts div:last-child { border-bottom: 0; }
.phase-settings-facts dt { color: var(--muted); font-size: 13px; }
.phase-settings-facts dd { margin: 0; color: #d2e2f8; font-size: 13px; }
.phase-bound-phone { display: flex; grid-column: 1 / -1; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; border: 1px solid rgba(103, 170, 234, .2); border-radius: 7px; background: rgba(8, 35, 64, .34); }
.phase-bound-phone > div { display: grid; gap: 3px; min-width: 0; }
.phase-bound-phone span { color: #91aac8; font-size: 12px; }
.phase-bound-phone strong { color: #d9ebff; font-size: 16px; letter-spacing: 1px; }
.phase-bound-phone small { color: #7f98b7; font-size: 11px; line-height: 1.45; }
.phase-bound-phone .button { flex: 0 0 auto; }
.phase-dialog-card.phone-change-dialog { width: min(500px, calc(100vw - 28px)); }
.phone-change-form { align-content: start; }
.phone-change-dialog .password-code-section { margin-top: 4px; }

.overview-business-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.overview-business-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.overview-business-stats div { min-height: 76px; padding: 12px; border: 1px solid rgba(160, 194, 235, .1); border-radius: 7px; background: rgba(75, 142, 255, .035); }
.overview-business-stats dt { color: var(--muted); font-size: 12px; }
.overview-business-stats dd { margin: 10px 0 0; color: #b8d3ff; font-family: var(--font-numeric); font-size: 24px; font-weight: 700; }
.overview-organization-facts { display: grid; gap: 7px; margin: 0; }
.overview-organization-facts div { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(160, 194, 235, .09); }
.overview-organization-facts div:last-child { border-bottom: 0; }
.overview-organization-facts dt { color: var(--muted); font-size: 12px; }
.overview-organization-facts dd { margin: 0; color: #d7e6fb; font-size: 13px; text-align: right; }

.overview-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.overview-insight-grid .phase-panel { display: flex; min-height: 190px; flex-direction: column; }
.phase-panel-action { min-height: 28px; padding: 0 7px; font-size: 11px; }
.overview-platform-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.overview-platform-stats div { min-height: 78px; padding: 12px; border: 1px solid rgba(160, 194, 235, .1); border-radius: 6px; background: rgba(75, 142, 255, .035); }
.overview-platform-stats dt { color: var(--muted); font-size: 11px; }
.overview-platform-stats dd { margin: 10px 0 0; color: #b8d3ff; font-family: var(--font-numeric); font-size: 20px; font-weight: 700; }
.overview-company-facts { display: grid; gap: 10px; margin: 0; }
.overview-company-facts div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start; padding-bottom: 9px; border-bottom: 1px solid rgba(160, 194, 235, .09); }
.overview-company-facts div:last-child { padding-bottom: 0; border-bottom: 0; }
.overview-company-facts dt { color: var(--muted); font-size: 12px; }
.overview-company-facts dd { margin: 0; color: #d7e6fb; font-size: 13px; line-height: 1.5; text-align: right; word-break: break-word; }
.overview-panel-note { margin: auto 0 0; padding-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.platform-user-stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.platform-user-stat-grid article { min-height: 92px; padding: 14px; border: 1px solid rgba(160, 194, 235, .12); border-radius: 7px; background: linear-gradient(145deg, rgba(24, 35, 56, .7), rgba(13, 20, 34, .6)); box-shadow: inset 0 1px rgba(255, 255, 255, .055); }
.platform-user-stat-grid span { display: block; color: var(--muted); font-size: 12px; }
.platform-user-stat-grid strong { display: block; margin-top: 16px; color: #b8d3ff; font-family: var(--font-numeric); font-size: 23px; font-weight: 700; }
.platform-user-list { display: grid; gap: 10px; }
.platform-user-record { padding: 14px; border: 1px solid rgba(160, 194, 235, .1); border-radius: 7px; background: rgba(255, 255, 255, .018); }
.platform-user-record.is-frozen { border-color: rgba(157, 169, 186, .2); opacity: .72; }
.platform-user-record-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.platform-user-record-head strong { display: block; color: #dce9fb; font-size: 14px; }
.platform-user-record-head span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.platform-user-record-head em { flex: 0 0 auto; padding: 3px 7px; border: 1px solid rgba(77, 159, 112, .32); border-radius: 99px; color: #8bd8ae; background: rgba(67, 212, 154, .08); font-size: 11px; font-style: normal; }
.platform-user-record.is-frozen em { border-color: rgba(157, 169, 186, .25); color: #adb7c4; background: rgba(157, 169, 186, .08); }
.platform-user-record dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 15px 0 0; }
.platform-user-record dl div { padding: 9px 10px; border: 1px solid rgba(160, 194, 235, .08); border-radius: 5px; background: rgba(5, 15, 31, .2); }
.platform-user-record dt { color: var(--muted); font-size: 11px; }
.platform-user-record dd { margin: 6px 0 0; overflow: hidden; color: #cbdcf5; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.platform-user-manage { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(160, 194, 235, .09); }
.platform-user-manage summary { color: #9fc6ff; font-size: 12px; cursor: pointer; }
.platform-user-edit-form, .platform-user-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 12px; }
.platform-user-edit-form label, .platform-user-form label, .platform-user-access-form label, .platform-access-review label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.platform-user-conditional-fields { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; min-width: 0; margin: 0; padding: 0; border: 0; }
.platform-user-conditional-fields[hidden] { display: none; }
.platform-user-conditional-fields > label { min-width: 0; }
.platform-user-edit-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 8px; padding-top: 3px; }
.platform-user-access, .platform-user-access-form { display: grid; gap: 9px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(160, 194, 235, .09); color: #c2d7f6; font-size: 12px; }
.platform-user-access.is-pending { color: #f3c16f; }
.platform-user-access.is-frozen { color: #aeb8c5; }
.platform-relation-trigger { margin-top: 12px; min-height: 32px; font-size: 12px; }
.quick-create-actions { display: grid; gap: 10px; margin-top: 24px; }
.quick-create-actions .button { justify-content: flex-start; min-height: 44px; }
.enterprise-relation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.enterprise-relation-grid > section { min-width: 0; }
.enterprise-relation-grid h3 { margin: 0; color: var(--text); font-size: 15px; }
.enterprise-relation-list { display: grid; gap: 8px; margin: 12px 0; }
.enterprise-relation-list article { display: grid; gap: 4px; padding: 10px; border: 1px solid rgba(160, 194, 235, .1); border-radius: 6px; background: rgba(255, 255, 255, .018); }
.enterprise-relation-list strong { color: #dce9fb; font-size: 12px; }
.enterprise-relation-list span { color: var(--muted); font-size: 11px; line-height: 1.55; }
.platform-access-panel { margin-top: 18px; }
.platform-access-list { display: grid; gap: 10px; }
.platform-access-list article { padding: 12px 0; border-bottom: 1px solid rgba(160, 194, 235, .09); }
.platform-access-list article:last-child { padding-bottom: 0; border-bottom: 0; }
.platform-access-list strong, .platform-access-list span, .platform-access-list small { display: block; }
.platform-access-list strong { color: #dce9fb; font-size: 13px; }
.platform-access-list span { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.platform-access-list small { margin-top: 6px; color: #9fc6ff; font-size: 11px; }
.platform-access-review { display: grid; grid-template-columns: 1fr 92px auto; gap: 8px; align-items: end; margin-top: 10px; }

@media (max-width: 1180px) {
  .overview-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-user-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.workbench-observe-summary { margin-bottom: 18px; }
.client-stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.client-stage-card { min-height: 88px; padding: 13px; border: 1px solid rgba(160, 194, 235, .1); border-radius: 7px; background: rgba(255, 255, 255, .018); }
.client-stage-card span { display: block; color: var(--muted); font-size: 12px; }
.client-stage-card strong { display: block; margin-top: 14px; color: #bcd6ff; font-family: var(--font-numeric); font-size: 25px; }
.client-stage-card.stage-at_risk { border-color: rgba(244, 132, 96, .32); background: rgba(244, 132, 96, .06); }
.client-stage-card.stage-at_risk strong { color: #ffaf91; }
.client-stage-card.stage-closed strong { color: #8adbb8; }
.team-task-list { display: grid; gap: 8px; }
.team-task-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; min-height: 38px; padding-bottom: 8px; border-bottom: 1px solid rgba(160, 194, 235, .09); }
.team-task-list article:last-child { padding-bottom: 0; border-bottom: 0; }
.team-task-list span { overflow: hidden; color: #d6e5fa; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.team-task-list small { color: var(--muted); font-size: 11px; }
.team-task-list strong { color: #afceff; font-family: var(--font-numeric); font-size: 16px; }
.team-task-list em { color: #8d9db0; font-size: 11px; font-style: normal; }

.phase-organization-main { width: min(1360px, 100%); min-width: 0; margin: 0 auto; padding: clamp(24px, 3vw, 42px); }
.phase-organization-standalone .organization-panel { min-height: calc(100dvh - 280px); }

.phase-workbench-standalone .workbench-sidebar,
.phase-workbench-standalone .workbench-content-header,
.phase-workbench-standalone .workbench-record,
.phase-workbench-standalone .workbench-feed-item {
  border-color: rgba(160, 194, 235, .12);
}
.phase-workbench-standalone .workbench-sidebar-nav button.is-active {
  border-color: rgba(75, 142, 255, .34);
  background: linear-gradient(100deg, rgba(75, 142, 255, .18), rgba(75, 142, 255, .035)), rgba(16, 26, 43, .72);
  color: #c8ddff;
}
.phase-workbench-standalone .workbench-sidebar-nav button.is-active::before { background: #75adff; box-shadow: 0 0 14px rgba(75, 142, 255, .7); }
.phase-workbench-standalone .workbench-sidebar-nav button.is-active .workbench-tab-mark { border-color: rgba(117, 173, 255, .7); background: rgba(75, 142, 255, .18); color: #d8e7ff; box-shadow: 0 0 18px rgba(75, 142, 255, .19); }
.phase-workbench-brand,
.phase-workbench-brand .phase-logo-mark { color: #a8caff; }
.phase-workbench-logout:hover { border-color: rgba(75, 142, 255, .4); color: #cce0ff; }
.workbench-tabs button.is-active { background: linear-gradient(135deg, #89baff, #4b8eff); box-shadow: 0 8px 20px rgba(75, 142, 255, .2), inset 0 1px rgba(255,255,255,.35); }
.workbench-record.is-risk, .workbench-feed-item.is-risk { border-left-color: #f48460; }
.workbench-record.is-pending { border-left-color: #6daeff; }
.phase-workbench-drawer { background: linear-gradient(160deg, rgba(17, 29, 49, .98), rgba(10, 15, 26, .98)); }
.workbench-drawer-description { margin: 24px 0 0; color: #c1cede; line-height: 1.7; white-space: pre-wrap; }
.workbench-drawer-note { margin-top: 18px; padding: 14px; border: 1px solid rgba(75, 142, 255, .18); border-radius: 7px; background: rgba(75, 142, 255, .07); }
.workbench-drawer-note span { color: #9fc6ff; font-size: 12px; }
.workbench-drawer-note p { margin: 7px 0 0; color: #d4e1f4; font-size: 13px; line-height: 1.6; }
.workbench-drawer-source { margin: 20px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.button-primary {
  border-color: rgba(117, 173, 255, .66);
  background: linear-gradient(135deg, #78adff, #4b8eff);
  color: #071120;
  box-shadow: 0 9px 22px rgba(75, 142, 255, .2), inset 0 1px rgba(255, 255, 255, .36);
}
.button-primary:hover { border-color: #b4d1ff; background: linear-gradient(135deg, #94c0ff, #5d98f1); transform: translateY(-1px); }
.button-secondary { border-color: rgba(75, 142, 255, .34); background: rgba(75, 142, 255, .1); color: #b6d4ff; }
.button-secondary:hover { border-color: rgba(117, 173, 255, .62); background: rgba(75, 142, 255, .17); }
.toast { border-color: rgba(75, 142, 255, .4); background: #102443; color: #c5dcff; }

@media (max-width: 980px) {
  .phase-settings-grid { grid-template-columns: 1fr; }
  .phase-settings-grid > :last-child { grid-column: auto; }
  .phase-task-row { grid-template-columns: minmax(0, 1fr) 132px auto; }
  .overview-business-grid { grid-template-columns: 1fr; }
  .overview-insight-grid { grid-template-columns: 1fr; }
  .platform-user-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .phase-message-item { grid-template-columns: 8px minmax(0, 1fr); align-items: start; }
  .phase-message-item .phase-record-open { grid-column: 2; width: max-content; }
  .phase-settings-profile { min-height: 112px; }
  .phase-settings-avatar { flex-basis: 58px; width: 58px; height: 58px; font-size: 22px; }
  .phase-bound-phone { align-items: flex-start; flex-direction: column; }
  .phase-bound-phone .button { width: 100%; }
  .overview-business-stats, .client-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-platform-stats { grid-template-columns: 1fr; }
  .platform-user-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-user-record dl, .platform-user-edit-form, .platform-user-form, .platform-access-review { grid-template-columns: 1fr; }
  .platform-user-edit-actions { grid-column: auto; }
  .phase-topbar-actions { gap: 6px; }
  .enterprise-relation-grid { grid-template-columns: 1fr; }
  .team-task-list article { grid-template-columns: minmax(0, 1fr) auto; }
  .team-task-list small { display: none; }
  .phase-organization-main { padding: 20px 14px 32px; }
  .phase-task-row { grid-template-columns: 1fr; }
  .coverage-example { padding: 14px; }
  .coverage-example header small { width: 100%; margin-left: 0; }
  .coverage-example > div { grid-template-columns: 1fr; }
}

/* Customer library: relationship is selected before customer subject. */
.customer-create-panel {
  border-color: rgba(117, 173, 255, .2);
  background: linear-gradient(155deg, rgba(22, 37, 62, .82), rgba(12, 20, 34, .72));
}

.customer-classification {
  display: grid;
  gap: 12px;
  margin: 2px 0 16px;
  padding: 14px;
  border: 1px solid rgba(160, 194, 235, .14);
  border-radius: 7px;
  background: rgba(4, 13, 29, .26);
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}

.customer-classification > div {
  display: grid;
  gap: 8px;
}

.customer-classification > div > span {
  color: #aabbd2;
  font-size: 12px;
  font-weight: 650;
}

.customer-classification-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.customer-classification-options button {
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid rgba(160, 194, 235, .14);
  border-radius: 6px;
  background: rgba(255, 255, 255, .025);
  color: #94a9c3;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.customer-classification-options button:hover {
  border-color: rgba(117, 173, 255, .46);
  background: rgba(75, 142, 255, .095);
  color: #d9e8ff;
  transform: translateY(-1px);
}

.customer-classification-options button.is-active {
  border-color: rgba(117, 173, 255, .74);
  background: linear-gradient(135deg, rgba(112, 169, 255, .28), rgba(75, 142, 255, .1));
  color: #e3efff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 6px 16px rgba(35, 104, 205, .13);
}

.customer-classification-options button:focus-visible {
  outline: 2px solid #a6cbff;
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .customer-create-panel { padding: 16px; }
  .customer-classification { gap: 14px; padding: 12px; }
  .customer-classification-options button { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .customer-classification-options button { transition: none; }
  .customer-classification-options button:hover { transform: none; }
}

/* Workbench navigation keeps the icon, name, and purpose visible at every width. */
.phase-workbench-standalone .workbench-layout { grid-template-columns: 252px minmax(0, 1fr); }
.phase-workbench-standalone .workbench-sidebar-nav button { min-height: 66px; }
.phase-workbench-standalone .workbench-tab-mark { flex: 0 0 auto; }
.phase-workbench-standalone .workbench-tab-mark svg { width: 17px; height: 17px; stroke-width: 1.7; }
.phase-workbench-standalone .workbench-tab-copy { gap: 4px; padding-right: 3px; }
.phase-workbench-standalone .workbench-tab-copy strong { color: inherit; }
.phase-workbench-standalone .workbench-tab-copy small {
  overflow: visible;
  color: #91a0b4;
  font-size: 11px;
  line-height: 1.38;
  text-overflow: clip;
  white-space: normal;
}

@media (max-width: 680px) {
  .phase-workbench-standalone .workbench-sidebar { padding: 9px; }
  .phase-workbench-standalone .workbench-sidebar-nav {
    display: grid;
    grid-auto-columns: minmax(156px, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 2px;
    scroll-snap-type: inline proximity;
  }
  .phase-workbench-standalone .workbench-sidebar-nav button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 62px;
    place-items: initial;
    padding: 9px;
    text-align: left;
    scroll-snap-align: start;
  }
  .phase-workbench-standalone .workbench-sidebar-nav button::before {
    top: 12px;
    right: auto;
    bottom: 12px;
    left: -1px;
    width: 2px;
    height: auto;
    border-radius: 0 2px 2px 0;
  }
  .phase-workbench-standalone .workbench-tab-copy { display: grid; }
}

/* Workbench visual system: information-first liquid glass, scoped to the standalone workspace. */
.phase-workbench-standalone {
  --wb-surface: rgba(11, 20, 36, .72);
  --wb-surface-strong: rgba(17, 31, 52, .88);
  --wb-surface-soft: rgba(88, 140, 216, .055);
  --wb-line: rgba(158, 194, 239, .14);
  --wb-line-strong: rgba(129, 178, 244, .34);
  --wb-text: #edf5ff;
  --wb-muted: #9aacc5;
  --wb-accent: #79adff;
  --wb-accent-soft: rgba(89, 151, 255, .14);
  position: relative;
  isolation: isolate;
  color: var(--wb-text);
  background:
    linear-gradient(120deg, rgba(9, 18, 35, .98) 0%, rgba(9, 22, 42, .97) 49%, rgba(12, 25, 43, .98) 100%),
    #08111f;
  background-size: 150% 150%;
  animation: wb-surface-sweep 18s ease-in-out infinite;
}

.phase-workbench-standalone::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(121, 173, 255, .035) 50%, transparent 100%);
  content: "";
  opacity: .75;
  pointer-events: none;
}

.phase-workbench-standalone-header {
  min-height: 72px;
  padding-inline: clamp(18px, 3vw, 42px);
  border-bottom-color: var(--wb-line);
  background: rgba(5, 12, 24, .68);
  box-shadow: 0 12px 34px rgba(1, 7, 17, .18);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

.phase-workbench-brand {
  gap: 10px;
  color: #cfe1ff;
  font-size: 14px;
  font-weight: 680;
}

.phase-workbench-brand .phase-logo-mark {
  color: #9bc5ff;
  filter: drop-shadow(0 0 10px rgba(100, 166, 255, .22));
}

.phase-workbench-identity {
  position: relative;
  gap: 3px;
  padding-inline: 18px;
}

.phase-workbench-identity::before,
.phase-workbench-identity::after {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--wb-line);
  content: "";
}

.phase-workbench-identity::before { left: 0; }
.phase-workbench-identity::after { right: 0; }
.phase-workbench-identity strong { color: #f4f8ff; font-size: 13px; font-weight: 700; }
.phase-workbench-identity span { color: #8da8ca; font-size: 11px; }

.phase-workbench-return,
.phase-workbench-logout {
  min-height: 34px;
  border-color: rgba(158, 194, 239, .17);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
  color: #aebfd6;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.phase-workbench-return:hover,
.phase-workbench-logout:hover {
  border-color: rgba(121, 173, 255, .48);
  background: rgba(89, 151, 255, .09);
  color: #e4efff;
  transform: translateY(-1px);
}

.phase-workbench-main {
  width: min(1540px, 100%);
  padding: clamp(26px, 3.3vw, 52px) clamp(18px, 3vw, 44px) 54px;
}

.phase-workbench-standalone .workbench-layout { grid-template-columns: 272px minmax(0, 1fr); gap: clamp(18px, 2.1vw, 30px); }

.phase-workbench-standalone .workbench-sidebar {
  top: 94px;
  gap: 17px;
  padding: 14px;
  border-color: var(--wb-line);
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(36, 56, 87, .38), rgba(9, 19, 34, .7));
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 18px 44px rgba(0, 8, 24, .22);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}

.phase-workbench-standalone .workbench-sidebar-label {
  margin: 2px 9px 1px;
  color: #9fb5d1;
  font-size: 11px;
  font-weight: 700;
}

.phase-workbench-standalone .workbench-sidebar-nav { gap: 7px; }

.phase-workbench-standalone .workbench-sidebar-nav button {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  min-height: 68px;
  padding: 10px;
  border-radius: 7px;
  color: #9db0c6;
}

.phase-workbench-standalone .workbench-sidebar-nav button::before {
  top: 13px;
  bottom: 13px;
  width: 2px;
}

.phase-workbench-standalone .workbench-sidebar-nav button:hover {
  border-color: rgba(121, 173, 255, .24);
  background: rgba(89, 151, 255, .075);
  color: #e5efff;
  transform: translateX(3px);
}

.phase-workbench-standalone .workbench-sidebar-nav button.is-active {
  border-color: rgba(121, 173, 255, .4);
  background: linear-gradient(100deg, rgba(89, 151, 255, .2), rgba(89, 151, 255, .04));
  color: #e8f2ff;
  box-shadow: inset 0 1px rgba(229, 241, 255, .09), 0 9px 22px rgba(2, 13, 31, .14);
}

.phase-workbench-standalone .workbench-sidebar-nav button.is-active::before {
  background: #85b7ff;
  box-shadow: 0 0 13px rgba(121, 173, 255, .6);
}

.phase-workbench-standalone .workbench-tab-mark {
  width: 38px;
  height: 38px;
  border-color: rgba(158, 194, 239, .15);
  border-radius: 8px;
  background: rgba(5, 13, 26, .5);
  color: #a9c4e7;
}

.phase-workbench-standalone .workbench-tab-mark svg { width: 18px; height: 18px; }
.phase-workbench-standalone .workbench-sidebar-nav button.is-active .workbench-tab-mark {
  border-color: rgba(134, 185, 255, .58);
  background: rgba(84, 145, 245, .16);
  color: #d9eaff;
  box-shadow: 0 0 17px rgba(89, 151, 255, .13);
}

.phase-workbench-standalone .workbench-tab-copy { gap: 5px; }
.phase-workbench-standalone .workbench-tab-copy strong { color: inherit; font-size: 13px; font-weight: 700; }
.phase-workbench-standalone .workbench-tab-copy small { color: #8ea2bc; font-size: 11px; line-height: 1.4; }
.phase-workbench-standalone .workbench-sidebar-footer { border-top-color: var(--wb-line); color: #899eb7; }
.phase-workbench-standalone .workbench-sidebar-footer strong { color: #cfe0f7; }

.phase-workbench-standalone .workbench-content { animation: wb-content-rise 480ms cubic-bezier(.2, .78, .2, 1) both; }
.phase-workbench-standalone .workbench-content-header {
  min-height: 108px;
  align-items: end;
  margin-bottom: 24px;
  padding: 6px 2px 22px;
  border-bottom-color: var(--wb-line);
}

.phase-workbench-standalone .workbench-content-header p {
  margin-bottom: 10px;
  color: #9eb1c9;
  font-size: 13px;
  line-height: 1.65;
}

.phase-workbench-standalone .workbench-content-header h1 {
  color: #f2f7ff;
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 730;
  line-height: 1.08;
}

.phase-workbench-standalone .workbench-content-header .phase-scope {
  border-color: rgba(121, 173, 255, .25);
  background: rgba(89, 151, 255, .08);
  color: #c7dcfb;
  font-size: 12px;
}

.phase-workbench-standalone .phase-workspace-metrics {
  gap: 12px;
  margin-bottom: 22px;
}

.phase-workbench-standalone .phase-workspace-metrics article {
  position: relative;
  display: grid;
  min-height: 126px;
  align-content: start;
  padding: 17px 18px;
  overflow: hidden;
  border-color: var(--wb-line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(28, 49, 79, .62), rgba(10, 21, 39, .72));
  box-shadow: inset 0 1px rgba(255, 255, 255, .075), 0 16px 34px rgba(0, 9, 26, .14);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  animation: wb-metric-in 450ms cubic-bezier(.2, .78, .2, 1) both;
}

.phase-workbench-standalone .phase-workspace-metrics article::before {
  width: 36px;
  height: 2px;
  margin-bottom: 15px;
  border-radius: 2px;
  background: #7bb1ff;
  box-shadow: 0 0 12px rgba(104, 164, 255, .42);
  content: "";
}

.phase-workbench-standalone .phase-workspace-metrics article:nth-child(2) { animation-delay: 55ms; }
.phase-workbench-standalone .phase-workspace-metrics article:nth-child(3) { animation-delay: 110ms; }
.phase-workbench-standalone .phase-workspace-metrics article:nth-child(4) { animation-delay: 165ms; }
.phase-workbench-standalone .phase-workspace-metrics article.is-alert::before { background: #f4a364; box-shadow: 0 0 12px rgba(244, 163, 100, .4); }
.phase-workbench-standalone .phase-workspace-metrics article.is-pushed::before { background: #78c9ad; box-shadow: 0 0 12px rgba(120, 201, 173, .36); }
.phase-workbench-standalone .phase-workspace-metrics article > span { color: #a8bad1; font-size: 12px; font-weight: 600; }
.phase-workbench-standalone .phase-workspace-metrics article > strong { margin-top: 7px; color: #edf5ff; font-family: var(--font-numeric); font-size: 34px; font-weight: 720; line-height: 1; }
.phase-workbench-standalone .phase-workspace-metrics article > small { margin-top: 11px; color: #8fa4bf; font-size: 11px; line-height: 1.4; }

.phase-workbench-standalone .workbench-digest-grid {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: 14px;
}

.phase-workbench-standalone .workbench-digest-side {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.phase-workbench-standalone .phase-panel {
  border-color: var(--wb-line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(24, 43, 69, .64), rgba(10, 20, 37, .72));
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 16px 36px rgba(0, 8, 25, .16);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
}

.phase-workbench-standalone .phase-panel-head { gap: 16px; padding-bottom: 15px; border-bottom: 1px solid rgba(158, 194, 239, .1); }
.phase-workbench-standalone .phase-panel-head h2 { color: #edf5ff; font-size: 16px; font-weight: 720; }
.phase-workbench-standalone .phase-panel-head span { color: #8fa4bf; font-size: 12px; line-height: 1.5; }
.phase-workbench-standalone .workbench-digest-project-list,
.phase-workbench-standalone .workbench-digest-exception-list { margin-top: 16px; }
.phase-workbench-standalone .workbench-digest-project { grid-template-columns: minmax(0, 1fr) 110px max-content; gap: 15px; padding: 15px 0; border-top-color: rgba(158, 194, 239, .1); }
.phase-workbench-standalone .workbench-digest-project .workbench-record-trigger { display: none; }
.phase-workbench-standalone .workbench-digest-project-main strong { color: #e5effd; font-size: 14px; font-weight: 680; }
.phase-workbench-standalone .workbench-digest-project-main span,
.phase-workbench-standalone .workbench-digest-exception span { color: #90a4bf; }
.phase-workbench-standalone .workbench-digest-progress { height: 5px; background: rgba(157, 194, 239, .12); }
.phase-workbench-standalone .workbench-digest-progress i { background: linear-gradient(90deg, #72aaff, #8ed3ff); }
.phase-workbench-standalone .workbench-digest-freshness { color: #a8c8ff; font-size: 12px; font-weight: 650; }
.phase-workbench-standalone .workbench-digest-project.is-watch .workbench-digest-freshness { color: #efbf71; }
.phase-workbench-standalone .workbench-digest-project.is-alert .workbench-digest-freshness { color: #f08f7d; }

.phase-workbench-standalone .workbench-feed-item,
.phase-workbench-standalone .workbench-record {
  padding: 16px 0;
  border-top-color: rgba(158, 194, 239, .1);
}

.phase-workbench-standalone .workbench-feed-item strong,
.phase-workbench-standalone .workbench-record strong { color: #e7f0ff; font-size: 14px; font-weight: 680; }
.phase-workbench-standalone .workbench-feed-item span,
.phase-workbench-standalone .workbench-record span,
.phase-workbench-standalone .workbench-record time { color: #90a4bf; }
.phase-workbench-standalone .workbench-feed-item p,
.phase-workbench-standalone .workbench-record p { color: #bacbe0; line-height: 1.65; }
.phase-workbench-standalone .workbench-record-trigger,
.phase-workbench-standalone .phase-record-open { color: #a9ccff; }
.phase-workbench-standalone .workbench-record-trigger:hover,
.phase-workbench-standalone .phase-record-open:hover { border-color: rgba(121, 173, 255, .34); background: rgba(89, 151, 255, .09); color: #e2efff; }

.phase-workbench-standalone .workbench-deal-brief dl { gap: 10px; }
.phase-workbench-standalone .workbench-deal-brief dl div { padding: 14px 12px; border-color: rgba(158, 194, 239, .1); border-radius: 7px; background: rgba(4, 13, 27, .22); }
.phase-workbench-standalone .workbench-deal-brief dt { color: #91a7c1; }
.phase-workbench-standalone .workbench-deal-brief dd { color: #d8e8ff; font-size: 22px; }

.phase-workbench-standalone .client-stage-card,
.phase-workbench-standalone .platform-user-record { border-color: rgba(158, 194, 239, .11); background: rgba(6, 16, 31, .24); }
.phase-workbench-standalone .client-stage-card { min-height: 94px; border-radius: 7px; }
.phase-workbench-standalone .client-stage-card span { color: #96abc3; }
.phase-workbench-standalone .client-stage-card strong { color: #d8e8ff; }

/* Operating overview: all figures are rendered from persisted business records. */
.phase-workbench-standalone .operating-summary-grid article.is-income::before { background: #59d69b; box-shadow: 0 0 13px rgba(89, 214, 155, .46); }
.phase-workbench-standalone .operating-summary-grid article.is-expense::before { background: #f0bd61; box-shadow: 0 0 13px rgba(240, 189, 97, .42); }
.phase-workbench-standalone .operating-summary-grid article.is-net::before { background: #76b6ff; box-shadow: 0 0 13px rgba(118, 182, 255, .42); }
.phase-workbench-standalone .operating-summary-grid article.is-income > strong { color: #8ee3b5; }
.phase-workbench-standalone .operating-summary-grid article.is-expense > strong { color: #f5cf89; }

.operating-visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.phase-workbench-standalone .operating-chart-panel,
.phase-workbench-standalone .operating-funnel-panel,
.phase-workbench-standalone .operating-finance-panel { min-width: 0; }
.operating-chart-panel .phase-panel-head,
.operating-funnel-panel .phase-panel-head { margin-bottom: 14px; }
.workbench-panel-kicker { margin: 0 0 6px; color: #75b4ff; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.operating-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.operating-chart-legend span { display: inline-flex; align-items: center; gap: 5px; color: #9db0c9; font-size: 11px; white-space: nowrap; }
.operating-chart-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6ea9ff; box-shadow: 0 0 10px rgba(110, 169, 255, .48); }
.operating-chart-legend .is-green i { background: #59d69b; box-shadow: 0 0 10px rgba(89, 214, 155, .48); }
.operating-chart-legend .is-amber i { background: #f0bd61; box-shadow: 0 0 10px rgba(240, 189, 97, .42); }
.operating-chart-wrap { position: relative; min-height: 230px; padding: 0 0 22px; overflow: hidden; }
.operating-line-chart { display: block; width: 100%; height: 206px; overflow: visible; }
.operating-chart-grid line { stroke: rgba(163, 194, 231, .12); stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.operating-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(111, 170, 255, .35)); }
.operating-line-green { stroke: #59d69b; filter: drop-shadow(0 0 5px rgba(89, 214, 155, .42)); }
.operating-line-amber { stroke: #f0bd61; filter: drop-shadow(0 0 5px rgba(240, 189, 97, .38)); }
.operating-chart-labels { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; padding: 0 8px; color: #7f94ae; font-size: 10px; text-align: center; }
.operating-chart-labels span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operating-chart-empty { position: absolute; inset: 0 0 22px; display: grid; place-items: center; margin: 0; color: #8599b2; font-size: 12px; pointer-events: none; }

.operating-funnel-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; }
.operating-funnel-metrics article { min-width: 0; padding: 8px 4px; text-align: center; }
.operating-funnel-metrics strong { display: block; color: #dbe9ff; font-family: var(--font-numeric); font-size: 25px; font-weight: 730; line-height: 1; }
.operating-funnel-metrics span { display: block; margin-top: 6px; overflow: hidden; color: #91a6bf; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.operating-funnel-bars { display: grid; gap: 10px; }
.operating-funnel-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center; }
.operating-funnel-row > span { color: #a1b3c9; font-size: 11px; }
.operating-funnel-row > div { height: 9px; overflow: hidden; border: 1px solid rgba(157, 193, 236, .1); border-radius: 999px; background: rgba(4, 14, 28, .38); }
.operating-funnel-row i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #628ef5, #84c6ff); box-shadow: 0 0 14px rgba(96, 147, 255, .44); }
.operating-funnel-row i.is-intent { background: linear-gradient(90deg, #55bce8, #71d7ff); box-shadow: 0 0 14px rgba(84, 188, 232, .42); }
.operating-funnel-row i.is-ready { background: linear-gradient(90deg, #d9a943, #f0c866); box-shadow: 0 0 14px rgba(240, 189, 97, .36); }
.operating-funnel-row i.is-signed { background: linear-gradient(90deg, #3cae7a, #5bd59c); box-shadow: 0 0 14px rgba(89, 214, 155, .38); }

.operating-finance-panel { margin-bottom: 14px; }
.operating-finance-panel > .phase-panel-head { align-items: flex-start; }
.operating-entry-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.operating-entry-buttons .button { min-height: 34px; padding-inline: 11px; font-size: 12px; }
.operating-finance-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }
.operating-finance-kpis article { min-width: 0; padding: 12px; border: 1px solid rgba(156, 194, 238, .11); border-radius: 6px; background: rgba(4, 15, 30, .24); }
.operating-finance-kpis span { display: block; color: #8ea3bd; font-size: 11px; }
.operating-finance-kpis strong { display: block; margin-top: 9px; overflow: hidden; color: #deecff; font-family: var(--font-numeric); font-size: 21px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.operating-trend-periods { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.operating-trend-periods button { min-width: 58px; min-height: 30px; padding: 0 10px; border: 1px solid rgba(156, 194, 238, .14); border-radius: 5px; background: rgba(5, 16, 32, .36); color: #91a7c3; font: inherit; font-size: 12px; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease; }
.operating-trend-periods button:hover { border-color: rgba(116, 205, 218, .48); color: #dffbff; transform: translateY(-1px); }
.operating-trend-periods button.is-active { border-color: rgba(110, 200, 214, .7); background: linear-gradient(135deg, rgba(84, 181, 203, .25), rgba(30, 98, 143, .22)); color: #e7fcff; box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 0 18px rgba(75, 181, 205, .12); }
.operating-chart-panel-embedded { margin-bottom: 18px; padding: 0; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.operating-chart-panel-embedded .phase-panel-head { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(158, 194, 239, .1); }
.operating-record-backdrop { z-index: 80; padding: 16px; background: rgba(1, 7, 16, .66); -webkit-backdrop-filter: blur(9px) saturate(132%); backdrop-filter: blur(9px) saturate(132%); }
.operating-record-modal { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(720px, 100%); max-height: calc(100dvh - 32px); padding: 20px; overflow: hidden; }
.operating-record-modal header { align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid rgba(158, 194, 239, .12); }
.operating-record-modal header p { margin: 0; }
.operating-record-modal header h2 { color: #e7f4ff; }
.operating-record-modal header span { display: block; max-width: 500px; margin-top: 6px; color: #90a8c5; font-size: 12px; line-height: 1.5; }
.operating-record-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.operating-record-modal .operating-record-form { min-height: 0; margin-top: 0; padding: 16px 4px 4px 0; overflow-y: auto; }
.operating-record-form label { display: grid; gap: 6px; min-width: 0; color: #9cb0c8; font-size: 12px; }
.operating-record-note { grid-column: 1 / -1; }
.operating-record-actions { position: sticky; bottom: 0; display: flex; grid-column: 1 / -1; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 0 3px; background: linear-gradient(180deg, rgba(7, 16, 29, 0), rgba(7, 16, 29, .96) 30%); }
.operating-record-actions span { color: #8ca0b9; font-size: 11px; line-height: 1.45; }
.operating-records-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid rgba(158, 194, 239, .1); }
.operating-records-head h3 { margin: 16px 0 12px; color: #e5effd; font-size: 14px; font-weight: 700; }
.operating-records-head span { color: #8ca0b9; font-size: 11px; }
.operating-record-list { display: grid; gap: 0; }
.operating-record-list article { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 2px; border-top: 1px solid rgba(158, 194, 239, .09); }
.operating-record-list article > div { min-width: 0; }
.operating-record-list strong, .operating-record-list span { display: block; }
.operating-record-list strong { color: #dfeeff; font-size: 13px; }
.operating-record-list span { margin-top: 5px; overflow: hidden; color: #8ca1bb; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.operating-record-list b { flex: 0 0 auto; color: #f1cb82; font-family: var(--font-numeric); font-size: 14px; }
.operating-record-list .is-income b { color: #7fdfaa; }
.operating-record-value { display: grid; justify-items: end; gap: 7px; flex: 0 0 auto; }
.operating-record-delete { min-height: 27px; padding: 4px 8px; font-size: 11px; }
.operating-record-delete-status { margin: 0 !important; color: #f1cb82 !important; font-size: 11px !important; white-space: normal !important; }
.operating-record-empty { margin: 0; }
.client-region-visual { margin: 0 0 14px; }
.client-region-heatmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.client-region-heatmap button { position: relative; min-height: 82px; overflow: hidden; padding: 12px; border: 1px solid rgba(156, 194, 238, .12); border-radius: 6px; background: rgba(5, 16, 32, .32); color: #dcecff; text-align: left; cursor: pointer; transition: border-color 180ms ease, transform 180ms ease, background 180ms ease; }
.client-region-heatmap button:hover { border-color: rgba(110, 200, 214, .48); transform: translateY(-2px); background: rgba(18, 62, 91, .32); }
.client-region-heatmap button.is-active { border-color: rgba(110, 200, 214, .72); background: rgba(28, 106, 133, .3); }
.client-region-heatmap button span, .client-region-heatmap button strong { position: relative; z-index: 1; display: block; }
.client-region-heatmap button span { max-width: calc(100% - 30px); overflow: hidden; color: #a9c1dc; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.client-region-heatmap button strong { margin-top: 10px; color: #f0fbff; font-family: var(--font-numeric); font-size: 22px; }
.client-region-heatmap button i { position: absolute; right: 0; bottom: 0; left: 0; height: var(--region-size); min-height: 5px; opacity: .72; background: linear-gradient(180deg, rgba(71, 181, 204, .08), rgba(63, 182, 207, .45)); pointer-events: none; }
.client-region-focus { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(158, 194, 239, .1); }
.client-region-focus > div:first-child strong, .client-region-focus > div:first-child span { display: block; }
.client-region-focus > div:first-child strong { color: #e6f3ff; font-size: 14px; }
.client-region-focus > div:first-child span { margin-top: 4px; color: #8ba2be; font-size: 11px; }
.client-region-focus > div:last-child { display: flex; min-width: 0; flex-wrap: wrap; gap: 7px; }
.client-region-focus button { min-width: 0; max-width: 100%; padding: 7px 9px; border: 1px solid rgba(156, 194, 238, .1); border-radius: 5px; background: rgba(5, 16, 32, .28); color: #cfe1f3; text-align: left; cursor: pointer; }
.client-region-focus button:hover { border-color: rgba(110, 200, 214, .45); }
.client-region-focus button span, .client-region-focus button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-region-focus button small { margin-top: 3px; color: #8ea5c0; font-size: 10px; }

@keyframes wb-surface-sweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes wb-content-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wb-metric-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1180px) {
  .phase-workbench-standalone .workbench-digest-project { grid-template-columns: minmax(0, 1fr) 96px max-content; gap: 11px; }
  .operating-finance-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .phase-workbench-standalone .workbench-digest-grid,
  .phase-workbench-standalone .workbench-digest-side { grid-template-columns: 1fr; }
  .phase-workbench-standalone .workbench-digest-side { grid-column: auto; }
  .operating-visual-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .phase-workbench-standalone-header { grid-template-columns: minmax(0, 1fr) auto; min-height: 64px; padding-inline: 14px; }
  .phase-workbench-brand { font-size: 13px; }
  .phase-workbench-identity { display: none; }
  .phase-workbench-main { padding: 22px 14px calc(104px + env(safe-area-inset-bottom)); }
  .phase-workbench-standalone .workbench-layout { grid-template-columns: 1fr; }
  .phase-workbench-standalone .workbench-content { order: 1; }
  .phase-workbench-standalone .workbench-sidebar {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    order: 2;
    gap: 0;
    width: 100%;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    background: rgba(9, 18, 32, .9);
    box-shadow: 0 -12px 30px rgba(0, 8, 24, .26);
  }
  .phase-workbench-standalone .workbench-sidebar-label,
  .phase-workbench-standalone .workbench-sidebar-footer { display: none; }
  .phase-workbench-standalone .workbench-sidebar-nav {
    display: grid;
    grid-auto-columns: minmax(78px, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 0;
    scroll-snap-type: inline proximity;
  }
  .phase-workbench-standalone .workbench-sidebar-nav button {
    grid-template-columns: 1fr;
    grid-template-rows: 30px auto;
    gap: 3px;
    min-height: 62px;
    padding: 5px 4px;
    place-items: center;
    text-align: center;
    scroll-snap-align: start;
  }
  .phase-workbench-standalone .workbench-sidebar-nav button::before {
    top: auto;
    right: 13px;
    bottom: -1px;
    left: 13px;
    width: auto;
    height: 2px;
    border-radius: 2px 2px 0 0;
  }
  .phase-workbench-standalone .workbench-tab-mark { width: 30px; height: 30px; }
  .phase-workbench-standalone .workbench-tab-copy { display: block; min-width: 0; padding: 0; }
  .phase-workbench-standalone .workbench-tab-copy strong { display: block; overflow: hidden; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  .phase-workbench-standalone .workbench-tab-copy small { display: none; }
  .phase-workbench-standalone .workbench-tab-badge { top: 3px; right: 8px; }
  .phase-workbench-standalone .workbench-content-header { min-height: 0; gap: 12px; margin-bottom: 18px; padding-bottom: 18px; }
  .phase-workbench-standalone .workbench-content-header h1 { font-size: 29px; }
  .phase-workbench-standalone .phase-workspace-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }
  .phase-workbench-standalone .phase-workspace-metrics article { min-height: 112px; padding: 14px; }
  .phase-workbench-standalone .phase-workspace-metrics article > strong { font-size: 29px; }
  .phase-workbench-standalone .phase-workspace-metrics article::before { width: 26px; margin-bottom: 12px; }
  .phase-workbench-standalone .phase-panel-head { display: grid; gap: 6px; }
  .phase-workbench-standalone .workbench-digest-project { grid-template-columns: minmax(0, 1fr) max-content; }
  .phase-workbench-standalone .workbench-digest-progress { display: none; }
  .operating-funnel-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operating-entry-buttons { justify-content: flex-start; }
  .client-region-focus { grid-template-columns: 1fr; gap: 9px; }
  .operating-record-form { grid-template-columns: 1fr; }
  .operating-record-note { grid-column: auto; }
  .operating-record-actions { grid-column: auto; align-items: flex-start; flex-direction: column; }
  .operating-records-head { display: grid; gap: 1px; }
  .operating-records-head h3 { margin-bottom: 4px; }
  .operating-record-list article { align-items: flex-start; }
  .operating-record-value { justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .phase-workbench-standalone,
  .phase-workbench-standalone .workbench-content,
  .phase-workbench-standalone .phase-workspace-metrics article { animation: none; }
  .phase-workbench-standalone .workbench-sidebar-nav button,
  .phase-workbench-return,
  .phase-workbench-logout { transition: none; }
  .phase-workbench-standalone .workbench-sidebar-nav button:hover,
  .phase-workbench-return:hover,
  .phase-workbench-logout:hover { transform: none; }
}

/* Shared cockpit system: one visual language across dashboard, organization and workbench. */
.phase-shell {
  color: var(--cockpit-text);
  background: var(--cockpit-bg);
  font-family: var(--font-sans);
}

.phase-workbench-standalone {
  color: var(--cockpit-text);
  background:
    linear-gradient(118deg, rgba(6, 15, 29, .99), rgba(8, 25, 43, .97) 52%, rgba(7, 17, 31, .99)),
    var(--cockpit-bg);
  font-family: var(--font-sans);
}

.phase-organization-standalone,
.phase-auth-shell {
  color: var(--cockpit-text);
  background:
    linear-gradient(135deg, rgba(7, 17, 31, .99), rgba(10, 27, 45, .97) 55%, rgba(6, 15, 28, .99)),
    var(--cockpit-bg);
  font-family: var(--font-sans);
}

.phase-shell .phase-panel,
.phase-shell .workspace-entry-card,
.phase-shell .organization-node,
.phase-shell .person-card,
.phase-organization-standalone .phase-panel,
.phase-organization-standalone .organization-node,
.phase-workbench-standalone .phase-panel {
  border-color: var(--cockpit-line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(33, 55, 80, .38), rgba(8, 20, 36, .48)),
    var(--cockpit-surface);
  box-shadow: inset 0 1px rgba(255, 255, 255, .075), 0 18px 42px rgba(1, 8, 20, .2);
  -webkit-backdrop-filter: blur(22px) saturate(132%);
  backdrop-filter: blur(22px) saturate(132%);
}

.phase-dialog-card {
  border: 1px solid var(--cockpit-line-strong);
  border-radius: 8px;
  background: var(--cockpit-surface-strong);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 30px 80px rgba(0, 5, 16, .52);
  -webkit-backdrop-filter: blur(28px) saturate(138%);
  backdrop-filter: blur(28px) saturate(138%);
}

.phase-dialog-card input,
.phase-dialog-card select,
.phase-dialog-card textarea,
.phase-shell .phase-form input,
.phase-shell .phase-form select,
.phase-shell .phase-form textarea,
.phase-workbench-standalone .phase-form input,
.phase-workbench-standalone .phase-form select,
.phase-workbench-standalone .phase-form textarea {
  border-color: var(--cockpit-line);
  background: rgba(4, 13, 27, .68);
  color: var(--cockpit-text);
}

.phase-dialog-card input:focus,
.phase-dialog-card select:focus,
.phase-dialog-card textarea:focus,
.phase-shell .phase-form :is(input, select, textarea):focus,
.phase-workbench-standalone .phase-form :is(input, select, textarea):focus {
  border-color: var(--cockpit-data);
  box-shadow: 0 0 0 3px rgba(110, 200, 214, .12);
  outline: 0;
}

.button-primary {
  border-color: rgba(244, 215, 151, .34);
  background: var(--cockpit-accent);
  color: #1d180f;
  box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 8px 20px rgba(84, 62, 18, .18);
}

.button-primary:hover {
  background: #e2c47e;
  box-shadow: inset 0 1px rgba(255, 255, 255, .34), 0 11px 26px rgba(96, 72, 24, .24);
}

.workbench-briefing-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 14px;
  align-items: start;
}

.workbench-ai-updates,
.workbench-commercial-progress,
.workbench-ai-updates > .phase-panel,
.workbench-commercial-progress > .phase-panel { min-width: 0; }

.workbench-ai-updates > .phase-panel,
.workbench-commercial-progress > .phase-panel { padding: 19px; }

.workbench-panel-kicker {
  margin: 0 0 6px;
  color: var(--cockpit-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.workbench-panel-count {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(110, 200, 214, .3);
  border-radius: 7px;
  background: rgba(110, 200, 214, .08);
  color: #bcecf2;
  font: 700 13px/1 var(--font-sans);
}

.workbench-panel-count.is-warning {
  border-color: rgba(226, 181, 91, .34);
  background: rgba(226, 181, 91, .09);
  color: #f1ce87;
}

.workbench-briefing-update-list,
.workbench-commercial-list {
  display: grid;
  max-height: 660px;
  overflow-y: auto;
  scrollbar-color: rgba(110, 200, 214, .28) transparent;
}

.workbench-briefing-update,
.workbench-commercial-row {
  position: relative;
  min-width: 0;
  padding: 16px 3px;
  border-top: 1px solid rgba(143, 188, 229, .11);
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  animation: briefing-row-in 420ms cubic-bezier(.2, .78, .2, 1) both;
}

.workbench-briefing-update:first-child,
.workbench-commercial-row:first-child { border-top: 0; }
.workbench-briefing-update:nth-child(2),
.workbench-commercial-row:nth-child(2) { animation-delay: 55ms; }
.workbench-briefing-update:nth-child(3),
.workbench-commercial-row:nth-child(3) { animation-delay: 110ms; }

.workbench-briefing-update:hover,
.workbench-commercial-row:hover {
  border-color: rgba(110, 200, 214, .22);
  background: rgba(110, 200, 214, .035);
  transform: translateY(-1px);
}

.workbench-update-head,
.workbench-commercial-row header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.workbench-update-head { justify-content: flex-start; }
.workbench-update-head > div,
.workbench-commercial-row header > div { min-width: 0; }

.workbench-briefing-update.is-unread {
  border-color: rgba(110, 200, 214, .24);
  background: linear-gradient(90deg, rgba(110, 200, 214, .07), transparent 58%);
}

.workbench-briefing-update.is-read { opacity: .72; }

.workbench-unread-indicator {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 7px;
  border: 1px solid rgba(110, 200, 214, .3);
  border-radius: 999px;
  background: rgba(110, 200, 214, .1);
  color: #aee4eb;
  font-size: 10px;
  font-weight: 700;
}

.workbench-briefing-update.is-read .workbench-unread-indicator {
  border-color: rgba(143, 166, 190, .18);
  background: rgba(143, 166, 190, .06);
  color: #8092a5;
}

.workbench-update-head strong,
.workbench-commercial-row header strong {
  display: block;
  overflow: hidden;
  color: var(--cockpit-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-update-head small,
.workbench-commercial-row time {
  color: var(--cockpit-muted);
  font-size: 11px;
  line-height: 1.5;
}

.workbench-update-type {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(110, 200, 214, .26);
  border-radius: 6px;
  background: rgba(110, 200, 214, .075);
  color: #a6e0e8;
  font-size: 11px;
  font-weight: 700;
}

.workbench-briefing-update.is-risk .workbench-update-type {
  border-color: rgba(235, 113, 105, .36);
  background: rgba(235, 113, 105, .09);
  color: #f0a29c;
}

.workbench-change-list {
  display: grid;
  gap: 5px;
  margin: 12px 0 10px 50px;
}

.workbench-change-list span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: #b8c9da;
  font-size: 12px;
  line-height: 1.55;
}

.workbench-change-list b { flex: 0 0 auto; color: #d7e3ef; font-weight: 650; }
.workbench-change-list svg { flex: 0 0 13px; width: 13px; height: 13px; color: var(--cockpit-data); }

.workbench-update-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 0 0 10px 50px;
}

.workbench-update-facts div { min-width: 0; }
.workbench-update-facts dt { color: #6f89a3; font-size: 10px; }
.workbench-update-facts dd {
  overflow: hidden;
  margin: 2px 0 0;
  color: #aebfd0;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-briefing-update .workbench-record-trigger { margin-left: 50px; }

.workbench-commercial-row header span {
  display: block;
  margin-bottom: 4px;
  color: var(--cockpit-data);
  font-size: 10px;
  font-weight: 650;
}

.workbench-commercial-stage {
  margin: 10px 0 8px;
  color: #d9e6f3;
  font-size: 12px;
  font-weight: 650;
}

.workbench-commercial-row dl { display: grid; gap: 4px; margin: 0; }
.workbench-commercial-row dl div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
.workbench-commercial-row dt { color: #7189a1; font-size: 11px; }
.workbench-commercial-row dd { overflow-wrap: anywhere; margin: 0; color: #aebfd0; font-size: 11px; }
.workbench-commercial-next { margin: 9px 0 8px; color: #c5d2df; font-size: 12px; line-height: 1.55; }
.workbench-commercial-row.is-completed { opacity: .58; filter: saturate(.55); }
.workbench-commercial-row.is-risk .workbench-commercial-stage { color: #ee9289; }

.workbench-briefing-lower {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
  gap: 14px;
  margin-top: 14px;
}

.workbench-briefing-lower > .phase-panel { min-width: 0; padding: 19px; }
.workbench-briefing-empty { min-height: 160px; align-content: center; }

.workbench-drawer-changes { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cockpit-line); }
.workbench-drawer-changes > span { color: var(--cockpit-data); font-size: 11px; font-weight: 700; }
.workbench-drawer-changes > div { display: grid; gap: 8px; margin-top: 11px; }
.workbench-drawer-changes article { padding: 10px; border: 1px solid var(--cockpit-line); border-radius: 7px; background: rgba(4, 13, 27, .34); }
.workbench-drawer-changes strong { color: #dce9f5; font-size: 12px; }
.workbench-drawer-changes p { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: center; gap: 6px; margin: 7px 0 0; font-size: 11px; }
.workbench-drawer-changes del { color: #8b9cad; text-decoration-color: rgba(235, 113, 105, .65); }
.workbench-drawer-changes ins { color: #b9e7ec; text-decoration: none; }
.workbench-drawer-changes svg { width: 14px; color: var(--cockpit-data); }
.workbench-drawer-history { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cockpit-line); }
.workbench-drawer-history > span { color: var(--cockpit-data); font-size: 11px; font-weight: 700; }
.workbench-drawer-history > div { display: grid; gap: 8px; margin-top: 11px; }
.workbench-drawer-history article { padding: 10px; border: 1px solid var(--cockpit-line); border-radius: 7px; background: rgba(4, 13, 27, .28); }
.workbench-drawer-history header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.workbench-drawer-history strong { color: #dce9f5; font-size: 12px; }
.workbench-drawer-history time,
.workbench-drawer-history small { color: #8094a8; font-size: 10px; }
.workbench-drawer-history p { margin: 7px 0 0; color: #aebfd0; font-size: 11px; line-height: 1.55; }
.workbench-contact-line { color: #9eb2c7 !important; font-size: 12px; }
.phase-workbench-drawer { animation: cockpit-drawer-in 260ms cubic-bezier(.2, .78, .2, 1) both; }

@keyframes briefing-row-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cockpit-drawer-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 880px) {
  .workbench-briefing-grid { grid-template-columns: 1fr; }
  .workbench-briefing-lower { grid-template-columns: 1fr; }
  .workbench-briefing-update-list,
  .workbench-commercial-list { max-height: none; }
}

@media (max-width: 560px) {
  .workbench-update-facts { grid-template-columns: 1fr; }
  .workbench-change-list,
  .workbench-update-facts,
  .workbench-briefing-update .workbench-record-trigger { margin-left: 0; }
  .workbench-update-head strong { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .workbench-briefing-update,
  .workbench-commercial-row,
  .phase-workbench-drawer { animation: none; }
  .workbench-briefing-update,
  .workbench-commercial-row { transition: none; }
  .workbench-briefing-update:hover,
  .workbench-commercial-row:hover { transform: none; }
}

/* Decision center: a dark frosted operational surface with semantic priority states. */
.decision-center { display: grid; gap: 14px; min-width: 0; }
.decision-center-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  padding: 4px 2px 8px;
}
.decision-center-header h2 { margin: 4px 0 5px; color: #e9f0f8; font-size: 22px; line-height: 1.25; }
.decision-center-header > div > span { display: block; max-width: 660px; color: #8fa3b9; font-size: 12px; line-height: 1.7; }
.decision-center-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.decision-center-header-actions > span { color: #9eb2c6; font-size: 12px; white-space: nowrap; }
.decision-center-header-actions b { color: #e6bf73; font-size: 18px; font-variant-numeric: tabular-nums; }

.decision-create-details {
  border: 1px solid rgba(168, 190, 212, .12);
  border-radius: 8px;
  background: rgba(8, 19, 35, .42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.decision-create-details summary { padding: 13px 15px; color: #b5c9dc; font-size: 13px; font-weight: 650; cursor: pointer; }
.decision-create-details[open] summary { border-bottom: 1px solid rgba(168, 190, 212, .1); }
.decision-create-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 16px; }
.decision-create-form .decision-create-steps { grid-column: 1 / -1; }
.decision-create-form > .button { width: max-content; }

.decision-recommendation-list { display: grid; gap: 14px; }
.decision-recommendation-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 22px 24px 20px;
  border: 1px solid rgba(173, 194, 218, .14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(27, 40, 58, .8), rgba(9, 17, 30, .74) 54%, rgba(10, 19, 31, .6)),
    rgba(8, 16, 28, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 34px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  animation: decision-card-enter 420ms cubic-bezier(.2, .75, .2, 1) both;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease, filter 180ms ease;
}
.decision-recommendation-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #d4a84f;
  opacity: .82;
}
.decision-recommendation-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70%;
  right: -18%;
  width: 45%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218, 177, 91, .09), transparent 68%);
  pointer-events: none;
}
.decision-recommendation-card.is-urgent::before { background: #e06c68; }
.decision-recommendation-card.is-important::before { background: #d4a84f; }
.decision-recommendation-card.is-routine::before { background: #6ea4d8; }
.decision-recommendation-card:hover { border-color: rgba(216, 185, 117, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), 0 20px 42px rgba(0, 0, 0, .25); transform: translateY(-2px); }
.decision-recommendation-card.is-deferred { opacity: .58; filter: saturate(.42); }
.decision-recommendation-card.is-deferred:hover { transform: none; border-color: rgba(168, 190, 212, .16); }

.decision-recommendation-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid rgba(169, 190, 212, .1); }
.decision-recommendation-head > div:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
.decision-recommendation-head h2 { margin: 0; color: #eaf1f8; font-size: 17px; line-height: 1.45; font-weight: 700; }
.decision-priority-badge { display: inline-flex; flex: 0 0 auto; align-items: center; height: 22px; padding: 0 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; }
.decision-priority-badge.is-urgent { color: #ec817c; background: rgba(184, 72, 72, .1); }
.decision-priority-badge.is-important { color: #e3b762; background: rgba(184, 133, 47, .1); }
.decision-priority-badge.is-routine { color: #87b9e7; background: rgba(67, 123, 180, .1); }
.decision-recommendation-state { display: grid; justify-items: end; gap: 4px; color: #98abc0; font-size: 11px; white-space: nowrap; }
.decision-recommendation-state time { color: #71869d; font-variant-numeric: tabular-nums; }

.decision-recommendation-body { display: grid; gap: 15px; padding: 18px 0 14px; }
.decision-recommendation-body section > span,
.decision-recommendation-steps > span,
.decision-recommendation-adjustment > span { display: block; color: #788ea7; font-size: 11px; font-weight: 700; }
.decision-recommendation-body p { max-width: 1100px; margin: 6px 0 0; color: #b9c8d7; font-size: 13px; line-height: 1.7; }
.decision-recommendation-body p.is-emphasis { color: #edf3f8; font-weight: 620; }
.decision-recommendation-meta { display: flex; align-items: stretch; margin: 0; padding: 13px 0; border-top: 1px solid rgba(169, 190, 212, .1); border-bottom: 1px solid rgba(169, 190, 212, .1); }
.decision-recommendation-meta div { display: grid; gap: 5px; min-width: 0; padding: 0 22px; border-left: 1px solid rgba(169, 190, 212, .1); }
.decision-recommendation-meta div:first-child { padding-left: 0; border-left: 0; }
.decision-recommendation-meta dt { color: #7388a0; font-size: 10px; }
.decision-recommendation-meta dd { overflow-wrap: anywhere; margin: 0; color: #d9e4ee; font-size: 12px; }
.decision-recommendation-steps { padding: 16px 0 4px; }
.decision-recommendation-steps ol { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: decision-step; }
.decision-recommendation-steps li { display: flex; align-items: baseline; gap: 9px; color: #aebfd0; font-size: 12px; line-height: 1.55; counter-increment: decision-step; }
.decision-recommendation-steps li::before { content: counter(decision-step); display: inline-grid; flex: 0 0 18px; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(204, 174, 108, .26); border-radius: 50%; color: #d5b369; font-size: 10px; }
.decision-recommendation-steps p { margin: 8px 0 0; color: #8fa4ba; font-size: 12px; }
.decision-recommendation-adjustment { margin-top: 12px; padding: 11px 13px; border: 1px solid rgba(212, 168, 79, .28); border-radius: 5px; background: rgba(212, 168, 79, .055); }
.decision-recommendation-adjustment p { margin: 5px 0 0; color: #b9c8d7; font-size: 12px; line-height: 1.55; }
.decision-recommendation-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 19px; padding-top: 15px; border-top: 1px solid rgba(169, 190, 212, .1); }
.decision-recommendation-actions .button { width: 100%; min-height: 38px; }
.decision-recommendation-complete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(169, 190, 212, .1); color: #8ea4b9; font-size: 12px; }
.decision-recommendation-complete .workbench-record-trigger { margin: 0; }
.decision-adjust-intro { margin: 0 0 17px; color: #9bb0c5; font-size: 13px; line-height: 1.65; }
.decision-adjust-form { display: grid; gap: 14px; }

@keyframes decision-card-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 880px) {
  .decision-center-header { align-items: start; flex-direction: column; }
  .decision-center-header-actions { justify-content: start; }
  .decision-create-form { grid-template-columns: 1fr; }
  .decision-recommendation-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .decision-recommendation-meta div { padding: 0 12px; }
  .decision-recommendation-meta div:first-child { padding-left: 0; }
}

@media (max-width: 560px) {
  .decision-center-header h2 { font-size: 19px; }
  .decision-recommendation-card { padding: 17px 16px; }
  .decision-recommendation-head { align-items: start; flex-direction: column; gap: 9px; }
  .decision-recommendation-state { justify-items: start; }
  .decision-recommendation-meta { grid-template-columns: 1fr; gap: 9px; }
  .decision-recommendation-meta div { padding: 0; border-left: 0; }
  .decision-recommendation-actions { grid-template-columns: 1fr; }
  .decision-recommendation-complete { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .decision-recommendation-card { animation: none; transition: none; }
  .decision-recommendation-card:hover { transform: none; }
}

/* Business task center: concise operational controls with a bounded creation flow. */
.phase-dialog-card.customer-create-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(680px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  overflow: hidden;
}

.customer-create-dialog .customer-create-form {
  min-height: 0;
  padding: 0 22px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.customer-create-dialog .customer-create-form .phase-form { padding-bottom: 2px; }
.customer-create-dialog .customer-dialog-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 6px -2px -2px;
  padding: 14px 2px 2px;
  border-top: 1px solid rgba(160, 194, 235, .12);
  background: linear-gradient(180deg, rgba(12, 18, 29, .7), rgba(12, 18, 29, .98) 42%);
}

.customer-agent-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(75, 142, 255, .18);
  border-radius: 7px;
  background: rgba(75, 142, 255, .055);
}
.customer-agent-fields legend { padding: 0 5px; color: #a9cdff; font-size: 12px; }

.command-center { display: grid; gap: 18px; }
.command-center-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 4px 2px 2px; }
.command-center-head h2, .command-quick-grid h3, .task-ai-console h3 { margin: 0; color: #edf5ff; font-size: 19px; font-weight: 650; }
.command-center-head span, .command-quick-grid header span, .task-ai-console span { color: #94a7ba; font-size: 12px; line-height: 1.55; }
.command-quick-grid, .task-ai-console, .command-status-panel { padding: 18px; border: 1px solid rgba(160, 194, 235, .12); border-radius: 8px; background: linear-gradient(145deg, rgba(37, 66, 107, .16), rgba(13, 20, 31, .64)); box-shadow: inset 0 1px rgba(255, 255, 255, .045); }
.command-quick-grid header, .task-ai-console > div { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.command-quick-grid > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.command-quick-grid button { display: grid; gap: 5px; min-height: 88px; padding: 14px; border: 1px solid rgba(160, 194, 235, .12); border-radius: 7px; background: rgba(6, 13, 23, .34); color: #dce9f8; text-align: left; transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.command-quick-grid button:hover { border-color: rgba(92, 157, 255, .45); background: rgba(53, 109, 190, .14); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); transform: translateY(-2px); }
.command-quick-grid button b { font-size: 13px; font-weight: 650; }
.command-quick-grid button small { color: #91a6ba; font-size: 11px; line-height: 1.45; }
.task-ai-console form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.task-ai-console textarea { min-height: 76px; border-color: rgba(108, 166, 244, .22); background: linear-gradient(135deg, rgba(8, 23, 42, .96), rgba(14, 31, 53, .8)); box-shadow: inset 0 1px rgba(255, 255, 255, .035); color: #e6f1ff; }
.task-ai-console textarea:focus { border-color: rgba(105, 171, 255, .7); box-shadow: 0 0 0 3px rgba(75, 142, 255, .12), inset 0 1px rgba(255, 255, 255, .045); }

.task-status-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.task-status-column { min-height: 132px; padding: 13px; border: 1px solid rgba(160, 194, 235, .1); border-radius: 7px; background: rgba(4, 10, 18, .27); }
.task-status-column header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #aab9c9; font-size: 12px; }
.task-status-column header strong { color: #e4effc; font-size: 18px; font-weight: 650; }
.task-status-column button { display: grid; width: 100%; gap: 3px; margin-top: 7px; padding: 8px; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .025); color: #dce9f7; text-align: left; }
.task-status-column button:hover { background: rgba(75, 142, 255, .12); }
.task-status-column button b { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.task-status-column button small, .task-status-column p { margin: 0; color: #8399ae; font-size: 11px; }
.task-status-column.is-overdue { border-color: rgba(231, 123, 109, .35); }
.task-status-column.is-overdue header strong { color: #f39789; }
.task-status-column.is-progress { border-color: rgba(96, 184, 222, .25); }
.task-status-column.is-review { border-color: rgba(232, 185, 101, .28); }
.task-status-column.is-review header strong { color: #e9c479; }
.task-status-column.is-done { border-color: rgba(94, 185, 139, .22); }

.phase-task-list { container-type: inline-size; }
.task-lifecycle-row { grid-template-columns: minmax(0, 1fr) minmax(112px, .38fr); align-items: center; gap: 14px; }
.command-center .workbench-two-column { grid-template-columns: minmax(0, 1.65fr) minmax(270px, .75fr); }
.task-lifecycle-row.is-overdue { border-color: rgba(231, 123, 109, .36); background: linear-gradient(100deg, rgba(174, 64, 58, .11), rgba(16, 24, 36, .68)); }
.task-lifecycle-row.is-done { opacity: .72; }
.task-lifecycle-row.is-review { border-color: rgba(232, 185, 101, .24); background: linear-gradient(100deg, rgba(129, 89, 24, .11), rgba(16, 24, 36, .68)); }
.task-row-main, .task-row-title, .task-row-actions { display: flex; min-width: 0; }
.task-row-main { flex-direction: column; gap: 5px; }
.task-row-main > span, .task-row-main small { color: #91a5ba; font-size: 11px; line-height: 1.45; }
.task-row-title { align-items: center; gap: 8px; }
.task-row-title strong { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.task-type-chip { padding: 3px 6px; border: 1px solid rgba(106, 164, 247, .22); border-radius: 4px; background: rgba(75, 142, 255, .09); color: #a8ceff; font-size: 10px; white-space: nowrap; }
.task-row-actions { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-end; gap: 7px; padding-top: 12px; border-top: 1px solid rgba(160, 194, 235, .12); }
.task-row-actions .button, .task-row-actions .workbench-record-trigger { min-height: 32px; margin: 0; padding-inline: 10px; font-size: 12px; }
.task-row-actions .phase-progress-form { display: flex; gap: 6px; }
.task-row-actions .phase-progress-form input { width: 58px; min-height: 32px; }
.file-task-dispatch-form { gap: 15px; }
.file-task-dispatch-intro { margin: 0; padding: 12px 14px; border: 1px solid rgba(89, 160, 250, .24); border-radius: 6px; background: rgba(45, 111, 203, .1); color: #a9c9ec; font-size: 12px; line-height: 1.6; }
.file-task-dispatch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.file-task-dispatch-grid .file-task-title { grid-column: 1 / -1; }
.file-task-delivery-requirements, .file-task-action-steps, .file-task-reference-attachments { grid-column: 1 / -1; }
.file-task-delivery-requirements textarea { min-height: 118px; }
.file-task-reference-attachments { padding: 12px; border: 1px dashed rgba(104, 171, 255, .3); border-radius: 6px; background: rgba(6, 19, 34, .28); }
.file-task-reference-attachments input { margin-top: 8px; }

@container (min-width: 760px) {
  .task-lifecycle-row { grid-template-columns: minmax(0, 1fr) 116px minmax(228px, max-content); gap: 18px; }
  .task-row-actions { grid-column: auto; flex-wrap: nowrap; padding-top: 0; border-top: 0; }
}

@media (max-width: 620px) {
  .file-task-dispatch-grid { grid-template-columns: 1fr; }
}
.task-file-summary { display: grid; gap: 5px; margin-top: 3px; }
.task-file-summary > span { color: #8fa6be; font-size: 10px; }
.task-file-summary > div { display: flex; flex-wrap: wrap; gap: 5px; }
.task-file-summary button { max-width: 150px; overflow: hidden; padding: 3px 6px; border: 1px solid rgba(103, 162, 239, .18); border-radius: 4px; background: rgba(70, 132, 216, .08); color: #aacefb; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.task-file-summary button:hover { border-color: rgba(105, 171, 255, .5); background: rgba(70, 132, 216, .16); }
.task-return-reason { color: #efb5a9 !important; }
.task-attachment-input { grid-column: 1 / -1; }
.employee-task-stack, .employee-operating { display: grid; min-width: 0; gap: 16px; }
.employee-completed-tasks { opacity: .84; }
.employee-operating-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 4px 2px 2px; }
.employee-operating-head h2 { margin: 0; color: #edf5ff; font-size: 19px; font-weight: 650; }
.employee-operating-head p { margin: 0 0 7px; }
.employee-operating-head span { display: block; margin-top: 7px; color: #94a7ba; font-size: 12px; }
.employee-operating-metrics { margin: 0; }
.position-management-panel { min-height: 420px; }
.platform-user-form .phase-dialog-actions { align-items: center; justify-content: flex-end; }
.client-lifecycle-actions { margin-left: auto; align-self: center; justify-content: flex-end; }

.broadcast-list { display: grid; gap: 9px; }
.broadcast-list article { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid rgba(160, 194, 235, .1); border-radius: 6px; background: rgba(8, 15, 26, .35); }
.broadcast-list article.is-read { opacity: .58; }
.broadcast-list article > div { display: grid; gap: 4px; min-width: 0; }
.broadcast-list strong { font-size: 13px; font-weight: 600; }
.broadcast-list span { overflow: hidden; color: #91a5ba; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.broadcast-list em { color: #82ab9a; font-size: 11px; font-style: normal; }

@media (max-width: 980px) {
  .command-quick-grid > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-status-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .phase-dialog-card.customer-create-dialog { max-height: calc(100dvh - 16px); }
  .customer-create-dialog .customer-create-form { padding-inline: 15px; }
  .customer-agent-fields, .command-quick-grid > div, .task-status-board { grid-template-columns: 1fr; }
  .command-center-head, .command-quick-grid header, .task-ai-console > div { align-items: start; flex-direction: column; }
  .task-ai-console form { grid-template-columns: 1fr; }
  .command-center-head .button { width: 100%; }
  .customer-create-dialog .customer-dialog-actions { justify-content: stretch; }
  .customer-create-dialog .customer-dialog-actions .button { flex: 1; }
  .employee-operating-head { align-items: stretch; flex-direction: column; }
  .task-attachment-input { grid-column: auto; }
}

/* Keep the full dashboard rail for every desktop window. Mobile alone uses a bottom navigator. */
@media (min-width: 681px) {
  .phase-shell { grid-template-columns: 246px minmax(0, 1fr); }

  .phase-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100dvh;
    height: 100dvh;
    padding: 24px 16px 18px;
    border-right: 1px solid rgba(160, 194, 235, .12);
    border-bottom: 0;
  }

  .phase-user-summary { margin: 28px 8px; padding-bottom: 0; }
  .phase-nav { display: grid; width: 100%; margin-left: 0; }
  .phase-nav button { width: 100%; }
  .phase-logout { margin-top: auto; }
}

@media (max-width: 680px) {
  .command-center .workbench-two-column { grid-template-columns: 1fr; }
  .task-lifecycle-row { grid-template-columns: 1fr; }
  .task-row-actions { flex-wrap: wrap; justify-content: flex-start; }
  .phase-shell { display: block; }

  .phase-main {
    padding: 0 14px calc(94px + env(safe-area-inset-bottom));
  }

  .phase-sidebar {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: block;
    min-height: 0;
    height: auto;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border: 1px solid rgba(160, 194, 235, .16);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background: rgba(7, 16, 29, .94);
    box-shadow: 0 -12px 30px rgba(0, 8, 24, .28);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    backdrop-filter: blur(22px) saturate(135%);
  }

  .phase-sidebar > .phase-logo,
  .phase-sidebar > .phase-user-summary,
  .phase-sidebar > .phase-logout { display: none; }

  .phase-nav {
    display: grid;
    grid-auto-columns: minmax(68px, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 4px;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .phase-nav::-webkit-scrollbar { display: none; }

  .phase-nav button {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 27px auto;
    gap: 2px;
    min-height: 62px;
    min-width: 68px;
    padding: 5px 2px;
    place-items: center;
    text-align: center;
    font-size: 10px;
    line-height: 1.2;
  }

  .phase-nav-icon-wrap { width: 18px; height: 18px; }
  .phase-nav-icon { width: 17px; height: 17px; }
  .phase-nav-count { top: 3px; right: 8px; }
  .phase-nav button.is-active::before { top: auto; right: 14px; bottom: -1px; left: 14px; width: auto; height: 2px; }
}

/* Customer lifecycle applications remain distinct from regular follow-up updates. */
.client-lifecycle-panel { margin-bottom: 16px; }

.client-lifecycle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.client-lifecycle-actions .button {
  min-height: 32px;
  padding-inline: 11px;
  font-size: 12px;
}

.client-delete-action {
  color: #ffb4a4;
  border-color: rgba(244, 132, 96, .38);
}

.client-delete-action:hover {
  background: rgba(244, 132, 96, .12);
  color: #ffd3ca;
}

.client-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.client-status-frozen {
  border: 1px solid rgba(142, 194, 255, .3);
  background: rgba(93, 157, 235, .13);
  color: #abd2ff;
}

.workbench-record.is-frozen {
  border-left: 2px solid #74b3ff;
  padding-left: 12px;
  background: linear-gradient(90deg, rgba(77, 142, 232, .08), transparent 42%);
}

.client-lifecycle-request small { color: #9fc6ff; }

@media (max-width: 680px) {
  .client-lifecycle-panel .phase-panel-head { align-items: flex-start; }
  .client-lifecycle-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .client-lifecycle-actions .button { width: 100%; }
  .client-lifecycle-actions .button:only-child { grid-column: 1 / -1; }
}

/* Position setup uses a denser, grouped permission surface than personal access overrides. */
.position-create-dialog {
  width: min(760px, calc(100vw - 28px));
}

/* Override the generic scrollable dialog width for the dedicated position form. */
.phase-dialog-card.phase-dialog-scrollable.position-create-dialog {
  width: min(760px, calc(100vw - 28px));
}

.position-create-dialog > header {
  padding: 24px 28px 20px;
}

.position-dialog-subtitle {
  max-width: 530px;
  margin: 8px 0 0;
  color: #9dafc5;
  font-size: 12px;
  line-height: 1.6;
}

.position-create-form {
  display: grid;
  gap: 20px;
}

.position-field-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 12px;
}

.position-form-field {
  display: grid;
  gap: 7px;
  color: #b8c8d9;
  font-size: 12px;
  font-weight: 700;
}

.position-form-field input {
  min-height: 42px;
  border-color: rgba(160, 194, 235, .16);
  background: rgba(4, 15, 27, .42);
}

.position-form-field input:focus {
  border-color: #57a7ff;
  box-shadow: 0 0 0 3px rgba(80, 164, 255, .12);
}

.position-scope-section,
.position-permission-section {
  padding: 16px;
  border: 1px solid rgba(160, 194, 235, .12);
  border-radius: 8px;
  background: rgba(4, 16, 29, .18);
}

.position-section-head h3 {
  margin: 0;
  color: #e8f1fb;
  font-size: 15px;
  line-height: 1.35;
}

.position-section-head p {
  margin: 4px 0 0;
  color: #72849a;
  font-size: 11px;
  line-height: 1.45;
}

.position-scope-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.position-scope-option {
  position: relative;
  display: block;
  min-height: 72px;
  padding: 11px;
  border: 1px solid rgba(160, 194, 235, .12);
  border-radius: 7px;
  background: rgba(9, 24, 41, .42);
  color: #9dafc5;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.position-scope-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.position-scope-option strong,
.position-scope-option small {
  display: block;
}

.position-scope-option strong {
  margin-bottom: 5px;
  color: inherit;
  font-size: 12px;
}

.position-scope-option small {
  font-size: 11px;
  line-height: 1.4;
}

.position-scope-option:hover {
  border-color: rgba(109, 177, 247, .4);
  color: #dcecff;
}

.position-scope-option:has(input:checked) {
  border-color: rgba(86, 165, 255, .7);
  background: rgba(75, 143, 221, .16);
  color: #dceeff;
}

.position-scope-option:has(input:focus-visible),
.position-permission-option:has(input:focus-visible) {
  outline: 2px solid #7ab8ff;
  outline-offset: 2px;
}

.position-permission-section { padding-bottom: 14px; }

.position-permission-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.position-permission-toolbar .position-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.position-permission-toolbar [data-position-permission-count] {
  flex: 0 0 auto;
  color: #9fcaff;
  font-size: 12px;
  white-space: nowrap;
}

.position-permission-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.position-permission-actions button {
  min-height: 28px;
  padding: 4px 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #8bbfff;
  font-size: 12px;
}

.position-permission-actions button:hover {
  background: rgba(83, 159, 245, .12);
  color: #d8ebff;
}

.position-permission-groups { display: grid; gap: 10px; }

.position-permission-group {
  padding: 14px;
  border: 1px solid rgba(160, 194, 235, .1);
  border-radius: 7px;
  background: rgba(7, 21, 36, .28);
}

.position-permission-group header { margin-bottom: 10px; }
.position-permission-group h3 { margin: 0; color: #dfeaf6; font-size: 13px; }
.position-permission-group p { margin: 4px 0 0; color: #72849a; font-size: 11px; }

.position-permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.position-permission-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(160, 194, 235, .1);
  border-radius: 6px;
  background: rgba(255, 255, 255, .014);
  color: #9dafc5;
  cursor: pointer;
  font-size: 12px;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.position-permission-option:hover {
  border-color: rgba(113, 167, 228, .36);
  color: #d5e5f6;
}

.position-permission-option:has(input:checked) {
  border-color: rgba(91, 167, 253, .5);
  background: rgba(65, 141, 227, .12);
  color: #dceeff;
}

.position-permission-option input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2f87ef;
}

.position-permission-note {
  margin: 12px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(217, 199, 126, .2);
  border-radius: 6px;
  background: rgba(217, 199, 126, .06);
  color: #d7cfaa;
  font-size: 12px;
  line-height: 1.55;
}

.position-permission-note strong { color: #f0e4a5; }

@media (max-width: 680px) {
  .position-create-dialog { width: calc(100vw - 16px); }
  .phase-dialog-card.phase-dialog-scrollable.position-create-dialog { width: calc(100vw - 16px); }
  .position-create-dialog > header { padding: 20px 18px 16px; }
  .position-field-grid { grid-template-columns: 1fr; }
  .position-scope-options, .position-permission-list { grid-template-columns: 1fr; }
  .position-permission-toolbar { align-items: stretch; flex-direction: column; }
  .position-permission-toolbar .position-section-head { justify-content: space-between; }
}

/* Full-site entrance and interaction layer */
:root {
  --cockpit-bg: #07111f;
  --cockpit-surface: rgba(13, 28, 49, .76);
  --cockpit-surface-strong: rgba(12, 28, 49, .94);
  --cockpit-line: rgba(145, 191, 241, .16);
  --cockpit-line-strong: rgba(145, 191, 241, .34);
  --cockpit-accent: #2f78ee;
  --cockpit-data: #78b8ff;
  --cockpit-text: #edf5ff;
  --cockpit-muted: #8fa7c3;
}

.phase-entry-landing {
  position: relative;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  background:
    linear-gradient(118deg, rgba(6, 15, 29, .99), rgba(9, 31, 55, .98) 52%, rgba(7, 17, 31, .99)),
    var(--cockpit-bg);
}

.phase-entry-surface {
  display: grid;
  width: min(720px, 100%);
  gap: 26px;
  padding: 42px;
  border: 1px solid var(--cockpit-line-strong);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(43, 77, 120, .42), rgba(8, 23, 42, .72)),
    var(--cockpit-surface);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 30px 84px rgba(0, 6, 20, .42);
  -webkit-backdrop-filter: blur(26px) saturate(134%);
  backdrop-filter: blur(26px) saturate(134%);
  animation: phase-entry-surface 360ms cubic-bezier(.2, .78, .2, 1) both;
}

.phase-entry-surface::before {
  display: block;
  width: 52px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #78b8ff, transparent);
  box-shadow: 0 0 18px rgba(120, 184, 255, .55);
  content: "";
}

.phase-entry-brand,
.phase-auth-brand .phase-entry-brand {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(117, 177, 255, .58);
  border-radius: 8px;
  background: rgba(67, 133, 227, .14);
  color: #b7d7ff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 0 26px rgba(68, 140, 248, .16);
}

.phase-entry-brand .phase-logo-mark,
.phase-auth-brand .phase-entry-brand .phase-logo-mark { height: 22px; }
.phase-entry-brand .phase-logo-mark i,
.phase-auth-brand .phase-entry-brand .phase-logo-mark i { width: 4px; background: currentColor; box-shadow: 0 0 9px rgba(152, 201, 255, .45); }

.phase-entry-copy { display: grid; gap: 12px; max-width: 570px; }
.phase-entry-copy p {
  margin: 0;
  color: #96c3ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.phase-entry-copy h1 {
  margin: 0;
  color: #f1f7ff;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.28;
}

.phase-entry-copy span {
  color: #9db2cc;
  font-size: 14px;
  line-height: 1.75;
}

.phase-entry-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid rgba(158, 197, 241, .14);
}

.phase-entry-actions small { color: #7891ad; font-size: 11px; }
.phase-entry-trigger { min-width: 146px; }

.phase-auth-login {
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .8fr);
  gap: 0;
  padding: 0;
  background:
    linear-gradient(118deg, rgba(6, 15, 29, .99), rgba(9, 31, 55, .98) 52%, rgba(7, 17, 31, .99)),
    var(--cockpit-bg);
}

.phase-auth-login .phase-auth-brand {
  align-self: stretch;
  justify-content: center;
  padding: 54px;
  background:
    linear-gradient(145deg, rgba(56, 105, 174, .14), transparent 56%),
    rgba(8, 23, 42, .48);
  animation: phase-auth-side-in 360ms cubic-bezier(.2, .78, .2, 1) both;
}

.phase-auth-login .phase-auth-brand > p { color: #9bc5ff; }
.phase-auth-login .phase-auth-brand h1 { color: #f3f8ff; font-size: 32px; }
.phase-auth-login .phase-auth-card {
  align-self: stretch;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 54px;
  border: 0;
  border-left: 1px solid var(--cockpit-line);
  border-radius: 0;
  background: rgba(6, 17, 31, .74);
  box-shadow: none;
  animation: phase-auth-card-in 320ms cubic-bezier(.2, .78, .2, 1) both;
}

.phase-auth-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.phase-auth-card-head > span { color: #8099b6; font-size: 11px; }
.phase-auth-back { min-height: 30px; padding-inline: 0; border-color: transparent; background: transparent; color: #9ec7ff; }
.phase-auth-back:hover { border-color: transparent; background: transparent; color: #e8f3ff; transform: translateX(-2px); }

.phase-identity-shell {
  grid-template-columns: minmax(0, 1fr) minmax(380px, .76fr);
  grid-template-rows: 1fr;
  gap: 0;
  padding: 0;
}

.phase-identity-shell .phase-auth-brand {
  align-self: stretch;
  justify-content: center;
  padding: 54px;
  border-right: 1px solid var(--cockpit-line);
}

.phase-identity-shell .phase-identity-card {
  display: grid;
  align-content: center;
  gap: 22px;
  width: auto;
  max-width: none;
  min-height: 100%;
  margin: 0;
  padding: 54px;
  border: 0;
  border-radius: 0;
  background: rgba(7, 18, 33, .78);
  box-shadow: none;
  animation: phase-auth-card-in 320ms cubic-bezier(.2, .78, .2, 1) both;
}

.phase-identity-card-head { display: grid; gap: 7px; }
.phase-identity-card-head p { margin: 0; color: #85b9ff; font-size: 12px; font-weight: 700; }
.phase-identity-card-head h1 { margin: 0; color: #f3f8ff; font-size: 28px; line-height: 1.28; }
.phase-identity-card-head span { color: #8fa7c3; font-size: 13px; line-height: 1.55; }
.phase-identity-person { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid rgba(133, 185, 255, .16); border-radius: 8px; background: rgba(5, 16, 30, .4); }
.phase-identity-person > div:last-child { display: grid; min-width: 0; gap: 4px; }
.phase-identity-person > div:last-child > strong { color: #edf5ff; font-size: 16px; }
.phase-identity-person > div:last-child > span { color: #93a9c4; font-size: 12px; line-height: 1.5; }
.phase-identity-avatar,
.phase-settings-avatar { display: grid; flex: 0 0 auto; overflow: hidden; width: 72px; height: 72px; place-items: center; border: 1px solid rgba(101, 165, 255, .62); border-radius: 50%; background: linear-gradient(145deg, rgba(74, 135, 232, .26), rgba(17, 55, 104, .72)); color: #b8d5ff; font-size: 30px; font-weight: 750; box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 0 0 4px rgba(48, 119, 238, .1); }
.phase-identity-avatar img,
.phase-settings-avatar img { width: 100%; height: 100%; object-fit: cover; }
.phase-avatar-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; }
.phase-avatar-upload label { position: relative; display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border: 1px solid rgba(124, 181, 255, .4); border-radius: 5px; background: rgba(60, 124, 220, .1); color: #b7d6ff; cursor: pointer; font-size: 11px; font-weight: 650; }
.phase-avatar-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.phase-avatar-upload label:hover { border-color: rgba(153, 202, 255, .76); background: rgba(60, 124, 220, .2); }
.phase-avatar-upload .button { min-height: 30px; padding-inline: 10px; font-size: 11px; }
.phase-avatar-upload small { flex-basis: 100%; color: #7892af; font-size: 10px; line-height: 1.35; }
.phase-identity-facts { display: grid; margin: 0; border-top: 1px solid rgba(145, 191, 241, .14); }
.phase-identity-facts > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(145, 191, 241, .12); }
.phase-identity-facts dt { color: #7f98b6; font-size: 12px; }
.phase-identity-facts dd { min-width: 0; margin: 0; overflow: hidden; color: #e7f1ff; font-size: 14px; font-weight: 650; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.phase-identity-note { margin: 0; color: #8fa7c3; font-size: 12px; line-height: 1.6; }
.phase-identity-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 2px; }
.phase-identity-actions .button { min-width: 106px; }

.operating-summary-grid .is-potential { min-width: 0; }
.phase-workbench-standalone .operating-summary-grid .is-potential > strong { overflow: hidden; margin-top: 8px; color: #b8d6ff; font-size: 23px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.operating-summary-grid .is-potential > small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.button-primary {
  position: relative;
  overflow: hidden;
  border-color: rgba(142, 191, 255, .68);
  background: linear-gradient(135deg, #5c9fff, #2f78ee);
  color: #f8fbff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 9px 22px rgba(31, 99, 210, .28);
}

.button-primary::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 26%, rgba(255, 255, 255, .24) 48%, transparent 66%);
  content: "";
  transform: translateX(-140%);
  transition: transform 360ms cubic-bezier(.2, .78, .2, 1);
}

.button-primary:hover {
  border-color: rgba(178, 212, 255, .82);
  background: linear-gradient(135deg, #70adff, #3d85f2);
  box-shadow: inset 0 1px rgba(255, 255, 255, .36), 0 12px 26px rgba(31, 99, 210, .34);
}

.button-primary:hover::before { transform: translateX(140%); }
.button:not(:disabled) { transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 100ms ease; }
.button:not(:disabled):active { transform: scale(.985); }

.phase-nav button,
.phase-workbench-standalone .workbench-sidebar-nav button {
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 160ms ease;
}

.phase-nav button:hover,
.phase-workbench-standalone .workbench-sidebar-nav button:hover { transform: translateX(2px); }

.phase-workspace-trigger {
  border-color: rgba(114, 175, 255, .62);
  background: linear-gradient(135deg, #5c9fff, #2f78ee);
  color: #f8fbff;
}

.phase-workspace-trigger:hover { border-color: rgba(178, 212, 255, .82); background: linear-gradient(135deg, #70adff, #3d85f2); }

.phase-shell .phase-panel,
.phase-organization-standalone .phase-panel,
.phase-workbench-standalone .phase-panel {
  border-color: var(--cockpit-line);
  background:
    linear-gradient(145deg, rgba(34, 63, 99, .5), rgba(7, 19, 35, .7)),
    var(--cockpit-surface);
}

.phase-modal-backdrop {
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(1, 9, 18, .7);
  -webkit-backdrop-filter: blur(10px) saturate(128%);
  backdrop-filter: blur(10px) saturate(128%);
}

.phase-modal-backdrop .phase-dialog-card {
  max-height: calc(100dvh - 40px);
  animation: phase-modal-scale-in 280ms cubic-bezier(.2, .78, .2, 1) both;
}

.phase-dialog-card.phase-dialog-scrollable > form {
  min-height: 0;
  overflow-y: auto;
}

.phase-dialog-card.phase-dialog-scrollable .phase-dialog-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-bottom: -1px;
  padding-top: 16px;
  background: linear-gradient(180deg, rgba(10, 24, 42, 0), rgba(10, 24, 42, .98) 32%);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .phase-entry-surface,
  .phase-shell .phase-panel,
  .phase-workbench-standalone .phase-panel,
  .phase-dialog-card { background: #10233b; }
}

@keyframes phase-entry-surface {
  from { opacity: .12; transform: translateY(14px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes phase-auth-side-in {
  from { opacity: .1; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes phase-auth-card-in {
  from { opacity: .1; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes phase-modal-scale-in {
  from { opacity: .1; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 680px) {
  .phase-entry-landing { padding: 16px; }
  .phase-entry-surface { gap: 22px; padding: 28px 22px; }
  .phase-entry-copy h1 { font-size: 27px; }
  .phase-entry-actions { align-items: stretch; flex-direction: column; }
  .phase-entry-actions small { text-align: center; }
  .phase-entry-trigger { width: 100%; }
  .phase-auth-login,
  .phase-identity-shell { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
  .phase-auth-login .phase-auth-brand,
  .phase-identity-shell .phase-auth-brand { display: none; }
  .phase-auth-login .phase-auth-card,
  .phase-identity-shell .phase-identity-card { min-height: 100dvh; padding: 28px 20px; border: 0; }
  .phase-identity-card { align-content: center; }
  .phase-identity-card-head h1 { font-size: 25px; }
  .phase-identity-person { align-items: flex-start; }
  .phase-identity-actions { flex-direction: column-reverse; }
  .phase-identity-actions .button { width: 100%; }
  .phase-modal-backdrop { padding: 8px; }
  .phase-modal-backdrop .phase-dialog-card { max-height: calc(100dvh - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .phase-entry-surface,
  .phase-auth-login .phase-auth-brand,
  .phase-auth-login .phase-auth-card,
  .phase-identity-shell .phase-identity-card,
  .phase-modal-backdrop .phase-dialog-card,
  .phase-modal-backdrop { animation: none !important; }
  .button,
  .phase-nav button,
  .phase-workbench-standalone .workbench-sidebar-nav button { transition: none !important; }
}

/* Centered identity confirmation */
.phase-identity-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: 100dvh;
  place-items: center;
  gap: 0;
  padding: clamp(20px, 4vw, 56px);
  background:
    radial-gradient(circle at 50% 42%, rgba(52, 125, 226, .18), transparent 32%),
    linear-gradient(145deg, rgba(6, 17, 31, .98), rgba(8, 29, 52, .96));
}

.phase-identity-shell .phase-auth-brand { display: none; }

.phase-identity-shell .phase-identity-card {
  width: min(560px, 100%);
  max-width: 560px;
  min-height: 0;
  max-height: calc(100dvh - 40px);
  margin: 0;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid rgba(135, 190, 255, .2);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(52, 97, 150, .3), rgba(7, 19, 35, .82)),
    rgba(8, 21, 38, .84);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 26px 64px rgba(0, 4, 12, .48);
  overflow: auto;
  animation: phase-modal-scale-in 280ms cubic-bezier(.2, .78, .2, 1) both;
}

.phase-identity-card-head { justify-items: center; text-align: center; }
.phase-identity-card-head h1 { font-size: clamp(24px, 3vw, 29px); }
.phase-identity-actions { justify-content: stretch; }
.phase-identity-actions .button { flex: 1 1 0; }

.operating-chart-wrap[data-operating-chart] {
  overflow: visible;
  cursor: crosshair;
}

.operating-chart-hover-layer[hidden] { display: none; }
.operating-chart-guide {
  stroke: rgba(168, 210, 255, .72);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.operating-chart-hover-point {
  fill: #ecf7ff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.operating-chart-hover-point-green { stroke: #59d69b; }
.operating-chart-hover-point-amber { stroke: #f0bd61; }

.operating-chart-tooltip {
  position: absolute;
  top: 8px;
  z-index: 4;
  display: grid;
  min-width: 142px;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid rgba(146, 197, 255, .32);
  border-radius: 6px;
  background: rgba(5, 16, 30, .94);
  box-shadow: 0 12px 28px rgba(0, 5, 15, .42);
  color: #edf6ff;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.operating-chart-tooltip.is-visible { opacity: 1; transform: translate(-50%, 0); }
.operating-chart-tooltip[data-side="left"] { transform: translate(0, -4px); }
.operating-chart-tooltip.is-visible[data-side="left"] { transform: translate(0, 0); }
.operating-chart-tooltip[data-side="right"] { transform: translate(-100%, -4px); }
.operating-chart-tooltip.is-visible[data-side="right"] { transform: translate(-100%, 0); }
.operating-chart-tooltip > strong { color: #c8e1ff; font-size: 11px; font-weight: 750; }
.operating-chart-tooltip [data-operating-chart-tooltip-values] { display: grid; gap: 5px; }
.operating-chart-tooltip span { display: flex; align-items: center; gap: 6px; color: #aebfd5; font-size: 11px; }
.operating-chart-tooltip span i { width: 6px; height: 6px; border-radius: 50%; background: #59d69b; box-shadow: 0 0 8px rgba(89, 214, 155, .46); }
.operating-chart-tooltip span.is-amber i { background: #f0bd61; box-shadow: 0 0 8px rgba(240, 189, 97, .42); }
.operating-chart-tooltip span b { margin-left: auto; color: #f1f7ff; font-size: 11px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .operating-chart-tooltip { transition: none; }
}

/* Project profiles and shared ownership */
.project-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(252px, 286px);
  gap: 16px;
  align-items: start;
}

.project-workspace-main { min-width: 0; }

.project-workspace-body {
  display: grid;
  grid-template-columns: minmax(224px, .76fr) minmax(0, 1.64fr);
  min-height: 450px;
  border-top: 1px solid rgba(141, 190, 240, .13);
}

.project-workspace-list {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 14px;
  border-right: 1px solid rgba(141, 190, 240, .13);
  background: rgba(3, 13, 26, .28);
}

.project-list-head { display: grid; gap: 3px; padding: 4px 5px 9px; }
.project-list-head > span { color: #cfe5ff; font-size: 12px; font-weight: 750; }
.project-list-head small { color: #86a2c2; font-size: 11px; line-height: 1.45; }

.project-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 9px;
  width: 100%;
  min-height: 74px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #a9bfd8;
  text-align: left;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.project-list-item:hover { border-color: rgba(106, 167, 239, .25); background: rgba(42, 102, 176, .13); transform: translateX(2px); }
.project-list-item.is-active { border-color: rgba(91, 161, 244, .5); background: linear-gradient(135deg, rgba(51, 130, 220, .24), rgba(23, 63, 112, .19)); box-shadow: inset 2px 0 #72b1ff; }
.project-list-item.is-risk { border-color: rgba(232, 154, 74, .38); }
.project-list-item span { display: grid; min-width: 0; gap: 4px; }
.project-list-item strong { overflow: hidden; color: #e4f1ff; font-size: 13px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.project-list-item small { overflow: hidden; color: #91a9c4; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.project-list-item em { align-self: start; color: #78d6dd; font-size: 12px; font-style: normal; font-weight: 760; }
.project-list-item i { grid-column: 1 / -1; color: #7190af; font-size: 10px; font-style: normal; }
.project-list-empty { margin: 8px; }

.project-workspace-detail { min-width: 0; padding: 20px; }
.project-detail-empty { display: grid; min-height: 300px; place-items: center; text-align: center; }

.project-profile { display: grid; gap: 18px; }
.project-profile > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.project-profile > header span { display: block; margin-bottom: 5px; color: #74cbd1; font-size: 11px; font-weight: 760; }
.project-profile > header h2 { margin: 0; color: #f0f7ff; font-size: 22px; line-height: 1.2; }
.project-profile > header p { margin: 7px 0 0; color: #9ab2cb; font-size: 12px; }
.project-profile-actions { flex: 0 0 auto; }

.project-progress-summary { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid rgba(116, 185, 255, .17); border-radius: 6px; background: rgba(14, 51, 92, .2); }
.project-progress-summary > div:first-child { display: grid; gap: 4px; }
.project-progress-summary span { color: #8ca7c4; font-size: 11px; }
.project-progress-summary strong { color: #c7ebf0; font-size: 19px; font-weight: 780; }
.project-progress-summary small { color: #8faec9; font-size: 11px; }
.project-progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(116, 162, 210, .17); }
.project-progress-track i { display: block; width: var(--project-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #54a9f7, #62d1c8); box-shadow: 0 0 12px rgba(93, 191, 238, .48); }

.project-profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid rgba(141, 190, 240, .13); border-radius: 6px; overflow: hidden; }
.project-profile-facts > div { min-width: 0; padding: 13px 14px; border-bottom: 1px solid rgba(141, 190, 240, .1); }
.project-profile-facts > div:nth-child(odd) { border-right: 1px solid rgba(141, 190, 240, .1); }
.project-profile-facts > div:nth-last-child(-n + 2) { border-bottom: 0; }
.project-profile-facts dt { margin-bottom: 6px; color: #7995b2; font-size: 10px; }
.project-profile-facts dd { overflow-wrap: anywhere; margin: 0; color: #d6e8f8; font-size: 12px; line-height: 1.5; }
.project-profile-note { padding: 14px; border-left: 2px solid #60b8ea; background: rgba(23, 64, 104, .17); }
.project-profile-note span { color: #8bb6da; font-size: 11px; font-weight: 720; }
.project-profile-note p { margin: 7px 0 0; color: #c6d9ed; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }

.project-workspace-actions { position: sticky; top: 18px; }
.project-action-stack { display: grid; gap: 9px; padding-top: 2px; }
.project-action-stack .button { width: 100%; justify-content: flex-start; text-align: left; }
.project-action-stack .button:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.project-action-summary { display: grid; gap: 6px; margin-top: 17px; padding-top: 16px; border-top: 1px solid rgba(141, 190, 240, .13); }
.project-action-summary span { color: #7896b5; font-size: 10px; }
.project-action-summary strong { color: #dceeff; font-size: 13px; }
.project-action-summary small { color: #8aa6c1; font-size: 11px; }

.business-responsibility-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 0 0; color: #89a8c6; font-size: 11px; }
.business-responsibility-summary > span { min-width: 0; overflow-wrap: anywhere; }
.business-responsibility-summary strong { color: #d5e9fc; font-weight: 720; }
.business-responsibility-summary .button { min-height: 28px; margin-left: auto; padding: 0 9px; font-size: 11px; }
.business-responsibility-summary.is-compact { padding: 4px 0 2px; }

.project-profile-form { gap: 20px; }
.project-form-section { display: grid; gap: 13px; padding: 0 0 20px; border-bottom: 1px solid rgba(141, 190, 240, .13); }
.project-form-section > header { display: flex; gap: 10px; align-items: flex-start; }
.project-form-section > header > span { display: grid; flex: 0 0 auto; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: rgba(77, 153, 238, .18); color: #83c4ff; font-size: 10px; font-weight: 800; }
.project-form-section h3 { margin: 0; color: #dfefff; font-size: 14px; }
.project-form-section p { margin: 4px 0 0; color: #8da8c4; font-size: 11px; line-height: 1.5; }
.project-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.project-form-grid .project-form-wide { grid-column: 1 / -1; }
.project-link-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.project-profile-form select[multiple], .project-links-form select[multiple] { min-height: 126px; padding: 7px; }
.project-profile-form label > small { display: block; margin-top: 5px; color: #7895b2; font-size: 10px; }
.project-form-owner-note { margin: 0; color: #a4bdd3; font-size: 12px; }

.business-responsibility-picker { display: grid; gap: 8px; }
.business-responsibility-option { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 12px; border: 1px solid rgba(141, 190, 240, .17); border-radius: 6px; background: rgba(11, 34, 62, .34); cursor: pointer; }
.business-responsibility-option:has(input:checked) { border-color: rgba(95, 179, 255, .5); background: rgba(45, 110, 183, .2); }
.business-responsibility-option.is-primary { cursor: default; }
.business-responsibility-option input { width: 16px; height: 16px; accent-color: #5faeff; }
.business-responsibility-option span { display: grid; gap: 3px; }
.business-responsibility-option strong { color: #dcecff; font-size: 13px; }
.business-responsibility-option small { color: #89a6c3; font-size: 11px; }

.task-responsibility-picker { display: grid; gap: 12px; margin: 2px 0; padding: 14px; border: 1px solid rgba(105, 168, 240, .24); border-radius: 6px; background: linear-gradient(135deg, rgba(16, 53, 91, .5), rgba(7, 25, 48, .5)); box-shadow: inset 0 1px rgba(178, 219, 255, .04); }
.task-responsibility-picker > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid rgba(141, 190, 240, .14); }
.task-responsibility-picker > header > div { display: grid; gap: 3px; }
.task-responsibility-picker > header span { color: #77b9ff; font-size: 10px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.task-responsibility-picker > header strong { color: #e3f0ff; font-size: 14px; font-weight: 680; }
.task-responsibility-picker > header > small { max-width: 235px; color: #86a3bf; font-size: 11px; line-height: 1.5; text-align: right; }
.task-primary-field { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; }
.task-primary-field > span { color: #c9ddf2; font-size: 12px; font-weight: 650; }
.task-primary-field select { min-width: 0; }
.task-collaborator-heading { display: flex; align-items: baseline; gap: 8px; }
.task-collaborator-heading > span { color: #c9ddf2; font-size: 12px; font-weight: 650; }
.task-collaborator-heading > small { color: #7695b2; font-size: 10px; }
.task-responsibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 168px; overflow: auto; padding-right: 3px; }
.task-responsibility-option { display: grid; grid-template-columns: 16px 28px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 54px; padding: 8px 10px; border: 1px solid rgba(141, 190, 240, .16); border-radius: 5px; background: rgba(9, 30, 57, .42); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.task-responsibility-option:hover { border-color: rgba(120, 190, 255, .38); background: rgba(24, 70, 117, .32); transform: translateY(-1px); }
.task-responsibility-option:has(input:checked) { border-color: rgba(95, 179, 255, .65); background: rgba(45, 110, 183, .28); box-shadow: inset 0 0 0 1px rgba(135, 204, 255, .08); }
.task-responsibility-option input { width: 15px; height: 15px; margin: 0; accent-color: #5faeff; }
.task-responsibility-avatar { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(136, 196, 255, .29); border-radius: 50%; background: rgba(65, 139, 217, .18); color: #bae0ff; font-size: 11px; font-weight: 760; }
.task-responsibility-member { display: grid; gap: 3px; min-width: 0; }
.task-responsibility-member strong { overflow: hidden; color: #dcecff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.task-responsibility-member small { overflow: hidden; color: #89a6c3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.task-responsibility-empty { grid-column: 1 / -1; margin: 0; padding: 12px; border: 1px dashed rgba(141, 190, 240, .18); border-radius: 5px; color: #7895b2; font-size: 11px; text-align: center; }

/* Preserve the workbench rail while giving project details enough reading width on compact desktops. */
@media (min-width: 681px) and (max-width: 1160px) {
  .project-workspace { grid-template-columns: 1fr; }
  .project-workspace-actions { position: static; order: -1; }
  .project-workspace-actions .phase-panel { display: grid; gap: 14px; }
  .project-action-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-action-stack .button { min-height: 42px; justify-content: center; text-align: center; white-space: normal; }
  .project-action-summary { margin-top: 0; padding-top: 0; border-top: 0; }
}

@media (min-width: 681px) and (max-width: 820px) {
  .project-action-stack { grid-template-columns: 1fr; }
  .project-workspace-body { grid-template-columns: 1fr; min-height: 0; }
  .project-workspace-list { max-height: 260px; overflow-y: auto; border-right: 0; border-bottom: 1px solid rgba(141, 190, 240, .13); }
  .project-workspace-detail { padding: 16px; }
}

@media (max-width: 680px) {
  .project-workspace {
    grid-template-columns: 1fr;
  }
  .project-workspace-actions { position: static; order: -1; }
  .project-workspace-body { grid-template-columns: 1fr; min-height: 0; }
  .project-workspace-list { max-height: 292px; overflow-y: auto; border-right: 0; border-bottom: 1px solid rgba(141, 190, 240, .13); }
  .project-workspace-detail { padding: 16px; }
  .project-profile > header, .project-progress-summary { align-items: stretch; flex-direction: column; }
  .project-progress-summary { grid-template-columns: 1fr; gap: 9px; }
  .project-profile-facts, .project-form-grid, .project-link-selects { grid-template-columns: 1fr; }
  .project-profile-facts > div { border-right: 0 !important; border-bottom: 1px solid rgba(141, 190, 240, .1) !important; }
  .project-profile-facts > div:last-child { border-bottom: 0 !important; }
  .project-form-grid .project-form-wide { grid-column: auto; }
  .project-profile-actions .button { width: 100%; }
}

@media (max-width: 500px) {
  .task-responsibility-picker { padding: 12px; }
  .task-responsibility-picker > header { display: grid; gap: 5px; }
  .task-responsibility-picker > header > small { max-width: none; text-align: left; }
  .task-primary-field { grid-template-columns: 1fr; gap: 6px; }
  .task-responsibility-grid { grid-template-columns: 1fr; }
}

/* Auth material layer: scoped so dashboard actions retain their existing treatment. */
.phase-auth-material-shell {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100dvh;
  place-items: center;
  padding: clamp(20px, 4vw, 48px);
  overflow: hidden;
  color: #edf7ff;
  background:
    linear-gradient(122deg, transparent 0 46%, rgba(64, 163, 220, .09) 46.1% 46.24%, transparent 46.38%),
    linear-gradient(27deg, transparent 0 68%, rgba(99, 209, 229, .05) 68.1% 68.25%, transparent 68.4%),
    linear-gradient(145deg, #06101d, #09233d 54%, #06121f);
}

.phase-auth-material-shell::before {
  inset: 18px;
  width: auto;
  height: auto;
  border: 1px solid rgba(108, 184, 231, .15);
  border-radius: 0;
  background-image: linear-gradient(90deg, rgba(99, 209, 229, .05) 1px, transparent 1px), linear-gradient(rgba(99, 209, 229, .04) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .8;
  transform: none;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .65), transparent 88%);
}

.phase-auth-material-shell::after { display: none; }

.phase-auth-material-shell .phase-auth-window {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .74fr);
  width: min(900px, 100%);
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(82, 143, 187, .5);
  border-radius: 16px;
  background: #0a1a2b;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 28px 74px rgba(0, 6, 20, .52);
  animation: phase-auth-material-in 340ms cubic-bezier(.2, .78, .2, 1) both;
}

.phase-auth-material-shell .phase-auth-window::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px);
  content: "";
  opacity: .25;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.phase-auth-material-shell .phase-auth-card,
.phase-auth-material-shell .phase-auth-aside,
.phase-auth-material-shell .phase-identity-card { position: relative; z-index: 1; }

.phase-auth-material-shell .phase-auth-card {
  display: grid;
  align-content: center;
  width: auto;
  min-height: 100%;
  margin: 0;
  padding: clamp(32px, 6vw, 58px);
  border: 0;
  border-radius: 0;
  background: linear-gradient(150deg, rgba(13, 37, 61, .98), rgba(5, 18, 32, .99) 82%);
  box-shadow: none;
}

.phase-auth-material-shell .phase-auth-login-card {
  min-height: 0;
  max-height: 100%;
  align-content: start;
}

.phase-auth-login-card .phase-auth-intro { order: 1; }
.phase-auth-login-card .public-demo-login { order: 2; }
.phase-auth-login-card > label { order: 3; }
.phase-auth-login-card > .phase-auth-submit { order: 4; }
.phase-auth-login-card > .phase-auth-links { order: 5; }
.phase-auth-login-card > .phase-auth-trust { order: 6; }

.phase-auth-material-shell .phase-auth-card-head { margin-bottom: 30px; }
.phase-auth-material-shell .phase-auth-card-head > span { color: #70c4db; font-size: 12px; }
.phase-auth-material-shell .phase-auth-back { color: #a2bfd3; }
.phase-auth-material-shell .phase-auth-back:hover { color: #e8f7ff; }
.phase-auth-intro { display: grid; gap: 10px; margin-bottom: 29px; }
.phase-auth-intro p { margin: 0; color: #63d1e5; font-size: 12px; font-weight: 700; }
.phase-auth-intro h1 { margin: 0; color: #f0f9ff; font-size: clamp(28px, 3vw, 35px); line-height: 1.25; }
.phase-auth-intro span { color: #9bb6ca; font-size: 14px; line-height: 1.65; }

.phase-auth-material-shell .phase-auth-card label { gap: 8px; color: #bed7e7; font-size: 13px; }
.phase-auth-material-shell .phase-auth-card input {
  min-height: 47px;
  padding-inline: 13px;
  border: 1px solid #294e6d;
  border-radius: 9px;
  background: #081725;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .03);
  color: #edf7ff;
}
.phase-auth-material-shell .phase-auth-card input::placeholder { color: #6a849b; }
.phase-auth-material-shell .phase-auth-card input:focus { border-color: #69b5e4; background: #0a1b2c; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .38), 0 0 0 3px rgba(38, 133, 201, .17); }

.phase-auth-material-shell .phase-auth-window { max-height: calc(100dvh - 40px); }
.phase-auth-material-shell .phase-auth-card { overflow-y: auto; scrollbar-gutter: stable; }
.phase-auth-material-shell,
.phase-auth-material-shell .phase-auth-card {
  scrollbar-color: rgba(91, 156, 188, .52) rgba(4, 14, 25, .72);
  scrollbar-width: thin;
}
.phase-auth-material-shell::-webkit-scrollbar,
.phase-auth-material-shell .phase-auth-card::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.phase-auth-material-shell::-webkit-scrollbar-track,
.phase-auth-material-shell .phase-auth-card::-webkit-scrollbar-track {
  background: rgba(4, 14, 25, .72);
}
.phase-auth-material-shell::-webkit-scrollbar-thumb,
.phase-auth-material-shell .phase-auth-card::-webkit-scrollbar-thumb {
  border: 2px solid rgba(4, 14, 25, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(122, 192, 217, .58), rgba(45, 96, 130, .72));
  background-clip: padding-box;
  box-shadow: inset 0 1px rgba(232, 250, 255, .13);
}
.phase-auth-material-shell::-webkit-scrollbar-thumb:hover,
.phase-auth-material-shell .phase-auth-card::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(145, 214, 234, .7), rgba(58, 116, 151, .82));
}
.phase-auth-login.phase-auth-material-shell .phase-auth-window {
  min-height: min(540px, calc(100dvh - 40px));
  height: min(760px, calc(100dvh - 40px));
}
.phase-auth-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.phase-auth-field-grid > label { min-width: 0; }
.phase-auth-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.phase-auth-links button { min-height: 32px; padding: 0; border: 0; background: transparent; color: #81ccec; font: inherit; font-size: 12px; cursor: pointer; }
.phase-auth-links button:hover { color: #e8f7ff; text-decoration: underline; text-underline-offset: 3px; }

.public-demo-login {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(111, 190, 231, .2);
  border-radius: 10px;
  background: rgba(4, 21, 38, .42);
}
.public-demo-login-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.public-demo-login-head > div { display: grid; gap: 3px; }
.public-demo-login-code { justify-items: end; text-align: right; }
.public-demo-login-head span { color: #71c9df; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.public-demo-login-head strong { color: #dff5ff; font-size: 12px; }
.public-demo-login-head code { color: #9bdbea; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; letter-spacing: .04em; }
.public-demo-login-list { display: grid; gap: 6px; }
.public-demo-login-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 8px 9px; border: 1px solid rgba(111, 190, 231, .13); border-radius: 7px; background: rgba(7, 31, 52, .42); }
.public-demo-login-row > div { display: grid; gap: 3px; min-width: 0; }
.public-demo-login-row strong { overflow: hidden; color: #cfeaf6; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.public-demo-login-row small { overflow: hidden; color: #7595aa; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.public-demo-login-row button { flex: 0 0 auto; min-height: 28px; padding: 0 9px; border-color: rgba(111, 190, 231, .24); font-size: 11px; }
.public-demo-login-note { color: #6e899d; font-size: 10px; line-height: 1.5; }

.password-field-control { position: relative; display: flex; align-items: stretch; }
.phase-auth-material-shell .password-field-control input { width: 100%; padding-right: 58px; }
.password-field-control button { position: absolute; top: 50%; right: 8px; min-width: 38px; min-height: 30px; padding: 0 6px; border: 0; border-left: 1px solid rgba(112, 180, 221, .2); background: transparent; color: #91cce7; font: inherit; font-size: 11px; cursor: pointer; transform: translateY(-50%); }
.password-field-control button:hover { color: #e6f7ff; }
.phase-password-rule { display: block; margin-top: -8px; color: #7192aa; font-size: 11px; line-height: 1.5; }
.password-reset-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(107, 177, 220, .18); border-radius: 8px; background: rgba(5, 21, 38, .5); color: #a8c8dc; font-size: 12px; }
.password-reset-context button,
.password-reset-resend button { border: 0; background: transparent; color: #72cce4; font: inherit; font-size: 12px; cursor: pointer; }
.password-reset-context button:hover,
.password-reset-resend button:hover { color: #e5f8ff; }
.password-reset-resend button:disabled { color: #6f8798; cursor: default; }
.password-code-section { display: grid; gap: 9px; }
.password-code-section > label { color: #bed7e7; font-size: 13px; }
.password-code-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.phase-auth-material-shell .password-code-grid input { min-width: 0; min-height: 50px; padding: 0; border-radius: 8px; font-size: 21px; font-weight: 730; line-height: 1; text-align: center; }
.phase-tenant-code-card { gap: 18px !important; }
.tenant-code-preview { display: grid; gap: 6px; padding: 16px; border: 1px solid rgba(107, 193, 225, .23); border-radius: 10px; background: linear-gradient(135deg, rgba(15, 69, 107, .42), rgba(5, 25, 46, .66)); }
.tenant-code-preview span { color: #86abc2; font-size: 11px; }
.tenant-code-preview strong { color: #bceeff; font-family: "SFMono-Regular", Consolas, monospace; font-size: 21px; letter-spacing: .08em; }
.phase-tenant-code-warning { margin: 0; padding-left: 11px; border-left: 2px solid #d4a84b; color: #c7a96f; font-size: 12px; line-height: 1.65; }

.work-status-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; color: #a9c5d9; font-size: 11px; line-height: 1.25; }
.work-status-badge i,
.work-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5cd5a5; box-shadow: 0 0 0 3px rgba(92, 213, 165, .1), 0 0 10px rgba(92, 213, 165, .33); }
.work-status-badge.is-compact { gap: 0; }
.work-status-badge.is-compact i { width: 6px; height: 6px; }
.work-status-badge.is-busy i,
.work-status-dot.is-busy { background: #e5b55b; box-shadow: 0 0 0 3px rgba(229, 181, 91, .1), 0 0 10px rgba(229, 181, 91, .3); }
.work-status-badge.is-vacation i,
.work-status-dot.is-vacation { background: #7cafd8; box-shadow: 0 0 0 3px rgba(124, 175, 216, .1), 0 0 10px rgba(124, 175, 216, .3); }
.work-status-badge.is-leave i,
.work-status-dot.is-leave { background: #d78d98; box-shadow: 0 0 0 3px rgba(215, 141, 152, .1), 0 0 10px rgba(215, 141, 152, .3); }
.work-status-badge.is-offline i,
.work-status-dot.is-offline { background: #708096; box-shadow: 0 0 0 3px rgba(112, 128, 150, .1); }
.phase-identity-avatar,
.phase-settings-avatar,
.organization-member-avatar { position: relative; }
.phase-identity-avatar .work-status-dot,
.phase-settings-avatar .work-status-dot,
.organization-member-avatar .work-status-dot { position: absolute; right: 0; bottom: 1px; border: 2px solid #0b2036; }

.task-collaborator-picker { display: grid; gap: 8px; }
.task-collaborator-selected { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.task-collaborator-selected > span { display: inline-flex; align-items: center; gap: 6px; min-height: 29px; padding: 3px 4px 3px 9px; border: 1px solid rgba(104, 183, 239, .3); border-radius: 999px; background: rgba(30, 93, 143, .24); color: #cce9fb; font-size: 11px; }
.task-collaborator-selected > small { align-self: center; color: #7593ad; font-size: 11px; }
.task-collaborator-selected button { min-width: 24px; min-height: 22px; padding: 0 6px; border: 0; border-left: 1px solid rgba(139, 198, 236, .18); background: transparent; color: #8dc4e8; font: inherit; font-size: 10px; cursor: pointer; }
.task-collaborator-selected button:hover { color: #e7f8ff; }
.task-collaborator-toggle { justify-self: start; min-height: 31px; padding-inline: 10px; font-size: 12px; }
.task-collaborator-menu { display: grid; gap: 8px; max-height: 240px; padding: 9px; border: 1px solid rgba(103, 183, 238, .27); border-radius: 7px; background: rgba(4, 20, 38, .89); box-shadow: 0 14px 30px rgba(0, 9, 23, .25), inset 0 1px rgba(208, 240, 255, .05); }
.task-collaborator-menu[hidden] { display: none; }
.task-collaborator-search { min-height: 34px; border: 1px solid rgba(116, 184, 229, .27); border-radius: 5px; background: rgba(8, 32, 56, .85); color: #dff4ff; font: inherit; font-size: 12px; }
.task-collaborator-options { display: grid; gap: 4px; max-height: 164px; overflow-y: auto; scrollbar-gutter: stable; }
.task-collaborator-options > button { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 45px; padding: 7px 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #cfe8f8; text-align: left; cursor: pointer; }
.task-collaborator-options > button:hover,
.task-collaborator-options > button.is-selected { border-color: rgba(104, 182, 235, .32); background: rgba(26, 85, 133, .29); }
.task-collaborator-options > button > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.task-collaborator-options strong { overflow: hidden; color: #e0f2ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.task-collaborator-options small { overflow: hidden; color: #779bb7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.phase-tenant-code { gap: 8px; }
.phase-tenant-code code { color: #91def0; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; letter-spacing: .04em; }
.overview-tenant-code { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.overview-tenant-code button { min-height: 26px; padding: 0 8px; border: 1px solid rgba(121, 196, 232, .3); border-radius: 5px; background: rgba(20, 76, 118, .35); color: #bdebf4; font: inherit; font-size: 11px; cursor: pointer; }
.overview-tenant-code button:hover { border-color: rgba(149, 219, 244, .64); background: rgba(33, 104, 151, .45); }

.drawer-temporary-password { position: fixed; right: 26px; bottom: 28px; z-index: 25; min-height: 38px; border-color: rgba(120, 201, 232, .42); background: rgba(11, 71, 118, .86); box-shadow: 0 10px 28px rgba(0, 10, 28, .32); }

.phase-auth-material-shell .phase-auth-submit {
  min-height: 47px;
  margin-top: 7px;
  overflow: visible;
  border: .5px solid rgba(111, 190, 231, .42);
  border-bottom-color: rgba(47, 122, 171, .36);
  border-radius: 10px;
  background:
    linear-gradient(110deg, rgba(198, 235, 251, .19), transparent 32% 63%, rgba(47, 145, 205, .14)),
    linear-gradient(180deg, rgba(42, 132, 188, .46), rgba(5, 59, 118, .52)),
    rgba(5, 67, 128, .43);
  color: #f5fbff;
  box-shadow: inset 0 1px rgba(198, 234, 251, .31), inset 0 -1px rgba(1, 35, 75, .38), inset 1px 0 rgba(225, 247, 255, .1), 0 10px 24px rgba(0, 22, 54, .34), 0 1px rgba(103, 183, 225, .13);
  -webkit-backdrop-filter: blur(18px) saturate(136%) brightness(92%);
  backdrop-filter: blur(18px) saturate(136%) brightness(92%);
}

.phase-auth-material-shell .phase-auth-submit::before { display: none; }
.phase-auth-material-shell .phase-auth-submit:hover {
  border-color: rgba(143, 214, 246, .58);
  background:
    linear-gradient(110deg, rgba(214, 243, 255, .29), transparent 32% 63%, rgba(65, 165, 220, .19)),
    linear-gradient(180deg, rgba(48, 147, 207, .51), rgba(8, 72, 137, .55)),
    rgba(6, 79, 146, .48);
  box-shadow: inset 0 1px rgba(212, 244, 255, .42), inset 0 -1px rgba(1, 35, 75, .34), inset 1px 0 rgba(232, 249, 255, .15), 0 13px 28px rgba(0, 22, 54, .41), 0 1px rgba(126, 199, 235, .21);
  transform: translateY(-1px);
}
.phase-auth-material-shell .phase-auth-submit:active { transform: translateY(1px) scale(.985); box-shadow: inset 0 1px rgba(255, 255, 255, .4), inset 0 2px 8px rgba(1, 42, 81, .36), 0 5px 14px rgba(1, 33, 71, .22); }
.phase-auth-trust { margin-top: 1px; color: #748ea4; font-size: 11px; }

.phase-auth-material-shell .phase-auth-aside {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  min-width: 0;
  padding: 31px;
  border-left: 1px solid rgba(82, 143, 187, .5);
  background: linear-gradient(148deg, rgba(11, 46, 75, .98), rgba(5, 23, 39, .99) 72%);
  text-align: left;
}
.phase-auth-material-shell .phase-auth-logo { display: inline-flex; height: 32px; color: #a5e9f4; }
.phase-auth-material-shell .phase-auth-logo i { width: 7px; background: currentColor; box-shadow: 0 0 14px rgba(99, 209, 229, .38); }
.phase-auth-material-shell .phase-auth-aside-copy { display: grid; gap: 12px; max-width: 235px; }
.phase-auth-material-shell .phase-auth-aside-copy p { margin: 0; color: #bdebf4; font-size: 13px; }
.phase-auth-material-shell .phase-auth-aside-copy h2 { margin: 0; color: #e7f6ff; font-size: 24px; line-height: 1.4; }
.phase-auth-material-shell .phase-auth-aside-copy span { color: #9ab8cd; font-size: 13px; line-height: 1.7; }
.phase-auth-material-shell .phase-auth-aside > small { display: flex; align-items: center; gap: 8px; color: #b8e6f3; font-size: 11px; }
.phase-auth-material-shell .phase-auth-aside > small i { width: 8px; height: 8px; border: 2px solid #78dce9; border-radius: 50%; box-shadow: 0 0 12px rgba(99, 209, 229, .55); }

.phase-auth-material-shell.phase-identity-shell .phase-auth-window { min-height: 596px; }
.phase-auth-material-shell .phase-identity-card {
  display: grid;
  align-content: center;
  gap: 21px;
  width: auto;
  max-width: none;
  min-height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(32px, 5vw, 53px);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: linear-gradient(150deg, rgba(13, 37, 61, .98), rgba(5, 18, 32, .99) 82%);
  box-shadow: none;
}
.phase-auth-material-shell .phase-identity-card-head { justify-items: start; text-align: left; }
.phase-auth-material-shell .phase-identity-card-head p { color: #63d1e5; }
.phase-auth-material-shell .phase-identity-card-head h1 { color: #f0f9ff; }
.phase-auth-material-shell .phase-identity-person { border-color: rgba(106, 188, 229, .19); border-radius: 10px; background: rgba(4, 20, 36, .42); }
.phase-auth-material-shell .phase-identity-avatar { border-color: rgba(111, 210, 239, .64); background: linear-gradient(145deg, rgba(76, 172, 213, .8), rgba(13, 68, 116, .86)); color: #eaf9ff; box-shadow: inset 0 2px rgba(255, 255, 255, .27), 0 0 0 5px rgba(99, 209, 229, .08), 0 16px 32px rgba(0, 0, 0, .26); }
.phase-auth-material-shell .phase-identity-facts { border-color: rgba(115, 190, 229, .18); }
.phase-auth-material-shell .phase-identity-facts > div { border-color: rgba(115, 190, 229, .15); }
.phase-auth-material-shell .phase-identity-actions { justify-content: stretch; }
.phase-auth-material-shell .phase-identity-actions .button { flex: 1 1 0; }
.phase-auth-material-shell .phase-identity-actions .button-ghost { border-color: rgba(99, 163, 202, .36); background: rgba(7, 28, 47, .54); color: #c9e1ee; }
.phase-auth-material-shell .phase-auth-aside-facts { display: grid; width: 100%; margin: 23px 0 0; border-top: 1px solid rgba(110, 183, 230, .2); }
.phase-auth-material-shell .phase-auth-aside-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(110, 183, 230, .2); }
.phase-auth-material-shell .phase-auth-aside-facts dt { color: #8eb4c8; font-size: 12px; }
.phase-auth-material-shell .phase-auth-aside-facts dd { margin: 0; color: #e5f5ff; font-size: 12px; font-weight: 650; }

@keyframes phase-auth-material-in {
  from { opacity: .1; transform: translateY(12px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 680px) {
  .phase-auth-material-shell {
    place-items: start center;
    align-content: start;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .phase-auth-material-shell::before { display: none; }
  .phase-auth-material-shell .phase-auth-window,
  .phase-auth-material-shell.phase-identity-shell .phase-auth-window { grid-template-columns: 1fr; width: 100%; min-height: 100dvh; border: 0; border-radius: 0; }
  .phase-auth-login.phase-auth-material-shell .phase-auth-window { min-height: 100dvh; height: auto; }
  .phase-auth-material-shell .phase-auth-card,
  .phase-auth-material-shell .phase-identity-card { min-height: auto; padding: 34px 24px; }
  .phase-auth-material-shell .phase-auth-aside { display: grid; gap: 22px; min-height: 210px; padding: 27px 24px; border-top: 1px solid rgba(82, 143, 187, .5); border-left: 0; }
  .phase-auth-material-shell .phase-auth-aside-copy { max-width: 100%; }
  .phase-auth-material-shell .phase-auth-aside-copy h2 { font-size: 20px; }
  .phase-auth-material-shell .phase-auth-aside > small { display: none; }
  .phase-auth-material-shell .phase-identity-actions { flex-direction: column-reverse; }
  .phase-auth-material-shell .phase-identity-actions .button { width: 100%; }
  .phase-auth-material-shell .phase-auth-window { max-height: none; overflow: visible; }
  .phase-auth-material-shell .phase-auth-card { overflow: visible; }
  .phase-auth-field-grid { grid-template-columns: 1fr; }
  .phase-auth-links { align-items: flex-start; flex-direction: column; gap: 4px; }
  .public-demo-login-row { align-items: stretch; flex-direction: column; }
  .public-demo-login-row button { width: 100%; }
  .drawer-temporary-password { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .phase-auth-material-shell .phase-auth-window { animation: none; }
}

/* Organization reorder and confirmed hierarchy moves. */
.organization-reorder-guide {
  margin: 0;
  padding: 11px 20px;
  border-bottom: 1px solid rgba(146, 191, 237, .1);
  color: #90aac7;
  font-size: 12px;
  line-height: 1.65;
}

.organization-node summary {
  grid-template-columns: 10px 18px minmax(0, 1fr) auto;
}

.organization-drag-handle {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(2, 3px);
  grid-template-rows: repeat(3, 3px);
  place-content: center;
  gap: 3px;
  width: 18px;
  height: 30px;
  margin: -5px 0;
  border: 0;
  border-radius: 4px;
  color: rgba(143, 181, 223, .52);
  cursor: grab;
  outline: none;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.organization-drag-handle i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.organization-drag-handle:hover,
.organization-drag-handle:focus-visible,
.organization-node.is-keyboard-grabbed .organization-drag-handle {
  color: #b9dcff;
  background: rgba(83, 147, 232, .15);
}

.organization-drag-handle:active { cursor: grabbing; transform: scale(.94); }
.organization-node.is-keyboard-grabbed > details { border-color: rgba(101, 166, 255, .66); box-shadow: 0 0 0 1px rgba(85, 151, 244, .16), 0 18px 40px rgba(0, 9, 25, .2); }
.organization-node.is-dragging,
.organization-member.is-dragging { opacity: .46; }
.organization-node.is-drop-target > details,
.organization-nest-drop.is-drop-target,
.organization-root-drop.is-drop-target { border-color: rgba(112, 191, 247, .82); background: rgba(39, 116, 179, .22); box-shadow: inset 0 1px rgba(205, 241, 255, .12), 0 0 0 1px rgba(94, 172, 241, .14); }

.organization-nest-drop {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0 16px 4px 32px;
  border: 1px dashed rgba(117, 177, 237, .34);
  border-radius: 6px;
  color: #a1c7eb;
  font-size: 11px;
  line-height: 1.3;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.organization-tree.is-reordering .organization-nest-drop { display: flex; }
.organization-tree.is-reordering .organization-nest-drop:hover { border-color: rgba(123, 197, 247, .72); color: #ddf3ff; }

.organization-root-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 2px 14px 14px;
  border: 1px dashed rgba(117, 177, 237, .3);
  border-radius: 6px;
  color: #7898b8;
  font-size: 12px;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.organization-root-drop:hover { border-color: rgba(125, 194, 243, .56); color: #b8dcf5; }
.organization-reorder-live { min-height: 1px; margin: 0 14px 14px; color: #93b8da; font-size: 11px; }

.organization-member { position: relative; }
.organization-member[data-organization-member-drag] { cursor: grab; }
.organization-member-drag-icon {
  width: 14px;
  height: 18px;
  margin-left: auto;
  opacity: .56;
  background-image: radial-gradient(circle, currentColor 1.3px, transparent 1.5px);
  background-position: 0 0;
  background-size: 7px 6px;
  color: #9bc7ef;
}

.organization-member[data-organization-member-drag]:hover .organization-member-drag-icon { opacity: 1; }
.organization-move-summary {
  display: grid;
  gap: 7px;
  margin: 6px 0 18px;
  padding: 15px;
  border: 1px solid rgba(128, 185, 237, .16);
  border-radius: 7px;
  background: rgba(8, 31, 57, .36);
}

.organization-move-summary strong { color: #e5f3ff; font-size: 15px; }
.organization-move-summary span { color: #a7cae8; font-size: 13px; line-height: 1.55; }
.organization-move-summary small { color: #7f9dbb; font-size: 12px; line-height: 1.55; }
.organization-member-move-form { min-width: min(440px, 100%); }

@media (max-width: 680px) {
  .organization-node summary { grid-template-columns: 10px 18px minmax(0, 1fr); }
  .organization-node-count { grid-column: 3; }
  .organization-nest-drop { margin-left: 16px; }
  .organization-root-drop { margin-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .organization-drag-handle,
  .organization-nest-drop,
  .organization-root-drop { transition: none; }
}

/* Dynamic entrance only. Authentication and identity screens keep their existing glass surfaces. */
.dynamic-entry-landing {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100dvh;
  overflow: hidden;
  padding: 28px 42px 34px;
  color: #edf8ff;
  background: #071321;
}

.dynamic-entry-video,
.dynamic-entry-ripple,
.dynamic-entry-overlay,
.dynamic-entry-reading-layer {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dynamic-entry-video { object-fit: cover; object-position: 50% 50%; }
.dynamic-entry-ripple { z-index: -1; opacity: 0; transition: opacity 420ms ease; }
.dynamic-entry-overlay { z-index: 0; pointer-events: none; }
.dynamic-entry-landing[data-ripple-ready="true"] .dynamic-entry-ripple { opacity: 1; }
.dynamic-entry-landing[data-ripple-ready="true"] .dynamic-entry-video { opacity: 0; }
.dynamic-entry-reading-layer {
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 11, 22, .72), rgba(3, 11, 22, .26) 51%, rgba(3, 11, 22, .06)),
    linear-gradient(0deg, rgba(2, 9, 18, .48), transparent 42%);
}
.dynamic-entry-landing[data-video-failed="true"] .dynamic-entry-reading-layer { background: #071321; }

.dynamic-entry-topbar,
.dynamic-entry-hero { position: relative; z-index: 1; }
.dynamic-entry-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  align-self: start;
  animation: dynamic-entry-fade-in 360ms ease-out both;
}
.dynamic-entry-brand { display: inline-flex; align-items: center; gap: 10px; color: #dbeef9; font-family: "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Microsoft YaHei UI", sans-serif; font-size: 13px; font-weight: 600; }
.dynamic-entry-brand .phase-logo-mark { height: 20px; color: #a9e8f0; }
.dynamic-entry-brand .phase-logo-mark i { width: 5px; background: currentColor; box-shadow: 0 0 14px rgba(124, 231, 240, .42); }
.dynamic-entry-environment { display: flex; align-items: center; gap: 9px; color: #d2e7f5; font-size: 12px; }
.dynamic-entry-environment i { width: 7px; height: 7px; border-radius: 50%; background: #81e1de; box-shadow: 0 0 14px rgba(129, 225, 222, .82); }
.dynamic-entry-environment b { padding-left: 9px; border-left: 1px solid rgba(205, 233, 249, .38); color: #b5d0df; font-size: 11px; font-weight: 600; }

.dynamic-entry-hero { display: grid; align-content: center; justify-items: center; gap: 18px; width: min(780px, 100%); margin: auto; padding: 18px 0 46px; text-align: center; animation: dynamic-entry-hero-in 540ms cubic-bezier(.16, .84, .25, 1) both; }
.dynamic-entry-kicker { margin: 0; color: #a9e5ea; font-family: "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Microsoft YaHei UI", sans-serif; font-size: 20px; font-weight: 500; line-height: 1.5; text-shadow: 0 2px 12px rgba(0, 8, 19, .58); transform: translateY(6px); }
.dynamic-entry-hero h1 { display: grid; gap: 6px; margin: 0; color: #f4faff; font-family: "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Microsoft YaHei UI", sans-serif; font-size: 68px; font-weight: 600; line-height: 1.2; text-wrap: balance; text-shadow: 0 5px 30px rgba(0, 8, 19, .68); }
.dynamic-entry-hero h1 span { display: block; }
.dynamic-entry-hero h1 span:last-child { color: #e7f7ff; }
.dynamic-entry-description { max-width: 492px; margin: 0; color: #c7dbe8; font-family: "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Microsoft YaHei UI", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.7; text-shadow: 0 2px 12px rgba(0, 8, 19, .62); }
.dynamic-entry-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 7px; }
.dynamic-entry-action.button {
  min-width: 154px;
  min-height: 44px;
  justify-content: center;
  border: 1px solid rgba(140, 199, 224, .36);
  border-radius: 7px;
  color: #e9f8ff;
  font-family: "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  -webkit-backdrop-filter: blur(16px) saturate(124%);
  backdrop-filter: blur(16px) saturate(124%);
}
.dynamic-entry-action-primary.button { background: linear-gradient(138deg, rgba(18, 72, 102, .73), rgba(4, 26, 48, .78)); box-shadow: inset 0 1px rgba(224, 248, 255, .2), inset 0 -1px rgba(2, 10, 23, .38), 0 13px 28px rgba(0, 7, 16, .24); }
.dynamic-entry-action-secondary.button { background: rgba(7, 25, 43, .54); color: #d0e6f1; }
.dynamic-entry-action.button:hover { border-color: rgba(160, 225, 241, .68); background: linear-gradient(138deg, rgba(27, 91, 121, .8), rgba(7, 37, 65, .86)); box-shadow: inset 0 1px rgba(231, 250, 255, .26), 0 18px 34px rgba(0, 8, 19, .32); transform: translateY(-1px); }
.dynamic-entry-action.button:active { transform: translateY(1px) scale(.99); }
@keyframes dynamic-entry-fade-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dynamic-entry-hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 820px) {
  .dynamic-entry-hero { gap: 17px; }
  .dynamic-entry-kicker { font-size: 17px; }
  .dynamic-entry-hero h1 { font-size: 58px; }
}

@media (max-width: 680px) {
  .dynamic-entry-landing { padding: 22px 20px 24px; }
  .dynamic-entry-topbar { align-items: flex-start; }
  .dynamic-entry-environment { align-items: flex-end; flex-direction: column; gap: 4px; text-align: right; }
  .dynamic-entry-environment i { display: none; }
  .dynamic-entry-environment b { padding: 0; border: 0; }
  .dynamic-entry-hero { align-content: center; gap: 15px; padding-block: 24px 34px; }
  .dynamic-entry-kicker { font-size: 16px; }
  .dynamic-entry-hero h1 { gap: 3px; font-size: 44px; line-height: 1.3; }
  .dynamic-entry-description { font-size: 14px; }
  .dynamic-entry-actions { display: grid; width: 100%; }
  .dynamic-entry-action.button { width: 100%; }
}

@media (max-width: 460px) {
  .dynamic-entry-landing { padding-inline: 16px; }
  .dynamic-entry-kicker { font-size: 15px; }
  .dynamic-entry-hero h1 { font-size: 34px; line-height: 1.32; }
}

@media (max-width: 360px) {
  .dynamic-entry-kicker { font-size: 14px; }
  .dynamic-entry-hero h1 { font-size: 32px; }
}

@media (max-width: 320px) {
  .dynamic-entry-kicker { font-size: 13px; }
  .dynamic-entry-hero h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .dynamic-entry-ripple,
  .dynamic-entry-overlay { display: none; }
  .dynamic-entry-video { opacity: 1 !important; }
  .dynamic-entry-topbar,
  .dynamic-entry-hero { animation: none; }
}