body {
  background:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--liquid-pink) 24%, transparent), transparent 28rem),
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--liquid-cyan) 18%, transparent), transparent 26rem),
    radial-gradient(circle at 62% 82%, color-mix(in srgb, var(--liquid-violet) 18%, transparent), transparent 32rem),
    linear-gradient(135deg, var(--page-deep) 0%, var(--page) 46%, color-mix(in srgb, var(--page-deep) 88%, #10184d) 100%);
}

body::before {
  width: 74vw;
  max-width: 1180px;
  height: 68vh;
  left: 5vw;
  top: -28vh;
  opacity: .9;
  filter: blur(125px) saturate(1.25);
  background:
    radial-gradient(circle at 22% 48%, color-mix(in srgb, var(--liquid-pink) 55%, transparent), transparent 42%),
    radial-gradient(circle at 58% 42%, color-mix(in srgb, var(--liquid-violet) 40%, transparent), transparent 48%),
    radial-gradient(circle at 82% 62%, color-mix(in srgb, var(--liquid-cyan) 30%, transparent), transparent 52%);
}

body::after {
  width: 54vw;
  max-width: 820px;
  height: 62vh;
  right: -15vw;
  bottom: -24vh;
  opacity: .8;
  filter: blur(118px) saturate(1.35);
  background:
    radial-gradient(circle at 28% 35%, color-mix(in srgb, var(--liquid-cyan) 42%, transparent), transparent 44%),
    radial-gradient(circle at 74% 60%, color-mix(in srgb, var(--liquid-blue) 36%, transparent), transparent 52%),
    radial-gradient(circle at 58% 24%, color-mix(in srgb, var(--liquid-pink) 22%, transparent), transparent 50%);
}

.app-shell::before {
  opacity: .18;
  background-image:
    linear-gradient(color-mix(in srgb, var(--liquid-cyan) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--liquid-cyan) 18%, transparent) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse at top, #000 0%, transparent 78%);
}

.app-shell::after {
  opacity: .12;
  background-image:
    radial-gradient(circle at 20px 26px, color-mix(in srgb, var(--liquid-cyan) 70%, transparent) 0 1px, transparent 1.7px),
    radial-gradient(circle at 80px 54px, color-mix(in srgb, var(--liquid-pink) 58%, transparent) 0 1px, transparent 1.7px),
    radial-gradient(circle at 128px 104px, color-mix(in srgb, var(--liquid-violet) 60%, transparent) 0 1px, transparent 1.7px);
}

.workspace {
  position: relative;
  isolation: isolate;
}

.workspace::before,
.workspace::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  opacity: .52;
  filter: blur(2px);
  transform: translateZ(0);
}

.workspace::before {
  width: 128px;
  height: 128px;
  right: 7vw;
  top: 130px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.62), transparent 12%),
    radial-gradient(circle at 68% 72%, color-mix(in srgb, var(--liquid-cyan) 76%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--liquid-blue) 86%, transparent), color-mix(in srgb, var(--liquid-violet) 82%, transparent));
  box-shadow: 0 0 44px color-mix(in srgb, var(--liquid-cyan) 30%, transparent);
  animation: liquidOrb 12s ease-in-out infinite;
}

.workspace::after {
  width: 92px;
  height: 92px;
  right: 22vw;
  bottom: 9vh;
  clip-path: polygon(25% 6%, 78% 16%, 100% 58%, 64% 100%, 12% 83%, 0 34%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.52), transparent 18%),
    linear-gradient(135deg, color-mix(in srgb, var(--liquid-cyan) 86%, transparent), color-mix(in srgb, var(--liquid-pink) 74%, transparent));
  box-shadow: 0 0 54px color-mix(in srgb, var(--liquid-pink) 24%, transparent);
  animation: liquidPoly 14s ease-in-out infinite;
}

.sidebar,
.topbar,
.card,
.table-wrap,
.workspace-tabs,
.workflow-banner,
.drawer,
.modal,
.toast,
.empty-state,
.nav-group-btn,
.nav-item,
.field input,
.field select,
.field textarea,
.filter-input,
.global-search,
.project-switcher,
.inline-edit,
.inline-input {
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
}

.sidebar {
  background:
    radial-gradient(circle at 16% 4%, color-mix(in srgb, var(--liquid-pink) 22%, transparent), transparent 24rem),
    radial-gradient(circle at 92% 36%, color-mix(in srgb, var(--liquid-cyan) 14%, transparent), transparent 18rem),
    linear-gradient(180deg, rgba(13,18,63,.72), rgba(8,12,42,.52)),
    var(--surface);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.07), 28px 0 80px rgba(0,0,0,.22);
}

