/* ============================================================
   JEWEL BOX DASHBOARD (3D Smoked Obsidian & Glossy Materials)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;

  /* Pure deep black obsidian studio background */
  --bg-void:       #000000;
  --bg-base:       #050505;
  --bg-raised:     #0a0a0a;

  /* Typography */
  --text-primary:   #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted:     rgba(255, 255, 255, 0.42);

  /* Physics & Motion */
  --shadow-focus:  0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 16px rgba(255, 255, 255, 0.08);
  --radius-xs:     5px;
  --radius-sm:     9px;
  --radius-md:     15px;
  --radius-lg:     22px;
  --radius-xl:     28px;
  --radius-pill:   999px;
  --spring:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:        160ms;
  --t-normal:      280ms;
  --t-slow:        460ms;
}

/* ============================================================
   RESET & BACKGROUND
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  font-weight: 300;
  background: radial-gradient(circle at 50% 0%, #101014 0%, #000000 70%);
  background-color: #000000;
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-attachment: fixed;
}

/* Subtle Studio Noise */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ============================================================
   AMBIENT ATMOSPHERIC GLOWS (Orange / Amber on left, Blue / Indigo on right)
   ============================================================ */
.ambient-glow-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  -webkit-filter: blur(120px);
  will-change: transform, opacity;
  pointer-events: none;
}

/* Left Warm Amber/Orange Halo */
.ambient-glow--left {
  width: 780px;
  height: 900px;
  top: 10%;
  left: -220px;
  background: radial-gradient(circle at 45% 50%, rgba(251, 146, 60, 0.28) 0%, rgba(239, 68, 68, 0.16) 45%, transparent 70%);
  opacity: 0.85;
  animation: glow-pulse-left 16s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Top Center Ambient Violet/Purple Halo (Soft & Subtle) */
.ambient-glow--center {
  width: 840px;
  height: 560px;
  top: -170px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 35%, rgba(168, 85, 247, 0.18) 0%, rgba(129, 140, 248, 0.12) 45%, transparent 75%);
  opacity: 0.65;
  filter: blur(120px);
  animation: glow-pulse-center 15s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Right Electric Sapphire/Indigo Halo */
.ambient-glow--right {
  width: 820px;
  height: 950px;
  top: 15%;
  right: -240px;
  background: radial-gradient(circle at 55% 50%, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.18) 45%, transparent 70%);
  opacity: 0.85;
  animation: glow-pulse-right 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Top Central Soft White Ambient Spotlight */
.ambient-glow--top {
  width: 100vw;
  height: 380px;
  top: 0;
  left: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
  opacity: 0.6;
}

@keyframes glow-pulse-left {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.75;
  }
  50% {
    transform: translate(30px, 40px) scale(1.08);
    opacity: 0.95;
  }
  100% {
    transform: translate(-20px, 80px) scale(0.96);
    opacity: 0.8;
  }
}

@keyframes glow-pulse-center {
  0% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translateX(-50%) translateY(25px) scale(1.06);
    opacity: 0.72;
  }
  100% {
    transform: translateX(-50%) translateY(-15px) scale(0.96);
    opacity: 0.60;
  }
}

@keyframes glow-pulse-right {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.75;
  }
  50% {
    transform: translate(-40px, -30px) scale(1.06);
    opacity: 0.95;
  }
  100% {
    transform: translate(20px, 60px) scale(0.98);
    opacity: 0.8;
  }
}

h1, h2, h3, h4, h5, h6 { font-weight: 500; }
a { color: #fff; text-decoration: none; }
button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
}
input, textarea {
  font-family: inherit;
  color-scheme: dark;
}

.hidden { display: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================================
   APP LAYOUT & TOPBAR
   ============================================================ */
.app-layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1740px;
  margin: 0 auto;
  padding: 20px 32px 80px;
  min-height: 100dvh;
}

/* 3D Pure Black Smoked Glass Container */
.glass-card {
  background: linear-gradient(150deg, rgba(16, 16, 16, 0.78) 0%, rgba(6, 6, 6, 0.92) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-left-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.16),
    0 16px 36px -8px rgba(0, 0, 0, 0.95);
  border-radius: var(--radius-xl);
}

.dashboard-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

.main-topbar {
  position: relative;
  z-index: 100;
  margin-bottom: 8px;
}