body.theme-light .sidebar {
  background:
    radial-gradient(circle at 12% 4%, color-mix(in srgb, var(--liquid-pink) 12%, transparent), transparent 22rem),
    radial-gradient(circle at 90% 34%, color-mix(in srgb, var(--liquid-cyan) 14%, transparent), transparent 18rem),
    rgba(255,255,255,.54);
}

.brand {
  background:
    radial-gradient(circle at 24% 0%, color-mix(in srgb, var(--liquid-pink) 26%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.025));
}

.brand-mark {
  border-radius: 16px;
  background:
    radial-gradient(circle at 26% 20%, rgba(255,255,255,.65), transparent 18%),
    linear-gradient(135deg, var(--liquid-pink), var(--liquid-blue) 58%, var(--liquid-violet));
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 14px 36px color-mix(in srgb, var(--liquid-pink) 28%, transparent), 0 0 52px color-mix(in srgb, var(--liquid-blue) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.34);
}

.topbar {
  background:
    radial-gradient(circle at 58% 0%, color-mix(in srgb, var(--liquid-blue) 20%, transparent), transparent 32rem),
    radial-gradient(circle at 96% 20%, color-mix(in srgb, var(--liquid-pink) 14%, transparent), transparent 18rem),
    linear-gradient(90deg, rgba(6,10,49,.72), rgba(16,24,70,.42)),
    var(--surface);
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 24px 70px rgba(0,0,0,.26);
}

body.theme-light .topbar {
  background:
    radial-gradient(circle at 58% 0%, color-mix(in srgb, var(--liquid-blue) 14%, transparent), transparent 30rem),
    rgba(255,255,255,.58);
}

.topbar:before,
.card:before,
.workflow-banner:before,
.table-wrap:before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--liquid-cyan) 35%, rgba(255,255,255,.22)), color-mix(in srgb, var(--liquid-pink) 22%, transparent), transparent);
}

.card,
.workflow-banner,
.table-wrap,
.empty-state,
.drawer,
.modal,
.workspace-tabs,
.mode-card,
.command-item,
.recipe-card,
.phase-col,
.task-column,
.kanban-col,
.trace-lane,
.dependency-chain > div,
.recovery-panel,
.idea-card,
.swot-cell,
.forecast-month-card,
.programme-project,
.weekly-step,
.comment-item {
  border-color: color-mix(in srgb, var(--glass-highlight) 42%, var(--line));
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--liquid-cyan) 12%, transparent), transparent 58%),
    radial-gradient(340px circle at 100% 0%, color-mix(in srgb, var(--liquid-pink) 10%, transparent), transparent 52%),
    linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.035) 46%, rgba(255,255,255,.018)),
    var(--surface);
  box-shadow: 0 0 0 1px rgba(255,255,255,.045), 0 18px 54px rgba(0,0,0,.26), 0 0 54px color-mix(in srgb, var(--liquid-blue) 8%, transparent);
}

body.theme-light .card,
body.theme-light .workflow-banner,
body.theme-light .table-wrap,
body.theme-light .empty-state,
body.theme-light .drawer,
body.theme-light .modal,
body.theme-light .workspace-tabs,
body.theme-light .mode-card,
body.theme-light .command-item,
body.theme-light .recipe-card,
body.theme-light .phase-col,
body.theme-light .task-column,
body.theme-light .kanban-col,
body.theme-light .trace-lane,
body.theme-light .dependency-chain > div,
body.theme-light .recovery-panel,
body.theme-light .idea-card,
body.theme-light .swot-cell,
body.theme-light .forecast-month-card,
body.theme-light .programme-project,
body.theme-light .weekly-step,
body.theme-light .comment-item {
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--liquid-cyan) 11%, transparent), transparent 58%),
    radial-gradient(340px circle at 100% 0%, color-mix(in srgb, var(--liquid-pink) 8%, transparent), transparent 52%),
    linear-gradient(155deg, rgba(255,255,255,.74), rgba(255,255,255,.35) 48%, rgba(255,255,255,.24)),
    var(--surface);
}

.card:hover,
.mode-card:hover,
.next-action:hover,
.programme-project:hover,
.weekly-step:hover,
.command-item:hover,
.recipe-card:hover {
  border-color: color-mix(in srgb, var(--liquid-cyan) 34%, var(--line-strong));
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 22px 64px rgba(0,0,0,.32), 0 0 64px color-mix(in srgb, var(--liquid-cyan) 12%, transparent), 0 0 90px color-mix(in srgb, var(--liquid-pink) 8%, transparent);
}