/* ============================================================
   UNIFIED COMMAND BAR (Pure Black Smoked Glass)
   ============================================================ */
.command-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 22px;
  min-height: 62px;
  position: relative;
  z-index: 100;
}

/* LEFT: Progress & Tasks in a single clean horizontal line */
.command-bar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.radial-gauge-box {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 40% 35%, #1c1d22 0%, #050608 75%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    inset -1px -1px 3px rgba(0, 0, 0, 0.9),
    0 4px 14px rgba(0, 0, 0, 0.8);
  flex-shrink: 0;
}

.radial-gauge-svg {
  width: 40px;
  height: 40px;
  overflow: visible;
}

.gauge-tick--active {
  transition: all 0.3s var(--spring);
}

.gauge-tick--inactive {
  opacity: 0.35;
  transition: all 0.3s var(--spring);
}

.stat-pill-box {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  white-space: nowrap;
  flex-shrink: 0;
}

.stat-pill-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 400;
}

.stat-pill-val {
  font-family: 'DM Mono', monospace;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.stat-pill-val--accent {
  transition: color 0.3s var(--ease-out), text-shadow 0.3s var(--ease-out);
}

.command-bar-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 4px;
  flex-shrink: 0;
}

/* CENTER: Search Bar */
.command-bar__center {
  flex: 1;
  max-width: 440px;
  min-width: 200px;
  margin: 0 16px;
  display: flex;
  justify-content: center;
}

.command-bar__center .search-wrap {
  position: relative;
  width: 100%;
  height: 38px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: 38px;
  padding: 0 32px 0 34px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
}

.search-input::placeholder {
  color: var(--text-muted);
  font-weight: 300;
}

.search-input:focus {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    var(--shadow-focus);
  background: rgba(255, 255, 255, 0.06);
}

.search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  display: flex;
  transition: color var(--t-fast);
}

.search-clear:hover { color: #fff; }
.search-clear svg { width: 13px; height: 13px; }

/* RIGHT: Controls & Action */
.command-bar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ============================================================
   CUSTOM SELECT (Pure Black Smoked Glass Dropdown)
   ============================================================ */
.custom-select {
  position: relative;
  min-width: 148px;
  user-select: none;
  flex-shrink: 0;
  z-index: 105;
}

.custom-select.open {
  z-index: 500;
}

.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all var(--t-fast);
}

.custom-select__trigger:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.custom-select__trigger svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform var(--t-fast);
}

.custom-select__options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: rgba(12, 12, 12, 0.98);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 500;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    0 20px 48px rgba(0, 0, 0, 0.98);
  animation: card-appear 0.18s var(--spring);
}

/* Hidden dropdowns: disable backdrop-filter to avoid wasted GPU layers */
.custom-select__options.hidden {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.custom-option {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all var(--t-fast) var(--spring);
  position: relative;
}

.custom-option:hover {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.35);
  border-left-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  transform: translateY(-0.5px);
}

.custom-option.selected {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-top-color: rgba(255, 255, 255, 0.45);
  border-left-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-weight: 500;
}

.custom-select--modal {
  min-width: 0;
  width: 100%;
}

.custom-select--modal .custom-select__trigger {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
  font-weight: 300;
}

.custom-select--modal .custom-select__trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--t-fast) var(--spring);
}

.btn svg {
  width: 14px;
  height: 14px;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary Smoked Glass Button (Aligned with Selects and Search) */
.btn--primary {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

.btn--primary:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.28);
  border-top-color: rgba(255, 255, 255, 0.42);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.6);
}

.btn--primary:active {
  transform: translateY(0) scale(0.97);
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.4);
}

.btn--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06);
}

.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn--danger {
  background: rgba(255, 0, 51, 0.12);
  color: #ff3355;
  border: 1px solid rgba(255, 0, 51, 0.3);
  box-shadow: 0 4px 16px rgba(255, 0, 51, 0.2);
}

.btn--danger:hover {
  background: rgba(255, 0, 51, 0.22);
  border-color: rgba(255, 0, 51, 0.5);
  box-shadow: 0 6px 20px rgba(255, 0, 51, 0.35);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  padding: 0 12px;
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   BOARD LAYOUT WITH LEFT WORKSPACES SIDEBAR
   ============================================================ */
.board-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

/* Left Workspaces Sidebar */
.workspaces-sidebar {
  width: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.workspaces-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px;
}

.workspaces-sidebar__title {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 500;
}

.workspaces-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Glassmorphic Smoked 3D Workspace Pill (Balanced Opacity & Translucency) */
.workspace-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(12, 12, 16, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.24);
  border-left-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 -1px 1px rgba(0, 0, 0, 0.6),
    0 8px 24px -4px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  user-select: none;
  transition: all var(--t-fast) var(--spring);
}

/* GPU layer only on hover */
.workspace-pill:hover {
  will-change: transform;
  transform: translateY(-1.5px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(14, 14, 18, 0.76);
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 12px 28px -4px rgba(0, 0, 0, 0.85);
}

.workspace-pill--active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 100%), rgba(16, 16, 20, 0.8);
  border: 1px solid var(--ws-color, rgba(255, 255, 255, 0.35));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    0 10px 28px rgba(0, 0, 0, 0.85);
}

.workspace-pill__gauge {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ws-gauge-svg {
  width: 28px;
  height: 28px;
  overflow: visible;
}

.workspace-pill__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-pill__name {
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.15px;
}

.workspace-pill__meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.02em;
}

.workspace-pill__actions {
  position: relative;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.workspace-pill:hover .workspace-pill__actions,
.workspace-pill--active .workspace-pill__actions,
.workspace-pill--menu-open .workspace-pill__actions {
  opacity: 1;
}

.workspace-pill--menu-open {
  z-index: 150 !important;
}

.ws-menu-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--t-fast);
}

.ws-menu-btn:hover,
.workspace-pill--menu-open .ws-menu-btn {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.ws-menu-btn svg {
  width: 14px;
  height: 14px;
}

/* Workspace Context Menu (Pure Black Smoked Glass Dropdown) */
.ws-context-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 6px;
  background: rgba(12, 12, 16, 0.92);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.35);
  border-left-color: rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 170px;
  z-index: 500;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.24),
    inset 0 -1px 1px rgba(0, 0, 0, 0.6),
    0 20px 48px rgba(0, 0, 0, 0.98);
  animation: card-appear 0.18s var(--spring);
}

.ws-context-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  width: 100%;
  border: 1px solid transparent;
  transition: all var(--t-fast) var(--spring);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.ws-context-menu__item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ws-context-menu__item:hover {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.35);
  border-left-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  transform: translateY(-0.5px);
}

.ws-context-menu__item--delete {
  color: rgba(255, 100, 120, 0.9);
}

.ws-context-menu__item--delete:hover {
  background: linear-gradient(150deg, rgba(255, 51, 85, 0.22) 0%, rgba(255, 51, 85, 0.06) 100%);
  border: 1px solid rgba(255, 51, 85, 0.32);
  border-top-color: rgba(255, 100, 130, 0.55);
  border-left-color: rgba(255, 100, 130, 0.35);
  box-shadow:
    inset 0 1px 1px rgba(255, 100, 130, 0.4),
    0 4px 14px rgba(255, 0, 50, 0.3);
  color: #ff4d6d;
  transform: translateY(-0.5px);
}

.btn--add-ws {
  width: 100%;
  justify-content: center;
  border-radius: var(--radius-lg);
  height: 40px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: var(--text-muted);
}

.btn--add-ws:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Board Content & Columns */
.board-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   KANBAN BOARD COLUMNS (Pure Black Smoked Glass)
   ============================================================ */
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}

.column {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(14, 14, 14, 0.6) 0%, rgba(5, 5, 5, 0.8) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 40px -8px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  min-height: 400px;
  overflow: hidden;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.column.drag-over {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

.column__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.column__title {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: #fff;
}

.column__actions-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.column__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.2);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
  letter-spacing: 0.02em;
}

.column__menu-btn {
  color: var(--text-muted);
  display: flex;
  transition: color var(--t-fast);
}

.column__menu-btn svg {
  width: 15px;
  height: 15px;
}

.column__menu-btn:hover {
  color: var(--text-primary);
}

.column__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

.column__add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: var(--text-muted);
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  transition: all var(--t-fast);
}

.column__add-btn svg {
  width: 13px;
  height: 13px;
}