.btn,
.icon-btn,
.mini-tab,
.workspace-tab,
.badge,
.meta-chip,
.phase-pill,
.kanban-drag-handle,
.task-drag-handle {
  border-color: color-mix(in srgb, var(--glass-highlight) 34%, var(--line));
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035)),
    color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(calc(var(--glass-blur) * .72)) saturate(1.25);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .72)) saturate(1.25);
}

.btn.primary {
  border-color: color-mix(in srgb, var(--liquid-cyan) 36%, var(--liquid-blue));
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.35), transparent 22%),
    linear-gradient(135deg, var(--liquid-pink), var(--liquid-blue) 52%, var(--liquid-violet));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--liquid-cyan) 28%, transparent), 0 10px 24px color-mix(in srgb, var(--liquid-pink) 24%, transparent), 0 0 46px color-mix(in srgb, var(--liquid-blue) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.32);
}

.btn.primary:hover {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.45), transparent 22%),
    linear-gradient(135deg, color-mix(in srgb, var(--liquid-pink) 88%, white), var(--liquid-blue) 52%, var(--liquid-cyan));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--liquid-cyan) 42%, transparent), 0 14px 32px color-mix(in srgb, var(--liquid-pink) 28%, transparent), 0 0 70px color-mix(in srgb, var(--liquid-cyan) 30%, transparent);
}

.btn.secondary:hover,
.icon-btn:hover,
.workspace-tab:hover,
.workspace-tab.active,
.mini-tab:hover,
.mini-tab.active {
  border-color: color-mix(in srgb, var(--liquid-cyan) 36%, var(--line-strong));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--liquid-cyan) 16%, transparent), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.055));
  box-shadow: 0 0 34px color-mix(in srgb, var(--liquid-cyan) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.14);
}

.btn.danger,
.badge.red,
.badge.high,
.badge.blocked {
  border-color: color-mix(in srgb, var(--liquid-pink) 42%, var(--line));
  color: color-mix(in srgb, var(--liquid-pink) 88%, white);
  background: color-mix(in srgb, var(--liquid-pink) 16%, rgba(255,255,255,.035));
  box-shadow: 0 0 30px color-mix(in srgb, var(--liquid-pink) 14%, transparent);
}

.badge.amber,
.badge.medium,
.badge.open {
  box-shadow: 0 0 30px color-mix(in srgb, var(--amber) 14%, transparent);
}

.badge.green,
.badge.low,
.badge.closed,
.badge.complete {
  box-shadow: 0 0 30px color-mix(in srgb, var(--green) 12%, transparent);
}

.nav-group-btn,
.nav-item {
  background:
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--liquid-cyan) 5%, transparent), transparent 70%),
    rgba(255,255,255,.025);
}

.nav-group.active > .nav-group-btn,
.nav-group-btn:hover,
.nav-item.active,
.nav-item:hover {
  border-color: color-mix(in srgb, var(--liquid-cyan) 28%, var(--line));
  background:
    radial-gradient(circle at left center, color-mix(in srgb, var(--liquid-cyan) 18%, transparent), transparent 64%),
    radial-gradient(circle at right center, color-mix(in srgb, var(--liquid-pink) 10%, transparent), transparent 70%),
    rgba(255,255,255,.055);
}

.nav-group.active > .nav-group-btn,
.nav-item.active {
  box-shadow: inset 3px 0 0 var(--liquid-cyan), 0 0 30px color-mix(in srgb, var(--liquid-cyan) 12%, transparent), 0 0 48px color-mix(in srgb, var(--liquid-pink) 7%, transparent);
}

.section-head h2,
.project-title-block h1,
.drawer-head h2,
.modal-head h2 {
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--liquid-cyan) 18%, #fff) 38%, rgba(244,248,255,.68) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.theme-light .section-head h2,
body.theme-light .project-title-block h1,
body.theme-light .drawer-head h2,
body.theme-light .modal-head h2 {
  background: linear-gradient(180deg, #151936, color-mix(in srgb, var(--liquid-blue) 52%, #151936));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kpi .value {
  color: var(--text);
  text-shadow: 0 0 24px color-mix(in srgb, var(--liquid-cyan) 16%, transparent);
}

.field input,
.field select,
.field textarea,
.filter-input,
.global-search,
.project-switcher,
.inline-edit,
.inline-input {
  border-color: color-mix(in srgb, var(--glass-highlight) 28%, var(--line));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--liquid-blue) 7%, transparent), transparent 60%),
    rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 0 color-mix(in srgb, var(--liquid-cyan) 0%, transparent);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.filter-input:focus,