.column__add-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   TASK CARDS (JEWEL BOX: 3D Emerald, Sapphire, Ruby)
   ============================================================ */
@keyframes glass-caustic-rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: 16px 18px 14px;
  cursor: grab;
  user-select: none;
  overflow: hidden;

  /* Shared border settings */
  border: 1px solid transparent;
  /* controlled by box-shadow/border colors below */
  animation: card-appear 0.36s var(--spring) both;
  transition: transform var(--t-fast) var(--spring), opacity var(--t-fast);
  contain: layout style;
}

/* Promote to GPU layer only on hover, not permanently */
.card:hover {
  will-change: transform;
}

@keyframes card-appear {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Бегущий стеклянный блик по контуру карточки */
.card__shimmer {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: xor;
  -webkit-mask-clip: content-box, border-box;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;
  mask-clip: content-box, border-box;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  transform: translateZ(0);
}

.card__shimmer-surface {
  position: absolute;
  inset: -150%;
  width: 400%;
  height: 400%;
  transform-origin: center center;
  animation: glass-caustic-rotate 16s linear infinite;
  will-change: transform;
}

/* Emerald Edge Shimmer (Low Priority) */
.card[data-priority="low"] .card__shimmer-surface,
.card[data-tag="frontend"] .card__shimmer-surface,
.card[data-tag="фронтенд"] .card__shimmer-surface,
.card[data-tag="бэкенд"] .card__shimmer-surface,
.card[data-tag="документация"] .card__shimmer-surface {
  background: conic-gradient(
    from 0deg,
    rgba(0, 255, 120, 0.05) 0deg,
    rgba(0, 255, 120, 0.05) 260deg,
    rgba(0, 255, 120, 0.25) 290deg,
    rgba(100, 255, 180, 0.70) 325deg,
    rgba(255, 255, 255, 0.95) 335deg,
    rgba(100, 255, 180, 0.70) 345deg,
    rgba(0, 255, 120, 0.25) 355deg,
    rgba(0, 255, 120, 0.05) 360deg
  );
}

/* Sapphire Edge Shimmer (Medium Priority) */
.card[data-priority="medium"] .card__shimmer-surface,
.card[data-tag="ux"] .card__shimmer-surface,
.card[data-tag="дизайн"] .card__shimmer-surface,
.card[data-tag="функция"] .card__shimmer-surface {
  background: conic-gradient(
    from 0deg,
    rgba(0, 120, 255, 0.05) 0deg,
    rgba(0, 120, 255, 0.05) 260deg,
    rgba(0, 120, 255, 0.25) 290deg,
    rgba(120, 200, 255, 0.70) 325deg,
    rgba(255, 255, 255, 0.95) 335deg,
    rgba(120, 200, 255, 0.70) 345deg,
    rgba(0, 120, 255, 0.25) 355deg,
    rgba(0, 120, 255, 0.05) 360deg
  );
}

/* Amber / Warm Orange Edge Shimmer (High Priority) */
.card[data-priority="high"] .card__shimmer-surface {
  background: conic-gradient(
    from 0deg,
    rgba(255, 140, 0, 0.05) 0deg,
    rgba(255, 140, 0, 0.05) 260deg,
    rgba(255, 140, 0, 0.25) 290deg,
    rgba(255, 190, 80, 0.70) 325deg,
    rgba(255, 255, 255, 0.95) 335deg,
    rgba(255, 190, 80, 0.70) 345deg,
    rgba(255, 140, 0, 0.25) 355deg,
    rgba(255, 140, 0, 0.05) 360deg
  );
}

/* Ruby Edge Shimmer (Urgent Priority) */
.card[data-priority="urgent"] .card__shimmer-surface,
.card[data-tag="bug"] .card__shimmer-surface,
.card[data-tag="urgent"] .card__shimmer-surface,
.card[data-tag="баг"] .card__shimmer-surface,
.card[data-tag="срочно"] .card__shimmer-surface,
.card.card--overdue .card__shimmer-surface {
  background: conic-gradient(
    from 0deg,
    rgba(255, 0, 50, 0.05) 0deg,
    rgba(255, 0, 50, 0.05) 260deg,
    rgba(255, 0, 50, 0.25) 290deg,
    rgba(255, 120, 140, 0.70) 325deg,
    rgba(255, 255, 255, 0.95) 335deg,
    rgba(255, 120, 140, 0.70) 345deg,
    rgba(255, 0, 50, 0.25) 355deg,
    rgba(255, 0, 50, 0.05) 360deg
  );
}

/* Obsidian Edge Shimmer (Done state) */
.card.card--done .card__shimmer-surface {
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.03) 0deg,
    rgba(255, 255, 255, 0.03) 260deg,
    rgba(255, 255, 255, 0.15) 290deg,
    rgba(255, 255, 255, 0.45) 325deg,
    rgba(255, 255, 255, 0.85) 335deg,
    rgba(255, 255, 255, 0.45) 345deg,
    rgba(255, 255, 255, 0.15) 355deg,
    rgba(255, 255, 255, 0.03) 360deg
  );
}

/* Create the sharp Specular Gloss (The polished glass surface) */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  /* Sharp diagonal gloss */
  background: linear-gradient(105deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.03) 15%,
      transparent 35%);

  /* Bevel Effect (Highlight Top/Left, Dark Bottom/Right) */
  box-shadow:
    inset 1.5px 1.5px 0px rgba(255, 255, 255, 0.4),
    inset -1px -1px 0px rgba(0, 0, 0, 0.8);

  -webkit-mask: linear-gradient(#fff, #fff);
}

/* Ensure content sits above the gloss and border */
.card>*:not(.card__shimmer) {
  position: relative;
  z-index: 3;
}

/* 1. EMERALD (Low Priority) */
.card[data-priority="low"] {
  background: linear-gradient(145deg, #020c06 0%, #000000 100%);
  border-color: rgba(0, 255, 120, 0.1);
  box-shadow:
    inset 0 -40px 40px -20px rgba(0, 255, 120, 0.35),
    inset 0 4px 20px rgba(255, 255, 255, 0.05),
    0 16px 32px -8px rgba(0, 0, 0, 0.9),
    0 10px 30px -10px rgba(0, 255, 120, 0.15);
}

/* 2. SAPPHIRE (Medium Priority) */
.card[data-priority="medium"] {
  background: linear-gradient(145deg, #010612 0%, #000000 100%);
  border-color: rgba(0, 100, 255, 0.15);
  box-shadow:
    inset 0 -40px 40px -20px rgba(0, 120, 255, 0.4),
    inset 0 4px 20px rgba(255, 255, 255, 0.05),
    0 16px 32px -8px rgba(0, 0, 0, 0.9),
    0 10px 30px -10px rgba(0, 100, 255, 0.2);
}

/* 3. AMBER / CITRINE ORANGE (High Priority) */
.card[data-priority="high"] {
  background: linear-gradient(145deg, #130a01 0%, #000000 100%);
  border-color: rgba(255, 140, 0, 0.15);
  box-shadow:
    inset 0 -40px 40px -20px rgba(255, 140, 0, 0.4),
    inset 0 4px 20px rgba(255, 255, 255, 0.05),
    0 16px 32px -8px rgba(0, 0, 0, 0.9),
    0 10px 30px -10px rgba(255, 140, 0, 0.2);
}

/* 4. RUBY (Urgent Priority / Overdue) */
.card[data-priority="urgent"],
.card.card--overdue {
  background: linear-gradient(145deg, #120102 0%, #000000 100%);
  border-color: rgba(255, 0, 50, 0.15);
  box-shadow:
    inset 0 -40px 40px -20px rgba(255, 0, 50, 0.4),
    inset 0 4px 20px rgba(255, 255, 255, 0.05),
    0 16px 32px -8px rgba(0, 0, 0, 0.9),
    0 10px 30px -10px rgba(255, 0, 50, 0.2);
}

/* 5. OBSIDIAN (Done State) — no caustic shimmer, no will-change */
.card.card--done {
  background: linear-gradient(145deg, #080808 0%, #000000 100%);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 -40px 40px -20px rgba(255, 255, 255, 0.05),
    0 16px 32px -8px rgba(0, 0, 0, 0.9);
  opacity: 0.6;
  will-change: auto; /* release GPU layer */
}

.card.card--done .card__shimmer-surface {
  animation: none; /* stop caustic run on done cards */
}

.card--done .card__title {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Card Hover Physics */
.card:hover {
  transform: translateY(-4px);
}

/* Baked shadow for hover */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--t-fast) var(--spring);
}

.card[data-priority="low"]::before {
  box-shadow: inset 0 -40px 40px -20px rgba(0, 255, 120, 0.35), inset 0 4px 20px rgba(255, 255, 255, 0.05), 0 22px 48px -6px rgba(0, 0, 0, 1), 0 15px 40px -10px rgba(0, 255, 120, 0.3);
}

.card[data-priority="medium"]::before {
  box-shadow: inset 0 -40px 40px -20px rgba(0, 120, 255, 0.4), inset 0 4px 20px rgba(255, 255, 255, 0.05), 0 22px 48px -6px rgba(0, 0, 0, 1), 0 15px 40px -10px rgba(0, 100, 255, 0.3);
}

.card[data-priority="high"]::before {
  box-shadow: inset 0 -40px 40px -20px rgba(255, 140, 0, 0.45), inset 0 4px 20px rgba(255, 255, 255, 0.05), 0 22px 48px -6px rgba(0, 0, 0, 1), 0 15px 40px -10px rgba(255, 140, 0, 0.35);
}

.card[data-priority="urgent"]::before,
.card.card--overdue::before {
  box-shadow: inset 0 -40px 40px -20px rgba(255, 0, 50, 0.4), inset 0 4px 20px rgba(255, 255, 255, 0.05), 0 22px 48px -6px rgba(0, 0, 0, 1), 0 15px 40px -10px rgba(255, 0, 50, 0.3);
}

.card:hover::before {
  opacity: 1;
}

.card:active {
  cursor: grabbing;
  transform: scale(0.98);
}

.card.dragging {
  opacity: 0.35;
  transform: scale(0.96) rotate(1.5deg) !important;
  cursor: grabbing;
}

/* Internal Typography & Layout */
.card__top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  position: relative;
  z-index: 10;
}

.card__overline {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.card__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  position: relative;
  z-index: 20;
  transition: opacity var(--t-fast);
}

.card:hover .card__actions,
.card--menu-open .card__actions {
  opacity: 1;
}

.card--menu-open {
  z-index: 150 !important;
}

.card--menu-open .card__top-bar {
  z-index: 150 !important;
}

.card__action-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-xs);
  transition: all var(--t-fast);
}

.card__action-btn svg {
  width: 12px;
  height: 12px;
}

.card__action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.card__title {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.card__description {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__mid-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 14px;
}

.card__tags-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Etched Frosted Tags (Monochrome to fit all jewels) */
.card__tag-pill {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Quick Advance Glow Arrow — bare icon, no container, glow = priority color */
.card__advance-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 25;
  cursor: pointer;
  transition:
    opacity 0.22s var(--spring),
    transform 0.22s var(--spring),
    filter 0.22s var(--spring);
}

.card__advance-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.18s var(--spring);
}

/* Glow colour per priority */
.card[data-priority="low"] .card__advance-btn {
  color: #00ff78;
  filter: drop-shadow(0 0 5px rgba(0, 255, 120, 0.6));
}
.card[data-priority="medium"] .card__advance-btn {
  color: #5ab4ff;
  filter: drop-shadow(0 0 5px rgba(0, 120, 255, 0.7));
}
.card[data-priority="high"] .card__advance-btn {
  color: #ffb040;
  filter: drop-shadow(0 0 5px rgba(255, 140, 0, 0.7));
}
.card[data-priority="urgent"] .card__advance-btn,
.card.card--overdue .card__advance-btn {
  color: #ff4466;
  filter: drop-shadow(0 0 5px rgba(255, 0, 50, 0.7));
}

.card:hover .card__advance-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* On button-hover: arrow nudge + stronger glow */
.card__advance-btn:hover svg {
  transform: translateX(3px);
}
.card[data-priority="low"] .card__advance-btn:hover {
  filter: drop-shadow(0 0 9px rgba(0, 255, 120, 0.95));
}
.card[data-priority="medium"] .card__advance-btn:hover {
  filter: drop-shadow(0 0 9px rgba(0, 120, 255, 1));
}
.card[data-priority="high"] .card__advance-btn:hover {
  filter: drop-shadow(0 0 9px rgba(255, 140, 0, 1));
}
.card[data-priority="urgent"] .card__advance-btn:hover,
.card.card--overdue .card__advance-btn:hover {
  filter: drop-shadow(0 0 9px rgba(255, 0, 50, 0.95));
}

.card__advance-btn:active svg {
  transform: translateX(5px) scale(0.92);
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 10px;
}

.card__deadline-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'DM Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.card__deadline-badge svg {
  width: 11px;
  height: 11px;
}