.global-search:focus,
.project-switcher:focus,
.inline-edit:focus,
.inline-input:focus {
  border-color: color-mix(in srgb, var(--liquid-cyan) 58%, var(--line));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--liquid-cyan) 12%, transparent), transparent 60%),
    rgba(255,255,255,.075);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--liquid-cyan) 16%, transparent), 0 0 34px color-mix(in srgb, var(--liquid-cyan) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.12);
}

.table-wrap {
  position: relative;
}

.table-wrap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
}

th {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--liquid-blue) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--page) 82%, transparent);
}

tbody tr:hover {
  background:
    radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--liquid-cyan) 9%, transparent), transparent 46%),
    rgba(255,255,255,.052);
}

tbody tr.clickable-row:hover {
  background:
    radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--liquid-pink) 9%, transparent), transparent 42%),
    color-mix(in srgb, var(--liquid-cyan) 8%, rgba(255,255,255,.055));
}

.backdrop {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--liquid-pink) 14%, transparent), transparent 28rem),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--liquid-cyan) 12%, transparent), transparent 30rem),
    rgba(0,0,0,.54);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.drawer,
.modal {
  background:
    radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--liquid-cyan) 16%, transparent), transparent 28rem),
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--liquid-pink) 12%, transparent), transparent 22rem),
    linear-gradient(155deg, rgba(18,26,78,.72), rgba(8,12,42,.66)),
    var(--surface);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 28px 80px rgba(0,0,0,.48), 0 0 120px color-mix(in srgb, var(--liquid-blue) 14%, transparent);
}

body.theme-light .drawer,
body.theme-light .modal {
  background:
    radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--liquid-cyan) 12%, transparent), transparent 28rem),
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--liquid-pink) 8%, transparent), transparent 22rem),
    rgba(255,255,255,.72);
}

.heat-cell,
.risk-heatmap .heat-cell {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 20px rgba(255,255,255,.035);
}

.chart-box svg,
.gantt-svg,
.network-svg {
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--liquid-blue) 10%, transparent));
}

.resource-matrix-table thead th,
.resource-matrix-table .sticky-resource,
.resource-matrix-table .sticky-role {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--liquid-cyan) 10%, transparent), transparent 70%),
    color-mix(in srgb, var(--page) 84%, var(--surface));
}

.resource-matrix-table td.matrix-cell.ok {
  background: color-mix(in srgb, var(--green-soft) 42%, rgba(255,255,255,.025));
}

.resource-matrix-table td.matrix-cell.warn {
  background: color-mix(in srgb, var(--liquid-pink) 10%, var(--amber-soft));
}

.kanban-card,
.task-card,
.phase-card,
.trace-node {
  background:
    radial-gradient(240px circle at 100% 0%, color-mix(in srgb, var(--liquid-cyan) 9%, transparent), transparent 58%),
    linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  border-color: color-mix(in srgb, var(--glass-highlight) 34%, var(--line));
  box-shadow: 0 0 0 1px rgba(255,255,255,.035), 0 14px 30px rgba(0,0,0,.2), 0 0 32px color-mix(in srgb, var(--liquid-blue) 8%, transparent);
}

.kanban-card.is-selected,
.task-card:focus-within {
  border-color: color-mix(in srgb, var(--liquid-cyan) 58%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--liquid-cyan) 26%, transparent), 0 18px 42px rgba(0,0,0,.3), 0 0 70px color-mix(in srgb, var(--liquid-cyan) 14%, transparent);
}

.kanban-col.drop-target,
.task-column.drop-target {
  border-color: color-mix(in srgb, var(--liquid-cyan) 66%, var(--line));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--liquid-cyan) 18%, transparent), transparent 60%),
    color-mix(in srgb, var(--accent-soft) 48%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--liquid-cyan) 28%, transparent), 0 0 70px color-mix(in srgb, var(--liquid-cyan) 14%, transparent);
}

.toast {
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--liquid-pink) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--page) 72%, transparent);
}

@keyframes liquidOrb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); border-radius: 46% 54% 58% 42% / 52% 48% 52% 48%; }
  50% { transform: translate3d(-22px, 28px, 0) scale(1.08); border-radius: 58% 42% 45% 55% / 42% 56% 44% 58%; }
}

@keyframes liquidPoly {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(18px, -18px, 0) rotate(10deg) scale(1.06); }
}

@media (max-width: 1250px) {
  .workspace::before,
  .workspace::after {
    opacity: .32;
  }
}

@media print {
  body {
    background: #fff !important;
  }
}