.card__deadline-badge--overdue {
  color: #fff;
  font-weight: 500;
}

.card__footer-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-flame {
  color: #fff;
  display: flex;
}

.icon-flame svg {
  width: 13px;
  height: 13px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

.icon-clip {
  color: rgba(255, 255, 255, 0.6);
  display: flex;
}

.icon-clip svg {
  width: 13px;
  height: 13px;
}

/* Move Context Menu (Pure Black Smoked Glass Dropdown) */
.move-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: rgba(12, 12, 16, 0.92);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.35);
  border-left-color: rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 1px rgba(0, 0, 0, 0.6),
    0 20px 48px rgba(0, 0, 0, 0.98);
  z-index: 999;
  padding: 6px;
  min-width: 165px;
  white-space: nowrap;
  animation: card-appear 0.18s var(--spring);
}

.move-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  width: 100%;
  border: 1px solid transparent;
  transition: all var(--t-fast) var(--spring);
  cursor: pointer;
}

.move-menu__item:hover {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.35);
  border-left-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  transform: translateY(-0.5px);
}

.move-menu__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

/* ============================================================
   MODAL WINDOW (Soft Blur Overlay & Smoked Glass)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: overlay-in var(--t-normal) var(--ease-out);
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal {
  width: 100%;
  max-width: 500px;
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(14, 14, 14, 0.97) 0%, rgba(4, 4, 4, 0.99) 100%);
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.24);
  border-left-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    0 32px 64px -12px rgba(0, 0, 0, 0.98);
  overflow: hidden;
  position: relative;
  animation: modal-in var(--t-slow) var(--spring);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Sharp glass rim on modal */
.modal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  z-index: 10;
  box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.28), inset -1px -1px 0px rgba(0, 0, 0, 0.8);
}

.modal--sm {
  max-width: 380px;
  padding: 34px 26px 26px;
  text-align: center;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 0;
  position: relative;
  z-index: 1;
}

.modal__title {
  font-size: 19px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.modal__form {
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.modal__search-row {
  margin-bottom: 2px;
}

.modal__search-input-wrap {
  position: relative;
}

.modal__search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.modal__sub-input,
.form-input {
  width: 100%;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top-color: rgba(255, 255, 255, 0.15);
  border-left-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13.5px;
  outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: all var(--t-fast);
}

.modal__sub-input:focus,
.form-input:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    var(--shadow-focus);
}

.modal__sub-input {
  padding-left: 38px;
  font-size: 13px;
}

.modal__chips-row {
  display: flex;
  gap: 12px;
}

.chip-select-wrap {
  flex: 1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.required {
  color: #ff3355;
}

.form-input--lg {
  font-size: 15px;
  padding: 12px 16px;
}

.form-input--sm {
  font-size: 13px;
  padding: 9px 13px;
}

.form-textarea {
  resize: vertical;
  min-height: 76px;
}

.form-error {
  font-size: 11.5px;
  color: #ff3355;
  display: none;
}

.form-error.visible {
  display: block;
}

.tags-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.tag-pill {
  font-size: 12px;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all var(--t-fast);
}

.tag-pill:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.28);
}

.tag-pill--active {
  background: #ffffff;
  color: #000000;
  font-weight: 600;
  border-color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.35);
}

.mt-2 {
  margin-top: 6px;
}

/* Action Buttons */
.modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.modal__actions--center {
  justify-content: center;
}

.btn--create-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px 8px 24px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 18px rgba(255, 255, 255, 0.25);
  transition: all var(--t-fast) var(--spring);
}

.btn--create-task:hover {
  transform: translateY(-1px);
  background: #f0f0f5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 6px 24px rgba(255, 255, 255, 0.42);
}

.btn--create-task:active {
  transform: scale(0.97);
}

.create-task__circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-task__icon {
  width: 14px;
  height: 14px;
  color: #fff;
}

.confirm__icon {
  width: 52px;
  height: 52px;
  background: rgba(255, 0, 51, 0.12);
  border: 1px solid rgba(255, 0, 51, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 0, 51, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.confirm__icon svg {
  width: 22px;
  height: 22px;
  color: #ff3355;
}

.confirm__title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #fff;
}

.confirm__text {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.confirm__checkbox-wrap {
  margin-bottom: 22px;
  display: flex;
  justify-content: center;
}

.confirm__checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--text-secondary);
  transition: color var(--t-fast) ease;
}

.confirm__checkbox-label:hover {
  color: var(--text-primary);
}

.confirm__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.confirm__checkbox-custom {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast) var(--spring);
  position: relative;
  flex-shrink: 0;
}

.confirm__checkbox-label:hover .confirm__checkbox-custom {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.confirm__checkbox:checked + .confirm__checkbox-custom {
  background: #ff3355;
  border-color: #ff3355;
  box-shadow: 0 0 12px rgba(255, 51, 85, 0.45);
}

.confirm__checkbox:checked + .confirm__checkbox-custom::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-0.5px, -0.5px);
  display: block;
}

.confirm__checkbox:focus-visible + .confirm__checkbox-custom {
  outline: 2px solid #ff3355;
  outline-offset: 2px;
}

.empty-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 84px 24px;
  text-align: center;
  grid-column: 1 / -1;
}

.empty-board__icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-board__icon svg {
  width: 26px;
  height: 26px;
  color: var(--text-muted);
}

.empty-board__title {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}

.empty-board__text {
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 280px;
}

@media (max-width: 1080px) {
  .board-layout {
    flex-direction: column;
    gap: 20px;
  }

  .workspaces-sidebar {
    width: 100%;
  }

  .workspaces-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .workspace-pill {
    flex: 1;
    min-width: 170px;
  }

  .command-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .command-bar__left {
    justify-content: flex-start;
  }

  .command-bar__center {
    max-width: none;
    width: 100%;
    margin: 0;
  }

  .command-bar__right {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .board {
    grid-template-columns: 1fr;
  }

  .workspaces-list {
    flex-direction: column;
  }

  .workspace-pill {
    min-width: 0;
    width: 100%;
  }

  .command-bar__right {
    flex-direction: column;
    align-items: stretch;
  }

  .command-bar__right .custom-select,
  .command-bar__right .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   TOAST NOTIFICATIONS (Undo / Redo / Status Feedback)
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
}

.toast-pill {
  padding: 8px 18px;
  background: rgba(14, 14, 18, 0.94);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    0 12px 32px rgba(0, 0, 0, 0.9);
  animation: toast-in 0.22s var(--spring);
  pointer-events: auto;
  user-select: none;
}

.toast-pill--undo {
  border-color: rgba(255, 184, 0, 0.45);
  color: #ffb800;
}

.toast-pill--redo {
  border-color: rgba(0, 255, 136, 0.45);
  color: #00ff88;
}

.toast-pill--out {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: all 0.24s var(--ease-out);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
   SUPABASE AUTH & USER PROFILE
   ============================================================ */
.auth-container {
  display: flex;
  align-items: center;
  position: relative;
}

.btn--google {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast) var(--spring);
}

.btn--google:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.google-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.user-profile-menu {
  position: relative;
}

.user-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px 0 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--text-primary);
  transition: all var(--t-fast) var(--spring);
}

.user-avatar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.user-avatar-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

.user-display-name {
  font-size: 13px;
  font-weight: 500;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-avatar-btn svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: rgba(14, 14, 18, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 36px -8px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 550;
  animation: modal-appear 0.2s var(--spring) both;
}

.user-dropdown__header {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.user-dropdown__email {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  word-break: break-all;
}

.user-dropdown__status {
  font-size: 11px;
  color: #00ff88;
  display: flex;
  align-items: center;
  gap: 5px;
}

.user-dropdown__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 8px #00ff88;
}

.user-dropdown__logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: #ff3355;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
}

.user-dropdown__logout-btn:hover {
  background: rgba(255, 51, 85, 0.12);
}

.user-dropdown__logout-btn svg {
  width: 14px;
  height: 14px;
}