:root {
      /* North Star Design System */
      --bg-deep: #0a0a0f;
      --bg-elevated: #12121a;
      --bg-surface: #1a1a24;
      --border-subtle: rgba(255, 255, 255, 0.06);
      --border-glass: rgba(255, 255, 255, 0.08);
      
      /* Legacy compatibility */
      --bg: #0a0a0f;
      --bg-card: #12121a;
      --bg-hover: #1a1a24;
      --bg-input: #0d0d0d;
      --border: rgba(255, 255, 255, 0.06);
      --border-light: rgba(255, 255, 255, 0.08);
      
      /* Text */
      --text-primary: rgba(255, 255, 255, 0.92);
      --text-secondary: rgba(255, 255, 255, 0.64);
      --text-tertiary: rgba(255, 255, 255, 0.40);
      --text: #ffffff;
      --text-soft: rgba(255, 255, 255, 0.64);
      --text-muted: rgba(255, 255, 255, 0.40);
      
      /* Alignment Colors */
      --align-direct: #f5e6d3;
      --align-direct-glow: rgba(245, 230, 211, 0.15);
      --align-supporting: #00d4d4;
      --align-supporting-glow: rgba(0, 212, 212, 0.12);
      --align-adjacent: #6b7a99;
      --align-adjacent-glow: rgba(107, 122, 153, 0.10);
      --align-exploratory: #8b7aa8;
      --align-exploratory-glow: rgba(139, 122, 168, 0.10);
      
      /* Semantic Colors */
      --success: #34d399;
      --warning: #fbbf24;
      --destructive: #f87171;
      
      /* Primary accent */
      --primary: #06b6d4;
      --primary-hover: #0891b2;
      --primary-muted: rgba(6, 182, 212, 0.3);
      
      /* Stage colors */
      --stage-idea: #64748b;
      --stage-scripted: #3b82f6;
      --stage-ready-capture: #f59e0b;
      --stage-captured: #f97316;
      --stage-editing: #a855f7;
      --stage-ready-post: #22c55e;
      --stage-published: #059669;
      --stage-archived: #475569;
      
      /* Bucket colors */
      --bucket-live-set: #f97066;
      --bucket-forest: #22c55e;
      --bucket-studio: #a855f7;
      --bucket-evenant: #3b82f6;
      --bucket-tools: #06b6d4;
      --bucket-collabs: #f59e0b;
      --bucket-personal: #64748b;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    /* Navigation Header */
    /* Nav Background Bar (soft 20% opacity) */
    .nav-bg-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 98;
      height: 56px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(20, 20, 22, 0.4);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .nav-bg-logo {
      position: absolute;
      left: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-bg-logo .logo-icon {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-bg-logo .logo-icon svg {
      width: 24px;
      height: 24px;
    }

    .nav-bg-logo .logo-text {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }

    .nav-bg-spacer {
      width: 120px;
    }

    .nav-bg-right {
      position: absolute;
      right: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-bg-right .ambient-player-container {
      position: relative;
    }

    /* Ambient player button in nav bar - match action-btn style */
    .nav-bg-right .ambient-player-btn {
      width: 32px;
      height: 32px;
      margin-right: 0;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav-bg-right .ambient-player-btn svg {
      width: 16px;
      height: 16px;
      color: rgba(255, 255, 255, 0.5);
    }

    .nav-bg-right .ambient-player-btn:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .nav-bg-right .ambient-player-btn:hover svg {
      color: rgba(255, 255, 255, 0.8);
    }

    .nav-bg-right .ambient-player-btn.playing {
      background: rgba(0, 212, 212, 0.15);
      border-color: rgba(0, 212, 212, 0.4);
    }

    .nav-bg-right .ambient-player-btn.playing svg {
      color: #00d4d4;
    }

    /* Action buttons (search, settings, etc) */
    .action-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      color: rgba(255, 255, 255, 0.5);
    }

    .action-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.8);
    }

    .action-btn svg {
      width: 16px;
      height: 16px;
    }

    /* Legacy button styles for backwards compatibility */
    .nav-bg-right .focus-lock-btn,
    .nav-bg-right .header-settings-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(255, 255, 255, 0.04);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      color: rgba(255, 255, 255, 0.5);
    }

    .nav-bg-right .focus-lock-btn:hover,
    .nav-bg-right .header-settings-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.8);
    }

    .nav-bg-right .focus-lock-btn svg,
    .nav-bg-right .header-settings-btn svg {
      width: 16px;
      height: 16px;
    }

    /* Navigation Pill Container */
    .nav-pill {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 4px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
    }

    /* Nav Items (icon-only with tooltips) */
    .nav-item {
      width: 40px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
    }

    .nav-item:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    .nav-item.active {
      background: rgba(255, 255, 255, 0.1);
    }

    .nav-item svg {
      width: 18px;
      height: 18px;
      color: rgba(255, 255, 255, 0.5);
      flex-shrink: 0;
    }

    .nav-item:hover svg {
      color: rgba(255, 255, 255, 0.7);
    }

    .nav-item.active svg {
      color: rgba(255, 255, 255, 0.95);
    }

    /* Anchor nav-items (external links) */
    a.nav-item {
      text-decoration: none;
    }

    /* Nav Tooltip */
    .nav-tooltip {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding: 6px 12px;
      background: rgba(0, 0, 0, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
      margin-top: 8px;
      z-index: 100;
    }

    .nav-item:hover .nav-tooltip {
      opacity: 1;
    }

    /* Legacy styles - keep for backwards compatibility */
    .nav-items {
      display: none;
    }

    .nav-item-divider {
      width: 1px;
      height: 20px;
      background: rgba(255, 255, 255, 0.06);
      margin: 0 6px;
    }

    /* Hide old nav-header */
    .nav-header {
      display: none;
    }

    /* Responsive nav-pill */
    @media (max-width: 768px) {
      .nav-bg-bar {
        height: 52px;
        padding: 0 12px;
      }

      .nav-bg-logo .logo-text {
        display: none;
      }

      .nav-pill {
        gap: 0;
        padding: 3px;
      }

      .nav-item {
        width: 36px;
        height: 32px;
      }

      .nav-item svg {
        width: 16px;
        height: 16px;
      }

      .action-btn {
        width: 30px;
        height: 30px;
      }

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

      .nav-bg-right {
        gap: 6px;
      }
    }

    @media (max-width: 480px) {
      .nav-bg-bar {
        padding: 0 8px;
      }

      .nav-pill {
        padding: 2px;
      }

      .nav-item {
        width: 32px;
        height: 28px;
      }

      .nav-item svg {
        width: 14px;
        height: 14px;
      }

      .nav-bg-right {
        gap: 4px;
      }

      /* Hide less important action buttons on very small screens */
      .nav-bg-right .ambient-player-container {
        display: none;
      }
    }

    .nav-left, .nav-right {
      flex: 1;
      display: flex;
      align-items: center;
    }

    .nav-left { justify-content: flex-start; }
    .nav-center { flex: 0 0 auto; }
    .nav-right { justify-content: flex-end; gap: 12px; }

    .nav-logo {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-logo svg {
      width: 20px;
      height: 20px;
      color: var(--primary);
    }

    /* Hide logo text on medium screens */
    @media (max-width: 900px) {
      .nav-logo span {
        display: none;
      }
    }

    @media (max-width: 600px) {
      .nav-logo {
        display: none;
      }
    }

    .nav-tabs {
      display: flex;
      gap: 4px;
      padding: 4px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 10px;
      border: 1px solid var(--border);
    }

    .nav-tab {
      padding: 8px 20px;
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
    }

    a.nav-tab:visited {
      color: var(--text-muted);
    }

    .nav-tab:hover {
      color: var(--text-soft);
      background: rgba(255, 255, 255, 0.03);
    }

    .nav-tab.active {
      background: var(--primary);
      color: white;
      box-shadow: 0 2px 8px var(--primary-muted);
    }

    .nav-tab svg {
      width: 16px;
      height: 16px;
    }

    /* User Menu */
    .user-menu { position: relative; }

    .header-settings-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      margin-right: 12px;
    }

    .header-settings-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .header-settings-btn svg {
      width: 18px;
      height: 18px;
      color: var(--text-secondary);
      transition: transform 0.3s ease;
    }

    .header-settings-btn:hover svg {
      color: var(--text-primary);
      transform: rotate(45deg);
    }

    /* Focus Lock Button */
    .focus-lock-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      margin-right: 8px;
    }

    .focus-lock-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .focus-lock-btn svg {
      width: 18px;
      height: 18px;
      color: var(--text-secondary);
      transition: all 0.15s;
    }

    .focus-lock-btn:hover svg {
      color: var(--text-primary);
    }

    /* Focus Lock Button - icon toggle */
    #focus-lock-btn .lock-closed,
    .focus-lock-btn .lock-closed {
      display: none;
    }

    #focus-lock-btn .lock-open,
    .focus-lock-btn .lock-open {
      display: block;
    }

    /* Locked In Mode Active */
    #focus-lock-btn.locked,
    .focus-lock-btn.locked {
      background: rgba(0, 212, 212, 0.15) !important;
      border-color: rgba(0, 212, 212, 0.4) !important;
    }

    #focus-lock-btn.locked svg,
    .focus-lock-btn.locked svg {
      color: var(--primary);
    }

    #focus-lock-btn.locked .lock-closed,
    .focus-lock-btn.locked .lock-closed {
      display: block;
    }

    #focus-lock-btn.locked .lock-open,
    .focus-lock-btn.locked .lock-open {
      display: none;
    }

    /* Locked In Mode - Body indicator */
    body.locked-in-mode {
      --locked-glow: rgba(0, 212, 212, 0.1);
    }

    body.locked-in-mode .main-container::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--primary), transparent);
      z-index: 1000;
      animation: lockedPulse 2s ease-in-out infinite;
    }

    @keyframes lockedPulse {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }

    /* Locked In Mode Banner */
    .locked-in-banner {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 20px;
      background: linear-gradient(135deg, rgba(0, 212, 212, 0.1), rgba(0, 180, 180, 0.05));
      border: 1px solid rgba(0, 212, 212, 0.2);
      border-radius: 12px;
      margin-bottom: 20px;
      color: var(--primary);
      font-size: 13px;
      font-weight: 500;
    }

    body.locked-in-mode .locked-in-banner {
      display: flex;
    }

    .locked-in-banner svg {
      width: 16px;
      height: 16px;
    }

    .locked-in-banner .exit-btn {
      margin-left: 12px;
      padding: 4px 10px;
      background: rgba(0, 212, 212, 0.2);
      border: none;
      border-radius: 6px;
      color: var(--primary);
      font-size: 11px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .locked-in-banner .exit-btn:hover {
      background: rgba(0, 212, 212, 0.3);
    }

    /* Hide non-essential elements in Locked In Mode */
    body.locked-in-mode .someday-section {
      display: none;
    }

    body.locked-in-mode .add-project-row {
      display: none;
    }

    body.locked-in-mode .add-card-grid {
      display: none;
    }

    /* ========================================
       AMBIENT SOUND PLAYER
       ======================================== */
    .ambient-player-container {
      position: relative;
    }

    .ambient-player-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid var(--border-subtle);
      background: var(--surface-elevated);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      margin-right: 8px;
    }

    .ambient-player-btn svg {
      width: 18px;
      height: 18px;
      color: var(--text-tertiary);
      transition: all 0.15s;
    }

    .ambient-player-btn:hover {
      border-color: var(--border-medium);
    }

    .ambient-player-btn:hover svg {
      color: var(--text-primary);
    }

    .ambient-player-btn.playing {
      background: rgba(0, 212, 212, 0.15);
      border-color: rgba(0, 212, 212, 0.4);
    }

    .ambient-player-btn.playing svg {
      color: var(--primary);
    }

    /* Playing animation - sound waves */
    .ambient-player-btn.playing::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      border: 1px solid rgba(0, 212, 212, 0.4);
      animation: ambientPulse 2s ease-out infinite;
    }

    @keyframes ambientPulse {
      0% { transform: scale(1); opacity: 0.6; }
      100% { transform: scale(1.4); opacity: 0; }
    }

    /* Dropdown Panel */
    .ambient-player-dropdown {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      width: 280px;
      background: rgba(20, 18, 24, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 16px;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: all 0.2s ease;
      box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 212, 212, 0.05);
    }

    .ambient-player-dropdown.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .ambient-player-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .ambient-player-title {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.5);
    }

    .ambient-player-stop {
      padding: 5px 10px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      background: rgba(255, 100, 100, 0.15);
      border: 1px solid rgba(255, 100, 100, 0.3);
      border-radius: 6px;
      color: #ff6b6b;
      cursor: pointer;
      transition: all 0.15s;
      display: none;
    }

    .ambient-player-stop.visible {
      display: block;
    }

    .ambient-player-stop:hover {
      background: rgba(255, 100, 100, 0.25);
    }

    /* Sound Cards Grid */
    .ambient-sounds-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }

    .ambient-sound-card {
      position: relative;
      padding: 14px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.02);
      cursor: pointer;
      transition: all 0.2s ease;
      overflow: hidden;
      text-align: center;
    }

    /* Gradient backgrounds for sound cards */
    .ambient-sound-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.4;
      transition: opacity 0.2s ease;
      border-radius: 12px;
    }

    /* Rain/Water sounds - blue gradient */
    .ambient-sound-card[data-sound-type="rain"]::before,
    .ambient-sound-card[data-sound-type="thunder"]::before,
    .ambient-sound-card[data-sound-type="storm"]::before {
      background: 
        radial-gradient(ellipse at 30% 20%, rgba(100, 150, 255, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(50, 100, 180, 0.5) 0%, transparent 50%),
        linear-gradient(135deg, rgba(30, 40, 80, 0.8) 0%, rgba(20, 30, 60, 0.9) 100%);
    }

    /* Nature/Forest sounds - green gradient */
    .ambient-sound-card[data-sound-type="forest"]::before,
    .ambient-sound-card[data-sound-type="birds"]::before,
    .ambient-sound-card[data-sound-type="nature"]::before {
      background: 
        radial-gradient(ellipse at 40% 30%, rgba(100, 200, 120, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 70%, rgba(50, 150, 80, 0.5) 0%, transparent 50%),
        linear-gradient(135deg, rgba(20, 50, 30, 0.8) 0%, rgba(15, 40, 25, 0.9) 100%);
    }

    /* Fire sounds - warm orange gradient */
    .ambient-sound-card[data-sound-type="fire"]::before,
    .ambient-sound-card[data-sound-type="fireplace"]::before {
      background: 
        radial-gradient(ellipse at 50% 80%, rgba(255, 150, 50, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 30%, rgba(255, 100, 50, 0.4) 0%, transparent 50%),
        linear-gradient(135deg, rgba(60, 30, 15, 0.8) 0%, rgba(40, 20, 10, 0.9) 100%);
    }

    /* Ocean/Beach sounds - teal gradient */
    .ambient-sound-card[data-sound-type="waves"]::before,
    .ambient-sound-card[data-sound-type="ocean"]::before,
    .ambient-sound-card[data-sound-type="beach"]::before {
      background: 
        radial-gradient(ellipse at 30% 70%, rgba(0, 180, 180, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(0, 150, 200, 0.5) 0%, transparent 50%),
        linear-gradient(135deg, rgba(15, 40, 50, 0.8) 0%, rgba(10, 30, 40, 0.9) 100%);
    }

    /* Cafe sounds - warm brown gradient */
    .ambient-sound-card[data-sound-type="cafe"]::before,
    .ambient-sound-card[data-sound-type="coffee"]::before {
      background: 
        radial-gradient(ellipse at 40% 40%, rgba(200, 150, 100, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 60%, rgba(150, 100, 60, 0.5) 0%, transparent 50%),
        linear-gradient(135deg, rgba(50, 35, 25, 0.8) 0%, rgba(35, 25, 18, 0.9) 100%);
    }

    /* Night sounds - purple/dark gradient */
    .ambient-sound-card[data-sound-type="night"]::before,
    .ambient-sound-card[data-sound-type="crickets"]::before {
      background: 
        radial-gradient(ellipse at 70% 20%, rgba(100, 80, 180, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 80%, rgba(60, 40, 120, 0.5) 0%, transparent 50%),
        linear-gradient(135deg, rgba(25, 20, 45, 0.8) 0%, rgba(15, 12, 30, 0.9) 100%);
    }

    /* Wind/Snow sounds - cool gray gradient */
    .ambient-sound-card[data-sound-type="wind"]::before,
    .ambient-sound-card[data-sound-type="snow"]::before {
      background: 
        radial-gradient(ellipse at 50% 30%, rgba(200, 210, 230, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 70%, rgba(150, 170, 200, 0.4) 0%, transparent 50%),
        linear-gradient(135deg, rgba(40, 45, 55, 0.8) 0%, rgba(30, 35, 45, 0.9) 100%);
    }

    /* Brown/White noise - neutral gradient */
    .ambient-sound-card[data-sound-type="noise"]::before,
    .ambient-sound-card[data-sound-type="brown"]::before,
    .ambient-sound-card[data-sound-type="white"]::before,
    .ambient-sound-card[data-sound-type="pink"]::before {
      background: 
        radial-gradient(ellipse at 40% 40%, rgba(150, 140, 130, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 60%, rgba(100, 95, 90, 0.4) 0%, transparent 50%),
        linear-gradient(135deg, rgba(40, 38, 35, 0.8) 0%, rgba(30, 28, 25, 0.9) 100%);
    }

    /* Default gradient for unknown types */
    .ambient-sound-card[data-sound-type="default"]::before {
      background: 
        radial-gradient(ellipse at 30% 30%, rgba(0, 180, 180, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(100, 80, 150, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, rgba(30, 25, 40, 0.8) 0%, rgba(20, 18, 30, 0.9) 100%);
    }

    .ambient-sound-card:hover {
      border-color: rgba(255, 255, 255, 0.2);
      transform: translateY(-2px);
    }

    .ambient-sound-card:hover::before {
      opacity: 0.6;
    }

    .ambient-sound-card.active {
      border-color: rgba(0, 212, 212, 0.5);
      box-shadow: 
        0 0 20px rgba(0, 212, 212, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .ambient-sound-card.active::before {
      opacity: 0.7;
    }

    /* Glass frame effect on cards */
    .ambient-sound-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      pointer-events: none;
    }

    .ambient-sound-icon {
      font-size: 24px;
      margin-bottom: 6px;
      position: relative;
      z-index: 1;
    }

    .ambient-sound-name {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
      position: relative;
      z-index: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ambient-sound-card.active .ambient-sound-name {
      color: var(--primary);
    }

    /* Now Playing indicator */
    .ambient-sound-card.active .ambient-playing-indicator {
      display: flex;
    }

    .ambient-playing-indicator {
      display: none;
      position: absolute;
      top: 6px;
      right: 6px;
      gap: 2px;
      align-items: flex-end;
      height: 12px;
    }

    .ambient-playing-indicator span {
      width: 3px;
      background: var(--primary);
      border-radius: 1px;
      animation: ambientBar 0.8s ease-in-out infinite;
    }

    .ambient-playing-indicator span:nth-child(1) { height: 40%; animation-delay: 0s; }
    .ambient-playing-indicator span:nth-child(2) { height: 70%; animation-delay: 0.2s; }
    .ambient-playing-indicator span:nth-child(3) { height: 50%; animation-delay: 0.4s; }

    @keyframes ambientBar {
      0%, 100% { transform: scaleY(1); }
      50% { transform: scaleY(0.5); }
    }

    /* YouTube Sound Card Styling */
    .ambient-sound-card[data-sound-type="youtube"]::before {
      background: 
        radial-gradient(ellipse at 30% 30%, rgba(255, 0, 0, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(180, 0, 50, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, rgba(40, 15, 20, 0.8) 0%, rgba(25, 10, 15, 0.9) 100%);
    }

    .ambient-sound-card.youtube-card .yt-badge {
      position: absolute;
      top: 6px;
      left: 6px;
      width: 16px;
      height: 12px;
      background: #ff0000;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .ambient-sound-card.youtube-card .yt-badge svg {
      width: 8px;
      height: 8px;
      fill: #fff;
    }

    /* Add YouTube Button in Grid */
    .ambient-add-youtube {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 14px 12px;
      border-radius: 12px;
      border: 1px dashed rgba(255, 255, 255, 0.15);
      background: rgba(255, 255, 255, 0.02);
      cursor: pointer;
      transition: all 0.2s ease;
      gap: 6px;
    }

    .ambient-add-youtube:hover {
      border-color: rgba(255, 255, 255, 0.25);
      background: rgba(255, 255, 255, 0.04);
    }

    .ambient-add-youtube svg {
      width: 20px;
      height: 20px;
      color: rgba(255, 255, 255, 0.35);
      transition: color 0.2s;
    }

    .ambient-add-youtube:hover svg {
      color: rgba(255, 255, 255, 0.6);
    }

    .ambient-add-youtube span {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.35);
      transition: color 0.2s;
    }

    .ambient-add-youtube:hover span {
      color: rgba(255, 255, 255, 0.6);
    }

    /* YouTube Delete Button */
    .ambient-sound-card .yt-delete-btn {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      border: none;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 3;
      transition: all 0.15s;
    }

    .ambient-sound-card:hover .yt-delete-btn {
      display: flex;
    }

    .ambient-sound-card .yt-delete-btn:hover {
      background: rgba(239, 68, 68, 0.8);
    }

    .ambient-sound-card .yt-delete-btn svg {
      width: 10px;
      height: 10px;
      color: rgba(255, 255, 255, 0.7);
    }

    /* Hidden YouTube Player */
    #youtube-player-container {
      position: fixed;
      bottom: -1000px;
      left: -1000px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    /* YouTube Modal Styles */
    .yt-modal-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .yt-url-input-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .yt-url-input-group label {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.6);
    }

    .yt-url-input {
      width: 100%;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      outline: none;
      transition: all 0.15s;
    }

    .yt-url-input:focus {
      border-color: rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.07);
    }

    .yt-url-input::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .yt-preview {
      display: none;
      padding: 12px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .yt-preview.visible {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .yt-preview-thumb {
      width: 80px;
      height: 45px;
      border-radius: 4px;
      object-fit: cover;
      background: rgba(0, 0, 0, 0.3);
    }

    .yt-preview-info {
      flex: 1;
      min-width: 0;
    }

    .yt-preview-title {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.85);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .yt-preview-channel {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
      margin-top: 2px;
    }

    .yt-name-input-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .yt-name-row {
      display: flex;
      gap: 10px;
    }

    .yt-icon-selector {
      width: 48px;
      height: 44px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
      position: relative;
    }

    .yt-icon-selector:hover {
      border-color: rgba(255, 255, 255, 0.2);
    }

    .yt-icon-dropdown {
      display: none;
      position: absolute;
      bottom: calc(100% + 4px);
      left: 0;
      background: #1a1a1c;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 8px;
      gap: 4px;
      flex-wrap: wrap;
      width: 180px;
      z-index: 100;
    }

    .yt-icon-dropdown.open {
      display: flex;
    }

    .yt-icon-option {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.1s;
    }

    .yt-icon-option:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .yt-name-input {
      flex: 1;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      outline: none;
      transition: all 0.15s;
    }

    .yt-name-input:focus {
      border-color: rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.07);
    }

    .yt-hint {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.35);
      line-height: 1.4;
    }

    /* Volume Control */
    .ambient-volume-control {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .ambient-volume-icon {
      width: 18px;
      height: 18px;
      color: rgba(255, 255, 255, 0.4);
      flex-shrink: 0;
    }

    .ambient-volume-slider {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      outline: none;
    }

    .ambient-volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      background: var(--primary);
      border-radius: 50%;
      cursor: pointer;
      transition: transform 0.15s;
    }

    .ambient-volume-slider::-webkit-slider-thumb:hover {
      transform: scale(1.2);
    }

    .ambient-volume-slider::-moz-range-thumb {
      width: 14px;
      height: 14px;
      background: var(--primary);
      border-radius: 50%;
      cursor: pointer;
      border: none;
    }

    .ambient-volume-value {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
      width: 32px;
      text-align: right;
    }

    /* Loading state */
    .ambient-sounds-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px;
      color: rgba(255, 255, 255, 0.4);
      font-size: 12px;
    }

    .ambient-sounds-loading::before {
      content: '';
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-top-color: var(--primary);
      border-radius: 50%;
      margin-right: 10px;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    .animate-spin {
      animation: spin 1s linear infinite;
    }

    .nav-right {
      display: flex;
      align-items: center;
    }

    .user-avatar-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      background: var(--primary);
      color: white;
      font-weight: 600;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Main Container */
    .main-container {
      padding-top: 64px;
      min-height: 100vh;
    }

    .tab-content {
      display: none;
      padding: 24px;
    }

    .tab-content.active {
      display: block;
    }

    /* Page Header */
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 24px;
    }

    .page-title {
      font-size: 24px;
      font-weight: 600;
    }

    .page-subtitle {
      color: var(--text-muted);
      font-size: 14px;
      margin-top: 4px;
    }

    .page-actions {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    /* Buttons */
    .btn {
      padding: 10px 18px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 8px;
      border: none;
    }

    .btn-primary {
      background: var(--primary);
      color: white;
    }

    .btn-primary:hover {
      background: var(--primary-hover);
    }

    .btn-secondary {
      background: var(--bg-hover);
      border: 1px solid var(--border);
      color: var(--text-soft);
    }

    .btn-secondary:hover {
      background: rgba(6, 182, 212, 0.1);
      border-color: var(--primary);
      color: var(--text);
    }

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

    /* Search */
    .search-container {
      position: relative;
      display: flex;
      align-items: center;
    }

    .search-container svg {
      position: absolute;
      left: 12px;
      width: 16px;
      height: 16px;
      color: var(--text-muted);
      pointer-events: none;
    }

    .search-input {
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px 10px 38px;
      color: var(--text);
      font-size: 13px;
      width: 220px;
      transition: all 0.2s;
    }

    .search-input:focus {
      outline: none;
      border-color: var(--primary);
      width: 280px;
    }

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

    /* Content Goals Banner */
    .content-goals-banner {
      background: linear-gradient(135deg, rgba(245, 230, 211, 0.08) 0%, rgba(245, 230, 211, 0.02) 100%);
      border: 1px solid rgba(245, 230, 211, 0.15);
      border-radius: 16px;
      padding: 16px 20px;
      margin-bottom: 20px;
    }

    .content-goals-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .content-goals-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--align-direct);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .content-goals-expand {
      background: none;
      border: none;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: color 0.15s;
    }

    .content-goals-expand:hover {
      color: var(--align-direct);
    }

    .content-goals-list {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .content-goal-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      transition: all 0.15s;
    }

    .content-goal-chip:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .content-goal-chip.completed {
      opacity: 0.5;
    }

    .content-goal-name {
      font-size: 13px;
      color: var(--text-primary);
    }

    .content-goal-chip.completed .content-goal-name {
      text-decoration: line-through;
    }

    .content-goal-progress {
      font-size: 12px;
      font-weight: 600;
      color: var(--align-direct);
    }

    .content-goal-bar {
      width: 40px;
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      overflow: hidden;
    }

    .content-goal-fill {
      height: 100%;
      background: var(--align-direct);
      border-radius: 2px;
    }

    /* Filter Bar */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
      align-items: center;
    }

    .filter-group {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .filter-divider {
      width: 1px;
      height: 24px;
      background: var(--border);
      margin: 0 8px;
    }

    .filter-btn {
      padding: 6px 14px;
      border-radius: 20px;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      color: var(--text-soft);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .filter-btn:hover {
      background: rgba(6, 182, 212, 0.1);
      border-color: var(--primary);
      color: var(--text);
    }

    .filter-btn.active {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
    }

    .filter-count {
      background: rgba(255, 255, 255, 0.2);
      padding: 2px 6px;
      border-radius: 10px;
      font-size: 10px;
    }

    /* View Toggle */
    .view-toggle {
      display: flex;
      background: var(--bg-hover);
      border-radius: 8px;
      padding: 4px;
      gap: 2px;
      margin-left: auto;
    }

    .view-btn {
      padding: 8px 12px;
      border: none;
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      color: var(--text-muted);
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
    }

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

    .view-btn.active {
      background: var(--bg-card);
      color: var(--primary);
    }

    .view-btn svg {
      width: 16px;
      height: 16px;
    }

    /* Content Grid */
    .content-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }

    /* Content Card */
    .content-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }

    .content-card:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
    }

    .content-card.anchor-piece {
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary-muted);
    }

    .card-thumbnail {
      aspect-ratio: 16/9;
      background: linear-gradient(135deg, #1a1a2e, #0f0f23);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .card-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .card-thumbnail-placeholder {
      color: var(--text-muted);
      opacity: 0.5;
    }

    .card-thumbnail-placeholder svg {
      width: 48px;
      height: 48px;
    }

    /* Badges */
    .card-format-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .format-long-form { background: rgba(239, 68, 68, 0.9); }
    .format-short-form { background: linear-gradient(135deg, #ec4899, #f97316); }
    .format-stories { background: rgba(168, 85, 247, 0.9); }
    .format-carousel { background: rgba(59, 130, 246, 0.9); }
    .format-blog { background: rgba(100, 116, 139, 0.9); }

    .card-stage-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .stage-idea { background: var(--stage-idea); }
    .stage-scripted { background: var(--stage-scripted); }
    .stage-ready-to-capture { background: var(--stage-ready-capture); }
    .stage-captured { background: var(--stage-captured); }
    .stage-editing { background: var(--stage-editing); }
    .stage-ready-to-post { background: var(--stage-ready-post); }
    .stage-published { background: var(--stage-published); }
    .stage-archived { background: var(--stage-archived); }

    .card-anchor-badge {
      position: absolute;
      bottom: 10px;
      left: 10px;
      width: 28px;
      height: 28px;
      background: rgba(6, 182, 212, 0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .card-favorite-btn {
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 28px;
      height: 28px;
      background: rgba(0, 0, 0, 0.6);
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      transition: all 0.2s;
      backdrop-filter: blur(4px);
    }

    .card-favorite-btn:hover,
    .card-favorite-btn.active {
      color: #f43f5e;
      background: rgba(244, 63, 94, 0.2);
    }

    .card-favorite-btn svg {
      width: 14px;
      height: 14px;
    }

    .card-info {
      padding: 16px;
    }

    .card-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    .card-bucket {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 4px;
      background: var(--bg-hover);
      color: var(--text-soft);
    }

    .card-due {
      font-size: 11px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .card-due.overdue {
      color: #ef4444;
    }

    .card-due.soon {
      color: #f59e0b;
    }

    .card-due svg {
      width: 12px;
      height: 12px;
    }

    .card-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .card-tag {
      padding: 3px 8px;
      background: var(--bg-hover);
      border-radius: 4px;
      font-size: 10px;
      color: var(--text-soft);
    }

    /* Content List */
    .content-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .list-header {
      display: grid;
      grid-template-columns: 60px 2fr 120px 120px 120px 100px 80px 60px;
      gap: 12px;
      padding: 12px 16px;
      background: var(--bg-card);
      border-radius: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .list-row {
      display: grid;
      grid-template-columns: 60px 2fr 120px 120px 120px 100px 80px 60px;
      gap: 12px;
      padding: 12px 16px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      align-items: center;
      cursor: pointer;
      transition: all 0.15s;
    }

    .list-row:hover {
      border-color: var(--primary);
      background: var(--bg-hover);
    }

    .list-thumb {
      width: 60px;
      height: 40px;
      border-radius: 6px;
      background: var(--bg-hover);
      overflow: hidden;
    }

    .list-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .list-title-cell {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .list-title {
      font-size: 14px;
      font-weight: 500;
    }

    .list-description {
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .list-badge {
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      text-align: center;
    }

    .list-tags {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }

    .list-tag {
      padding: 2px 6px;
      background: var(--bg-hover);
      border-radius: 3px;
      font-size: 10px;
      color: var(--text-soft);
    }

    .list-priority {
      font-size: 11px;
      font-weight: 600;
    }

    .priority-high { color: #ef4444; }
    .priority-medium { color: #f59e0b; }
    .priority-low { color: #3b82f6; }

    .list-favorite {
      display: flex;
      justify-content: center;
    }

    /* =============================================
       DOCUMENTS PAGE STYLES
       ============================================= */

    .documents-page {
      display: flex;
      height: calc(100vh - 72px);
      overflow: hidden;
    }

    /* Documents Sidebar */
    .documents-sidebar {
      width: 260px;
      flex-shrink: 0;
      background: var(--bg-secondary);
      border-right: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }

    .documents-sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .documents-sidebar-header h3 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }

    .documents-new-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--primary);
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .documents-new-btn svg {
      width: 14px;
      height: 14px;
      stroke: #0a0a0c;
    }

    .documents-new-btn:hover {
      background: var(--primary-hover);
      transform: scale(1.05);
    }

    /* Document Filters */
    .documents-filters {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .documents-filter-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: left;
      width: 100%;
    }

    .documents-filter-btn svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-muted);
      flex-shrink: 0;
    }

    .documents-filter-btn span:first-of-type {
      flex: 1;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .documents-filter-count {
      font-size: 11px;
      color: var(--text-muted);
      background: rgba(255, 255, 255, 0.05);
      padding: 2px 8px;
      border-radius: 10px;
    }

    .documents-filter-btn:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    .documents-filter-btn:hover svg {
      stroke: var(--text-primary);
    }

    .documents-filter-btn:hover span:first-of-type {
      color: var(--text-primary);
    }

    .documents-filter-btn.active {
      background: rgba(6, 182, 212, 0.1);
    }

    .documents-filter-btn.active svg {
      stroke: var(--primary);
    }

    .documents-filter-btn.active span:first-of-type {
      color: var(--primary);
    }

    .documents-filter-btn.active .documents-filter-count {
      background: rgba(6, 182, 212, 0.2);
      color: var(--primary);
    }

    /* By Project Section */
    .documents-projects-section {
      padding: 12px;
      border-top: 1px solid var(--border-subtle);
    }

    .documents-projects-section .documents-section-title {
      padding: 8px 12px 12px;
    }

    .documents-projects-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      max-height: 200px;
      overflow-y: auto;
    }

    .documents-project-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .documents-project-item:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    .documents-project-item.active {
      background: rgba(6, 182, 212, 0.1);
    }

    .documents-project-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .documents-project-item[data-domain="music"] .documents-project-dot {
      background: #f97066;
    }

    .documents-project-item[data-domain="content"] .documents-project-dot {
      background: #a855f7;
    }

    .documents-project-item[data-domain="tools"] .documents-project-dot {
      background: #06b6d4;
    }

    .documents-project-item[data-domain="business"] .documents-project-dot {
      background: #f59e0b;
    }

    .documents-project-item[data-domain="personal"] .documents-project-dot {
      background: #22c55e;
    }

    .documents-project-item[data-domain="learning"] .documents-project-dot,
    .documents-project-item[data-domain="evenant"] .documents-project-dot {
      background: #3b82f6;
    }

    .documents-project-name {
      flex: 1;
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .documents-project-item.active .documents-project-name {
      color: var(--primary);
    }

    .documents-project-count {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* Starred Section */
    .documents-starred-section {
      padding: 12px;
      border-top: 1px solid var(--border-subtle);
      margin-top: auto;
    }

    .documents-section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 8px 12px;
    }

    .documents-section-title svg {
      width: 12px;
      height: 12px;
      fill: #fbbf24;
      stroke: #fbbf24;
    }

    .documents-starred-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .documents-starred-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .documents-starred-item:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    .documents-starred-item svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-muted);
    }

    .documents-starred-item span {
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Documents Main Content */
    .documents-main {
      flex: 1;
      overflow-y: auto;
      padding: 24px 32px;
    }

    .documents-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    .documents-header-left {
      display: flex;
      align-items: baseline;
      gap: 12px;
    }

    .documents-title {
      font-size: 24px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }

    .documents-subtitle {
      font-size: 14px;
      color: var(--text-muted);
    }

    .documents-header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .documents-sort-dropdown {
      position: relative;
    }

    .documents-sort-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      color: var(--text-secondary);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .documents-sort-btn svg {
      width: 16px;
      height: 16px;
    }

    .documents-sort-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .documents-sort-menu {
      position: absolute;
      top: calc(100% + 4px);
      right: 0;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 4px;
      min-width: 140px;
      display: none;
      z-index: 100;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .documents-sort-menu.open {
      display: block;
    }

    .documents-sort-option {
      display: block;
      width: 100%;
      padding: 8px 12px;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: var(--text-secondary);
      font-size: 13px;
      text-align: left;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .documents-sort-option:hover {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-primary);
    }

    .documents-sort-option.active {
      color: var(--primary);
    }

    .documents-view-toggle {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .documents-view-toggle svg {
      width: 18px;
      height: 18px;
    }

    .documents-view-toggle:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.15);
    }

    /* Recent Documents Section */
    .documents-recent-section {
      margin-bottom: 32px;
    }

    .documents-section-header {
      margin-bottom: 16px;
    }

    .documents-section-header h3 {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-secondary);
      margin: 0;
    }

    .documents-recent-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
    }

    .documents-recent-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      padding: 16px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .documents-recent-card:hover {
      border-color: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }

    .documents-recent-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .documents-recent-card-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 8px;
    }

    .documents-recent-card-icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--text-secondary);
    }

    .documents-recent-card-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    .documents-recent-card-preview {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.4;
      max-height: 40px;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .documents-recent-card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text-muted);
    }

    .documents-recent-card-type {
      padding: 2px 8px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      text-transform: capitalize;
    }

    /* Documents Grid */
    .documents-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
    }

    .documents-grid.list-view {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .document-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      padding: 16px;
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
    }

    .document-card:hover {
      border-color: rgba(255, 255, 255, 0.15);
    }

    .document-card-header {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
    }

    .document-card-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 10px;
      flex-shrink: 0;
    }

    .document-card-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--text-secondary);
    }

    /* All document types use same grayscale style */
    .document-card-icon.note,
    .document-card-icon.journal,
    .document-card-icon.project {
      background: rgba(255, 255, 255, 0.06);
    }

    .document-card-icon.note svg,
    .document-card-icon.journal svg,
    .document-card-icon.project svg {
      stroke: var(--text-secondary);
    }

    .document-card-content {
      flex: 1;
      min-width: 0;
    }

    .document-card-title {
      font-size: 15px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .document-card-project {
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .document-card-project svg {
      width: 12px;
      height: 12px;
    }

    .document-card-preview {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      max-height: 60px;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .document-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .document-card-meta {
      font-size: 11px;
      color: var(--text-muted);
    }

    .document-card-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .document-card:hover .document-card-actions {
      opacity: 1;
    }

    .document-card-action {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .document-card-action svg {
      width: 14px;
      height: 14px;
    }

    .document-card-action:hover {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text-primary);
    }

    .document-card-action.star.active svg {
      fill: #fbbf24;
      stroke: #fbbf24;
    }

    .document-card-star {
      position: absolute;
      top: 12px;
      right: 12px;
    }

    /* List View Styles */
    .documents-grid.list-view .document-card {
      display: flex;
      align-items: center;
      padding: 12px 16px;
    }

    .documents-grid.list-view .document-card-header {
      margin-bottom: 0;
      flex: 1;
      min-width: 0;
    }

    .documents-grid.list-view .document-card-icon {
      width: 32px;
      height: 32px;
    }

    .documents-grid.list-view .document-card-icon svg {
      width: 16px;
      height: 16px;
    }

    .documents-grid.list-view .document-card-preview {
      display: none;
    }

    .documents-grid.list-view .document-card-footer {
      flex-shrink: 0;
      margin-left: 16px;
    }

    .documents-grid.list-view .document-card-actions {
      opacity: 1;
    }

    /* ============================================
       IMPROVED DOCUMENT CARDS (Mockup Matching)
       ============================================ */

    /* Recent Card Improvements */
    .documents-recent-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .documents-recent-card-icon {
      margin-bottom: 4px;
    }

    .documents-recent-star {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .documents-recent-card:hover .documents-recent-star {
      opacity: 1;
    }

    .documents-recent-star.active {
      opacity: 1;
    }

    .documents-recent-star svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-muted);
    }

    .documents-recent-star.active svg {
      fill: #fbbf24;
      stroke: #fbbf24;
    }

    .documents-recent-star:hover svg {
      stroke: #fbbf24;
    }

    .documents-recent-card-title {
      margin-bottom: 0;
      margin-top: 4px;
    }

    .documents-recent-card-meta {
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    /* Type Badges - Grayscale elegant style */
    .doc-type-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-muted);
    }

    .doc-type-badge.note,
    .doc-type-badge.journal,
    .doc-type-badge.project {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-muted);
    }

    /* Project Badge - Grayscale style in main area */
    .doc-project-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .doc-project-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text-muted);
    }

    /* Word Count */
    .doc-word-count {
      font-size: 12px;
      color: var(--text-muted);
    }

    .doc-time {
      color: var(--text-muted);
    }

    /* Improved List View Document Card */
    .documents-grid.list-view .document-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-radius: 10px;
    }

    .documents-grid.list-view .document-card-icon {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
    }

    .documents-grid.list-view .document-card-content {
      flex: 1;
      min-width: 0;
    }

    .documents-grid.list-view .document-card-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .documents-grid.list-view .document-card-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 0;
    }

    .documents-grid.list-view .document-card-star {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .documents-grid.list-view .document-card-star.active {
      fill: #fbbf24;
      stroke: #fbbf24;
    }

    .documents-grid.list-view .document-card-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .documents-grid.list-view .document-card-time {
      font-size: 12px;
      color: var(--text-muted);
      flex-shrink: 0;
      margin-left: auto;
    }

    .documents-grid.list-view .document-card-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      flex-shrink: 0;
    }

    .documents-grid.list-view .document-card:hover .document-card-actions {
      opacity: 1;
    }

    /* Grid View Card Improvements */
    .document-card-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .document-card-star {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      fill: none;
      stroke: var(--text-muted);
    }

    .document-card-star.active {
      fill: #fbbf24;
      stroke: #fbbf24;
    }

    .document-card-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .document-card-time {
      font-size: 12px;
      color: var(--text-muted);
    }

    /* Empty State */
    .documents-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 40px;
      text-align: center;
    }

    .documents-empty-state svg {
      width: 64px;
      height: 64px;
      stroke: var(--text-muted);
      margin-bottom: 24px;
      opacity: 0.5;
    }

    .documents-empty-state h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0 0 8px 0;
    }

    .documents-empty-state p {
      font-size: 14px;
      color: var(--text-muted);
      margin: 0 0 24px 0;
    }

    .documents-empty-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 20px;
      background: var(--primary);
      border: none;
      border-radius: 8px;
      color: #0a0a0c;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .documents-empty-btn svg {
      width: 16px;
      height: 16px;
      margin: 0;
      opacity: 1;
      stroke: #0a0a0c;
    }

    .documents-empty-btn:hover {
      background: var(--primary-hover);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .documents-page {
        flex-direction: column;
        height: auto;
      }

      .documents-sidebar {
        width: 100%;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
      }

      .documents-filters {
        flex-direction: row;
        flex-wrap: wrap;
      }

      .documents-filter-btn {
        flex: 1 1 45%;
      }

      .documents-starred-section {
        display: none;
      }

      .documents-main {
        padding: 16px;
      }

      .documents-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .documents-header-right {
        width: 100%;
        justify-content: flex-end;
      }

      .documents-recent-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .documents-grid {
        grid-template-columns: 1fr;
      }
    }

    /* =============================================
       NEW DOCUMENT MODAL
       ============================================= */

    .new-document-modal {
      max-width: 520px;
      width: 100%;
    }

    .new-doc-type-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }

    .new-doc-type-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 16px;
      background: rgba(255, 255, 255, 0.02);
      border: 2px solid transparent;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: center;
    }

    .new-doc-type-card:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .new-doc-type-card.selected {
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.08);
    }

    .new-doc-type-icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(6, 182, 212, 0.1);
      border-radius: 12px;
      margin-bottom: 12px;
    }

    .new-doc-type-icon svg {
      width: 24px;
      height: 24px;
      stroke: var(--primary);
    }

    .new-doc-type-icon.note {
      background: rgba(168, 85, 247, 0.1);
    }

    .new-doc-type-icon.note svg {
      stroke: #a855f7;
    }

    .new-doc-type-icon.journal {
      background: rgba(34, 197, 94, 0.1);
    }

    .new-doc-type-icon.journal svg {
      stroke: #22c55e;
    }

    .new-doc-type-icon.project {
      background: rgba(6, 182, 212, 0.1);
    }

    .new-doc-type-icon.project svg {
      stroke: var(--primary);
    }

    .new-doc-type-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .new-doc-type-desc {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.3;
    }

    .new-doc-label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .new-doc-project-section {
      margin-bottom: 20px;
    }

    .new-doc-project-select {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 14px;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a8b0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
    }

    .new-doc-project-select:focus {
      outline: none;
      border-color: var(--primary);
    }

    .new-doc-title-section {
      margin-bottom: 8px;
    }

    .new-doc-title-input {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 14px;
    }

    .new-doc-title-input:focus {
      outline: none;
      border-color: var(--primary);
    }

    .new-doc-title-input::placeholder {
      color: var(--text-muted);
    }

    /* Quick Create Buttons in Sidebar */
    .documents-quick-create {
      display: flex;
      gap: 8px;
      padding: 12px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .doc-quick-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 12px 8px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .doc-quick-btn:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .doc-quick-btn svg {
      width: 18px;
      height: 18px;
    }

    .doc-quick-btn.note svg {
      stroke: #a855f7;
    }

    .doc-quick-btn.journal svg {
      stroke: #22c55e;
    }

    .doc-quick-btn.project svg {
      stroke: var(--primary);
    }

    .doc-quick-btn span {
      font-size: 10px;
      color: var(--text-muted);
    }

    @media (max-width: 480px) {
      .new-doc-type-grid {
        grid-template-columns: 1fr;
      }

      .new-doc-type-card {
        flex-direction: row;
        text-align: left;
        gap: 12px;
      }

      .new-doc-type-icon {
        margin-bottom: 0;
      }

      .documents-quick-create {
        flex-direction: column;
      }
    }

    /* Kanban Board - Clean Design */
    /* Ideas Container - Centered like Tasks */
    .ideas-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 32px;
    }

    .content-kanban {
      display: flex;
      gap: 16px;
      padding: 0 0 24px 0;
      overflow-x: auto;
      min-height: calc(100vh - 200px);
    }

    .content-kanban::-webkit-scrollbar {
      height: 8px;
    }

    .content-kanban::-webkit-scrollbar-track {
      background: transparent;
    }

    .content-kanban::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
    }

    .kanban-column {
      width: 300px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 16px;
      overflow: hidden;
    }

    .kanban-column-header {
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .kanban-column-count {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.6);
    }

    .kanban-column-title {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }

    .kanban-column-add {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.3);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .kanban-column-add:hover {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.7);
    }

    .kanban-column-add svg {
      width: 14px;
      height: 14px;
    }

    .kanban-cards {
      flex: 1;
      padding: 0 12px 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      min-height: 100px;
    }

    .kanban-cards::-webkit-scrollbar {
      width: 4px;
    }

    .kanban-cards::-webkit-scrollbar-track {
      background: transparent;
    }

    .kanban-cards::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
    }

    /* Drag & Drop States */
    .kanban-cards.drag-over {
      background: rgba(0, 153, 255, 0.05);
      border-radius: 12px;
    }

    .kanban-card.dragging {
      opacity: 0.5;
      transform: rotate(2deg);
    }

    /* Kanban Card */
    .kanban-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      padding: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .kanban-card:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.1);
      transform: translateY(-1px);
    }

    .kanban-card-badges {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      flex-wrap: nowrap;
      overflow: hidden;
    }

    .kanban-badge {
      padding: 3px 6px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .kanban-badge.priority-low {
      background: rgba(74, 222, 128, 0.15);
      color: #4ade80;
    }

    .kanban-badge.priority-medium {
      background: rgba(251, 191, 36, 0.15);
      color: #fbbf24;
    }

    .kanban-badge.priority-high {
      background: rgba(251, 113, 133, 0.15);
      color: #fb7185;
    }

    .kanban-badge.date {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .kanban-badge.date svg {
      width: 9px;
      height: 9px;
    }

    .kanban-badge.status-done {
      background: rgba(74, 222, 128, 0.15);
      color: #4ade80;
    }

    .kanban-badge.platform {
      background: rgba(0, 153, 255, 0.12);
      color: #0099ff;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .kanban-badge.platform svg {
      width: 9px;
      height: 9px;
    }

    .kanban-badge.format-link {
      background: rgba(168, 85, 247, 0.15);
      color: #a855f7;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .kanban-badge.format-link svg {
      width: 9px;
      height: 9px;
    }

    .kanban-card-type {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      background: rgba(0, 153, 255, 0.12);
      border-radius: 4px;
      font-size: 10px;
      font-weight: 500;
      color: #0099ff;
      margin-bottom: 10px;
    }

    .kanban-card-type svg {
      width: 10px;
      height: 10px;
    }

    .kanban-card-image {
      width: 100%;
      height: 80px;
      border-radius: 8px;
      margin-bottom: 10px;
      background-size: cover;
      background-position: center;
    }

    /* Gradient backgrounds for cards */
    .kanban-card-image.grad-1 {
      background: 
        radial-gradient(ellipse at 25% 25%, rgba(70, 110, 170, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 75%, rgba(40, 70, 130, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #141820 0%, #0a0d12 100%);
    }

    .kanban-card-image.grad-2 {
      background: 
        radial-gradient(ellipse at 30% 30%, rgba(160, 70, 70, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(120, 50, 50, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #1a1414 0%, #100a0a 100%);
    }

    .kanban-card-image.grad-3 {
      background: 
        radial-gradient(ellipse at 35% 30%, rgba(70, 130, 100, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 65% 70%, rgba(50, 100, 75, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #121a16 0%, #0a0f0c 100%);
    }

    .kanban-card-image.grad-4 {
      background: 
        radial-gradient(ellipse at 30% 35%, rgba(80, 140, 160, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 65%, rgba(50, 100, 130, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #12181a 0%, #0a0e10 100%);
    }

    .kanban-card-image.grad-5 {
      background: 
        radial-gradient(ellipse at 40% 30%, rgba(140, 90, 70, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 70%, rgba(110, 65, 50, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #1a1510 0%, #0f0c09 100%);
    }

    .kanban-card-title {
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      line-height: 1.4;
      margin-bottom: 4px;
    }

    .kanban-card-description {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.45);
      line-height: 1.4;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .kanban-card-progress {
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .kanban-progress-bar {
      flex: 1;
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      overflow: hidden;
    }

    .kanban-progress-fill {
      height: 100%;
      background: #4ade80;
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .kanban-progress-text {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.4);
      font-weight: 500;
    }

    .kanban-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
    }

    .kanban-card-meta {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .kanban-meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.35);
    }

    .kanban-meta-item svg {
      width: 12px;
      height: 12px;
    }

    /* Add Card Button in Kanban */
    .kanban-add-card {
      padding: 12px;
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      color: rgba(255, 255, 255, 0.3);
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.15s ease;
    }

    .kanban-add-card:hover {
      background: rgba(255, 255, 255, 0.02);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.5);
    }

    .kanban-add-card svg {
      width: 14px;
      height: 14px;
    }

    /* Quick Add Bar */
    .content-quick-add {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
    }

    .content-quick-add-bar {
      display: flex;
      align-items: center;
      padding: 6px 6px 6px 20px;
      background: rgba(18, 18, 22, 0.98);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    }

    .content-quick-add-bar:focus-within {
      border-color: rgba(255, 255, 255, 0.15);
    }

    .content-quick-add-input {
      width: 300px;
      padding: 10px 12px 10px 0;
      background: none;
      border: none;
      outline: none;
      font-size: 14px;
      font-family: inherit;
      color: #fff;
    }

    .content-quick-add-input::placeholder {
      color: rgba(255, 255, 255, 0.35);
    }

    .content-quick-add-btn {
      padding: 10px 18px;
      background: #fff;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      color: #0a0a0b;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .content-quick-add-btn:hover {
      opacity: 0.9;
    }

    /* Content Header Tabs */
    .content-header-tabs {
      display: flex;
      gap: 4px;
      padding: 4px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 10px;
    }

    .content-header-tab {
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
      background: transparent;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .content-header-tab:hover {
      color: rgba(255, 255, 255, 0.7);
    }

    .content-header-tab.active {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    /* Ideas Filter Dropdown */
    .ideas-filter-container {
      position: relative;
    }

    .ideas-filter-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .ideas-filter-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .ideas-filter-btn.active {
      background: rgba(6, 182, 212, 0.1);
      border-color: rgba(6, 182, 212, 0.4);
      color: #06b6d4;
    }

    .ideas-filter-count {
      min-width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #06b6d4;
      border-radius: 9px;
      font-size: 10px;
      font-weight: 700;
      color: #000;
      padding: 0 5px;
    }

    .ideas-filter-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 320px;
      max-height: 480px;
      overflow-y: auto;
      background: #1a1a1f;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }

    .ideas-filter-dropdown.open {
      display: block;
    }

    .ideas-filter-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }

    .ideas-filter-clear {
      padding: 4px 10px;
      background: transparent;
      border: none;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .ideas-filter-clear:hover {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.7);
    }

    .ideas-filter-section {
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .ideas-filter-section:last-child {
      border-bottom: none;
    }

    .ideas-filter-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: 10px;
    }

    .ideas-filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .ideas-filter-chip {
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .ideas-filter-chip:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.8);
    }

    .ideas-filter-chip.active {
      background: rgba(6, 182, 212, 0.15);
      border-color: rgba(6, 182, 212, 0.4);
      color: #06b6d4;
    }

    .ideas-filter-chip.priority-high {
      color: #f97066;
    }

    .ideas-filter-chip.priority-high.active {
      background: rgba(249, 112, 102, 0.15);
      border-color: rgba(249, 112, 102, 0.4);
      color: #f97066;
    }

    .ideas-filter-chip.priority-medium {
      color: #f59e0b;
    }

    .ideas-filter-chip.priority-medium.active {
      background: rgba(245, 158, 11, 0.15);
      border-color: rgba(245, 158, 11, 0.4);
      color: #f59e0b;
    }

    .ideas-filter-chip.priority-low {
      color: #22c55e;
    }

    .ideas-filter-chip.priority-low.active {
      background: rgba(34, 197, 94, 0.15);
      border-color: rgba(34, 197, 94, 0.4);
      color: #22c55e;
    }

    .ideas-filter-chip.format-link-chip {
      color: #a855f7;
    }

    .ideas-filter-chip.format-link-chip.active {
      background: rgba(168, 85, 247, 0.15);
      border-color: rgba(168, 85, 247, 0.4);
      color: #a855f7;
    }

    /* ========================================
       STYLE FINDER
       ======================================== */
    
    .style-finder-view {
      display: none;
    }
    
    .style-finder-view.active {
      display: block;
    }
    
    .content-board-view {
      display: block;
    }
    
    .content-board-view.hidden {
      display: none;
    }

    /* Category Tabs */
    .sf-category-tabs {
      display: flex;
      gap: 12px;
      padding-bottom: 24px;
      margin-bottom: 24px;
      overflow-x: auto;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .sf-category-tabs::-webkit-scrollbar {
      display: none;
    }

    .sf-category-tab {
      flex-shrink: 0;
      width: 140px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }

    .sf-category-tab:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
      transform: translateY(-2px);
    }

    .sf-category-tab.active {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .sf-category-thumb {
      width: 100%;
      height: 80px;
      position: relative;
      border-radius: 13px 13px 0 0;
    }

    .sf-category-thumb-bg {
      position: absolute;
      inset: 0;
      border-radius: 13px 13px 0 0;
    }

    /* Custom image background */
    .sf-category-thumb-bg.custom-image {
      background-size: cover;
      background-position: center;
      border-radius: 13px 13px 0 0;
    }

    /* Grid preview mode */
    .sf-category-thumb-grid {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 2px;
      padding: 2px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 13px 13px 0 0;
      overflow: hidden;
    }

    .sf-category-thumb-grid-item {
      background-size: cover;
      background-position: center;
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 2px;
    }

    /* Settings button on thumbnail */
    .sf-category-thumb-settings {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      border: none;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.15s ease;
      z-index: 10;
    }

    .sf-category-tab:hover .sf-category-thumb-settings {
      opacity: 1;
    }

    /* Keep settings button visible when dropdown is open */
    .sf-category-thumb:has(.sf-folder-settings-dropdown.open) .sf-category-thumb-settings,
    .sf-category-tab.dropdown-open .sf-category-thumb-settings {
      opacity: 1;
    }

    /* Disable transform when dropdown is open */
    .sf-category-tab.dropdown-open {
      transform: none !important;
    }

    .sf-category-thumb-settings:hover {
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
    }

    .sf-category-thumb-settings svg {
      width: 14px;
      height: 14px;
    }

    /* Folder settings dropdown */
    .sf-folder-settings-dropdown {
      position: fixed;
      width: 180px;
      background: rgba(17, 17, 19, 0.98);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 6px;
      z-index: 1000;
      opacity: 0;
      transform-origin: top right;
      transform: scale(0.95);
      pointer-events: none;
      transition: opacity 0.15s ease, transform 0.15s ease;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .sf-folder-settings-dropdown.open {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }

    .sf-folder-settings-option {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      text-align: left;
      transition: all 0.15s ease;
    }

    .sf-folder-settings-option:hover {
      background: rgba(255, 255, 255, 0.06);
      color: #fff;
    }

    .sf-folder-settings-option.active {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
    }

    .sf-folder-settings-option svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      opacity: 0.6;
    }

    .sf-folder-settings-option.active svg {
      opacity: 1;
      color: #22c55e;
    }

    .sf-folder-settings-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.06);
      margin: 4px 0;
    }

    .sf-folder-settings-label {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.35);
      padding: 8px 12px 4px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Gradient thumbnails */
    .sf-thumb-colour {
      background: 
        radial-gradient(ellipse at 30% 30%, rgba(80, 180, 120, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(40, 120, 80, 0.9) 0%, transparent 50%),
        linear-gradient(135deg, #0a1a10 0%, #051008 100%);
    }

    .sf-thumb-composition {
      background: 
        radial-gradient(ellipse at 50% 50%, rgba(80, 140, 200, 0.7) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 80%, rgba(40, 80, 140, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #0a1520 0%, #051015 100%);
    }

    .sf-thumb-creators {
      background: 
        radial-gradient(ellipse at 30% 20%, rgba(200, 100, 80, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(140, 60, 60, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #1a1010 0%, #100808 100%);
    }

    .sf-thumb-font {
      background: 
        radial-gradient(ellipse at 60% 40%, rgba(180, 180, 200, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(100, 100, 120, 0.6) 0%, transparent 50%),
        linear-gradient(135deg, #151518 0%, #0a0a0c 100%);
    }

    .sf-thumb-moodboard {
      background: 
        radial-gradient(ellipse at 40% 30%, rgba(200, 140, 80, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(160, 100, 60, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #1a1408 0%, #100c05 100%);
    }

    .sf-thumb-thumbnails {
      background: 
        radial-gradient(ellipse at 30% 40%, rgba(160, 100, 180, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(120, 80, 150, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #140a18 0%, #0a050d 100%);
    }

    .sf-category-info {
      padding: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sf-category-icon {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.5);
    }

    .sf-category-icon svg {
      width: 14px;
      height: 14px;
    }

    .sf-category-name {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sf-category-count {
      margin-left: auto;
      font-size: 10px;
      color: rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.08);
      padding: 2px 6px;
      border-radius: 4px;
    }

    /* Masonry Grid */
    .sf-grid-container {
      min-height: 400px;
    }

    .sf-masonry-grid {
      columns: 5;
      column-gap: 16px;
    }

    @media (max-width: 1400px) { .sf-masonry-grid { columns: 4; } }
    @media (max-width: 1100px) { .sf-masonry-grid { columns: 3; } }
    @media (max-width: 800px) { .sf-masonry-grid { columns: 2; } }

    /* Grid Item */
    .sf-grid-item {
      break-inside: avoid;
      margin-bottom: 16px;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .sf-grid-item:hover {
      transform: scale(1.02) translateY(-2px);
      z-index: 10;
    }

    .sf-grid-item:hover .sf-item-overlay {
      opacity: 1;
    }

    .sf-grid-item img {
      width: 100%;
      display: block;
    }

    /* Frame border */
    .sf-grid-item::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      pointer-events: none;
      transition: border-color 0.2s ease;
    }

    .sf-grid-item:hover::after {
      border-color: rgba(255, 255, 255, 0.2);
    }

    /* Placeholder gradients (fallback) */
    .sf-placeholder {
      width: 100%;
      background-size: cover;
    }

    .sf-img-1 { aspect-ratio: 3/4; background: radial-gradient(ellipse at 30% 20%, rgba(120, 200, 150, 0.7) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(60, 140, 100, 0.8) 0%, transparent 50%), linear-gradient(135deg, #0a1a10 0%, #051008 100%); }
    .sf-img-2 { aspect-ratio: 1/1; background: radial-gradient(ellipse at 50% 50%, rgba(80, 140, 220, 0.6) 0%, transparent 40%), radial-gradient(ellipse at 20% 80%, rgba(40, 80, 160, 0.7) 0%, transparent 50%), linear-gradient(135deg, #0a1525 0%, #051015 100%); }
    .sf-img-3 { aspect-ratio: 4/5; background: radial-gradient(ellipse at 70% 30%, rgba(200, 150, 100, 0.7) 0%, transparent 50%), radial-gradient(ellipse at 30% 70%, rgba(160, 100, 60, 0.8) 0%, transparent 50%), linear-gradient(135deg, #1a1408 0%, #100c05 100%); }
    .sf-img-4 { aspect-ratio: 16/9; background: radial-gradient(ellipse at 40% 40%, rgba(100, 180, 180, 0.6) 0%, transparent 50%), radial-gradient(ellipse at 70% 70%, rgba(60, 130, 140, 0.7) 0%, transparent 50%), linear-gradient(135deg, #081815 0%, #050f0d 100%); }
    .sf-img-5 { aspect-ratio: 2/3; background: radial-gradient(ellipse at 30% 30%, rgba(200, 100, 100, 0.6) 0%, transparent 50%), radial-gradient(ellipse at 70% 70%, rgba(140, 70, 80, 0.7) 0%, transparent 50%), linear-gradient(135deg, #1a1012 0%, #100808 100%); }

    /* Item Overlay */
    .sf-item-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%);
      opacity: 0;
      transition: opacity 0.2s ease;
      display: flex;
      align-items: flex-end;
      padding: 12px;
    }

    .sf-item-actions {
      display: flex;
      gap: 8px;
      width: 100%;
    }

    .sf-item-action {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      border: none;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .sf-item-action:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    .sf-item-action svg {
      width: 14px;
      height: 14px;
    }

    .sf-item-source {
      margin-left: auto;
      font-size: 10px;
      color: rgba(255, 255, 255, 0.6);
      padding: 6px 10px;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(10px);
      border-radius: 6px;
    }

    /* Add Item Card */
    .sf-add-item {
      break-inside: avoid;
      margin-bottom: 16px;
      aspect-ratio: 3/4;
      border-radius: 12px;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.02);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .sf-add-item:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .sf-add-item svg {
      width: 24px;
      height: 24px;
      color: rgba(255, 255, 255, 0.3);
    }

    .sf-add-item span {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.35);
    }

    /* Drop Indicator */
    .sf-drop-indicator {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(10, 10, 11, 0.9);
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .sf-drop-indicator.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .sf-drop-box {
      padding: 60px 80px;
      border: 2px dashed rgba(255, 255, 255, 0.2);
      border-radius: 24px;
      text-align: center;
    }

    .sf-drop-box svg {
      width: 48px;
      height: 48px;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: 16px;
    }

    .sf-drop-box h3 {
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 8px;
    }

    .sf-drop-box p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5);
    }

    /* Empty State */
    .sf-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 40px;
      text-align: center;
    }

    .sf-empty-state svg {
      width: 48px;
      height: 48px;
      color: rgba(255, 255, 255, 0.2);
      margin-bottom: 20px;
    }

    .sf-empty-state h3 {
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 8px;
    }

    .sf-empty-state p {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.4);
      max-width: 300px;
      line-height: 1.5;
    }

    /* Crop Modal */
    .sf-crop-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 300;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
    }

    .sf-crop-modal-overlay.visible {
      display: flex;
    }

    .sf-crop-modal {
      background: rgba(24, 24, 28, 0.98);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 24px;
      max-width: 90vw;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .sf-crop-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .sf-crop-title {
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }

    .sf-crop-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .sf-crop-close:hover {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.8);
    }

    .sf-crop-close svg {
      width: 18px;
      height: 18px;
    }

    .sf-crop-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      overflow: hidden;
      max-height: 70vh;
    }

    .sf-crop-image {
      max-width: 100%;
      max-height: 70vh;
      display: block;
      user-select: none;
    }

    .sf-crop-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .sf-crop-box {
      position: absolute;
      border: 2px solid #fff;
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
      cursor: move;
      pointer-events: auto;
    }

    .sf-crop-handle {
      position: absolute;
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 2px;
      pointer-events: auto;
    }

    .sf-crop-handle-nw { top: -6px; left: -6px; cursor: nw-resize; }
    .sf-crop-handle-ne { top: -6px; right: -6px; cursor: ne-resize; }
    .sf-crop-handle-sw { bottom: -6px; left: -6px; cursor: sw-resize; }
    .sf-crop-handle-se { bottom: -6px; right: -6px; cursor: se-resize; }

    .sf-crop-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }

    .sf-crop-btn {
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .sf-crop-btn-cancel {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);
    }

    .sf-crop-btn-cancel:hover {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.9);
    }

    .sf-crop-btn-save {
      background: rgba(255, 255, 255, 0.9);
      border: none;
      color: #0a0a0b;
    }

    .sf-crop-btn-save:hover {
      background: #fff;
    }

    .sf-crop-btn-save:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Crop Modal */
    .crop-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 300;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
    }

    .crop-modal-overlay.visible {
      display: flex;
    }

    .crop-modal {
      background: rgba(24, 24, 26, 0.98);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 20px;
      max-width: 90vw;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .crop-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .crop-modal-title {
      font-size: 15px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }

    .crop-modal-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .crop-modal-close:hover {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.8);
    }

    .crop-modal-close svg {
      width: 18px;
      height: 18px;
    }

    .crop-container {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      background: #000;
      cursor: crosshair;
    }

    .crop-container img {
      display: block;
      max-width: 70vw;
      max-height: 60vh;
      user-select: none;
      -webkit-user-drag: none;
    }

    .crop-selection {
      position: absolute;
      border: 2px solid #fff;
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
      pointer-events: auto;
      cursor: move;
      display: none;
    }

    .crop-selection.active {
      display: block;
    }

    .crop-selection-handles {
      position: absolute;
      inset: -6px;
    }

    .crop-handle {
      position: absolute;
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 2px;
      pointer-events: auto;
    }

    .crop-handle.nw { top: 0; left: 0; cursor: nw-resize; }
    .crop-handle.ne { top: 0; right: 0; cursor: ne-resize; }
    .crop-handle.sw { bottom: 0; left: 0; cursor: sw-resize; }
    .crop-handle.se { bottom: 0; right: 0; cursor: se-resize; }

    .crop-modal-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .crop-hint {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
    }

    .crop-modal-actions {
      display: flex;
      gap: 8px;
    }

    .crop-btn {
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      border: none;
    }

    .crop-btn-cancel {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.7);
    }

    .crop-btn-cancel:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .crop-btn-save {
      background: rgba(255, 255, 255, 0.9);
      color: #000;
    }

    .crop-btn-save:hover {
      background: #fff;
    }

    .crop-btn-save:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* Modal */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(4px);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .modal-overlay.open {
      display: flex;
    }

    .modal {
      width: 100%;
      max-width: 600px;
      max-height: 90vh;
      background: var(--bg-card);
      border-radius: 16px;
      border: 1px solid var(--border);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .modal-large {
      max-width: 900px;
    }

    /* Wide compact modal for project edit */
    .modal-wide-compact {
      max-width: 860px;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
    }

    .modal-title {
      font-size: 18px;
      font-weight: 600;
    }

    .modal-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }

    .modal-close:hover {
      background: var(--bg-hover);
      color: var(--text);
    }

    .modal-close svg {
      width: 20px;
      height: 20px;
    }

    .modal-body {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
    }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      padding: 16px 24px;
      border-top: 1px solid var(--border);
    }

    /* ============ COMPACT PROJECT MODAL STYLES ============ */
    
    /* Project name input - full width prominent */
    .pm-name-field {
      margin-bottom: 24px;
    }

    .pm-name-input {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 14px 16px;
      font-size: 18px;
      font-weight: 500;
      color: rgba(255,255,255,0.95);
      outline: none;
      transition: all 0.15s ease;
    }

    .pm-name-input:focus {
      border-color: rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.04);
    }

    .pm-name-input::placeholder {
      color: rgba(255,255,255,0.25);
    }

    /* Two column layout */
    .pm-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }

    @media (max-width: 700px) {
      .pm-columns {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    .pm-column {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Compact field */
    .pm-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .pm-field-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.35);
    }

    /* Field row for two small fields */
    .pm-field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    /* Compact select */
    .pm-select-wrapper {
      position: relative;
    }

    .pm-select {
      width: 100%;
      appearance: none;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 10px 32px 10px 12px;
      font-size: 13px;
      color: rgba(255,255,255,0.9);
      outline: none;
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .pm-select:focus {
      border-color: rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.04);
    }

    .pm-select option {
      background: #1a1a1c;
      color: rgba(255,255,255,0.9);
    }

    .pm-select-wrapper::after {
      content: '';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid rgba(255,255,255,0.4);
      pointer-events: none;
    }

    /* Compact input */
    .pm-input {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 13px;
      color: rgba(255,255,255,0.9);
      outline: none;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .pm-input:focus {
      border-color: rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.04);
    }

    .pm-input::placeholder {
      color: rgba(255,255,255,0.25);
    }

    textarea.pm-input {
      min-height: 72px;
      resize: vertical;
      line-height: 1.5;
    }

    /* Goals Multiselect Dropdown */
    .pm-multiselect {
      position: relative;
    }

    .pm-multiselect-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 13px;
      color: rgba(255,255,255,0.9);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .pm-multiselect-trigger:hover {
      border-color: rgba(255,255,255,0.12);
    }

    .pm-multiselect.open .pm-multiselect-trigger {
      border-color: rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.04);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .pm-multiselect-trigger svg {
      width: 14px;
      height: 14px;
      color: rgba(255,255,255,0.4);
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    .pm-multiselect.open .pm-multiselect-trigger svg {
      transform: rotate(180deg);
    }

    .pm-multiselect-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #1a1a1c;
      border: 1px solid rgba(255,255,255,0.1);
      border-top: none;
      border-radius: 0 0 8px 8px;
      max-height: 200px;
      overflow-y: auto;
      z-index: 50;
      display: none;
    }

    .pm-multiselect.open .pm-multiselect-dropdown {
      display: block;
    }

    .pm-multiselect-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      cursor: pointer;
      transition: background 0.1s ease;
    }

    .pm-multiselect-option:hover {
      background: rgba(255,255,255,0.04);
    }

    .pm-multiselect-option.selected {
      background: rgba(6, 182, 212, 0.08);
    }

    .pm-multiselect-checkbox {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 1.5px solid rgba(255,255,255,0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }

    .pm-multiselect-option.selected .pm-multiselect-checkbox {
      background: #06b6d4;
      border-color: #06b6d4;
    }

    .pm-multiselect-checkbox svg {
      width: 10px;
      height: 10px;
      color: #fff;
      opacity: 0;
    }

    .pm-multiselect-option.selected .pm-multiselect-checkbox svg {
      opacity: 1;
    }

    .pm-multiselect-label {
      flex: 1;
      font-size: 13px;
      color: rgba(255,255,255,0.8);
    }

    .pm-multiselect-count {
      font-size: 11px;
      color: rgba(255,255,255,0.35);
    }

    .pm-multiselect-dropdown::-webkit-scrollbar {
      width: 5px;
    }

    .pm-multiselect-dropdown::-webkit-scrollbar-track {
      background: transparent;
    }

    .pm-multiselect-dropdown::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.1);
      border-radius: 3px;
    }

    /* Compact progress row */
    .pm-progress-row {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 10px 12px;
    }

    .pm-progress-slider-wrapper {
      flex: 1;
      position: relative;
      height: 4px;
    }

    .pm-progress-slider {
      width: 100%;
      height: 4px;
      appearance: none;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }

    .pm-progress-slider::-webkit-slider-thumb {
      appearance: none;
      width: 14px;
      height: 14px;
      background: #fff;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }

    .pm-progress-track {
      position: absolute;
      left: 0;
      top: 0;
      height: 4px;
      background: linear-gradient(90deg, #06b6d4, #0891b2);
      border-radius: 2px;
      pointer-events: none;
    }

    .pm-progress-value {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,0.7);
      min-width: 36px;
      text-align: right;
    }

    /* Compact mini toggles */
    .pm-toggles-row {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .pm-mini-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .pm-mini-toggle-switch {
      width: 32px;
      height: 18px;
      background: rgba(255,255,255,0.12);
      border-radius: 9px;
      position: relative;
      transition: background 0.2s ease;
    }

    .pm-mini-toggle.active .pm-mini-toggle-switch {
      background: #06b6d4;
    }

    .pm-mini-toggle-switch::after {
      content: '';
      position: absolute;
      left: 2px;
      top: 2px;
      width: 14px;
      height: 14px;
      background: #fff;
      border-radius: 50%;
      transition: transform 0.2s ease;
    }

    .pm-mini-toggle.active .pm-mini-toggle-switch::after {
      transform: translateX(14px);
    }

    .pm-mini-toggle-label {
      font-size: 12px;
      color: rgba(255,255,255,0.5);
      transition: color 0.15s ease;
    }

    .pm-mini-toggle.active .pm-mini-toggle-label {
      color: rgba(255,255,255,0.8);
    }

    /* Compact tags */
    .pm-tags-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 8px 10px;
      min-height: 38px;
    }

    .pm-tag {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      background: rgba(255,255,255,0.08);
      border-radius: 4px;
      font-size: 11px;
      color: rgba(255,255,255,0.8);
    }

    .pm-tag-remove {
      width: 12px;
      height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: rgba(255,255,255,0.4);
      transition: color 0.1s ease;
    }

    .pm-tag-remove:hover {
      color: rgba(255,255,255,0.8);
    }

    .pm-tag-remove svg {
      width: 8px;
      height: 8px;
    }

    .pm-tags-input {
      flex: 1;
      min-width: 80px;
      background: none;
      border: none;
      outline: none;
      font-size: 12px;
      color: rgba(255,255,255,0.9);
      padding: 3px 0;
      font-family: inherit;
    }

    .pm-tags-input::placeholder {
      color: rgba(255,255,255,0.25);
    }

    /* Compact cover image row */
    .pm-cover-row {
      display: flex;
      gap: 12px;
      align-items: center;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 10px 12px;
    }

    .pm-cover-thumb {
      width: 56px;
      height: 40px;
      border-radius: 4px;
      object-fit: cover;
      background: rgba(255,255,255,0.05);
      flex-shrink: 0;
    }

    .pm-cover-empty {
      width: 56px;
      height: 40px;
      border-radius: 4px;
      background: rgba(255,255,255,0.04);
      border: 1px dashed rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: rgba(255,255,255,0.2);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .pm-cover-empty:hover {
      border-color: rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.4);
    }

    .pm-cover-empty svg {
      width: 16px;
      height: 16px;
    }

    .pm-cover-controls {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pm-cover-slider-group {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pm-cover-slider-label {
      font-size: 10px;
      color: rgba(255,255,255,0.35);
      white-space: nowrap;
    }

    .pm-cover-slider {
      flex: 1;
      height: 3px;
      appearance: none;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }

    .pm-cover-slider::-webkit-slider-thumb {
      appearance: none;
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .pm-cover-slider-value {
      font-size: 11px;
      color: rgba(255,255,255,0.5);
      min-width: 28px;
    }

    .pm-cover-buttons {
      display: flex;
      gap: 4px;
    }

    .pm-cover-btn {
      padding: 5px 10px;
      font-size: 10px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
      border: none;
      font-family: inherit;
    }

    .pm-cover-btn.choose {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
    }

    .pm-cover-btn.choose:hover {
      background: rgba(255,255,255,0.12);
    }

    .pm-cover-btn.remove {
      background: transparent;
      color: rgba(239, 68, 68, 0.6);
    }

    .pm-cover-btn.remove:hover {
      color: #ef4444;
    }

    /* Modal footer tweaks for project modal */
    .pm-modal-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      border-top: 1px solid rgba(255,255,255,0.06);
      background: rgba(0,0,0,0.2);
    }

    .pm-footer-actions {
      display: flex;
      gap: 8px;
    }

    .pm-btn-delete {
      padding: 9px 18px;
      font-size: 13px;
      font-weight: 500;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      border: none;
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
      font-family: inherit;
    }

    .pm-btn-delete:hover {
      background: rgba(239, 68, 68, 0.18);
    }

    /* ============ SETTINGS MODAL (MANAGE) ============ */
    
    .settings-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(8px);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    
    .settings-modal-overlay.open {
      display: flex;
      opacity: 1;
    }

    .settings-layout {
      display: flex;
      width: 95vw;
      max-width: 1100px;
      height: 85vh;
      max-height: 800px;
      background: #0f0f12;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    }

    .settings-sidebar {
      width: 220px;
      min-width: 220px;
      background: rgba(255, 255, 255, 0.02);
      border-right: 1px solid rgba(255, 255, 255, 0.06);
      padding: 0;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
    
    .settings-sidebar-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 20px 20px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    
    .settings-sidebar-logo {
      width: 24px;
      height: 24px;
      opacity: 0.8;
    }
    
    .settings-sidebar-title {
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.4);
    }
    
    .settings-nav {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 12px 8px;
      flex: 1;
    }

    .settings-nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      transition: all 0.15s;
      font-size: 13px;
      border-left: none;
    }

    .settings-nav-item:hover {
      background: rgba(255, 255, 255, 0.04);
      color: rgba(255, 255, 255, 0.8);
    }

    .settings-nav-item.active {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.95);
    }

    .settings-nav-item svg {
      width: 16px;
      height: 16px;
      opacity: 0.5;
    }

    .settings-nav-item:hover svg {
      opacity: 0.7;
    }

    .settings-nav-item.active svg {
      opacity: 0.9;
    }
    
    .settings-sidebar-footer {
      padding: 12px 16px 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    
    .settings-back-link {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, 0.4);
      font-size: 12px;
      cursor: pointer;
      transition: color 0.15s ease;
      background: none;
      border: none;
      padding: 0;
      font-family: inherit;
    }
    
    .settings-back-link:hover {
      color: rgba(255, 255, 255, 0.7);
    }
    
    .settings-back-link svg {
      width: 14px;
      height: 14px;
    }

    .settings-content {
      flex: 1;
      overflow-y: auto;
      padding: 28px 32px;
    }

    .settings-section {
      display: none;
    }

    .settings-section.active {
      display: block;
    }

    .settings-section-title {
      font-size: 18px;
      font-weight: 400;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .settings-section-desc {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: 24px;
      line-height: 1.5;
    }
    
    /* ============ MANAGE PROJECTS LIST ============ */
    .manage-projects-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    
    .manage-projects-label {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.4);
    }
    
    .manage-add-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .manage-add-btn:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.9);
    }
    
    .manage-add-btn svg {
      width: 14px;
      height: 14px;
    }
    
    .manage-projects-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    
    .manage-project-row {
      display: grid;
      grid-template-columns: auto 1fr auto auto auto;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .manage-project-row:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
    }
    
    .manage-project-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    
    .manage-project-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    
    .manage-project-name {
      font-size: 13px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.9);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .manage-project-domain {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
    }
    
    .manage-project-area {
      padding: 4px 10px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
      white-space: nowrap;
    }
    
    .manage-project-count {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.35);
      white-space: nowrap;
      min-width: 50px;
      text-align: right;
    }
    
    .manage-project-edit {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      opacity: 0;
      transition: all 0.15s ease;
    }
    
    .manage-project-row:hover .manage-project-edit {
      opacity: 1;
    }
    
    .manage-project-edit:hover {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.7);
    }
    
    .manage-project-edit svg {
      width: 16px;
      height: 16px;
    }
    
    .manage-projects-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 24px;
      text-align: center;
      color: rgba(255, 255, 255, 0.4);
      font-size: 13px;
    }
    
    /* Settings Modal Responsive */
    @media (max-width: 768px) {
      .settings-layout {
        flex-direction: column;
        width: 95vw;
        height: 90vh;
        max-height: none;
      }
      
      .settings-sidebar {
        width: 100%;
        min-width: 100%;
        flex-shrink: 0;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      
      .settings-sidebar-header {
        padding: 14px 16px 12px;
      }
      
      .settings-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px 12px;
      }
      
      .settings-nav-item {
        padding: 8px 10px;
        font-size: 11px;
      }
      
      .settings-nav-item svg {
        width: 14px;
        height: 14px;
      }
      
      .settings-sidebar-footer {
        display: none;
      }
      
      .settings-content {
        padding: 20px 16px;
        flex: 1;
        overflow-y: auto;
      }
    }

    /* Projects Database Table */
    .projects-db-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .projects-db-search {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .projects-db-search input {
      width: 250px;
      padding: 8px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
    }

    .projects-db-search input:focus {
      outline: none;
      border-color: var(--primary);
    }

    .projects-db-filters {
      display: flex;
      gap: 8px;
    }

    .db-filter-btn {
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .db-filter-btn:hover,
    .db-filter-btn.active {
      background: rgba(0, 212, 212, 0.1);
      border-color: rgba(0, 212, 212, 0.3);
      color: var(--primary);
    }

    .projects-db-table {
      width: 100%;
      border-collapse: collapse;
    }

    .projects-db-table th {
      text-align: left;
      padding: 10px 12px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-tertiary);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      background: var(--bg-card);
      z-index: 1;
    }

    .projects-db-table td {
      padding: 8px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      vertical-align: middle;
    }

    .projects-db-table tr:hover {
      background: rgba(255, 255, 255, 0.02);
    }

    .db-project-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .db-project-status {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .db-project-status.active { background: #4ade80; }
    .db-project-status.paused { background: #fbbf24; }
    .db-project-status.idea { background: #a78bfa; }
    .db-project-status.completed { background: #6b7280; }
    .db-project-status.archived { background: #374151; }

    .db-select {
      padding: 5px 8px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 12px;
      cursor: pointer;
      min-width: 100px;
    }

    .db-select:focus {
      outline: none;
      border-color: var(--primary);
    }

    .db-date-input {
      padding: 5px 8px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 12px;
      width: 110px;
    }

    .db-date-input:focus {
      outline: none;
      border-color: var(--primary);
    }

    .db-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
    }

    .db-tag {
      padding: 2px 8px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 4px;
      font-size: 10px;
      color: var(--text-secondary);
    }

    .db-tag-add {
      padding: 2px 6px;
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, 0.15);
      border-radius: 4px;
      font-size: 10px;
      color: var(--text-tertiary);
      cursor: pointer;
    }

    .db-tag-add:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    .db-actions {
      display: flex;
      gap: 4px;
    }

    .db-action-btn {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: var(--text-tertiary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }

    .db-action-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-primary);
    }

    .db-action-btn.delete:hover {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
    }

    .db-action-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Areas Management */
    .areas-domain-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .areas-domain-tab {
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      color: var(--text-secondary);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .areas-domain-tab:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    .areas-domain-tab.active {
      background: rgba(0, 212, 212, 0.1);
      border-color: rgba(0, 212, 212, 0.3);
      color: var(--primary);
    }

    .areas-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .area-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 10px;
      cursor: grab;
    }

    .area-row:hover {
      border-color: rgba(255, 255, 255, 0.1);
    }

    .area-row-drag {
      color: var(--text-tertiary);
      cursor: grab;
    }

    .area-row-icon {
      font-size: 18px;
      width: 32px;
      text-align: center;
    }

    .area-row-info {
      flex: 1;
    }

    .area-row-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
    }

    .area-row-desc {
      font-size: 12px;
      color: var(--text-tertiary);
    }

    .area-row-count {
      font-size: 12px;
      color: var(--text-tertiary);
      background: rgba(255, 255, 255, 0.04);
      padding: 4px 10px;
      border-radius: 12px;
    }

    .area-row-actions {
      display: flex;
      gap: 4px;
    }

    .add-area-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px;
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      color: var(--text-tertiary);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s;
      margin-top: 8px;
    }

    .add-area-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(0, 212, 212, 0.05);
    }

    .add-area-btn svg {
      width: 16px;
      height: 16px;
    }

    /* Tags Management */
    .tags-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px;
    }

    .tag-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .tag-chip-remove {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      color: var(--text-tertiary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      transition: all 0.15s;
    }

    .tag-chip-remove:hover {
      background: rgba(239, 68, 68, 0.3);
      color: #ef4444;
    }

    .add-tag-input {
      display: flex;
      gap: 8px;
      margin-top: 16px;
    }

    .add-tag-input input {
      flex: 1;
      max-width: 250px;
      padding: 10px 14px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
    }

    .add-tag-input input:focus {
      outline: none;
      border-color: var(--primary);
    }

    /* General Settings */
    .settings-group {
      margin-bottom: 32px;
    }

    .settings-group-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 12px;
    }

    .settings-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .settings-row-label {
      font-size: 14px;
      color: var(--text-secondary);
    }

    .settings-row-desc {
      font-size: 12px;
      color: var(--text-tertiary);
      margin-top: 2px;
    }

    .settings-toggle {
      position: relative;
      width: 44px;
      height: 24px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .settings-toggle.active {
      background: var(--primary);
    }

    .settings-toggle::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      background: white;
      border-radius: 50%;
      transition: transform 0.2s;
    }

    .settings-toggle.active::after {
      transform: translateX(20px);
    }

    /* Daily Intention Settings */
    .settings-row-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .settings-row-header .settings-group-title {
      margin-bottom: 0;
    }

    /* Daily Intention Settings - Value Inputs */
    .settings-field-desc {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .daily-intention-value-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .daily-intention-value-input {
      width: 100%;
      font-size: 14px;
      font-weight: 500;
      padding: 12px 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      color: var(--text);
      transition: all 0.15s ease;
    }

    .daily-intention-value-input::placeholder {
      color: var(--text-muted);
      font-weight: 400;
    }

    .daily-intention-value-input:focus {
      outline: none;
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.05);
    }

    .daily-intention-value-subtitle {
      width: 100%;
      font-size: 13px;
      padding: 10px 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      color: var(--text-secondary);
      transition: all 0.15s ease;
    }

    .daily-intention-value-subtitle::placeholder {
      color: var(--text-muted);
    }

    .daily-intention-value-subtitle:focus {
      outline: none;
      border-color: var(--primary);
      color: var(--text);
    }

    .settings-group-row {
      display: flex;
      gap: 16px;
    }

    .settings-group-half {
      flex: 1;
    }

    .daily-intention-setting-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }

    .btn-sm {
      padding: 6px 12px;
      font-size: 12px;
    }

    /* Knowledge Base Stats Grid */
    .kb-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 12px;
    }

    .kb-stat-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 16px;
      text-align: center;
    }

    .kb-stat-value {
      font-size: 24px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      margin-bottom: 4px;
    }

    .kb-stat-label {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }

    /* Pinned Documents List */
    .kb-pinned-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }

    .kb-pinned-loading {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
      padding: 20px;
      text-align: center;
    }

    .kb-pinned-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 8px;
      transition: all 0.15s ease;
    }

    .kb-pinned-item:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.08);
    }

    .kb-pinned-icon {
      font-size: 16px;
      opacity: 0.7;
    }

    .kb-pinned-info {
      flex: 1;
      min-width: 0;
    }

    .kb-pinned-title {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.8);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .kb-pinned-meta {
      font-size: 10px;
      color: rgba(255,255,255,0.35);
      margin-top: 2px;
    }

    .kb-pinned-badge {
      font-size: 9px;
      padding: 3px 8px;
      background: rgba(6, 182, 212, 0.15);
      color: rgba(6, 182, 212, 0.9);
      border-radius: 4px;
      flex-shrink: 0;
    }

    .kb-pinned-empty {
      font-size: 12px;
      color: rgba(255,255,255,0.35);
      padding: 24px;
      text-align: center;
      background: rgba(255,255,255,0.02);
      border: 1px dashed rgba(255,255,255,0.08);
      border-radius: 8px;
    }

    /* ============================================
       KNOWLEDGE BASE FULLSCREEN MODAL
       ============================================ */
    .kb-fullscreen-overlay {
      position: fixed;
      inset: 0;
      background: #0a0a0b;
      z-index: 2000;
      display: none;
      flex-direction: column;
    }

    .kb-fullscreen-overlay.open {
      display: flex;
    }

    .kb-fullscreen-container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .kb-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
    }

    .kb-header-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .kb-back-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .kb-back-btn:hover {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.9);
    }

    .kb-back-btn svg {
      width: 18px;
      height: 18px;
    }

    .kb-title {
      font-size: 18px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
    }

    .kb-doc-count {
      font-size: 12px;
      color: rgba(255,255,255,0.35);
    }

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

    .kb-header-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 18px;
      font-size: 12px;
      font-weight: 500;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      border: none;
    }

    .kb-header-btn svg {
      width: 14px;
      height: 14px;
    }

    .kb-header-btn.primary {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.9);
      border: 1px solid rgba(255,255,255,0.12);
    }

    .kb-header-btn.primary:hover {
      background: rgba(255,255,255,0.12);
    }

    .kb-layout {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .kb-sidebar {
      width: 240px;
      background: rgba(255,255,255,0.02);
      border-right: 1px solid rgba(255,255,255,0.06);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }

    .kb-search-wrapper {
      padding: 16px;
      position: relative;
    }

    .kb-search-icon {
      position: absolute;
      left: 28px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      color: rgba(255,255,255,0.3);
    }

    .kb-search-input {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      padding: 10px 12px 10px 36px;
      font-size: 12px;
      color: rgba(255,255,255,0.9);
      outline: none;
    }

    .kb-search-input:focus {
      border-color: rgba(255,255,255,0.12);
    }

    .kb-search-input::placeholder {
      color: rgba(255,255,255,0.3);
    }

    .kb-nav {
      flex: 1;
      overflow-y: auto;
      padding: 0 12px 12px;
    }

    .kb-nav-section {
      margin-bottom: 16px;
    }

    .kb-nav-title {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.25);
      padding: 8px 12px;
    }

    .kb-nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      font-size: 12px;
      color: rgba(255,255,255,0.5);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      margin-bottom: 2px;
    }

    .kb-nav-item:hover {
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.7);
    }

    .kb-nav-item.active {
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.9);
    }

    .kb-nav-icon {
      font-size: 14px;
      opacity: 0.7;
    }

    .kb-nav-count {
      margin-left: auto;
      font-size: 10px;
      color: rgba(255,255,255,0.25);
    }

    .kb-main {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    .kb-document-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .kb-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px;
    }

    .kb-spinner {
      width: 32px;
      height: 32px;
      border: 2px solid rgba(255,255,255,0.1);
      border-top-color: rgba(255,255,255,0.5);
      border-radius: 50%;
      animation: kbSpin 0.8s linear infinite;
    }

    @keyframes kbSpin {
      to { transform: rotate(360deg); }
    }

    .kb-doc-card {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px 18px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .kb-doc-card:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.08);
    }

    .kb-doc-card.selected {
      border-color: rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.05);
    }

    .kb-doc-icon {
      width: 36px;
      height: 36px;
      background: rgba(255,255,255,0.04);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .kb-doc-content {
      flex: 1;
      min-width: 0;
    }

    .kb-doc-title {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.85);
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .kb-doc-pinned {
      font-size: 10px;
      opacity: 0.5;
    }

    .kb-doc-summary {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
      line-height: 1.5;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .kb-doc-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 10px;
      color: rgba(255,255,255,0.3);
    }

    .kb-doc-category {
      padding: 3px 8px;
      background: rgba(255,255,255,0.04);
      border-radius: 4px;
      color: rgba(255,255,255,0.5);
    }

    .kb-doc-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .kb-doc-card:hover .kb-doc-actions {
      opacity: 1;
    }

    .kb-doc-action-btn {
      width: 28px;
      height: 28px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .kb-doc-action-btn:hover {
      background: rgba(255,255,255,0.08);
    }

    .kb-doc-action-btn svg {
      width: 14px;
      height: 14px;
      color: rgba(255,255,255,0.5);
    }

    .kb-doc-action-btn.active svg {
      fill: currentColor;
      color: rgba(255,200,100,0.8);
    }

    .kb-empty-state {
      text-align: center;
      padding: 60px 40px;
    }

    .kb-empty-icon {
      font-size: 40px;
      opacity: 0.4;
      margin-bottom: 16px;
    }

    .kb-empty-title {
      font-size: 15px;
      font-weight: 600;
      color: rgba(255,255,255,0.6);
      margin-bottom: 8px;
    }

    .kb-empty-text {
      font-size: 13px;
      color: rgba(255,255,255,0.35);
    }

    /* KB Detail Panel */
    .kb-detail-panel {
      width: 0;
      background: rgba(17,17,19,0.98);
      border-left: 1px solid rgba(255,255,255,0.06);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: width 0.3s ease;
    }

    .kb-detail-panel.open {
      width: 480px;
    }

    .kb-detail-header {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .kb-detail-category {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.4);
      padding: 4px 10px;
      background: rgba(255,255,255,0.04);
      border-radius: 4px;
    }

    .kb-detail-actions {
      display: flex;
      gap: 6px;
    }

    .kb-detail-btn {
      width: 30px;
      height: 30px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .kb-detail-btn:hover {
      background: rgba(255,255,255,0.08);
    }

    .kb-detail-btn svg {
      width: 14px;
      height: 14px;
      color: rgba(255,255,255,0.5);
    }

    .kb-detail-btn.danger:hover {
      background: rgba(239,68,68,0.15);
    }

    .kb-detail-btn.danger:hover svg {
      color: #ef4444;
    }

    .kb-detail-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    .kb-detail-title {
      font-size: 18px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      margin-bottom: 16px;
      line-height: 1.4;
    }

    .kb-detail-meta {
      display: flex;
      gap: 20px;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    .kb-detail-meta-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .kb-detail-meta-label {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.3);
    }

    .kb-detail-meta-value {
      font-size: 12px;
      color: rgba(255,255,255,0.7);
    }

    .kb-detail-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 16px;
    }

    .kb-detail-tag {
      padding: 4px 10px;
      background: rgba(255,255,255,0.04);
      border-radius: 5px;
      font-size: 11px;
      color: rgba(255,255,255,0.5);
    }

    .kb-detail-body {
      font-size: 13px;
      color: rgba(255,255,255,0.7);
      line-height: 1.7;
    }

    .kb-detail-body h1, .kb-detail-body h2, .kb-detail-body h3 {
      color: rgba(255,255,255,0.85);
      margin: 20px 0 10px;
    }

    .kb-detail-body h1 { font-size: 16px; }
    .kb-detail-body h2 { font-size: 14px; }
    .kb-detail-body h3 { font-size: 13px; }

    .kb-detail-body p { margin-bottom: 10px; }

    .kb-detail-body ul, .kb-detail-body ol {
      margin: 10px 0;
      padding-left: 20px;
    }

    .kb-detail-body li { margin-bottom: 5px; }

    .kb-detail-body code {
      background: rgba(255,255,255,0.06);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
    }

    .kb-detail-body blockquote {
      border-left: 2px solid rgba(255,255,255,0.15);
      padding-left: 14px;
      margin: 14px 0;
      color: rgba(255,255,255,0.5);
      font-style: italic;
    }

    /* KB Edit Modal */
    .kb-edit-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2100;
    }

    .kb-edit-overlay.open {
      display: flex;
    }

    .kb-edit-modal {
      width: 600px;
      max-height: 85vh;
      background: rgba(17,17,19,0.98);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
    }

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

    .kb-edit-title {
      font-size: 15px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
    }

    .kb-edit-close {
      width: 28px;
      height: 28px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .kb-edit-close:hover {
      background: rgba(255,255,255,0.08);
    }

    .kb-edit-close svg {
      width: 14px;
      height: 14px;
      color: rgba(255,255,255,0.5);
    }

    .kb-edit-content {
      flex: 1;
      overflow-y: auto;
      padding: 22px;
    }

    .kb-form-group {
      margin-bottom: 16px;
    }

    .kb-form-row {
      display: flex;
      gap: 14px;
    }

    .kb-form-row .kb-form-group {
      flex: 1;
    }

    .kb-form-label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.5);
      margin-bottom: 8px;
    }

    .kb-form-label .required {
      color: #ef4444;
    }

    .kb-form-input {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 11px 14px;
      font-size: 13px;
      color: rgba(255,255,255,0.9);
      outline: none;
    }

    .kb-form-input:focus {
      border-color: rgba(255,255,255,0.15);
    }

    .kb-form-input::placeholder {
      color: rgba(255,255,255,0.25);
    }

    .kb-form-textarea {
      min-height: 180px;
      resize: vertical;
      line-height: 1.6;
      font-family: inherit;
    }

    .kb-form-select {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 11px 14px;
      font-size: 13px;
      color: rgba(255,255,255,0.9);
      outline: none;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
    }

    .kb-form-select option {
      background: #1a1a1c;
    }

    .kb-tags-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      min-height: 42px;
      align-items: center;
    }

    .kb-tag-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: rgba(255,255,255,0.06);
      border-radius: 5px;
      font-size: 11px;
      color: rgba(255,255,255,0.7);
    }

    .kb-tag-chip-remove {
      cursor: pointer;
      opacity: 0.5;
    }

    .kb-tag-chip-remove:hover {
      opacity: 1;
    }

    .kb-tag-input {
      flex: 1;
      min-width: 100px;
      background: transparent;
      border: none;
      font-size: 12px;
      color: rgba(255,255,255,0.9);
      outline: none;
    }

    .kb-tag-input::placeholder {
      color: rgba(255,255,255,0.25);
    }

    .kb-form-checkbox {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
    }

    .kb-form-checkbox input {
      width: 16px;
      height: 16px;
      accent-color: rgba(255,255,255,0.8);
    }

    .kb-form-checkbox label {
      font-size: 12px;
      color: rgba(255,255,255,0.6);
    }

    .kb-edit-footer {
      padding: 16px 22px;
      border-top: 1px solid rgba(255,255,255,0.04);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .kb-btn {
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 500;
      border-radius: 8px;
      cursor: pointer;
      border: none;
      transition: all 0.15s ease;
    }

    .kb-btn.cancel {
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.6);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .kb-btn.cancel:hover {
      background: rgba(255,255,255,0.08);
    }

    .kb-btn.save {
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.95);
      border: 1px solid rgba(255,255,255,0.15);
    }

    .kb-btn.save:hover {
      background: rgba(255,255,255,0.15);
    }

    .kb-btn.danger {
      background: rgba(239,68,68,0.15);
      color: #ef4444;
      border: 1px solid rgba(239,68,68,0.3);
    }

    .kb-btn.danger:hover {
      background: rgba(239,68,68,0.25);
    }

    .kb-delete-modal {
      width: 380px;
    }

    .kb-delete-content {
      text-align: center;
      padding: 30px;
    }

    .kb-delete-icon {
      font-size: 40px;
      margin-bottom: 16px;
    }

    .kb-delete-title {
      font-size: 16px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      margin-bottom: 8px;
    }

    .kb-delete-text {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      line-height: 1.5;
    }

    /* Goals Modal List */
    .goals-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

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

    .goal-row-title {
      flex: 1;
      padding: 8px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 14px;
    }

    .goal-row-title:focus {
      outline: none;
      border-color: var(--primary);
    }

    .goal-row-target {
      width: 60px;
      padding: 8px 10px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 14px;
      text-align: center;
    }

    .goal-row-target:focus {
      outline: none;
      border-color: var(--primary);
    }

    .goal-row-delete {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: transparent;
      border: none;
      color: var(--text-tertiary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }

    .goal-row-delete:hover {
      background: rgba(248, 113, 113, 0.15);
      color: var(--destructive);
    }

    .goal-row-delete svg {
      width: 16px;
      height: 16px;
    }

    /* Goals Preview in North Star Modal */
    .ns-goals-preview {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .ns-goals-empty {
      padding: 20px;
      text-align: center;
      color: var(--text-tertiary);
      font-size: 13px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px dashed rgba(255, 255, 255, 0.08);
      border-radius: 10px;
    }

    .ns-goal-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
    }

    .ns-goal-icon {
      width: 32px;
      height: 32px;
      background: rgba(6, 182, 212, 0.1);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .ns-goal-info {
      flex: 1;
      min-width: 0;
    }

    .ns-goal-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ns-goal-progress {
      font-size: 11px;
      color: var(--text-tertiary);
      margin-top: 2px;
    }

    .ns-goal-bar {
      width: 80px;
      height: 6px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 3px;
      overflow: hidden;
    }

    .ns-goal-bar-fill {
      height: 100%;
      background: rgba(6, 182, 212, 0.6);
      border-radius: 3px;
      transition: width 0.3s ease;
    }

    /* Goal Checkboxes in Project Modal */
    .goal-checkboxes {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .goal-checkbox-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .goal-checkbox-item:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .goal-checkbox-item.checked {
      background: rgba(245, 230, 211, 0.08);
      border-color: rgba(245, 230, 211, 0.3);
    }

    .goal-checkbox-box {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      flex-shrink: 0;
    }

    .goal-checkbox-item.checked .goal-checkbox-box {
      background: var(--align-direct);
      border-color: var(--align-direct);
    }

    .goal-checkbox-box svg {
      width: 12px;
      height: 12px;
      color: var(--bg-primary);
      opacity: 0;
    }

    .goal-checkbox-item.checked .goal-checkbox-box svg {
      opacity: 1;
    }

    .goal-checkbox-label {
      flex: 1;
      font-size: 14px;
      color: var(--text-primary);
    }

    .goal-checkbox-count {
      font-size: 12px;
      color: var(--text-tertiary);
    }

    .goal-checkboxes-empty {
      padding: 16px;
      text-align: center;
      color: var(--text-tertiary);
      font-size: 13px;
    }

    /* Form Elements */
    .form-group {
      margin-bottom: 20px;
    }

    .form-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-soft);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .form-hint {
      font-size: 12px;
      color: var(--text-tertiary);
      margin: -4px 0 10px;
      font-weight: 400;
    }

    .form-input {
      width: 100%;
      padding: 12px 14px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      transition: all 0.15s;
    }

    .form-input:focus {
      outline: none;
      border-color: var(--primary);
    }

    .form-input::placeholder {
      color: var(--text-muted);
    }

    textarea.form-input {
      min-height: 100px;
      resize: vertical;
      font-family: inherit;
    }

    /* Tag Input Container for modals */
    .tag-input-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      padding: 8px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      min-height: 44px;
    }

    .tag-input-container:focus-within {
      border-color: var(--primary);
    }

    .tags-display {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tag-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 4px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
    }

    .tag-badge button {
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      padding: 0;
      margin-left: 2px;
    }

    .tag-badge button:hover {
      color: #ef4444;
    }

    .tag-input {
      flex: 1;
      min-width: 120px;
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 13px;
      outline: none;
      padding: 4px 0;
    }

    .tag-input::placeholder {
      color: var(--text-muted);
    }

    .form-select {
      width: 100%;
      padding: 12px 14px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
    }

    .form-select:focus {
      outline: none;
      border-color: var(--primary);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-checkbox {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .form-checkbox input {
      width: 18px;
      height: 18px;
      accent-color: var(--primary);
    }

    .form-checkbox span {
      font-size: 13px;
      color: var(--text-soft);
    }

    /* Pin Toggle */
    .pin-toggle-label {
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      padding: 12px 14px;
      background: var(--card-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      transition: all 0.2s ease;
    }

    .pin-toggle-label:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: var(--border-default);
    }

    .pin-toggle-label input {
      display: none;
    }

    .pin-toggle-switch {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .pin-toggle-icon {
      font-size: 16px;
      opacity: 0.4;
      transition: all 0.2s ease;
    }

    .pin-toggle-label input:checked + .pin-toggle-switch {
      background: rgba(0, 212, 212, 0.15);
      border-color: rgba(0, 212, 212, 0.3);
    }

    .pin-toggle-label input:checked + .pin-toggle-switch .pin-toggle-icon {
      opacity: 1;
    }

    .pin-toggle-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .pin-toggle-text strong {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
    }

    .pin-toggle-text span {
      font-size: 11px;
      color: var(--text-tertiary);
    }

    /* Tags Input */
    .tags-input-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 10px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      min-height: 44px;
    }

    .tags-input-container:focus-within {
      border-color: var(--primary);
    }

    .tag-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: var(--bg-hover);
      border-radius: 4px;
      font-size: 12px;
      color: var(--text-soft);
    }

    .tag-chip-remove {
      cursor: pointer;
      color: var(--text-muted);
      display: flex;
      align-items: center;
    }

    .tag-chip-remove:hover {
      color: #ef4444;
    }

    .tag-chip-remove svg {
      width: 12px;
      height: 12px;
    }

    .tags-input {
      flex: 1;
      min-width: 100px;
      border: none;
      background: transparent;
      color: var(--text);
      font-size: 13px;
      outline: none;
    }

    .tags-input::placeholder {
      color: var(--text-muted);
    }

    /* Detail Panel */
    .detail-panel {
      position: fixed;
      top: 56px;
      right: 0;
      width: 450px;
      height: calc(100vh - 56px);
      background: var(--bg-card);
      border-left: 1px solid var(--border);
      z-index: 50;
      display: none;
      flex-direction: column;
      overflow: hidden;
    }

    .detail-panel.open {
      display: flex;
    }

    .detail-header {
      padding: 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .detail-close {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .detail-close:hover {
      background: var(--bg-hover);
      color: var(--text);
    }

    .detail-close svg {
      width: 18px;
      height: 18px;
    }

    .detail-thumbnail {
      width: 100%;
      aspect-ratio: 16/9;
      background: var(--bg-hover);
      overflow: hidden;
    }

    .detail-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .detail-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    .detail-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 16px;
    }

    .detail-section {
      margin-bottom: 20px;
    }

    .detail-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    .detail-actions {
      padding: 16px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 12px;
    }

    /* Empty State */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 40px;
      text-align: center;
    }

    .empty-state-icon {
      width: 80px;
      height: 80px;
      margin-bottom: 24px;
      color: var(--text-muted);
      opacity: 0.5;
    }

    .empty-state-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .empty-state-text {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 24px;
      max-width: 400px;
    }

    /* Reference Card (Inspiration style) */
    .reference-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }

    .reference-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }

    .reference-card:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
    }

    .reference-thumbnail {
      aspect-ratio: 16/10;
      background: linear-gradient(135deg, #1a1a2e, #0f0f23);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .reference-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .reference-type-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .type-video { background: rgba(239, 68, 68, 0.9); }
    .type-image { background: rgba(236, 72, 153, 0.9); }
    .type-article { background: rgba(99, 102, 241, 0.9); }
    .type-track { background: rgba(6, 182, 212, 0.9); }
    .type-quote { background: rgba(245, 158, 11, 0.9); }

    .reference-info {
      padding: 16px;
    }

    .reference-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .reference-source {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .reference-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .reference-tag {
      padding: 3px 8px;
      background: var(--bg-hover);
      border-radius: 4px;
      font-size: 10px;
      color: var(--text-soft);
    }

    /* Auth Overlay */
    .auth-overlay {
      position: fixed;
      inset: 0;
      background: #050506;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .auth-overlay.hidden {
      display: none;
    }

    /* Background Project Cards */
    .auth-bg-card {
      position: absolute;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    
    .auth-bg-card .card-bg {
      position: absolute;
      inset: 0;
    }
    
    .auth-bg-card .card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.5) 100%
      );
    }
    
    .auth-bg-card .card-frame {
      position: absolute;
      inset: 0;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .auth-bg-card .card-content {
      position: absolute;
      inset: 0;
      padding: 16px;
      display: flex;
      flex-direction: column;
    }
    
    .auth-bg-card .card-badge {
      align-self: flex-start;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.9);
      padding: 6px 10px;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .auth-bg-card .card-bottom {
      margin-top: auto;
    }
    
    .auth-bg-card .card-title {
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 4px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
    
    .auth-bg-card .card-subtitle {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.6);
    }
    
    /* Blur levels */
    .blur-heavy { filter: blur(6px); opacity: 0.5; }
    .blur-medium { filter: blur(4px); opacity: 0.7; }
    .blur-light { filter: blur(2px); opacity: 0.85; }
    
    /* Auth card gradients */
    .auth-grad-music {
      background: 
        radial-gradient(ellipse at 30% 30%, rgba(200, 80, 160, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(120, 40, 100, 0.9) 0%, transparent 50%),
        linear-gradient(135deg, #1a1025 0%, #0a0510 100%);
    }
    
    .auth-grad-content {
      background: 
        radial-gradient(ellipse at 30% 40%, rgba(251, 191, 36, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(200, 120, 50, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #1a1408 0%, #0f0a05 100%);
    }
    
    .auth-grad-business {
      background: 
        radial-gradient(ellipse at 30% 30%, rgba(139, 92, 246, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(100, 60, 180, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #151025 0%, #080510 100%);
    }
    
    .auth-grad-tools {
      background: 
        radial-gradient(ellipse at 40% 30%, rgba(0, 200, 200, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 70%, rgba(0, 150, 180, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #081518 0%, #030a0c 100%);
    }
    
    .auth-grad-personal {
      background: 
        radial-gradient(ellipse at 30% 40%, rgba(255, 100, 120, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(200, 60, 100, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #1a1015 0%, #0a0508 100%);
    }
    
    /* Card positions */
    .auth-card-top { width: 200px; height: 280px; top: -120px; left: 50%; transform: translateX(-50%); }
    .auth-card-bottom-center { width: 180px; height: 240px; bottom: -80px; left: 50%; transform: translateX(-50%); }
    .auth-card-top-left { width: 140px; height: 180px; top: 60px; left: 18%; }
    .auth-card-top-right { width: 140px; height: 180px; top: 80px; right: 18%; }
    .auth-card-left { width: 200px; height: 320px; top: 50%; left: calc(50% - 190px - 130px - 200px); transform: translateY(-50%); }
    .auth-card-left-2 { width: 160px; height: 260px; top: 50%; left: calc(50% - 190px - 130px - 200px - 50px - 160px); transform: translateY(-50%); }
    .auth-card-right { width: 200px; height: 320px; top: 50%; right: calc(50% - 190px - 130px - 200px); transform: translateY(-50%); }
    .auth-card-right-2 { width: 160px; height: 260px; top: 50%; right: calc(50% - 190px - 130px - 200px - 50px - 160px); transform: translateY(-50%); }
    .auth-card-bottom-left { width: 160px; height: 200px; bottom: 80px; left: 20%; }
    .auth-card-bottom-right { width: 160px; height: 200px; bottom: 100px; right: 20%; }

    /* Login Card */
    .auth-container {
      position: relative;
      width: 380px;
      padding: 48px 44px;
      border-radius: 28px;
      z-index: 100;
      
      background: linear-gradient(
        160deg,
        rgba(30, 35, 40, 0.95) 0%,
        rgba(15, 18, 22, 0.98) 100%
      );
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      
      box-shadow: 
        0 50px 100px -20px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    
    .auth-border {
      position: absolute;
      inset: 0;
      border-radius: 28px;
      padding: 1px;
      background: linear-gradient(
        160deg,
        rgba(0, 230, 230, 0.6) 0%,
        rgba(0, 200, 200, 0.3) 15%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 70%
      );
      -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
    }
    
    .auth-shine {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 160px;
      background: linear-gradient(
        180deg,
        rgba(0, 220, 220, 0.06) 0%,
        transparent 100%
      );
      border-radius: 28px 28px 0 0;
      pointer-events: none;
    }
    
    .auth-corner-glow {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
      background: radial-gradient(
        ellipse at 0% 0%,
        rgba(0, 230, 230, 0.15) 0%,
        rgba(0, 220, 220, 0.06) 40%,
        transparent 70%
      );
      pointer-events: none;
      border-radius: 28px 0 0 0;
    }
    
    .auth-content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .auth-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }

    .auth-logo svg {
      width: 40px;
      height: 40px;
    }
    
    .auth-logo-text {
      font-size: 24px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.02em;
    }

    .auth-subtitle {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: 40px;
    }

    .auth-btn-google {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      padding: 15px 24px;
      background: #fff;
      border: none;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 500;
      font-family: inherit;
      color: #1a1a1a;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .auth-btn-google:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
    }

    .auth-btn-google svg {
      width: 18px;
      height: 18px;
    }
    
    .auth-footer {
      margin-top: 28px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.35);
    }
    
    .auth-footer a {
      color: #00d4d4;
      text-decoration: none;
      font-weight: 500;
    }
    
    .auth-footer a:hover {
      opacity: 0.8;
    }

    /* ============ NORTH STAR VISION SYSTEM ============ */
    
    /* Ambient background */
    .vision-container {
      position: relative;
      min-height: calc(100vh - 100px);
      padding: 24px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .ambient-bg {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .ambient-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(120px);
    }

    .ambient-orb-1 {
      width: 600px;
      height: 600px;
      background: rgba(88, 28, 135, 0.08);
      top: -200px;
      right: -100px;
    }

    .ambient-orb-2 {
      width: 500px;
      height: 500px;
      background: rgba(0, 180, 180, 0.05);
      bottom: -150px;
      left: -100px;
    }

    /* North Star Banner - Primary Glass */
    .north-star-banner {
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.01) 100%
      );
      backdrop-filter: blur(24px);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 16px;
      box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
      padding: 20px 24px;
      margin-bottom: 32px;
      position: relative;
      overflow: hidden;
      transition: all 0.25s ease;
    }

    .north-star-banner:hover {
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(245, 230, 211, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .north-star-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 212, 212, 0.5), transparent);
    }

    .north-star-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .north-star-left {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 1;
    }

    .north-star-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .north-star-icon svg {
      width: 26px;
      height: 26px;
      color: var(--align-direct);
      filter: drop-shadow(0 0 10px rgba(245, 230, 211, 0.4));
    }

    .north-star-icon::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle, rgba(245, 230, 211, 0.15) 0%, transparent 70%);
      animation: starPulse 4s ease-in-out infinite;
    }

    @keyframes starPulse {
      0%, 100% { opacity: 0.5; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.1); }
    }

    .north-star-info {
      flex: 1;
    }

    .north-star-title {
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      margin-bottom: 6px;
    }

    .north-star-subtitle {
      font-size: 13px;
      color: var(--text-tertiary);
      line-height: 1.5;
      max-width: 500px;
    }

    .north-star-center {
      text-align: center;
      padding: 0 24px;
    }

    .days-remaining {
      font-size: 32px;
      font-weight: 400;
      color: var(--text-primary);
      opacity: 0.7;
      line-height: 1;
    }

    .days-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-tertiary);
      margin-top: 4px;
    }

    .north-star-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .north-star-stats {
      display: flex;
      gap: 20px;
    }

    .north-star-edit {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.15s;
    }

    .north-star-banner:hover .north-star-edit {
      opacity: 1;
    }

    .north-star-edit:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .north-star-edit svg {
      width: 16px;
      height: 16px;
      color: var(--text-tertiary);
    }

    .north-star-edit:hover svg {
      color: var(--text-secondary);
    }

    .ns-stat {
      text-align: center;
    }

    .ns-stat-value {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .ns-stat-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-tertiary);
      margin-top: 2px;
    }

    .north-star-actions {
      display: none; /* Replaced by hover edit button */
    }

    /* ========================================
       NORTH STAR FLIP CARD
       ======================================== */
    .flip-container {
      perspective: 2000px;
      width: 100%;
    }

    .flip-card {
      position: relative;
      width: 100%;
      min-height: 100px;
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
    }

    .flip-card.flipped {
      transform: rotateY(180deg);
    }

    .flip-card-face {
      width: 100%;
      backface-visibility: hidden;
      border-radius: 16px;
      overflow: visible;
    }

    .flip-card-front {
      position: relative;
    }

    .flip-card-back {
      position: absolute;
      top: 0;
      left: 0;
      transform: rotateY(180deg);
    }

    /* Side B: Daily Reminder */
    .side-b-content {
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.01) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 16px;
      display: flex;
      align-items: center;
      padding: 20px 24px;
      position: relative;
      min-height: 100px;
    }

    .reminder-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-right: 14px;
      flex-shrink: 0;
      position: relative;
    }

    .reminder-icon::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    }

    .reminder-content {
      flex: 1;
      transition: opacity 0.3s ease;
    }

    .reminder-content.fading {
      opacity: 0;
    }

    .reminder-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.4);
      margin-bottom: 6px;
    }

    .reminder-title {
      font-size: 18px;
      font-weight: 600;
      color: rgba(255,255,255,0.95);
      margin-bottom: 6px;
      line-height: 1.3;
    }

    .reminder-subtext {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      line-height: 1.5;
      max-width: 600px;
    }

    /* Corner Actions */
    .corner-actions {
      position: absolute;
      top: 16px;
      right: 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      opacity: 0;
      transition: opacity 0.15s ease;
      z-index: 20;
    }

    .north-star-banner:hover .corner-actions {
      opacity: 1;
    }

    .corner-btn {
      width: 28px;
      height: 28px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .corner-btn:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.12);
    }

    .corner-btn svg {
      width: 14px;
      height: 14px;
      color: rgba(255,255,255,0.4);
    }

    .corner-btn:hover svg {
      color: rgba(255,255,255,0.7);
    }

    /* Reminder Settings Panel */
    .reminder-settings-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 420px;
      background: #111113;
      border-left: 1px solid rgba(255,255,255,0.08);
      z-index: 1000;
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
    }

    .reminder-settings-panel.open {
      transform: translateX(0);
    }

    .reminder-settings-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      z-index: 999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .reminder-settings-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .reminder-settings-header {
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .reminder-settings-title {
      font-size: 15px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
    }

    .reminder-settings-close {
      width: 28px;
      height: 28px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .reminder-settings-close:hover {
      background: rgba(255,255,255,0.08);
    }

    .reminder-settings-close svg {
      width: 14px;
      height: 14px;
      color: rgba(255,255,255,0.5);
    }

    .reminder-settings-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px 24px;
    }

    .reminder-settings-content .section-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.35);
      margin-bottom: 12px;
    }

    .reminder-upload-zone {
      border: 2px dashed rgba(255,255,255,0.1);
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: 20px;
    }

    .reminder-upload-zone:hover {
      border-color: rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.02);
    }

    .reminder-upload-zone-icon {
      font-size: 24px;
      margin-bottom: 6px;
      opacity: 0.5;
    }

    .reminder-upload-zone-text {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
    }

    .reminder-upload-zone-hint {
      font-size: 10px;
      color: rgba(255,255,255,0.25);
      margin-top: 4px;
    }

    .reminder-library-section {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }

    .reminder-library-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .reminder-library-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      padding: 12px 14px;
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
    }

    .reminder-library-card:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
    }

    .reminder-library-card.active {
      border-color: rgba(6, 182, 212, 0.3);
      background: rgba(6, 182, 212, 0.05);
    }

    .reminder-library-card-title {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,0.85);
      margin-bottom: 4px;
      line-height: 1.4;
      padding-right: 60px;
    }

    .reminder-library-card-subtext {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .reminder-library-card-actions {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .reminder-library-card:hover .reminder-library-card-actions {
      opacity: 1;
    }

    .reminder-library-card-btn {
      width: 24px;
      height: 24px;
      border-radius: 5px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      background: rgba(239, 68, 68, 0.1);
    }

    .reminder-library-card-btn:hover {
      background: rgba(239, 68, 68, 0.2);
    }

    .reminder-library-card-btn svg {
      width: 12px;
      height: 12px;
      color: #ef4444;
    }

    .reminder-today-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 2px 6px;
      background: rgba(6, 182, 212, 0.15);
      color: #06b6d4;
      border-radius: 4px;
    }

    .reminder-library-card:hover .reminder-today-badge {
      display: none;
    }

    /* ========================================
       PINNED/FEATURED PROJECT BAR
       ======================================== */
    .pinned-project-bar {
      display: none;
      margin-bottom: 24px;
    }

    .pinned-project-card {
      position: relative;
      width: 100%;
      height: 110px;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.15s ease-out, box-shadow 0.2s ease;
    }

    .pinned-project-card:hover {
      transform: scale(1.003);
    }

    /* Background image layer */
    .pinned-project-card .pinned-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      filter: blur(8px);
      transform: scale(1.1);
    }

    /* Gradient overlay - dark on left, transparent on right */
    .pinned-project-card .pinned-overlay {
      position: absolute;
      inset: 0;
      background: 
        linear-gradient(90deg, rgba(20, 15, 12, 0.95) 0%, rgba(20, 15, 12, 0.75) 35%, rgba(20, 15, 12, 0.4) 70%, rgba(20, 15, 12, 0.3) 100%);
    }

    /* Category color tint */
    .pinned-project-card .pinned-tint {
      position: absolute;
      inset: 0;
    }

    .pinned-project-card.music .pinned-tint {
      background: linear-gradient(135deg, rgba(180, 60, 80, 0.15) 0%, rgba(100, 30, 50, 0.2) 100%);
    }
    .pinned-project-card.content .pinned-tint {
      background: linear-gradient(135deg, rgba(180, 130, 40, 0.15) 0%, rgba(120, 80, 20, 0.2) 100%);
    }
    .pinned-project-card.tools .pinned-tint {
      background: linear-gradient(135deg, rgba(30, 120, 130, 0.15) 0%, rgba(10, 80, 90, 0.2) 100%);
    }
    .pinned-project-card.evenant .pinned-tint {
      background: linear-gradient(135deg, rgba(50, 80, 160, 0.15) 0%, rgba(30, 50, 120, 0.2) 100%);
    }
    .pinned-project-card.personal .pinned-tint {
      background: linear-gradient(135deg, rgba(110, 50, 150, 0.15) 0%, rgba(70, 30, 110, 0.2) 100%);
    }
    .pinned-project-card.business .pinned-tint {
      background: linear-gradient(135deg, rgba(90, 140, 50, 0.15) 0%, rgba(60, 100, 30, 0.2) 100%);
    }

    /* Edge glow frame */
    .pinned-project-card .pinned-glow {
      position: absolute;
      inset: 0;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
      pointer-events: none;
    }

    .pinned-project-card.music .pinned-glow {
      background: 
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 100, 120, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(255, 80, 100, 0.1) 0%, transparent 50%);
    }
    .pinned-project-card.content .pinned-glow {
      background: 
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 200, 100, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(255, 180, 80, 0.1) 0%, transparent 50%);
    }
    .pinned-project-card.tools .pinned-glow {
      background: 
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(80, 220, 220, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(60, 200, 200, 0.1) 0%, transparent 50%);
    }
    .pinned-project-card.evenant .pinned-glow {
      background: 
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(100, 140, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(80, 120, 230, 0.1) 0%, transparent 50%);
    }
    .pinned-project-card.personal .pinned-glow {
      background: 
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(180, 130, 230, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(150, 100, 200, 0.1) 0%, transparent 50%);
    }
    .pinned-project-card.business .pinned-glow {
      background: 
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(160, 210, 100, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(130, 180, 70, 0.1) 0%, transparent 50%);
    }

    /* Content container */
    .pinned-project-card .pinned-content {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* Left side: icon + info */
    .pinned-project-card .pinned-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .pinned-project-card .pinned-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .pinned-project-card .pinned-icon svg {
      width: 22px;
      height: 22px;
      color: rgba(255, 255, 255, 0.8);
    }

    .pinned-project-card .pinned-info {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .pinned-project-card .pinned-label {
      font-size: 9px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255, 255, 255, 0.4);
    }

    .pinned-project-card .pinned-title {
      font-size: 17px;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
    }

    .pinned-project-card .pinned-subtitle {
      font-size: 12px;
      color: rgba(255, 180, 190, 0.6);
    }

    .pinned-project-card.content .pinned-subtitle { color: rgba(255, 220, 160, 0.6); }
    .pinned-project-card.tools .pinned-subtitle { color: rgba(160, 230, 230, 0.6); }
    .pinned-project-card.evenant .pinned-subtitle { color: rgba(180, 200, 255, 0.6); }
    .pinned-project-card.personal .pinned-subtitle { color: rgba(215, 180, 245, 0.6); }
    .pinned-project-card.business .pinned-subtitle { color: rgba(200, 235, 160, 0.6); }

    /* Right side: stats + progress ring */
    .pinned-project-card .pinned-right {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .pinned-project-card .pinned-stats {
      display: flex;
      gap: 28px;
    }

    .pinned-project-card .pinned-stat {
      text-align: center;
    }

    .pinned-project-card .pinned-stat-value {
      font-size: 18px;
      font-weight: 300;
      color: #fff;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .pinned-project-card .pinned-stat-label {
      font-size: 8px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255, 255, 255, 0.35);
      margin-top: 3px;
    }

    /* Circular progress ring */
    .pinned-project-card .pinned-progress-ring {
      position: relative;
      width: 56px;
      height: 56px;
    }

    .pinned-project-card .pinned-progress-ring svg {
      transform: rotate(-90deg);
    }

    .pinned-project-card .pinned-progress-ring .ring-bg {
      fill: none;
      stroke: rgba(255, 255, 255, 0.1);
      stroke-width: 3;
    }

    .pinned-project-card .pinned-progress-ring .ring-fill {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.3s ease;
    }

    .pinned-project-card.music .ring-fill { stroke: #ff6b8a; }
    .pinned-project-card.content .ring-fill { stroke: #ffb347; }
    .pinned-project-card.tools .ring-fill { stroke: #00d4d4; }
    .pinned-project-card.evenant .ring-fill { stroke: #6b8aff; }
    .pinned-project-card.personal .ring-fill { stroke: #a78bfa; }
    .pinned-project-card.business .ring-fill { stroke: #8bc34a; }

    .pinned-project-card .pinned-progress-value {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      font-weight: 400;
      color: #fff;
    }

    .pinned-project-card .pinned-progress-value .unit {
      font-size: 9px;
      opacity: 0.5;
    }

    /* Settings dropdown for pinned project */
    .pinned-settings-container {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 10;
    }

    .pinned-settings-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.15s;
    }

    .pinned-project-card:hover .pinned-settings-btn {
      opacity: 1;
    }

    .pinned-settings-btn:hover {
      background: rgba(0, 0, 0, 0.6);
      color: rgba(255, 255, 255, 0.9);
    }

    .pinned-settings-btn svg {
      width: 16px;
      height: 16px;
    }

    .pinned-settings-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 180px;
      background: rgba(30, 28, 35, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 6px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: all 0.15s ease;
    }

    .pinned-settings-dropdown.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .pinned-settings-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      background: transparent;
      border: none;
      border-radius: 8px;
      color: var(--text-secondary);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s;
      text-align: left;
    }

    .pinned-settings-item:hover {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-primary);
    }

    .pinned-settings-item svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .pinned-settings-item.danger {
      color: #ef4444;
    }

    .pinned-settings-item.danger:hover {
      background: rgba(239, 68, 68, 0.1);
      color: #f87171;
    }

    .pinned-settings-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.08);
      margin: 4px 0;
    }

    .btn-ghost {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--text-secondary);
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

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

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

    /* Empty North Star State */
    .north-star-empty {
      text-align: center;
      padding: 48px;
    }

    .north-star-empty-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      color: var(--text-tertiary);
      opacity: 0.5;
    }

    .north-star-empty h3 {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 8px;
      color: var(--text-primary);
    }

    .north-star-empty p {
      font-size: 14px;
      color: var(--text-tertiary);
      margin-bottom: 24px;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Projects Navigation */
    .projects-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    .projects-tabs {
      display: flex;
      gap: 4px;
      background: rgba(255, 255, 255, 0.02);
      padding: 4px;
      border-radius: 10px;
      border: 1px solid var(--border-subtle);
    }

    .projects-tab {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-tertiary);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.15s;
    }

    .projects-tab:hover {
      color: var(--text-secondary);
    }

    .projects-tab.active {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-primary);
    }

    .projects-actions {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    /* View Toggle (List/Grid) */
    .view-toggle {
      display: flex;
      gap: 2px;
      background: rgba(255, 255, 255, 0.03);
      padding: 3px;
      border-radius: 8px;
      border: 1px solid var(--border-subtle);
    }

    .view-toggle-btn {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-tertiary);
      transition: all 0.15s;
    }

    .view-toggle-btn:hover {
      color: var(--text-secondary);
      background: rgba(255, 255, 255, 0.03);
    }

    .view-toggle-btn.active {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text-primary);
    }

    .view-toggle-btn svg {
      width: 16px;
      height: 16px;
    }

    /* Filter Dropdown */
    .filter-dropdown-container {
      position: relative;
    }

    .filter-toggle-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: transparent;
      border: 1px solid var(--border-subtle);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-tertiary);
      transition: all 0.15s;
      position: relative;
    }

    .filter-toggle-btn:hover {
      color: var(--text-primary);
      border-color: var(--text-tertiary);
      background: rgba(255, 255, 255, 0.03);
    }

    .filter-toggle-btn.active {
      color: var(--primary);
      border-color: var(--primary);
      background: rgba(0, 212, 212, 0.1);
    }

    .filter-toggle-btn svg {
      width: 16px;
      height: 16px;
    }

    .filter-active-indicator {
      display: none;
      position: absolute;
      top: 4px;
      right: 4px;
      width: 6px;
      height: 6px;
      background: var(--primary);
      border-radius: 50%;
    }

    .filter-toggle-btn.has-filters .filter-active-indicator {
      display: block;
    }

    .filter-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 320px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      z-index: 100;
      padding: 16px;
    }

    .filter-dropdown.open {
      display: block;
    }

    .filter-dropdown-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-subtle);
    }

    .filter-dropdown-header span {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .filter-clear-btn {
      background: none;
      border: none;
      font-size: 11px;
      color: var(--text-tertiary);
      cursor: pointer;
      transition: color 0.15s;
    }

    .filter-clear-btn:hover {
      color: var(--primary);
    }

    .filter-section {
      margin-bottom: 14px;
    }

    .filter-section:last-child {
      margin-bottom: 0;
    }

    .filter-section-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-tertiary);
      margin-bottom: 8px;
    }

    .filter-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .filter-chip {
      padding: 5px 10px;
      font-size: 11px;
      border-radius: 14px;
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s;
    }

    .filter-chip:hover {
      border-color: var(--text-tertiary);
      background: rgba(255, 255, 255, 0.03);
    }

    .filter-chip.active {
      background: rgba(0, 212, 212, 0.15);
      border-color: var(--primary);
      color: var(--primary);
    }

    /* Minimal Add Project Button */
    .add-project-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: transparent;
      border: 1px dashed var(--border-subtle);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-tertiary);
      transition: all 0.15s;
    }

    .add-project-btn:hover {
      color: var(--primary);
      border-color: var(--primary);
      border-style: solid;
      box-shadow: 0 0 12px rgba(0, 212, 212, 0.3);
    }

    .add-project-btn.gallery-btn:hover {
      color: #fbbf24;
      border-color: #fbbf24;
      box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
    }

    .add-project-btn svg {
      width: 18px;
      height: 18px;
    }

    /* ========================================
       PROJECT CARDS - GRID VIEW
       ======================================== */
    
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
      gap: 10px;
      max-width: 1000px; /* Limit to ~4 cards */
    }

    /* Responsive grid */
    @media (max-width: 1200px) {
      .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
      }
    }
    
    @media (max-width: 768px) {
      .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(162px, 1fr));
        gap: 8px;
      }
    }
    
    @media (max-width: 480px) {
      .projects-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }
    }

    .project-card {
      aspect-ratio: 5 / 4;
      border-radius: 20px;
      padding: 16px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.2s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)), 
                  filter 0.2s ease-out, 
                  box-shadow 0.2s ease-out;
    }

    /* Background image layer */
    .card-bg-image {
      position: absolute;
      inset: -4px;
      z-index: 0;
      background-size: cover;
      background-position: center;
    }

    /* Gradient overlay layer - using gallery gradient classes */
    .card-gradient-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: 0.85;
    }
    
    /* Dark overlay for text readability */
    .card-dark-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.5) 100%
      );
    }
    
    /* Glass frame border */
    .card-frame {
      position: absolute;
      inset: 0;
      z-index: 3;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
      pointer-events: none;
    }
    
    /* Card content layer */
    .card-header, .card-center, .card-footer {
      position: relative;
      z-index: 4;
    }
    
    @media (max-width: 480px) {
      .project-card {
        padding: 10px;
        border-radius: 14px;
      }
    }

    .project-card:hover {
      transform: scale(1.02);
    }
    
    .project-card:hover .card-frame {
      border-color: rgba(255, 255, 255, 0.25);
      box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.4);
    }

    /* Category-specific gradient overrides (using gallery gradient library) */
    .project-card.music .card-gradient-overlay {
      background: 
        radial-gradient(ellipse at 30% 20%, rgba(255, 150, 100, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(200, 50, 80, 0.9) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(80, 20, 40, 1) 0%, rgba(30, 10, 20, 1) 100%);
    }
    .project-card.music .card-subtitle { color: rgba(255, 200, 180, 0.9); }

    .project-card.content .card-gradient-overlay {
      background: 
        radial-gradient(ellipse at 40% 30%, rgba(255, 220, 100, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 150, 50, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #2a2010 0%, #151005 100%);
    }
    .project-card.content .card-subtitle { color: rgba(255, 230, 180, 0.9); }

    .project-card.tools .card-gradient-overlay {
      background: 
        radial-gradient(ellipse at 35% 35%, rgba(0, 220, 220, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 70%, rgba(0, 150, 200, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #0a1520 0%, #051015 100%);
    }
    .project-card.tools .card-subtitle { color: rgba(180, 245, 245, 0.9); }

    .project-card.evenant .card-gradient-overlay {
      background: 
        radial-gradient(ellipse at 30% 30%, rgba(180, 120, 255, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(100, 50, 200, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #15102a 0%, #0a0515 100%);
    }
    .project-card.evenant .card-subtitle { color: rgba(200, 180, 255, 0.9); }

    .project-card.personal .card-gradient-overlay {
      background: 
        radial-gradient(ellipse at 40% 40%, rgba(100, 255, 180, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(50, 200, 150, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #0a1a15 0%, #051510 100%);
    }
    .project-card.personal .card-subtitle { color: rgba(180, 255, 220, 0.9); }

    .project-card.business .card-gradient-overlay {
      background: 
        radial-gradient(ellipse at 50% 20%, rgba(200, 150, 255, 0.6) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 80%, rgba(100, 80, 180, 0.8) 0%, transparent 50%),
        linear-gradient(180deg, #1a1030 0%, #0a0510 100%);
    }
    .project-card.business .card-subtitle { color: rgba(200, 180, 255, 0.9); }

    /* Card Content Layout */
    .card-header {
      display: flex;
      flex-direction: column;
      gap: 1px;
      z-index: 2;
    }

    .card-title {
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    @media (max-width: 480px) {
      .card-title {
        font-size: 13px;
      }
    }

    .card-subtitle {
      font-size: 12px;
      font-weight: 400;
      letter-spacing: -0.005em;
      opacity: 0.85;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    @media (max-width: 480px) {
      .card-subtitle {
        font-size: 10px;
      }
    }

    .card-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 2;
    }

    .progress-large {
      font-size: 52px;
      font-weight: 200;
      line-height: 1;
      letter-spacing: -0.03em;
    }
    
    @media (max-width: 480px) {
      .progress-large {
        font-size: 36px;
      }
    }

    .progress-large .unit {
      font-size: 20px;
      font-weight: 300;
      opacity: 0.55;
      vertical-align: super;
      margin-left: 1px;
    }
    
    .progress-large .perpetual-symbol {
      font-size: 58px;
      font-weight: 200;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.15);
    }
    
    .project-card.perpetual .card-frame {
      border-color: rgba(255, 255, 255, 0.12);
    }
    
    .project-card.perpetual:hover .card-frame {
      border-color: rgba(255, 255, 255, 0.2);
    }
    
    @media (max-width: 480px) {
      .progress-large .unit {
        font-size: 13px;
      }
    }

    @media (max-width: 480px) {
      .card-center {
        margin: 0 auto;
      }
    }

    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      z-index: 2;
    }

    .card-meta-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .card-status {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.5);
    }
    
    @media (max-width: 480px) {
      .card-status {
        font-size: 9px;
        gap: 4px;
      }
    }

    .card-status-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    .card-status-dot.active { 
      background: #4ade80; 
      box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
    }
    .card-status-dot.paused { 
      background: #fbbf24; 
      box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
    }
    .card-status-dot.idea { 
      background: #a78bfa; 
      box-shadow: 0 0 6px rgba(167, 139, 250, 0.5);
    }
    .card-status-dot.completed { 
      background: #6b7280; 
      box-shadow: 0 0 6px rgba(107, 114, 128, 0.4);
    }

    /* Glassmorphic alignment tag */
    .card-alignment {
      font-size: 8px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 5px 9px;
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.75);
    }
    
    @media (max-width: 480px) {
      .card-alignment {
        font-size: 7px;
        padding: 4px 6px;
      }
    }

    .card-alignment.direct {
      background: rgba(0, 0, 0, 0.4);
      color: rgba(255, 255, 255, 0.9);
    }

    /* Add Card in Grid */
    .add-card-grid {
      aspect-ratio: 5 / 4;
      border: 1px dashed rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.02);
      border-radius: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease-out;
      gap: 6px;
    }

    .add-card-grid:hover {
      border-color: rgba(255,255,255,0.25);
      background: rgba(255,255,255,0.04);
    }

    .add-card-grid-icon {
      font-size: 24px;
      font-weight: 300;
      color: rgba(255,255,255,0.2);
    }

    .add-card-grid-text {
      font-size: 11px;
      font-weight: 400;
      color: rgba(255,255,255,0.3);
    }

    /* Grid Section Headers */
    .grid-section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 36px 0 14px 0;
    }

    .grid-section-header:first-child {
      margin-top: 0;
    }

    .grid-section-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .grid-section-title {
      font-size: 12px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.45);
    }

    .grid-section-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .grid-section-count {
      font-size: 12px;
      font-weight: 400;
      color: rgba(255,255,255,0.25);
      margin-left: 4px;
    }

    .grid-section-add {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.4);
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      transition: all 0.15s ease;
    }

    .grid-section-header:hover .grid-section-add {
      opacity: 1;
    }

    .grid-section-add:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.8);
    }

    /* Inline Area Filter (for domains view) */
    .inline-area-filter {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      margin-left: 8px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      color: rgba(255, 255, 255, 0.35);
      font-size: 10px;
      cursor: pointer;
      transition: all 0.15s;
      opacity: 0;
    }

    .grid-section-header:hover .inline-area-filter,
    .inline-area-filter.active {
      opacity: 1;
    }

    .inline-area-filter:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.6);
    }

    .inline-area-filter.active {
      background: rgba(0, 212, 212, 0.1);
      border-color: rgba(0, 212, 212, 0.3);
      color: var(--primary);
    }

    .inline-area-filter svg {
      width: 11px;
      height: 11px;
    }

    .inline-area-count {
      font-size: 9px;
      opacity: 0.8;
    }

    /* Inline Area Tags (shown when filter is active) */
    .inline-area-tags {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 14px;
      padding-left: 18px;
    }

    /* Domain Sections (legacy - keeping for compatibility) */
    .domain-section {
      margin-bottom: 24px;
    }

    .domain-content {
      padding: 16px 0 0 0;
    }

    /* Area Filter Tags */
    .area-filter-tag {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      color: var(--text-secondary);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .area-filter-tag:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .area-filter-tag.active {
      background: rgba(0, 212, 212, 0.15);
      border-color: rgba(0, 212, 212, 0.4);
      color: var(--primary);
    }

    .area-filter-tag .tag-icon {
      font-size: 12px;
    }

    /* Area Groups (flat display) */
    .area-group {
      margin-bottom: 20px;
    }

    .area-group-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .area-group-icon {
      font-size: 16px;
    }

    .area-group-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .area-group-count {
      font-size: 10px;
      color: var(--text-tertiary);
      background: rgba(255, 255, 255, 0.04);
      padding: 2px 8px;
      border-radius: 10px;
      margin-left: auto;
    }

    .area-group-add {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      border: none;
      color: var(--text-tertiary);
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.15s;
    }

    .area-group-header:hover .area-group-add {
      opacity: 1;
    }

    .area-group-add:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-secondary);
    }

    /* Responsive domain/area adjustments */
    @media (max-width: 768px) {
      .domain-header {
        padding: 10px 14px;
      }
      
      .domain-title {
        font-size: 13px;
      }
      
      .area-filter-toggle {
        padding: 5px 10px;
        font-size: 11px;
      }
      
      .area-filter-tag {
        padding: 4px 10px;
        font-size: 11px;
      }
      
      .area-group-header {
        padding-bottom: 6px;
      }
      
      .area-group-icon {
        font-size: 14px;
      }
      
      .area-group-name {
        font-size: 12px;
      }
    }
    
    @media (max-width: 480px) {
      .domain-header {
        padding: 8px 12px;
      }
      
      .domain-title {
        font-size: 12px;
      }
      
      .domain-count {
        font-size: 10px;
        padding: 1px 6px;
      }
      
      .area-filter-row {
        gap: 6px;
        margin-bottom: 12px;
      }
      
      .area-filter-toggle {
        padding: 4px 8px;
        font-size: 10px;
      }
      
      .area-filter-tag {
        padding: 3px 8px;
        font-size: 10px;
      }
      
      .area-group {
        margin-bottom: 14px;
      }
      
      .area-group-header {
        margin-bottom: 8px;
      }
    }

    /* Alignment Sections */
    .alignment-sections {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .alignment-section {
      background: rgba(18, 18, 26, 0.7);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 16px;
      overflow: hidden;
    }

    .alignment-section.direct {
      border-color: rgba(245, 230, 211, 0.15);
      box-shadow: 0 0 40px rgba(245, 230, 211, 0.03);
    }

    .alignment-section.supporting {
      border-color: rgba(0, 212, 212, 0.1);
    }

    .alignment-section.adjacent,
    .alignment-section.exploratory {
      background: rgba(255, 255, 255, 0.02);
      border-style: dashed;
    }

    .alignment-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .alignment-header:hover {
      background: rgba(255, 255, 255, 0.02);
    }

    .alignment-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .alignment-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .alignment-indicator.direct { background: var(--align-direct); box-shadow: 0 0 8px var(--align-direct); }
    .alignment-indicator.supporting { background: var(--align-supporting); }
    .alignment-indicator.adjacent { background: var(--align-adjacent); }
    .alignment-indicator.exploratory { background: var(--align-exploratory); }

    .alignment-title {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-secondary);
    }

    .alignment-count {
      font-size: 12px;
      color: var(--text-tertiary);
      background: rgba(255, 255, 255, 0.04);
      padding: 2px 8px;
      border-radius: 10px;
    }

    .alignment-chevron {
      width: 20px;
      height: 20px;
      color: var(--text-tertiary);
      transition: transform 0.2s ease;
    }

    .alignment-section.collapsed .alignment-chevron {
      transform: rotate(-90deg);
    }

    .alignment-projects {
      padding: 0 12px 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .alignment-section.collapsed .alignment-projects {
      display: none;
    }

    /* Project Row */
    .project-row-v2 {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 16px 20px;
      background: transparent;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1px solid rgba(255, 255, 255, 0.04);
      position: relative;
      overflow: hidden;
    }

    /* Alignment gradient tint */
    .project-row-v2::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.08;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }

    .project-row-v2:hover::before {
      opacity: 0.14;
    }

    .project-row-v2:hover {
      border-color: rgba(255, 255, 255, 0.08);
    }

    .project-row-v2.direct::before {
      background: linear-gradient(90deg, rgba(74, 222, 128, 0.8) 0%, rgba(74, 222, 128, 0.2) 25%, transparent 50%);
    }

    .project-row-v2.supporting::before {
      background: linear-gradient(90deg, rgba(0, 212, 212, 0.8) 0%, rgba(0, 212, 212, 0.2) 25%, transparent 50%);
    }

    .project-row-v2.adjacent::before {
      background: linear-gradient(90deg, rgba(251, 191, 36, 0.8) 0%, rgba(251, 191, 36, 0.2) 25%, transparent 50%);
    }

    .project-row-v2.exploratory::before {
      background: linear-gradient(90deg, rgba(168, 85, 247, 0.8) 0%, rgba(168, 85, 247, 0.2) 25%, transparent 50%);
    }

    .project-row-v2.selected {
      background: rgba(0, 212, 212, 0.08);
      border-color: rgba(0, 212, 212, 0.2);
    }

    .project-icon-v2 {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      z-index: 1;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* Background image layer */
    .project-icon-v2 .icon-bg-image {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
    }

    /* Gradient overlay layer */
    .project-icon-v2 .icon-gradient-overlay {
      position: absolute;
      inset: 0;
      opacity: 0;
    }

    .project-icon-v2 svg {
      width: 22px;
      height: 22px;
      position: relative;
      z-index: 2;
    }

    .project-icon-v2.has-image svg {
      display: none;
    }

    .project-info-v2 {
      flex: 1;
      min-width: 0;
      position: relative;
      z-index: 1;
    }

    .project-title-v2 {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .project-meta-v2 {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.45);
    }

    .project-meta-v2 .meta-dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.25);
    }

    /* Alignment badge in project row */
    .project-alignment-badge {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 4px 8px;
      border-radius: 5px;
    }

    .project-alignment-badge.direct {
      background: rgba(74, 222, 128, 0.2);
      color: #86efac;
    }

    .project-alignment-badge.supporting {
      background: rgba(0, 212, 212, 0.2);
      color: #5eead4;
    }

    .project-alignment-badge.adjacent {
      background: rgba(251, 191, 36, 0.2);
      color: #fcd34d;
    }

    .project-alignment-badge.exploratory {
      background: rgba(168, 85, 247, 0.2);
      color: #c4b5fd;
    }

    .project-category-badge {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      font-weight: 500;
    }

    .project-area-badge {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 400;
      color: var(--text-tertiary);
      background: rgba(255, 255, 255, 0.04);
    }

    /* Category colors */
    .cat-music { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
    .cat-content { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
    .cat-evenant { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
    .cat-tools { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
    .cat-business { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
    .cat-personal { background: rgba(100, 116, 139, 0.15); color: #64748b; }

    /* Progress Bar */
    .project-progress {
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 1;
      flex-shrink: 0;
    }

    .progress-bar-v2 {
      width: 100px;
      height: 4px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-fill-v2 {
      height: 100%;
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .progress-fill-v2.direct { background: linear-gradient(90deg, #4ade80, #86efac); }
    .progress-fill-v2.supporting { background: linear-gradient(90deg, #00d4d4, #5eead4); }
    .progress-fill-v2.adjacent { background: linear-gradient(90deg, #fbbf24, #fcd34d); }
    .progress-fill-v2.exploratory { background: linear-gradient(90deg, #a855f7, #c4b5fd); }

    .progress-text {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
      min-width: 36px;
      text-align: right;
    }

    /* Project Date */
    .project-date {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
      flex-shrink: 0;
      min-width: 60px;
      text-align: right;
      position: relative;
      z-index: 1;
    }

    .project-date.soon {
      color: #fbbf24;
    }

    .project-date.overdue {
      color: #ff6b6b;
    }

    /* Row chevron */
    .row-chevron {
      width: 18px;
      height: 18px;
      color: rgba(255, 255, 255, 0.2);
      position: relative;
      z-index: 1;
      transition: color 0.15s ease;
      flex-shrink: 0;
    }

    .project-row-v2:hover .row-chevron {
      color: rgba(255, 255, 255, 0.4);
    }

    /* Status Badge */
    .status-badge-v2 {
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .status-badge-v2.active { background: rgba(52, 211, 153, 0.12); color: var(--success); }
    .status-badge-v2.paused { background: rgba(251, 191, 36, 0.12); color: var(--warning); }
    .status-badge-v2.idea { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
    .status-badge-v2.completed { background: rgba(6, 182, 212, 0.12); color: var(--primary); }

    .status-badge-v2 svg {
      width: 12px;
      height: 12px;
    }

    /* Project Actions */
    .project-actions-v2 {
      opacity: 0;
      transition: opacity 0.15s;
    }

    .project-row-v2:hover .project-actions-v2 {
      opacity: 1;
    }

    .action-btn {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: transparent;
      border: none;
      color: var(--text-tertiary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }

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

    .action-btn svg {
      width: 16px;
      height: 16px;
    }

    .action-btn.focus-btn:hover {
      background: rgba(0, 212, 212, 0.15);
      color: var(--primary);
    }

    /* ============ DOMAIN SECTIONS ============ */
    .domain-sections {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .domain-section {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.2s;
    }

    .domain-section:hover {
      border-color: rgba(255, 255, 255, 0.1);
    }

    .domain-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .domain-header:hover {
      background: rgba(255, 255, 255, 0.02);
    }

    .domain-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .domain-indicator {
      width: 12px;
      height: 12px;
      border-radius: 4px;
    }

    .domain-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .domain-chevron {
      width: 18px;
      height: 18px;
      color: var(--text-tertiary);
      transition: transform 0.2s;
    }

    .domain-section.collapsed .domain-chevron {
      transform: rotate(-90deg);
    }

    .domain-projects {
      padding: 0 12px 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Alignment Badge in Domain View */
    .project-alignment-badge {
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .project-alignment-badge.alignment-direct {
      background: rgba(245, 230, 211, 0.15);
      color: var(--align-direct);
    }

    .project-alignment-badge.alignment-supporting {
      background: rgba(0, 212, 212, 0.15);
      color: var(--align-supporting);
    }

    .project-alignment-badge.alignment-adjacent {
      background: rgba(107, 122, 153, 0.15);
      color: var(--align-adjacent);
    }

    .project-alignment-badge.alignment-exploratory {
      background: rgba(139, 122, 168, 0.15);
      color: var(--align-exploratory);
    }

    /* Someday Section */
    .someday-section {
      margin-top: 32px;
      padding-top: 32px;
      border-top: 1px dashed rgba(255, 255, 255, 0.06);
    }

    .someday-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .someday-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .someday-title svg {
      width: 18px;
      height: 18px;
      color: var(--align-exploratory);
    }

    .someday-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
    }

    .someday-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px dashed rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 16px;
      opacity: 0.7;
      cursor: pointer;
      transition: all 0.2s;
    }

    .someday-card:hover {
      opacity: 1;
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(139, 122, 168, 0.3);
    }

    .someday-card-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .someday-card-desc {
      font-size: 12px;
      color: var(--text-tertiary);
      margin-bottom: 12px;
    }

    .someday-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .someday-date {
      font-size: 11px;
      color: var(--text-tertiary);
    }

    .btn-activate {
      opacity: 0;
      padding: 4px 12px;
      font-size: 11px;
      background: rgba(139, 122, 168, 0.2);
      border: 1px solid rgba(139, 122, 168, 0.3);
      color: var(--align-exploratory);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .someday-card:hover .btn-activate {
      opacity: 1;
    }

    .btn-activate:hover {
      background: rgba(139, 122, 168, 0.3);
    }

    /* Empty alignment state */
    .alignment-empty {
      padding: 24px;
      text-align: center;
      color: var(--text-tertiary);
      font-size: 13px;
    }

    /* Add project button in section */
    .add-project-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px;
      margin: 8px 4px;
      border: 1px dashed rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      color: var(--text-tertiary);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .add-project-row:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(6, 182, 212, 0.05);
    }

    .add-project-row svg {
      width: 16px;
      height: 16px;
    }

    /* Alignment Options (Modal) */
    .alignment-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .alignment-option {
      cursor: pointer;
    }

    .alignment-option input {
      display: none;
    }

    .alignment-option-content {
      padding: 12px;
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.02);
      transition: all 0.15s;
    }

    .alignment-option input:checked + .alignment-option-content {
      background: rgba(255, 255, 255, 0.05);
      border-width: 2px;
    }

    .alignment-option:hover .alignment-option-content {
      background: rgba(255, 255, 255, 0.04);
    }

    .alignment-option-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .alignment-option-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
    }

    .alignment-option-desc {
      font-size: 11px;
      color: var(--text-tertiary);
      margin: 0;
    }

    /* North Star Criteria List */
    #ns-criteria-list .criterion-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: var(--bg-surface);
      border-radius: 6px;
      margin-bottom: 6px;
    }

    #ns-criteria-list .criterion-item span {
      flex: 1;
      font-size: 13px;
    }

    #ns-criteria-list .criterion-remove {
      width: 20px;
      height: 20px;
      border: none;
      background: transparent;
      color: var(--text-tertiary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }

    #ns-criteria-list .criterion-remove:hover {
      background: rgba(248, 113, 113, 0.2);
      color: var(--destructive);
    }

    /* Project Image Upload */
    .image-upload-section {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-subtle);
    }

    .image-upload-label {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }

    .image-upload-container {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .image-upload-preview {
      width: 120px;
      height: 96px;
      border-radius: 12px;
      background: var(--bg-elevated);
      border: 2px dashed var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }

    .image-upload-preview:hover {
      border-color: var(--primary);
      background: rgba(0, 212, 212, 0.05);
    }

    .image-upload-preview.has-image {
      border-style: solid;
      border-color: var(--border-subtle);
    }

    .image-upload-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .image-upload-preview .upload-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      color: var(--text-tertiary);
    }

    .image-upload-preview .upload-placeholder svg {
      width: 24px;
      height: 24px;
      opacity: 0.5;
    }

    .image-upload-preview .upload-placeholder span {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .image-upload-controls {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .image-opacity-control {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .image-opacity-control label {
      font-size: 12px;
      color: var(--text-secondary);
      display: flex;
      justify-content: space-between;
    }

    .image-upload-actions {
      display: flex;
      gap: 8px;
    }

    .image-upload-actions button {
      padding: 6px 12px;
      font-size: 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .btn-upload-image {
      background: var(--bg-elevated);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
    }

    .btn-upload-image:hover {
      background: var(--bg-surface);
      border-color: var(--primary);
      color: var(--primary);
    }

    .btn-remove-image {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-tertiary);
    }

    .btn-remove-image:hover {
      color: var(--destructive);
      background: rgba(248, 113, 113, 0.1);
    }

    /* ============ PROJECT FOCUS MODAL - TWO COLUMN ============ */
    /* ========================================
       PROJECT ZEN MODAL (Single Column)
       ======================================== */
    .focus-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.25s ease;
      padding: 40px;
    }

    .focus-modal-overlay.open {
      opacity: 1;
      visibility: visible;
    }

    .focus-modal-container {
      width: 100%;
      max-width: 560px;
      height: calc(100vh - 48px);
      max-height: none;
      background: #111113;
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: translateY(20px) scale(0.98);
      opacity: 0;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .focus-modal-overlay.open .focus-modal-container {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    /* Modal Header */
    .focus-modal-header {
      padding: 20px 24px 0;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .focus-header-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .focus-header-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.8);
    }

    .focus-header-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Modal Body */
    .focus-modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 32px 48px 48px;
      min-height: 0;
    }

    .focus-modal-body::-webkit-scrollbar {
      width: 4px;
    }

    .focus-modal-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .focus-modal-body::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 2px;
    }

    /* Project Header (Centered) */
    .focus-project-header {
      text-align: center;
      margin-bottom: 32px;
    }

    .focus-hero-title {
      font-size: 28px;
      font-weight: 600;
      letter-spacing: -0.02em;
      margin-bottom: 12px;
      line-height: 1.2;
      color: #fff;
    }

    .focus-project-meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .focus-meta-dot {
      width: 3px;
      height: 3px;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 50%;
    }

    .focus-alignment-badge {
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .focus-alignment-badge.direct {
      background: rgba(74, 222, 128, 0.12);
      color: #4ade80;
    }

    .focus-alignment-badge.supporting {
      background: rgba(0, 212, 212, 0.15);
      color: #00d4d4;
    }

    .focus-alignment-badge.adjacent {
      background: rgba(251, 191, 36, 0.12);
      color: #fbbf24;
    }

    .focus-alignment-badge.exploratory {
      background: rgba(168, 85, 247, 0.12);
      color: #a855f7;
    }

    /* Progress bar */
    .focus-project-progress {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }

    .focus-progress-bar {
      width: 180px;
      height: 3px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 2px;
      overflow: hidden;
    }

    .focus-progress-fill {
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .focus-progress-text {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.35);
    }

    /* Tabs */
    .focus-tab-selector {
      display: flex;
      justify-content: center;
      gap: 4px;
      margin-bottom: 32px;
    }

    .focus-tab-btn {
      padding: 8px 20px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .focus-tab-btn:hover {
      color: rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.04);
    }

    .focus-tab-btn.active {
      color: #fff;
      background: rgba(255, 255, 255, 0.08);
    }

    /* Tab Content */
    .focus-tab-content {
      display: none;
    }

    .focus-tab-content.active {
      display: block;
    }

    /* Divider */
    .focus-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.06);
      margin: 24px 0;
    }

    /* Section */
    .focus-section {
      margin-bottom: 8px;
    }

    .focus-section-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.25);
      margin-bottom: 12px;
    }

    /* Description */
    .focus-description-content {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.7);
      white-space: pre-wrap;
      word-wrap: break-word;
    }

    .focus-description-empty {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.25);
      font-style: italic;
      white-space: normal;
    }

    /* Tasks */
    .focus-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .focus-section-count {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.25);
    }

    .focus-tasks-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .focus-task-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.1s ease;
    }

    .focus-task-item:hover {
      background: rgba(255, 255, 255, 0.02);
      margin: 0 -12px;
      padding: 10px 12px;
    }

    .focus-task-checkbox {
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      cursor: pointer;
    }

    .focus-task-checkbox:hover {
      border-color: rgba(255, 255, 255, 0.4);
    }

    .focus-task-checkbox.completed {
      background: #06b6d4;
      border-color: #06b6d4;
    }

    .focus-task-checkbox.completed svg {
      width: 10px;
      height: 10px;
      color: #fff;
    }

    .focus-task-title {
      flex: 1;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
    }

    .focus-task-item.completed .focus-task-title {
      color: rgba(255, 255, 255, 0.35);
      text-decoration: line-through;
    }

    .focus-add-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.25);
      cursor: pointer;
      transition: color 0.15s ease;
    }

    .focus-add-item:hover {
      color: rgba(255, 255, 255, 0.5);
    }

    .focus-add-item svg {
      width: 14px;
      height: 14px;
    }

    /* Notes */
    .focus-notes-textarea {
      width: 100%;
      min-height: 120px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 10px;
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.8);
      font-family: inherit;
      resize: vertical;
      transition: all 0.15s ease;
    }

    .focus-notes-textarea::placeholder {
      color: rgba(255, 255, 255, 0.25);
    }

    .focus-notes-textarea:hover {
      border-color: rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.04);
    }

    .focus-notes-textarea:focus {
      outline: none;
      border-color: rgba(255, 255, 255, 0.15);
      background: rgba(255, 255, 255, 0.05);
    }

    /* Inspiration Tab */
    .focus-inspiration-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .focus-inspiration-count {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.4);
    }

    .focus-add-inspiration-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .focus-add-inspiration-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .focus-inspiration-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .focus-insp-card {
      aspect-ratio: 1;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      overflow: hidden;
      position: relative;
    }

    .focus-insp-card:hover {
      border-color: rgba(255, 255, 255, 0.1);
    }

    .focus-insp-thumbnail {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
    }

    .focus-insp-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .focus-insp-card:hover .focus-insp-overlay {
      opacity: 1;
    }

    .focus-insp-content {
      position: absolute;
      inset: 0;
      padding: 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .focus-insp-card:hover .focus-insp-content {
      opacity: 1;
    }

    .focus-insp-type {
      align-self: flex-start;
      padding: 3px 6px;
      border-radius: 3px;
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #fff;
      background: rgba(0, 212, 212, 0.9);
    }

    .focus-insp-type.video { background: rgba(236, 72, 153, 0.9); }
    .focus-insp-type.article { background: rgba(251, 191, 36, 0.9); }
    .focus-insp-type.track { background: rgba(139, 92, 246, 0.9); }

    .focus-insp-bottom {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .focus-insp-title {
      font-size: 10px;
      font-weight: 600;
      color: #fff;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .focus-insp-source {
      font-size: 9px;
      color: rgba(255, 255, 255, 0.5);
    }

    /* Inspiration Empty State */
    .focus-inspiration-empty {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 20px;
      text-align: center;
      color: rgba(255, 255, 255, 0.3);
    }

    .focus-inspiration-empty.visible {
      display: flex;
    }

    .focus-inspiration-empty svg {
      margin-bottom: 12px;
      opacity: 0.4;
    }

    .focus-inspiration-empty p {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
      margin: 0 0 4px 0;
    }

    .focus-inspiration-empty span {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.3);
    }

    /* Add Item Card in Inspiration Grid */
    .focus-insp-add {
      aspect-ratio: 1;
      border: 1px dashed rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.02);
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.2);
      transition: all 0.15s ease;
    }

    .focus-insp-add:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.4);
    }

    .focus-insp-add svg {
      width: 20px;
      height: 20px;
    }

    /* Hide old elements */
    .focus-exit-btn,
    .focus-left-column,
    .focus-hero-card,
    .focus-stats-card,
    .focus-right-column,
    .focus-description-section,
    .focus-content-card,
    .focus-section-divider {
      display: none !important;
    }

    /* Mobile responsive */
    @media (max-width: 640px) {
      .focus-modal-overlay {
        padding: 12px;
      }
      
      .focus-modal-container {
        height: calc(100vh - 24px);
        max-height: none;
      }
      
      .focus-modal-body {
        padding: 24px 24px 32px;
      }
      
      .focus-hero-title {
        font-size: 24px;
      }
      
      .focus-inspiration-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .focus-links-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 8px;
    }

    .focus-link-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .focus-link-item:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    .focus-link-favicon {
      width: 24px;
      height: 24px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .focus-link-title {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .focus-add-item {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      padding: 4px 0;
      transition: color 0.15s ease;
    }

    .focus-add-item:hover {
      color: rgba(255, 255, 255, 0.6);
    }

    /* Add Link Modal */
    /* Inspiration Picker Modal */
    .insp-picker-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(12px);
      z-index: 250;
      align-items: center;
      justify-content: center;
    }

    .insp-picker-overlay.open {
      display: flex;
    }

    .insp-picker-modal {
      background: #111113;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      width: 100%;
      max-width: 680px;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .insp-picker-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .insp-picker-title {
      font-size: 17px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }

    .insp-picker-close {
      width: 32px;
      height: 32px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .insp-picker-close:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .insp-picker-close svg {
      width: 16px;
      height: 16px;
      color: rgba(255, 255, 255, 0.5);
    }

    .insp-picker-tabs {
      display: flex;
      gap: 4px;
      padding: 12px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      background: rgba(255, 255, 255, 0.02);
    }

    .insp-picker-tab {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: transparent;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.45);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .insp-picker-tab:hover {
      background: rgba(255, 255, 255, 0.04);
      color: rgba(255, 255, 255, 0.7);
    }

    .insp-picker-tab.active {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.9);
    }

    .insp-picker-tab svg {
      width: 16px;
      height: 16px;
    }

    .insp-picker-body {
      flex: 1;
      overflow: hidden;
    }

    .insp-picker-content {
      display: none;
      height: 100%;
      flex-direction: column;
    }

    .insp-picker-content.active {
      display: flex;
    }

    .insp-picker-search {
      position: relative;
      padding: 16px 24px;
    }

    .insp-picker-search svg {
      position: absolute;
      left: 40px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      color: rgba(255, 255, 255, 0.3);
    }

    .insp-picker-search input {
      width: 100%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 12px 16px 12px 44px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.9);
      outline: none;
    }

    .insp-picker-search input:focus {
      border-color: rgba(255, 255, 255, 0.15);
    }

    .insp-picker-search input::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .insp-picker-categories {
      display: flex;
      gap: 6px;
      padding: 12px 24px;
      overflow-x: auto;
      flex-shrink: 0;
    }

    .insp-cat-btn {
      padding: 8px 14px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 6px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
    }

    .insp-cat-btn:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    .insp-cat-btn.active {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.9);
    }

    .insp-picker-grid {
      flex: 1;
      overflow-y: auto;
      padding: 8px 24px 24px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      align-content: start;
    }

    .insp-picker-loading {
      grid-column: 1 / -1;
      text-align: center;
      padding: 40px;
      color: rgba(255, 255, 255, 0.35);
      font-size: 13px;
    }

    .insp-picker-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 50px 20px;
    }

    .insp-picker-empty-icon {
      font-size: 36px;
      opacity: 0.4;
      margin-bottom: 12px;
    }

    .insp-picker-empty-text {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.35);
    }

    .insp-picker-item {
      position: relative;
      aspect-ratio: 1;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s ease;
      background: rgba(255, 255, 255, 0.03);
      border: 2px solid transparent;
    }

    .insp-picker-item:hover {
      transform: scale(1.03);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .insp-picker-item.selected {
      border-color: rgba(16, 185, 129, 0.6);
    }

    .insp-picker-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .insp-picker-item-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(transparent 50%, rgba(0,0,0,0.7));
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .insp-picker-item:hover .insp-picker-item-overlay {
      opacity: 1;
    }

    .insp-picker-item-title {
      position: absolute;
      bottom: 8px;
      left: 8px;
      right: 8px;
      font-size: 11px;
      color: white;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .insp-picker-item:hover .insp-picker-item-title {
      opacity: 1;
    }

    .insp-picker-item-check {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 24px;
      height: 24px;
      background: rgba(16, 185, 129, 0.9);
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .insp-picker-item.selected .insp-picker-item-check {
      display: flex;
    }

    .insp-picker-item-check svg {
      width: 14px;
      height: 14px;
      color: white;
    }

    /* Add New Tab */
    #insp-tab-new {
      padding: 24px;
      overflow-y: auto;
    }

    .insp-new-section {
      margin-bottom: 8px;
    }

    .insp-new-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: 12px;
    }

    .insp-url-row {
      display: flex;
      gap: 10px;
    }

    .insp-url-input {
      flex: 1;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 14px 16px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.9);
      outline: none;
    }

    .insp-url-input:focus {
      border-color: rgba(255, 255, 255, 0.15);
    }

    .insp-url-input::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .insp-url-btn {
      padding: 14px 24px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .insp-url-btn:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    .insp-url-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .insp-preview {
      margin-top: 16px;
      padding: 14px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 10px;
      display: none;
      gap: 14px;
      align-items: center;
    }

    .insp-preview.visible {
      display: flex;
    }

    .insp-preview-thumb {
      width: 80px;
      height: 60px;
      background-size: cover;
      background-position: center;
      border-radius: 6px;
      flex-shrink: 0;
    }

    .insp-preview-info {
      flex: 1;
      min-width: 0;
    }

    .insp-preview-title {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .insp-preview-source {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
    }

    .insp-new-divider {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 24px 0;
    }

    .insp-new-divider::before,
    .insp-new-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(255, 255, 255, 0.06);
    }

    .insp-new-divider span {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.3);
      text-transform: uppercase;
    }

    .insp-upload-zone {
      border: 2px dashed rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 40px 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .insp-upload-zone:hover {
      border-color: rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.02);
    }

    .insp-upload-zone.dragover {
      border-color: rgba(16, 185, 129, 0.5);
      background: rgba(16, 185, 129, 0.05);
    }

    .insp-upload-zone svg {
      width: 32px;
      height: 32px;
      color: rgba(255, 255, 255, 0.3);
      margin-bottom: 12px;
    }

    .insp-upload-zone span {
      display: block;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
    }

    .insp-upload-hint {
      font-size: 11px !important;
      color: rgba(255, 255, 255, 0.25) !important;
      margin-top: 6px;
    }

    .insp-upload-preview {
      margin-top: 16px;
      display: none;
    }

    .insp-upload-preview.visible {
      display: block;
    }

    .insp-upload-preview-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 10px;
    }

    .insp-upload-preview-img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 6px;
    }

    .insp-upload-preview-info {
      flex: 1;
    }

    .insp-upload-preview-name {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 4px;
    }

    .insp-upload-preview-size {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
    }

    .insp-upload-preview-btn {
      padding: 10px 20px;
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.3);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(16, 185, 129, 0.9);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .insp-upload-preview-btn:hover {
      background: rgba(16, 185, 129, 0.25);
    }

    .insp-upload-preview-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Responsive */
    @media (max-width: 700px) {
      .insp-picker-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Responsive */
    @media (max-width: 900px) {
      .focus-modal-container {
        flex-direction: column;
      }
      
      .focus-left-column {
        width: 100%;
      }
      
      .focus-hero-card {
        aspect-ratio: 16/9;
      }
      
      .focus-right-column {
        height: auto;
        max-height: none;
        min-height: 300px;
      }
    }

    /* Legacy support - keep pm- classes for JS compatibility */
    .project-modal {
      display: none;
    }

    /* ============ NORTH STAR VISION BOARD ============ */
    .vision-board-overlay {
      position: fixed;
      inset: 0;
      background: rgba(5, 5, 10, 0.92);
      backdrop-filter: blur(20px);
      z-index: 300;
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
      overflow-y: auto;
    }

    .vision-board-overlay.open {
      opacity: 1;
      visibility: visible;
    }

    .vision-board {
      max-width: 1100px;
      margin: 0 auto;
      padding: 24px 40px 40px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: 0.1s;
    }

    .vision-board-overlay.open .vision-board {
      transform: translateY(0);
      opacity: 1;
    }

    .vision-board-close {
      position: fixed;
      top: 24px;
      right: 24px;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      z-index: 301;
    }

    .vision-board-close:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-primary);
    }

    .vision-board-close svg {
      width: 24px;
      height: 24px;
    }

    /* Large Centered Header (Apple-style) */
    .vision-board-header {
      text-align: center;
      padding: 48px 0 32px;
      position: relative;
    }

    .vision-board-star {
      width: 72px;
      height: 72px;
      margin: 0 auto 20px;
      position: relative;
    }

    .vision-board-star svg {
      width: 100%;
      height: 100%;
      color: var(--align-direct);
      filter: drop-shadow(0 0 30px rgba(245, 230, 211, 0.4));
    }

    .vision-board-star::before {
      content: '';
      position: absolute;
      inset: -20px;
      background: radial-gradient(circle, rgba(245, 230, 211, 0.15) 0%, transparent 70%);
      animation: visionPulse 3s ease-in-out infinite;
    }

    @keyframes visionPulse {
      0%, 100% { opacity: 0.5; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.1); }
    }

    .vision-board-title {
      font-size: 32px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }

    .vision-board-description {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.6;
      max-width: 700px;
      margin: 0 auto;
    }

    /* Timeline inside header area */
    .vision-timeline {
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.01) 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 16px;
      padding: 24px 32px;
      margin-bottom: 24px;
    }

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

    .vision-timeline-dates {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text-tertiary);
      margin-bottom: 10px;
    }

    .vision-timeline-bar {
      height: 6px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }

    .vision-timeline-progress {
      height: 100%;
      background: linear-gradient(90deg, var(--align-direct), rgba(245, 230, 211, 0.6));
      border-radius: 3px;
      position: relative;
      min-width: 12px;
    }

    .vision-timeline-progress::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(50%, -50%);
      width: 12px;
      height: 12px;
      background: var(--align-direct);
      border-radius: 50%;
      box-shadow: 0 0 16px rgba(245, 230, 211, 0.5);
    }

    .vision-timeline-stats {
      display: flex;
      justify-content: center;
      gap: 48px;
      margin-top: 20px;
    }

    .vision-stat {
      text-align: center;
    }

    .vision-stat-value {
      font-size: 28px;
      font-weight: 300;
      color: var(--text-primary);
      line-height: 1;
    }

    .vision-stat-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-tertiary);
      margin-top: 6px;
    }

    /* Two Column Layout - now stacked vertically for consistency */
    .vision-columns {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 20px;
    }

    .vision-timeline-stats {
      display: flex;
      justify-content: center;
      gap: 48px;
      margin-top: 20px;
    }

    .vision-stat {
      text-align: center;
    }

    .vision-stat-value {
      font-size: 28px;
      font-weight: 300;
      color: var(--text-primary);
      line-height: 1;
    }

    .vision-stat-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-tertiary);
      margin-top: 6px;
    }

    /* Vision Card (shared styles) */
    .vision-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 16px;
      padding: 20px 24px;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .vision-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .vision-section-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-tertiary);
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
    }

    .vision-section-title svg {
      width: 16px;
      height: 16px;
    }

    .vision-card-edit {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--text-tertiary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.15s;
    }

    .vision-card:hover .vision-card-edit {
      opacity: 1;
    }

    .vision-card-edit:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-primary);
    }

    .vision-card-edit svg {
      width: 14px;
      height: 14px;
    }

    /* Goals/Deliverables */
    .vision-goals-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
    }

    .vision-goal-item {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      padding: 16px;
      transition: all 0.15s;
    }

    .vision-goal-item:hover {
      border-color: rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.04);
    }

    .vision-goal-item.completed {
      opacity: 0.6;
    }

    .vision-goal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .vision-goal-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      line-height: 1.3;
    }

    .vision-goal-item.completed .vision-goal-title {
      text-decoration: line-through;
      color: var(--text-tertiary);
    }

    .vision-goal-count {
      font-size: 12px;
      font-weight: 500;
      color: var(--align-direct);
      white-space: nowrap;
    }

    .vision-goal-bar {
      height: 4px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 2px;
      overflow: hidden;
    }

    .vision-goal-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--align-direct), rgba(245, 230, 211, 0.7));
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .vision-goals-empty {
      text-align: center;
      padding: 24px;
      color: var(--text-tertiary);
      font-size: 13px;
    }

    .vision-goals-empty button {
      margin-top: 12px;
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 13px;
      transition: all 0.15s;
    }

    .vision-goals-empty button:hover {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text-primary);
    }

    /* Success Criteria */
    .vision-criteria-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      overflow-y: auto;
    }

    .vision-criterion {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 10px;
      transition: all 0.15s;
    }

    .vision-criterion:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    .vision-criterion-check {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.15s;
    }

    .vision-criterion-check:hover {
      border-color: var(--success);
    }

    .vision-criterion-check.checked {
      background: var(--success);
      border-color: var(--success);
    }

    .vision-criterion-check svg {
      width: 12px;
      height: 12px;
      color: white;
      opacity: 0;
    }

    .vision-criterion-check.checked svg {
      opacity: 1;
    }

    .vision-criterion-text {
      font-size: 13px;
      color: var(--text-primary);
      line-height: 1.4;
    }

    .vision-criterion.completed .vision-criterion-text {
      text-decoration: line-through;
      color: var(--text-tertiary);
    }

    /* Connected Projects */
    .vision-projects-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      overflow-y: auto;
    }

    .vision-project-card {
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .vision-project-card:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .vision-project-card-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .vision-project-card-icon svg {
      width: 16px;
      height: 16px;
    }

    .vision-project-card-content {
      flex: 1;
      min-width: 0;
    }

    .vision-project-card-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 6px;
    }

    .vision-project-card-progress {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .vision-project-card-bar {
      flex: 1;
      height: 4px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 2px;
      overflow: hidden;
    }

    .vision-project-card-fill {
      height: 100%;
      background: var(--align-direct);
      border-radius: 2px;
    }

    .vision-project-card-percent {
      font-size: 11px;
      color: var(--text-tertiary);
      min-width: 30px;
      text-align: right;
    }

    /* Vision Notes - Bottom Row */
    .vision-notes {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 16px;
      padding: 20px 24px;
      margin-top: 20px;
      position: relative;
    }

    .vision-notes-content {
      min-height: 60px;
      max-height: 100px;
      overflow-y: auto;
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.6;
      white-space: pre-wrap;
    }

    .vision-notes-content:empty::before {
      content: 'Add your thoughts, mantras, and reminders here...';
      color: var(--text-tertiary);
    }

    .vision-notes-content:focus {
      outline: none;
    }

    /* Responsive */
    @media (max-width: 800px) {
      .vision-board {
        padding: 20px;
      }
    }

    /* ============ SOLAR SYSTEM VIEW ============ */
    
    /* Cosmic Color Tokens */
    :root {
      --void: #000000;
      --void-elevated: #0a0a0f;
      --void-surface: #111116;
      
      --dust-grid: rgba(255, 255, 255, 0.04);
      --dust-ring: rgba(255, 255, 255, 0.12);
      --dust-ring-outer: rgba(255, 255, 255, 0.06);
      
      --star-bright: rgba(255, 255, 255, 0.95);
      --star-medium: rgba(255, 255, 255, 0.70);
      --star-dim: rgba(255, 255, 255, 0.40);
      --star-ghost: rgba(255, 255, 255, 0.15);
      
      --north-star-core: #fffcf5;
    }

    #tab-solar {
      background: var(--void);
      position: relative;
      overflow: hidden;
      flex-direction: column;
      height: calc(100vh - 64px);
    }
    
    #tab-solar.active {
      display: flex;
    }

    /* Vignette for depth */
    #tab-solar::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.6) 100%
      );
      pointer-events: none;
      z-index: 1;
    }

    /* Solar Controls Bar */
    .solar-controls {
      position: relative;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.5) 70%,
        transparent 100%
      );
    }

    .solar-controls-left,
    .solar-controls-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .solar-controls-center {
      flex: 1;
      display: flex;
      justify-content: center;
      max-width: 400px;
      margin: 0 auto;
    }

    .solar-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      color: var(--star-bright);
    }

    .solar-title-icon {
      font-size: 18px;
    }

    .solar-search-wrapper {
      position: relative;
      width: 100%;
    }

    .solar-search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      color: var(--star-dim);
    }

    .solar-search {
      width: 100%;
      height: 36px;
      padding: 0 12px 0 36px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      font-size: 13px;
      color: var(--star-bright);
      transition: all 0.2s ease;
    }

    .solar-search::placeholder {
      color: var(--star-dim);
    }

    .solar-search:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
    }

    .solar-filter-btn,
    .solar-add-btn {
      height: 36px;
      padding: 0 14px;
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--star-medium);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .solar-filter-btn:hover,
    .solar-add-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--star-bright);
    }

    /* Solar System Container */
    .solar-system-container {
      flex: 1;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .solar-system-svg {
      width: 95vmin;
      height: 95vmin;
      max-width: none;
      max-height: none;
    }

    /* Orbit Rings - MORE VISIBLE */
    .orbit-ring {
      fill: none;
      stroke-width: 1;
      pointer-events: none;
    }

    .orbit-ring[data-alignment="exploratory"] {
      stroke: rgba(255, 255, 255, 0.08);
      stroke-dasharray: 6 6;
    }

    .orbit-ring[data-alignment="adjacent"] {
      stroke: rgba(255, 255, 255, 0.10);
    }

    .orbit-ring[data-alignment="supporting"] {
      stroke: rgba(255, 255, 255, 0.12);
    }

    .orbit-ring[data-alignment="direct"] {
      stroke: rgba(255, 255, 255, 0.15);
    }

    /* Orbit Labels - SUBTLE, at top of rings only */
    .orbit-label {
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      fill: rgba(255, 255, 255, 0.25);
      text-anchor: middle;
    }

    /* North Star (Center Sun) - RADIANT */
    .north-star-group {
      cursor: pointer;
    }

    .north-star-core {
      filter: drop-shadow(0 0 20px rgba(255, 250, 240, 0.5))
              drop-shadow(0 0 40px rgba(255, 223, 150, 0.4))
              drop-shadow(0 0 60px rgba(255, 200, 100, 0.3))
              drop-shadow(0 0 100px rgba(255, 180, 80, 0.2));
    }

    .north-star-atmosphere {
      animation: north-star-breathe 8s ease-in-out infinite;
    }

    @keyframes north-star-breathe {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.7;
      }
    }

    .solar-ns-title-text {
      font-size: 10px;
      font-weight: 600;
      fill: rgba(40, 30, 10, 0.85);
      text-anchor: middle;
    }

    .north-star-countdown {
      font-size: 9px;
      font-weight: 500;
      fill: rgba(40, 30, 10, 0.6);
      text-anchor: middle;
      font-family: 'SF Mono', monospace;
    }

    /* Planet groups */
    .planet-group {
      cursor: pointer;
      transition: opacity 0.3s ease;
    }

    .planet-glow-outer,
    .planet-glow-inner {
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .planet-group:hover .planet-glow-outer {
      opacity: 0.18 !important;
    }

    .planet-group:hover .planet-glow-inner {
      opacity: 0.35 !important;
    }

    .planet-body {
      /* NO transform on hover - prevents jumping */
    }

    .planet-highlight {
      pointer-events: none;
    }

    .planet-label {
      /* Always visible */
      pointer-events: none;
    }

    /* Dimmed state when another planet is focused */
    .planet-group.dimmed {
      pointer-events: none;
    }

    .planet-group.dimmed .planet-glow-outer,
    .planet-group.dimmed .planet-glow-inner {
      opacity: 0.3;
    }

    /* Focused planet - no transform, just brighter */
    .planet-group.focused .planet-glow-outer {
      opacity: 0.25 !important;
    }
    
    .planet-group.focused .planet-glow-inner {
      opacity: 0.4 !important;
    }

    /* Filtered out */
    .planet-group.filtered-out {
      opacity: 0.08 !important;
      filter: saturate(0) brightness(0.4);
      pointer-events: none;
    }

    /* Moon styling */
    .moon {
      transition: opacity 0.2s ease;
    }

    .moon:hover circle {
      fill: rgba(255, 255, 255, 0.15);
      stroke: rgba(255, 255, 255, 0.4);
    }

    .moon-add:hover {
      opacity: 0.8 !important;
    }

    /* Moon entrance animation */
    @keyframes moon-enter {
      from {
        opacity: 0;
        transform: scale(0);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .moon {
      animation: moon-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    }

    .moon:nth-child(1) { animation-delay: 100ms; }
    .moon:nth-child(2) { animation-delay: 150ms; }
    .moon:nth-child(3) { animation-delay: 200ms; }
    .moon:nth-child(4) { animation-delay: 250ms; }
    .moon:nth-child(5) { animation-delay: 300ms; }
    .moon:nth-child(6) { animation-delay: 350ms; }
    .moon:nth-child(7) { animation-delay: 400ms; }
    .moon:nth-child(8) { animation-delay: 450ms; }

    /* Zoom hint */
    .solar-zoom-hint {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      padding: 8px 16px;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      font-size: 11px;
      color: var(--star-dim);
      opacity: 0.5;
      transition: opacity 0.3s ease;
      z-index: 10;
    }

    .solar-system-container:hover .solar-zoom-hint {
      opacity: 0;
    }

    /* Planet entrance animation */
    @keyframes planet-enter {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .planet-group {
      animation: planet-enter 0.5s ease-out backwards;
    }

    .planet-group[data-alignment="direct"] { animation-delay: 0ms; }
    .planet-group[data-alignment="supporting"] { animation-delay: 80ms; }
    .planet-group[data-alignment="adjacent"] { animation-delay: 160ms; }
    .planet-group[data-alignment="exploratory"] { animation-delay: 240ms; }

    /* Category Legend */
    .solar-legend {
      position: absolute;
      bottom: 24px;
      left: 24px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 10;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .legend-label {
      color: rgba(255,255,255,0.35);
      font-size: 10px;
      text-transform: capitalize;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--text-muted);
    }

    /* ================================
       LOADING STATES
       ================================ */

    /* Global loading overlay */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .loading-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(255, 255, 255, 0.1);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: loadingSpin 0.8s linear infinite;
    }

    .loading-spinner.small {
      width: 20px;
      height: 20px;
      border-width: 2px;
    }

    .loading-spinner.large {
      width: 56px;
      height: 56px;
      border-width: 4px;
    }

    @keyframes loadingSpin {
      to { transform: rotate(360deg); }
    }

    .loading-text {
      margin-top: 16px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: 0.02em;
    }

    /* Inline loading indicator for buttons */
    .btn-loading {
      position: relative;
      pointer-events: none;
      color: transparent !important;
    }

    .btn-loading::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      top: 50%;
      left: 50%;
      margin-left: -8px;
      margin-top: -8px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-top-color: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      animation: loadingSpin 0.6s linear infinite;
    }

    /* Content loading skeleton */
    .skeleton {
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%
      );
      background-size: 200% 100%;
      animation: skeletonShimmer 1.5s infinite;
      border-radius: 4px;
    }

    .skeleton-text {
      height: 14px;
      margin-bottom: 8px;
    }

    .skeleton-text:last-child {
      width: 60%;
    }

    .skeleton-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .skeleton-card {
      height: 100px;
      border-radius: 8px;
    }

    @keyframes skeletonShimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    /* Section loading state */
    .section-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      color: rgba(255, 255, 255, 0.4);
    }

    .section-loading .loading-spinner {
      margin-bottom: 12px;
    }

    /* Toast Notifications */
    .toast-container {
      position: fixed;
      bottom: 100px;
      right: 24px;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
    }

    .toast {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      pointer-events: auto;
      transform: translateX(120%);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
      max-width: 320px;
    }

    .toast.show {
      transform: translateX(0);
      opacity: 1;
    }

    .toast-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .toast-icon svg {
      width: 12px;
      height: 12px;
    }

    .toast.success .toast-icon {
      background: rgba(74, 222, 128, 0.2);
      color: #4ade80;
    }

    .toast.error .toast-icon {
      background: rgba(239, 68, 68, 0.2);
      color: #ef4444;
    }

    .toast.info .toast-icon {
      background: rgba(0, 212, 212, 0.2);
      color: var(--primary);
    }

    .toast-message {
      font-size: 13px;
      color: var(--text-primary);
      line-height: 1.4;
    }

    /* =====================================================
       TASK MANAGEMENT SYSTEM STYLES
       ===================================================== */

    /* Tasks Container */
    .tasks-container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 32px;
    }

    /* ========================================
       TASKS NAVIGATION - Matching Overview Style
       ======================================== */
    .tasks-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    .tasks-tabs {
      display: flex;
      gap: 4px;
      background: rgba(255, 255, 255, 0.02);
      padding: 4px;
      border-radius: 10px;
      border: 1px solid var(--border-subtle);
    }

    .tasks-tab {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-tertiary);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.15s;
    }

    .tasks-tab:hover {
      color: var(--text-secondary);
    }

    .tasks-tab.active {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-primary);
    }

    .tasks-actions {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    /* Filter checkbox in dropdown */
    .filter-checkbox-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 4px 0;
    }

    .filter-checkbox-row input {
      accent-color: var(--primary);
      width: 16px;
      height: 16px;
    }

    /* Locked In Banner */
    .tasks-locked-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      background: rgba(0, 212, 212, 0.1);
      border: 1px solid rgba(0, 212, 212, 0.2);
      border-radius: 10px;
      margin-bottom: 24px;
    }

    .locked-banner-icon {
      font-size: 16px;
    }

    .locked-banner-text {
      flex: 1;
      font-size: 13px;
      color: var(--primary);
    }

    .locked-banner-exit {
      background: rgba(0, 212, 212, 0.2);
      border: none;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 12px;
      color: var(--primary);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .locked-banner-exit:hover {
      background: rgba(0, 212, 212, 0.3);
    }

    /* ========================================
       VIEWS CONTAINER
       ======================================== */
    .tasks-view-container {
      position: relative;
    }

    .tasks-view {
      display: none;
    }

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

    /* ========================================
       TODAY'S FOCUS - CINEMATIC HERO
       ======================================== */
    .focus-zone {
      position: relative;
      width: 100%;
      min-height: 320px;
      border-radius: 24px;
      overflow: hidden;
      margin-bottom: 32px;
      transition: transform 0.2s ease-out;
    }

    .focus-zone:hover {
      transform: scale(1.002);
    }

    .focus-zone .focus-bg {
      position: absolute;
      inset: -4px;
      background: url('https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1400&q=80') center/cover;
      opacity: 0.6;
      filter: blur(3px);
    }

    .focus-zone .focus-tint {
      position: absolute;
      inset: 0;
      background: 
        linear-gradient(135deg, rgba(255, 120, 80, 0.15) 0%, rgba(180, 60, 100, 0.25) 50%, rgba(80, 40, 120, 0.3) 100%),
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(20, 8, 15, 0.7) 0%, transparent 70%),
        rgba(0, 0, 0, 0.25);
    }

    .focus-zone .focus-glow {
      position: absolute;
      inset: 0;
      background: 
        radial-gradient(ellipse 100% 50% at 50% 0%, rgba(255, 150, 100, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 100% 50% at 50% 100%, rgba(255, 100, 150, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 30% 100% at 0% 50%, rgba(255, 120, 100, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse 30% 100% at 100% 50%, rgba(200, 100, 180, 0.3) 0%, transparent 50%);
      pointer-events: none;
    }

    .focus-zone .focus-border {
      position: absolute;
      inset: 0;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.4), 0 8px 40px rgba(180, 80, 120, 0.15);
      pointer-events: none;
    }

    .focus-zone .focus-content {
      position: relative;
      z-index: 1;
      height: 100%;
      padding: 28px 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 320px;
    }

    .focus-header-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .focus-title-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .focus-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 6px;
    }

    .focus-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ff7a8a;
      box-shadow: 0 0 8px rgba(255, 122, 138, 0.6);
    }

    .focus-main-title {
      font-size: 24px;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin: 0;
    }

    .focus-subtitle {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 200, 180, 0.7);
    }

    .focus-date-badge {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
      padding: 8px 14px;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .focus-tasks-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 16px 0;
    }

    .focus-task-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 16px;
      background: rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
      overflow: hidden;
    }

    /* Left accent whisper - 1px project color hint */
    .focus-task-row::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      bottom: 6px;
      width: 1px;
      border-radius: 1px;
      opacity: 0.3;
      background: rgba(255, 255, 255, 0.2);
    }

    .focus-task-row.category-music::before { background: #ff6b6b; }
    .focus-task-row.category-tools::before { background: #00d4d4; }
    .focus-task-row.category-content::before { background: #fbbf24; }
    .focus-task-row.category-personal::before { background: #a855f7; }
    .focus-task-row.category-evenant::before { background: #4ade80; }
    .focus-task-row.category-business::before { background: #8bc34a; }

    /* Priority styling for Today's Focus tasks */
    .focus-task-row.priority-high {
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.06);
      animation: focus-priority-pulse 3s ease-in-out infinite;
    }

    @keyframes focus-priority-pulse {
      0%, 100% { 
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.06);
      }
      50% { 
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
      }
    }

    .focus-task-row.priority-high:hover {
      animation: none;
      border-color: rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.12);
    }

    .focus-task-row.priority-low {
      background: rgba(0, 0, 0, 0.25);
      border-color: rgba(255, 255, 255, 0.04);
    }

    .focus-task-row.priority-low:hover {
      background: rgba(0, 0, 0, 0.3);
      border-color: rgba(255, 255, 255, 0.08);
    }

    /* Don't override completed task styling */
    .focus-task-row.completed.priority-high {
      animation: none;
      box-shadow: none;
    }

    .focus-task-row:hover {
      background: rgba(0, 0, 0, 0.35);
      border-color: rgba(255, 255, 255, 0.12);
      transform: translateX(4px);
    }

    .focus-task-row.completed {
      opacity: 0.5;
    }

    .focus-task-row.completed .focus-task-text {
      text-decoration: line-through;
      color: rgba(255, 255, 255, 0.4);
    }

    .focus-task-checkbox {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 1.5px solid rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s ease;
      cursor: pointer;
    }

    .focus-task-row:hover .focus-task-checkbox {
      border-color: rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.1);
    }

    .focus-task-checkbox.checked {
      background: rgba(0, 212, 212, 0.25);
      border-color: rgba(0, 212, 212, 0.6);
    }

    .focus-task-checkbox svg {
      width: 12px;
      height: 12px;
      color: #00d4d4;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .focus-task-checkbox.checked svg {
      opacity: 1;
    }

    .focus-task-content {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .focus-task-text {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .focus-task-project {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.45);
      flex-shrink: 0;
    }

    .focus-project-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .focus-project-dot.music { background: #ff6b6b; box-shadow: 0 0 6px rgba(255,107,107,0.5); }
    .focus-project-dot.tools { background: #00d4d4; box-shadow: 0 0 6px rgba(0,212,212,0.5); }
    .focus-project-dot.content { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.5); }
    .focus-project-dot.personal { background: #a855f7; box-shadow: 0 0 6px rgba(168,85,247,0.5); }
    .focus-project-dot.evenant { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.5); }
    .focus-project-dot.business { background: #8bc34a; box-shadow: 0 0 6px rgba(139,195,74,0.5); }

    .focus-task-due {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
      padding: 4px 8px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 5px;
      margin-left: auto;
      flex-shrink: 0;
    }

    .focus-task-due.soon {
      background: rgba(251, 191, 36, 0.2);
      color: rgba(251, 191, 36, 0.9);
    }

    .focus-task-due.overdue {
      background: rgba(255, 100, 100, 0.2);
      color: rgba(255, 100, 100, 0.9);
    }

    .focus-add-task-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      color: rgba(255, 255, 255, 0.4);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s ease;
      border-radius: 10px;
      margin-top: 4px;
    }

    .focus-add-task-row:hover {
      color: rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.05);
    }

    .focus-add-task-row svg {
      width: 16px;
      height: 16px;
    }

    .focus-footer-row {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
    }

    .focus-metrics {
      display: flex;
      align-items: flex-end;
      gap: 20px;
    }

    .focus-stats-pills {
      display: flex;
      gap: 8px;
    }

    .focus-stat-pill {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      padding: 6px 12px;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .focus-stat-pill strong {
      color: #fff;
      font-weight: 500;
    }

    .focus-progress-bar-container {
      width: 180px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .focus-progress-track {
      height: 4px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 2px;
      overflow: hidden;
    }

    .focus-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, rgba(255, 150, 120, 0.9) 0%, rgba(255, 100, 150, 1) 100%);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .focus-progress-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
    }

    /* ========================================
       COMING UP TIMELINE (Collapsible)
       ======================================== */
    .timeline-section {
      margin-bottom: 32px;
    }

    .timeline-section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      cursor: pointer;
      padding: 8px 0;
      transition: opacity 0.15s ease;
    }

    .timeline-section-header:hover {
      opacity: 0.8;
    }

    .timeline-section-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .timeline-section-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .timeline-section-icon svg {
      width: 16px;
      height: 16px;
      color: rgba(255, 255, 255, 0.6);
      stroke-width: 1.5;
    }

    .timeline-section-title {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }

    .timeline-section-count {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
    }

    .timeline-section-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
      transition: color 0.15s ease;
    }

    .timeline-section-toggle svg {
      width: 16px;
      height: 16px;
      transition: transform 0.2s ease;
    }

    .timeline-section.collapsed .timeline-section-toggle svg {
      transform: rotate(-90deg);
    }

    .timeline-section-header:hover .timeline-section-toggle {
      color: rgba(255, 255, 255, 0.7);
    }

    .timeline-content {
      display: flex;
      flex-direction: column;
      transition: max-height 0.3s ease, opacity 0.2s ease;
      overflow: hidden;
    }

    .timeline-section.collapsed .timeline-content {
      max-height: 0;
      opacity: 0;
    }

    .timeline-day {
      position: relative;
      padding-left: 100px;
    }

    .timeline-date {
      position: absolute;
      left: 0;
      top: 0;
      width: 80px;
      text-align: right;
      padding-right: 20px;
    }

    .timeline-date-day {
      font-size: 24px;
      font-weight: 300;
      color: #fff;
      line-height: 1;
    }

    .timeline-date-month {
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.4);
      margin-top: 4px;
    }

    .timeline-line {
      position: absolute;
      left: 86px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: rgba(255, 255, 255, 0.08);
    }

    .timeline-line::before {
      content: '';
      position: absolute;
      top: 8px;
      left: -4px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid #08080a;
    }

    .timeline-tasks {
      padding: 0 0 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .timeline-task-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
      overflow: hidden;
    }

    /* Left accent whisper - 1px project color hint */
    .timeline-task-row::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      bottom: 6px;
      width: 1px;
      border-radius: 1px;
      opacity: 0.3;
      background: rgba(255, 255, 255, 0.2);
    }

    .timeline-task-row.category-music::before { background: #ff6b6b; }
    .timeline-task-row.category-tools::before { background: #00d4d4; }
    .timeline-task-row.category-content::before { background: #fbbf24; }
    .timeline-task-row.category-personal::before { background: #a855f7; }
    .timeline-task-row.category-evenant::before { background: #4ade80; }
    .timeline-task-row.category-business::before { background: #8bc34a; }

    .timeline-task-row:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .timeline-task-row.completed {
      opacity: 0.5;
    }

    .timeline-task-checkbox {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      background: rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s ease;
      cursor: pointer;
    }

    .timeline-task-checkbox svg {
      width: 12px;
      height: 12px;
      color: #00d4d4;
      opacity: 0;
    }

    .timeline-task-checkbox.checked {
      background: rgba(0, 212, 212, 0.25);
      border-color: rgba(0, 212, 212, 0.6);
    }

    .timeline-task-checkbox.checked svg {
      opacity: 1;
    }

    .timeline-task-title {
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      flex: 1;
    }

    .timeline-task-row.completed .timeline-task-title {
      text-decoration: line-through;
      color: rgba(255, 255, 255, 0.4);
    }

    .timeline-task-project {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }

    .timeline-task-project span {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.45);
    }

    /* ========================================
       LEGACY SECTIONS (for other views)
       ======================================== */
    .tasks-section {
      margin-bottom: 24px;
    }

    .tasks-section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      margin-bottom: 12px;
    }

    .tasks-section-header-collapsible {
      cursor: pointer;
      transition: opacity 0.15s ease;
    }

    .tasks-section-header-collapsible:hover {
      opacity: 0.8;
    }

    .tasks-section-icon {
      font-size: 14px;
    }

    .tasks-section-title {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }

    .tasks-section-count {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.06);
      padding: 2px 8px;
      border-radius: 10px;
    }

    .tasks-section-date {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
      margin-left: auto;
    }

    .tasks-section-subtitle {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.35);
      margin-left: 8px;
    }

    .tasks-section-toggle {
      margin-left: auto;
      font-size: 10px;
      color: rgba(255, 255, 255, 0.4);
      transition: transform 0.2s ease;
    }

    .tasks-section-collapsed {
      display: none;
    }

    .tasks-section-overdue .tasks-section-header {
      border-bottom-color: rgba(255, 100, 100, 0.3);
    }

    .tasks-section-overdue .tasks-section-title {
      color: #ff6b6b;
    }

    /* ========================================
       TASK ROW (Standard)
       ======================================== */
    .task-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 10px;
      margin-bottom: 6px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .task-row:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .task-row.completed {
      opacity: 0.5;
    }

    .task-row.completed .task-title {
      text-decoration: line-through;
      color: rgba(255, 255, 255, 0.4);
    }

    /* Task Checkbox */
    .task-checkbox {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 1.5px solid rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.05);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }

    .task-checkbox:hover {
      border-color: var(--primary);
      background: rgba(0, 212, 212, 0.15);
    }

    .task-checkbox.checked {
      background: var(--primary);
      border-color: var(--primary);
    }

    .task-checkbox.checked svg {
      stroke: #08080a;
    }

    .task-checkbox svg {
      width: 12px;
      height: 12px;
      stroke: transparent;
    }

    /* Task Content */
    .task-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .task-title {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .task-meta {
      font-size: 14px;
    }

    /* Filter Bar */
    .tasks-filter-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding: 12px 16px;
      background: var(--card-bg);
      border-radius: 10px;
      border: 1px solid var(--border-subtle);
    }

    .tasks-filters-left {
      display: flex;
      gap: 10px;
    }

    .tasks-filter-select {
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
    }

    .tasks-filter-select:focus {
      outline: none;
      border-color: var(--primary);
    }

    .tasks-filter-checkbox {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
    }

    .tasks-filter-checkbox input {
      accent-color: var(--primary);
    }

    /* Locked In Banner */
    .tasks-locked-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, rgba(0, 212, 212, 0.15) 0%, rgba(0, 150, 150, 0.1) 100%);
      border: 1px solid rgba(0, 212, 212, 0.3);
      border-radius: 10px;
      padding: 12px 16px;
      margin-bottom: 20px;
    }

    .locked-banner-icon {
      font-size: 16px;
    }

    .locked-banner-text {
      flex: 1;
      font-size: 13px;
      color: var(--primary);
      font-weight: 500;
    }

    .locked-banner-exit {
      background: rgba(0, 212, 212, 0.2);
      border: 1px solid rgba(0, 212, 212, 0.3);
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 12px;
      color: var(--primary);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .locked-banner-exit:hover {
      background: rgba(0, 212, 212, 0.3);
    }

    /* Task Views */
    .tasks-view {
      display: none;
    }

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

    /* Task Sections */
    .tasks-section {
      margin-bottom: 24px;
    }

    .tasks-section-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border-subtle);
      margin-bottom: 8px;
    }

    .tasks-section-header-collapsible {
      cursor: pointer;
      transition: opacity 0.2s ease;
    }

    .tasks-section-header-collapsible:hover {
      opacity: 0.8;
    }

    .tasks-section-icon {
      font-size: 16px;
    }

    .tasks-section-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .tasks-section-count {
      background: var(--card-bg);
      border-radius: 10px;
      padding: 2px 8px;
      font-size: 11px;
      color: var(--text-tertiary);
      border: 1px solid var(--border-subtle);
    }

    .tasks-section-date {
      margin-left: auto;
      font-size: 12px;
      color: var(--text-tertiary);
    }

    .tasks-section-subtitle {
      font-size: 12px;
      color: var(--text-tertiary);
      margin-left: 8px;
    }

    .tasks-section-toggle {
      margin-left: auto;
      font-size: 10px;
      color: var(--text-tertiary);
      transition: transform 0.2s ease;
    }

    .tasks-section-collapsed {
      display: none;
    }

    .tasks-section-overdue .tasks-section-header {
      border-bottom-color: rgba(255, 100, 100, 0.3);
    }

    .tasks-section-overdue .tasks-section-title {
      color: #ff6b6b;
    }

    /* Task Row */
    .task-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: var(--card-bg);
      border-radius: 10px;
      margin-bottom: 6px;
      border: 1px solid var(--border-subtle);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .task-row:hover {
      background: rgba(255, 255, 255, 0.03);
      border-color: var(--border-default);
    }

    .task-row.completed {
      opacity: 0.6;
    }

    .task-row.completed .task-title {
      text-decoration: line-through;
      color: var(--text-tertiary);
    }

    /* Task Checkbox */
    .task-checkbox {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      border: 2px solid rgba(255, 255, 255, 0.25);
      background: rgba(255, 255, 255, 0.05);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .task-checkbox:hover {
      border-color: var(--primary);
      background: rgba(0, 212, 212, 0.15);
      transform: scale(1.05);
    }

    .task-checkbox.checked {
      background: var(--primary);
      border-color: var(--primary);
    }

    .task-checkbox.checked svg {
      stroke: var(--bg-primary);
    }

    .task-checkbox svg {
      width: 14px;
      height: 14px;
      stroke: transparent;
    }

    /* Task Content */
    .task-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .task-title {
      font-size: 14px;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

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

    .task-project-badge {
      font-size: 11px;
      color: var(--text-tertiary);
      background: var(--bg-secondary);
      border-radius: 4px;
      padding: 2px 6px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .task-project-badge .project-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }

    .task-project-badge .project-dot.music { background: #ff6b8a; }
    .task-project-badge .project-dot.content { background: #ffb347; }
    .task-project-badge .project-dot.tools { background: #00d4d4; }
    .task-project-badge .project-dot.evenant { background: #6b8aff; }
    .task-project-badge .project-dot.business { background: #8bc34a; }
    .task-project-badge .project-dot.personal { background: #a78bfa; }

    /* Task Due Date */
    .task-due {
      font-size: 11px;
      color: var(--text-tertiary);
      white-space: nowrap;
    }

    .task-due.overdue {
      color: #ff6b6b;
      font-weight: 500;
    }

    .task-due.today {
      color: var(--primary);
      font-weight: 500;
    }

    /* Task Priority */
    .task-priority {
      font-size: 14px;
      flex-shrink: 0;
    }

    .task-priority.high { color: #ff6b6b; }
    .task-priority.medium { color: #ffb347; }
    .task-priority.low { color: #8bc34a; }

    /* Task Today Star */
    .task-today-star {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      opacity: 0.3;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .task-today-star:hover {
      opacity: 1;
      transform: scale(1.1);
    }

    .task-today-star.active {
      opacity: 1;
      color: #ffd700;
    }

    /* Task Status Selector */
    .task-status-select {
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 11px;
      color: var(--text-secondary);
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.2s ease;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 6px center;
      padding-right: 22px;
    }

    .task-status-select:hover {
      border-color: var(--primary);
      background-color: rgba(0, 212, 212, 0.1);
    }

    .task-status-select:focus {
      outline: none;
      border-color: var(--primary);
    }

    .task-status-select.status-done {
      background-color: rgba(74, 222, 128, 0.15);
      border-color: rgba(74, 222, 128, 0.3);
      color: #4ade80;
    }

    .task-status-select.status-in-progress {
      background-color: rgba(0, 212, 212, 0.15);
      border-color: rgba(0, 212, 212, 0.3);
      color: var(--primary);
    }

    .task-status-select.status-blocked {
      background-color: rgba(255, 100, 100, 0.15);
      border-color: rgba(255, 100, 100, 0.3);
      color: #ff6b6b;
    }

    /* Task Menu */
    .task-menu-btn {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .task-row:hover .task-menu-btn {
      opacity: 0.6;
    }

    .task-menu-btn:hover {
      opacity: 1;
      background: var(--bg-secondary);
    }

    .task-menu-btn svg {
      width: 14px;
      height: 14px;
      stroke: var(--text-secondary);
    }

    /* Quick Add */
    .tasks-quick-add {
      margin-top: 8px;
    }

    .tasks-quick-add-input {
      width: 100%;
      background: transparent;
      border: 1px dashed var(--border-subtle);
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 13px;
      color: var(--text-secondary);
      transition: all 0.2s ease;
    }

    .tasks-quick-add-input:focus {
      outline: none;
      background: var(--card-bg);
      border-style: solid;
      border-color: var(--primary);
      color: var(--text-primary);
    }

    .tasks-quick-add-input::placeholder {
      color: var(--text-tertiary);
    }

    /* Tasks Divider */
    .tasks-divider {
      height: 1px;
      background: var(--border-subtle);
      margin: 24px 0;
    }

    /* All Tasks View Header */
    .tasks-all-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .tasks-all-sort-label {
      font-size: 12px;
      color: var(--text-tertiary);
    }

    .tasks-sort-select {
      background: var(--card-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
    }

    /* Project Group - Matching Overview List Style */
    /* ========================================
       ENHANCED TASK PROJECT GROUPS
       ======================================== */
    .task-project-group {
      margin-bottom: 20px;
    }

    .task-project-group-header {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 16px 20px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    /* Gradient tint background based on alignment */
    .task-project-group-header::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.12;
      transition: opacity 0.2s ease;
    }

    .task-project-group-header:hover::before {
      opacity: 0.18;
    }

    .task-project-group-header:hover {
      border-color: rgba(255, 255, 255, 0.1);
    }

    /* Alignment color tints */
    .task-project-group-header.direct::before {
      background: linear-gradient(90deg, rgba(74, 222, 128, 0.8) 0%, rgba(74, 222, 128, 0.2) 30%, transparent 60%);
    }

    .task-project-group-header.supporting::before {
      background: linear-gradient(90deg, rgba(0, 212, 212, 0.8) 0%, rgba(0, 212, 212, 0.2) 30%, transparent 60%);
    }

    .task-project-group-header.adjacent::before {
      background: linear-gradient(90deg, rgba(251, 191, 36, 0.6) 0%, rgba(251, 191, 36, 0.15) 30%, transparent 60%);
    }

    .task-project-group-header.exploratory::before {
      background: linear-gradient(90deg, rgba(168, 85, 247, 0.6) 0%, rgba(168, 85, 247, 0.15) 30%, transparent 60%);
    }

    /* Project Thumbnail */
    .task-project-thumbnail {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      background-size: cover;
      background-position: center;
      flex-shrink: 0;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
      position: relative;
      z-index: 1;
      overflow: hidden;
    }

    .task-project-thumbnail-gradient {
      position: absolute;
      inset: 0;
      border-radius: 12px;
    }

    .task-project-thumbnail-image {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      border-radius: 12px;
    }

    .task-project-thumbnail-overlay {
      position: absolute;
      inset: 0;
      border-radius: 12px;
      opacity: 0.6;
    }

    .task-project-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
      z-index: 1;
    }

    .task-project-group-toggle {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.3);
      transition: transform 0.2s ease;
      position: relative;
      z-index: 1;
    }

    .task-project-group-toggle svg {
      width: 16px;
      height: 16px;
    }

    .task-project-group-toggle.collapsed {
      transform: rotate(-90deg);
    }

    .task-project-group-name {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
    }

    .task-project-group-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.45);
    }

    .task-project-alignment {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 3px 8px;
      border-radius: 5px;
    }

    .task-project-alignment.direct {
      background: rgba(74, 222, 128, 0.2);
      color: #86efac;
    }

    .task-project-alignment.supporting {
      background: rgba(0, 212, 212, 0.2);
      color: #5eead4;
    }

    .task-project-alignment.adjacent {
      background: rgba(251, 191, 36, 0.2);
      color: #fcd34d;
    }

    .task-project-alignment.exploratory {
      background: rgba(168, 85, 247, 0.2);
      color: #c4b5fd;
    }

    .task-project-sep {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
    }

    /* Progress section in header */
    .task-project-progress {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      position: relative;
      z-index: 1;
    }

    .task-project-progress-bar {
      width: 100px;
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      overflow: hidden;
    }

    .task-project-progress-fill {
      height: 100%;
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .task-project-progress-fill.direct {
      background: linear-gradient(90deg, #4ade80, #86efac);
    }

    .task-project-progress-fill.supporting {
      background: linear-gradient(90deg, #00d4d4, #5eead4);
    }

    .task-project-progress-fill.adjacent {
      background: linear-gradient(90deg, #f59e0b, #fcd34d);
    }

    .task-project-progress-fill.exploratory {
      background: linear-gradient(90deg, #a855f7, #c4b5fd);
    }

    .task-project-progress-text {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
    }

    .task-project-group-content {
      padding: 8px 0 8px 20px;
    }

    .task-project-group-content.collapsed {
      display: none;
    }

    .task-project-group-content .task-row {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 12px;
      margin-bottom: 6px;
    }

    .task-project-group-content .task-row:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
    }

    /* ========================================
       ENHANCED TASK AREA GROUPS (Banner Style)
       ======================================== */
    .task-area-group {
      margin-bottom: 40px;
    }

    .task-area-group-header {
      position: relative;
      padding: 24px 28px;
      border-radius: 18px;
      margin-bottom: 20px;
      overflow: hidden;
    }

    /* Background gradient for area */
    .task-area-group-header::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.08;
    }

    /* Border glow */
    .task-area-group-header::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      pointer-events: none;
    }

    /* Category-based area colors */
    .task-area-group-header.music::before {
      background: linear-gradient(135deg, rgba(255, 107, 107, 0.8) 0%, rgba(245, 158, 11, 0.4) 50%, transparent 100%);
    }

    .task-area-group-header.content::before {
      background: linear-gradient(135deg, rgba(255, 180, 60, 0.8) 0%, rgba(255, 150, 50, 0.4) 50%, transparent 100%);
    }

    .task-area-group-header.evenant::before {
      background: linear-gradient(135deg, rgba(168, 85, 247, 0.8) 0%, rgba(99, 102, 241, 0.4) 50%, transparent 100%);
    }

    .task-area-group-header.tools::before {
      background: linear-gradient(135deg, rgba(0, 212, 212, 0.8) 0%, rgba(6, 182, 212, 0.4) 50%, transparent 100%);
    }

    .task-area-group-header.business::before {
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.8) 0%, rgba(16, 185, 129, 0.4) 50%, transparent 100%);
    }

    .task-area-group-header.personal::before {
      background: linear-gradient(135deg, rgba(244, 114, 182, 0.8) 0%, rgba(236, 72, 153, 0.4) 50%, transparent 100%);
    }

    .task-area-header-content {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .task-area-header-left {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .task-area-group-icon {
      font-size: 22px;
    }

    .task-area-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .task-area-group-name {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.75);
    }

    .task-area-group-meta {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
    }

    .task-area-group-scope {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.3);
      padding: 5px 12px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 6px;
    }

    /* Nested project headers within areas (slightly smaller) */
    .task-area-group .task-project-group {
      margin-left: 8px;
      margin-bottom: 16px;
    }

    .task-area-group .task-project-group-header {
      padding: 14px 18px;
      border-radius: 14px;
    }

    .task-area-group .task-project-thumbnail {
      width: 48px;
      height: 48px;
      border-radius: 10px;
    }

    .task-area-group .task-project-group-name {
      font-size: 15px;
    }

    .task-area-group .task-project-group-meta {
      font-size: 11px;
    }

    .task-area-group .task-project-progress-bar {
      width: 80px;
      height: 3px;
    }

    .task-area-group .task-project-progress-text {
      font-size: 10px;
    }

    .task-area-group .task-project-group-content {
      padding: 6px 0 6px 16px;
    }

    /* Quick add task input */
    .tasks-quick-add {
      padding: 12px 16px;
    }

    .tasks-quick-add-input {
      width: 100%;
      background: none;
      border: none;
      outline: none;
      color: rgba(255, 255, 255, 0.35);
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      transition: color 0.15s ease;
    }

    .tasks-quick-add-input:hover,
    .tasks-quick-add-input:focus {
      color: rgba(255, 255, 255, 0.6);
    }

    .tasks-quick-add-input::placeholder {
      color: inherit;
    }

    /* Upcoming View Date Groups */
    .task-date-group {
      margin-bottom: 20px;
    }

    .task-date-group-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      margin-bottom: 8px;
    }

    .task-date-group-icon {
      font-size: 14px;
    }

    .task-date-group-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .task-date-group-subtitle {
      font-size: 12px;
      color: var(--text-tertiary);
    }

    /* Empty State */
    .tasks-empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-tertiary);
    }

    .tasks-empty-state-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .tasks-empty-state-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .tasks-empty-state-text {
      font-size: 13px;
      color: var(--text-tertiary);
    }

    /* =====================================================
       TASK MODAL STYLES
       ===================================================== */

    /* =====================================================
       TASK MODAL - SLEEK DESIGN
       ===================================================== */
    
    #task-modal .modal-content {
      background: #141416;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
      max-height: 90vh;
      display: flex;
      flex-direction: column;
    }

    #task-modal .modal-header {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      padding: 20px 24px;
    }

    #task-modal .modal-header h2 {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }

    #task-modal .modal-body {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
    }

    /* Task Header */
    .task-modal-header {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 20px;
    }

    .task-modal-checkbox {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
      transition: all 0.15s ease;
    }

    .task-modal-checkbox:hover {
      border-color: rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.05);
    }

    .task-modal-checkbox.checked {
      background: #06b6d4;
      border-color: #06b6d4;
    }

    .task-modal-checkbox svg {
      width: 14px;
      height: 14px;
      stroke: transparent;
    }

    .task-modal-checkbox.checked svg {
      stroke: #fff;
    }

    .task-modal-title-section {
      flex: 1;
    }

    .task-modal-title-input {
      width: 100%;
      background: transparent;
      border: none;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      padding: 0;
      margin-bottom: 6px;
    }

    .task-modal-title-input::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .task-modal-title-input:focus {
      outline: none;
    }

    .task-modal-breadcrumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.35);
    }

    .task-modal-breadcrumb-sep {
      color: rgba(255, 255, 255, 0.5);
    }

    /* Focus Star */
    .task-focus-star {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.2);
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.15s ease;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .task-focus-star:hover {
      color: rgba(251, 191, 36, 0.6);
      background: rgba(251, 191, 36, 0.1);
    }

    .task-focus-star.active {
      color: #fbbf24;
    }

    .task-focus-star.active:hover {
      color: #fbbf24;
      background: rgba(251, 191, 36, 0.15);
    }

    .task-focus-star svg {
      width: 18px;
      height: 18px;
    }

    /* Tag Row */
    .task-tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
    }

    .task-tag-wrapper {
      position: relative;
    }

    .task-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .task-tag:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .task-tag svg {
      width: 12px;
      height: 12px;
      color: rgba(255, 255, 255, 0.4);
    }

    /* Due date styling */
    .task-tag.due-date.has-value {
      background: rgba(6, 182, 212, 0.15);
      border-color: rgba(6, 182, 212, 0.25);
      color: #06b6d4;
    }

    .task-tag.due-date.has-value svg {
      color: #06b6d4;
    }

    .task-tag.due-date.overdue {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.25);
      color: #f87171;
    }

    .task-tag.due-date.overdue svg {
      color: #f87171;
    }

    /* Scheduled date styling */
    .task-tag.scheduled.has-value {
      background: rgba(168, 85, 247, 0.15);
      border-color: rgba(168, 85, 247, 0.25);
      color: #a855f7;
    }

    .task-tag.scheduled.has-value svg {
      color: #a855f7;
    }

    /* Dark mode date picker */
    .task-tag-date-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
      color-scheme: dark;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1);
    }

    /* Priority tag colors */
    .task-tag.priority-high {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.25);
      color: #f87171;
    }

    .task-tag.priority-medium {
      background: rgba(251, 191, 36, 0.15);
      border-color: rgba(251, 191, 36, 0.25);
      color: #fbbf24;
    }

    .task-tag.priority-low {
      background: rgba(156, 163, 175, 0.15);
      border-color: rgba(156, 163, 175, 0.25);
      color: #9ca3af;
    }

    /* Status tag colors */
    .task-tag.status-todo {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.6);
    }

    .task-tag.status-in-progress {
      background: rgba(59, 130, 246, 0.15);
      border-color: rgba(59, 130, 246, 0.25);
      color: #60a5fa;
    }

    .task-tag.status-done {
      background: rgba(34, 197, 94, 0.15);
      border-color: rgba(34, 197, 94, 0.25);
      color: #4ade80;
    }

    .task-tag.status-blocked {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.25);
      color: #f87171;
    }

    /* Tag dot indicator */
    .task-tag-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .task-tag-dot.high { background: #ef4444; }
    .task-tag-dot.medium { background: #fbbf24; }
    .task-tag-dot.low { background: #9ca3af; }
    .task-tag-dot.none { background: rgba(255, 255, 255, 0.3); }
    .task-tag-dot.todo { background: rgba(255, 255, 255, 0.3); }
    .task-tag-dot.in-progress { background: #3b82f6; }
    .task-tag-dot.done { background: #22c55e; }
    .task-tag-dot.blocked { background: #ef4444; }

    /* Tag Dropdown */
    .task-tag-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      min-width: 160px;
      background: #1a1a1e;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 6px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-4px);
      transition: all 0.15s ease;
    }

    .task-tag-wrapper.open .task-tag-dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .task-tag-dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 6px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
      cursor: pointer;
      transition: all 0.1s ease;
    }

    .task-tag-dropdown-item:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    .task-tag-dropdown-item.selected {
      background: rgba(255, 255, 255, 0.08);
    }

    .task-tag-dropdown-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.06);
      margin: 6px 0;
    }

    /* Hidden date input for picker */
    .task-tag-date-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    /* Project Selection */
    #task-modal .form-group {
      margin-bottom: 20px;
    }

    #task-modal .form-label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.35);
      margin-bottom: 8px;
    }

    #task-modal .form-input {
      width: 100%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
      transition: all 0.15s ease;
      cursor: pointer;
    }

    #task-modal .form-input:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
    }

    #task-modal .form-input:focus {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.15);
      outline: none;
    }

    /* Notes Section */
    .task-modal-section {
      margin-bottom: 20px;
    }

    .task-modal-section-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.35);
      margin-bottom: 8px;
    }

    .task-modal-section-icon {
      font-size: 12px;
    }

    /* Subtask Progress Indicator */
    .task-subtask-progress {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.6);
      text-transform: none;
      letter-spacing: 0;
    }

    .subtask-count {
      color: #06b6d4;
      font-weight: 600;
    }

    .subtask-bar {
      width: 60px;
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      overflow: hidden;
    }

    .subtask-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #06b6d4, #0891b2);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    .task-modal-notes-input {
      width: 100%;
      min-height: 180px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      padding: 14px;
      font-size: 13px;
      font-family: inherit;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.6;
      resize: vertical;
      transition: all 0.15s ease;
    }

    .task-modal-notes-input::placeholder {
      color: rgba(255, 255, 255, 0.25);
    }

    .task-modal-notes-input:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .task-modal-notes-input:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.12);
    }

    /* Task Modal Footer */
    .task-modal-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .task-modal-timestamps {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.25);
    }

    .task-modal-actions {
      display: flex;
      gap: 8px;
    }

    #task-modal .btn {
      padding: 10px 18px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    #task-modal .btn-secondary {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);
    }

    #task-modal .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    #task-modal .btn-primary {
      background: #06b6d4;
      border: none;
      color: #fff;
    }

    #task-modal .btn-primary:hover {
      background: #0891b2;
    }

    #task-modal .btn-danger {
      background: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.25);
      color: #f87171;
    }

    #task-modal .btn-danger:hover {
      background: rgba(239, 68, 68, 0.25);
    }

    /* Hide old today toggle - replaced by star */
    .task-today-toggle {
      display: none !important;
    }

    @media (max-width: 768px) {
      .task-tag-row {
        gap: 6px;
      }
      
      .task-tag {
        padding: 5px 10px;
        font-size: 11px;
      }
    }

    /* Today's Focus Toggle (hidden - replaced by star) */
    .task-today-toggle {
      display: none !important;
    }

    /* Old toggle styles kept for reference but hidden */
    .task-today-toggle-old {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 180, 0, 0.04) 100%);
      border: 1px solid rgba(255, 215, 0, 0.15);
      border-radius: 14px;
      cursor: pointer;
      margin-bottom: 24px;
      transition: all 0.2s ease;
    }

    .task-today-toggle:hover {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 180, 0, 0.06) 100%);
      border-color: rgba(255, 215, 0, 0.25);
    }

    .task-today-toggle input {
      display: none;
    }

    .today-toggle-track {
      width: 44px;
      height: 24px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      position: relative;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .today-toggle-thumb {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 10px;
      transition: all 0.2s ease;
    }

    .task-today-toggle input:checked + .today-toggle-track {
      background: linear-gradient(135deg, rgba(255, 200, 0, 0.8), rgba(255, 160, 0, 0.9));
    }

    .task-today-toggle input:checked + .today-toggle-track .today-toggle-thumb {
      left: 22px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .today-toggle-content {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .today-toggle-icon {
      font-size: 16px;
      opacity: 0.6;
      transition: opacity 0.2s ease;
    }

    .task-today-toggle input:checked ~ .today-toggle-content .today-toggle-icon {
      opacity: 1;
    }

    .today-toggle-text {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
    }

    .task-today-toggle input:checked ~ .today-toggle-content .today-toggle-text {
      color: rgba(255, 215, 0, 0.9);
    }

    /* =====================================================
       FOCUS VIEW OVERLAY STYLES
       ===================================================== */

    .focus-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(10, 10, 12, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 2000;
      display: none;
      overflow-y: auto;
    }

    .focus-overlay.active {
      display: block;
      animation: focusFadeIn 0.25s ease-out;
    }

    @keyframes focusFadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .focus-container {
      max-width: 900px;
      margin: 0 auto;
      padding: 40px 24px;
      min-height: 100vh;
    }

    .focus-header {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 32px;
    }

    .focus-exit-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 8px 14px;
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .focus-exit-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-primary);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .focus-exit-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Focus Project Hero */
    .focus-hero {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 32px;
      text-align: center;
      margin-bottom: 32px;
      position: relative;
      overflow: hidden;
    }

    .focus-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(ellipse at center, var(--hero-glow, rgba(0, 212, 212, 0.1)) 0%, transparent 70%);
      pointer-events: none;
    }

    .focus-hero.music { --hero-glow: rgba(255, 90, 110, 0.15); }
    .focus-hero.content { --hero-glow: rgba(255, 180, 60, 0.15); }
    .focus-hero.tools { --hero-glow: rgba(0, 212, 212, 0.15); }
    .focus-hero.evenant { --hero-glow: rgba(100, 140, 245, 0.15); }
    .focus-hero.business { --hero-glow: rgba(130, 180, 70, 0.15); }
    .focus-hero.personal { --hero-glow: rgba(150, 80, 200, 0.15); }

    .focus-project-icon {
      font-size: 32px;
      margin-bottom: 16px;
    }

    .focus-project-name {
      font-size: 28px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 12px;
    }

    .focus-project-meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 16px;
    }

    .focus-project-meta-sep {
      opacity: 0.5;
    }

    .focus-alignment-badge {
      background: rgba(0, 212, 212, 0.15);
      color: var(--primary);
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .focus-project-description {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
      max-width: 500px;
      margin: 0 auto 20px;
      line-height: 1.6;
    }

    .focus-project-due {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 20px;
    }

    .focus-progress {
      max-width: 300px;
      margin: 0 auto;
    }

    .focus-progress-bar {
      height: 8px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .focus-progress-fill {
      height: 100%;
      background: var(--primary);
      border-radius: 4px;
      transition: width 0.3s ease;
    }

    .focus-progress-text {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
    }

    /* Focus Intention */
    .focus-intention {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 32px;
    }

    .focus-intention-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.6);
      margin-bottom: 12px;
    }

    .focus-intention-input {
      width: 100%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 14px;
      font-size: 14px;
      color: var(--text-primary);
      line-height: 1.5;
    }

    .focus-intention-input:focus {
      outline: none;
      border-color: var(--primary);
    }

    .focus-intention-input::placeholder {
      color: var(--text-tertiary);
      font-style: italic;
    }

    /* Focus Columns */
    .focus-columns {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .focus-column {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 16px;
    }

    .focus-column-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.6);
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .focus-column-icon {
      font-size: 14px;
    }

    .focus-task-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .focus-task-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

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

    .focus-task-checkbox {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      border: 2px solid rgba(255, 255, 255, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .focus-task-checkbox.checked {
      background: var(--primary);
      border-color: var(--primary);
    }

    .focus-task-checkbox svg {
      width: 10px;
      height: 10px;
      stroke: transparent;
    }

    .focus-task-checkbox.checked svg {
      stroke: #0a0a0c;
    }

    .focus-task-title {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.9);
    }

    .focus-task-item.completed .focus-task-title {
      text-decoration: line-through;
      color: rgba(255, 255, 255, 0.4);
    }

    .focus-add-task {
      padding: 8px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: color 0.2s ease;
    }

    .focus-add-task:hover {
      color: var(--primary);
    }

    .focus-links-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .focus-link-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 6px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .focus-link-item:hover {
      background: rgba(255, 255, 255, 0.08);
      color: var(--primary);
    }

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

      .tasks-view-tabs {
        flex-wrap: wrap;
      }

      .tasks-view-tab {
        flex: auto;
      }

      .tasks-filter-bar {
        flex-direction: column;
        gap: 12px;
      }

      .tasks-filters-left {
        width: 100%;
        flex-wrap: wrap;
      }

      .task-tag-row {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    /* ========================================
       GALLERY - SPATIAL 2D NAVIGATION
       ======================================== */
    
    #tab-gallery {
      position: fixed;
      inset: 0;
      top: 60px;
      background: #0a0908;
      overflow: hidden;
    }
    
    #tab-gallery.active {
      display: block;
    }
    
    /* Gallery Header */
    .gallery-header {
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 24px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(180deg, rgba(10, 9, 8, 0.95) 0%, rgba(10, 9, 8, 0) 100%);
      pointer-events: none;
    }
    
    .gallery-header > * {
      pointer-events: auto;
    }
    
    .gallery-search-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 14px;
      padding: 12px 18px;
      width: 200px;
    }
    
    .gallery-search-bar input {
      background: none;
      border: none;
      outline: none;
      color: #fff;
      font-size: 14px;
      width: 100%;
    }
    
    .gallery-search-bar input::placeholder {
      color: rgba(255, 255, 255, 0.4);
    }
    
    .gallery-search-bar svg {
      width: 16px;
      height: 16px;
      color: rgba(255, 255, 255, 0.4);
      flex-shrink: 0;
    }
    
    .gallery-nav-hint {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
    }
    
    .gallery-hint-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .gallery-hint-key {
      padding: 4px 8px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
    }
    
    /* Spatial Grid Container */
    .gallery-spatial-container {
      position: fixed;
      inset: 0;
      top: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .gallery-spatial-grid {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    /* Position Indicator */
    .gallery-position-indicator {
      position: fixed;
      bottom: 32px;
      right: 32px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      z-index: 60;
    }
    
    .gallery-position-area {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255, 255, 255, 0.5);
    }
    
    .gallery-position-project {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.85);
    }
    
    .gallery-position-coords {
      font-size: 10px;
      font-family: 'SF Mono', 'Fira Code', monospace;
      color: rgba(255, 255, 255, 0.3);
      margin-top: 4px;
    }
    
    /* Navigation Arrows */
    .gallery-nav-arrow {
      position: fixed;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: all 0.2s ease;
      z-index: 60;
    }
    
    .gallery-nav-arrow:hover {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.8);
      transform: scale(1.1);
    }
    
    .gallery-nav-arrow svg {
      width: 24px;
      height: 24px;
    }
    
    .gallery-nav-arrow.up {
      top: 140px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .gallery-nav-arrow.up:hover {
      transform: translateX(-50%) scale(1.1);
    }
    
    .gallery-nav-arrow.down {
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .gallery-nav-arrow.down:hover {
      transform: translateX(-50%) scale(1.1);
    }
    
    .gallery-nav-arrow.left {
      left: 32px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .gallery-nav-arrow.left:hover {
      transform: translateY(-50%) scale(1.1);
    }
    
    .gallery-nav-arrow.right {
      right: 32px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .gallery-nav-arrow.right:hover {
      transform: translateY(-50%) scale(1.1);
    }
    
    /* ========================================
       SPATIAL CARD - SMOOTH ANIMATION SYSTEM
       ======================================== */
    
    /* Animation variables */
    :root {
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --duration-move: 0.6s;
      --duration-fade: 0.4s;
    }
    
    .spatial-card {
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 24px;
      overflow: hidden;
      cursor: pointer;
      
      /* Base size - will be scaled */
      width: 340px;
      height: 480px;
      
      /* Apply transforms from CSS variables including parallax */
      transform: 
        translate(-50%, -50%)
        translate(var(--x, 0), var(--y, 0))
        translate(var(--px, 0px), var(--py, 0px))
        scale(var(--scale, 1));
      opacity: var(--opacity, 1);
      filter: blur(var(--blur, 0px));
      z-index: var(--z, 10);
      
      /* GPU-accelerated smooth transitions */
      transition: 
        transform var(--duration-move) var(--ease-out-expo),
        opacity var(--duration-fade) var(--ease-out-expo),
        filter var(--duration-fade) var(--ease-out-expo);
      
      /* Performance optimizations */
      transform-style: preserve-3d;
      will-change: transform, opacity, filter;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      contain: layout style paint;
    }
    
    /* ============================================
       HORIZONTAL POSITIONS (Projects)
       ============================================ */
    
    .spatial-card.center {
      --x: 0;
      --y: 0;
      --scale: 1;
      --opacity: 1;
      --blur: 0px;
      --z: 50;
      transition-delay: 0ms;
    }
    
    .spatial-card.left-1 {
      --x: -380px;
      --y: 0;
      --scale: 0.7;
      --opacity: 0.75;
      --blur: 0px;
      --z: 40;
      transition-delay: 25ms;
    }
    
    .spatial-card.left-2 {
      --x: -600px;
      --y: 0;
      --scale: 0.5;
      --opacity: 0.45;
      --blur: 1.5px;
      --z: 30;
      transition-delay: 50ms;
    }
    
    .spatial-card.left-3 {
      --x: -760px;
      --y: 0;
      --scale: 0.38;
      --opacity: 0.25;
      --blur: 3px;
      --z: 20;
      transition-delay: 75ms;
    }
    
    .spatial-card.right-1 {
      --x: 380px;
      --y: 0;
      --scale: 0.7;
      --opacity: 0.75;
      --blur: 0px;
      --z: 40;
      transition-delay: 25ms;
    }
    
    .spatial-card.right-2 {
      --x: 600px;
      --y: 0;
      --scale: 0.5;
      --opacity: 0.45;
      --blur: 1.5px;
      --z: 30;
      transition-delay: 50ms;
    }
    
    .spatial-card.right-3 {
      --x: 760px;
      --y: 0;
      --scale: 0.38;
      --opacity: 0.25;
      --blur: 3px;
      --z: 20;
      transition-delay: 75ms;
    }
    
    /* ============================================
       VERTICAL POSITIONS (Categories)
       ============================================ */
    
    .spatial-card.top-1 {
      --x: 0;
      --y: -340px;
      --scale: 0.62;
      --opacity: 0.55;
      --blur: 1px;
      --z: 40;
      transition-delay: 25ms;
    }
    
    .spatial-card.top-2 {
      --x: 0;
      --y: -520px;
      --scale: 0.42;
      --opacity: 0.3;
      --blur: 2.5px;
      --z: 30;
      transition-delay: 50ms;
    }
    
    .spatial-card.bottom-1 {
      --x: 0;
      --y: 340px;
      --scale: 0.62;
      --opacity: 0.55;
      --blur: 1px;
      --z: 40;
      transition-delay: 25ms;
    }
    
    .spatial-card.bottom-2 {
      --x: 0;
      --y: 520px;
      --scale: 0.42;
      --opacity: 0.3;
      --blur: 2.5px;
      --z: 30;
      transition-delay: 50ms;
    }
    
    /* ============================================
       CORNER POSITIONS (Adjacent category projects)
       ============================================ */
    
    .spatial-card.top-left {
      --x: -320px;
      --y: -280px;
      --scale: 0.32;
      --opacity: 0.22;
      --blur: 2px;
      --z: 15;
      transition-delay: 50ms;
    }
    
    .spatial-card.top-right {
      --x: 320px;
      --y: -280px;
      --scale: 0.32;
      --opacity: 0.22;
      --blur: 2px;
      --z: 15;
      transition-delay: 50ms;
    }
    
    .spatial-card.bottom-left {
      --x: -320px;
      --y: 280px;
      --scale: 0.32;
      --opacity: 0.22;
      --blur: 2px;
      --z: 15;
      transition-delay: 50ms;
    }
    
    .spatial-card.bottom-right {
      --x: 320px;
      --y: 280px;
      --scale: 0.32;
      --opacity: 0.22;
      --blur: 2px;
      --z: 15;
      transition-delay: 50ms;
    }
    
    /* ============================================
       OFF-SCREEN POSITIONS (for enter/exit)
       ============================================ */
    
    .spatial-card.off-left {
      --x: -1000px;
      --y: 0;
      --scale: 0.3;
      --opacity: 0;
      --blur: 8px;
      --z: 5;
    }
    
    .spatial-card.off-right {
      --x: 1000px;
      --y: 0;
      --scale: 0.3;
      --opacity: 0;
      --blur: 8px;
      --z: 5;
    }
    
    .spatial-card.off-top {
      --x: 0;
      --y: -700px;
      --scale: 0.3;
      --opacity: 0;
      --blur: 8px;
      --z: 5;
    }
    
    .spatial-card.off-bottom {
      --x: 0;
      --y: 700px;
      --scale: 0.3;
      --opacity: 0;
      --blur: 8px;
      --z: 5;
    }
    
    /* Hidden cards */
    .spatial-card.hidden {
      --opacity: 0;
      --scale: 0.3;
      --blur: 8px;
      pointer-events: none;
    }
    
    /* Hover effect on center card */
    .spatial-card.center:hover {
      --scale: 1.02;
      transition: transform 0.3s var(--ease-out-expo);
    }
    
    .spatial-card.center:hover .spatial-card-frame {
      border-color: rgba(255, 255, 255, 0.3);
      box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 35px 120px rgba(0, 0, 0, 0.6);
    }
    
    /* ========================================
       SPATIAL CARD VISUALS
       ======================================== */
    
    .spatial-card-image {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
    }
    
    .spatial-card-gradient {
      position: absolute;
      inset: 0;
      opacity: 0.85;
    }
    
    .spatial-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.6) 100%
      );
    }
    
    .spatial-card-frame {
      position: absolute;
      inset: 0;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
      pointer-events: none;
    }
    
    .spatial-card.center .spatial-card-frame {
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 30px 100px rgba(0, 0, 0, 0.5);
    }
    
    .spatial-card-content {
      position: relative;
      z-index: 1;
      height: 100%;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    
    .spatial-card:not(.center) .spatial-card-content {
      padding: 14px;
    }
    
    /* Badge */
    .spatial-card-badge {
      position: absolute;
      top: 16px;
      left: 16px;
    }
    
    .spatial-badge {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.85);
      padding: 6px 10px;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .spatial-card:not(.center) .spatial-badge {
      font-size: 8px;
      padding: 4px 8px;
    }
    
    /* Title */
    .spatial-card-title {
      font-weight: 600;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -0.02em;
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
      margin: 0;
    }
    
    .spatial-card.center .spatial-card-title {
      font-size: 28px;
    }
    
    .spatial-card.left-1 .spatial-card-title,
    .spatial-card.right-1 .spatial-card-title,
    .spatial-card.top-1 .spatial-card-title,
    .spatial-card.bottom-1 .spatial-card-title {
      font-size: 18px;
    }
    
    .spatial-card.left-2 .spatial-card-title,
    .spatial-card.right-2 .spatial-card-title,
    .spatial-card.top-2 .spatial-card-title,
    .spatial-card.bottom-2 .spatial-card-title {
      font-size: 14px;
    }
    
    .spatial-card.left-3 .spatial-card-title,
    .spatial-card.right-3 .spatial-card-title {
      font-size: 11px;
    }
    
    .spatial-card-subtitle {
      font-size: 13px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      margin-top: 4px;
    }
    
    .spatial-card:not(.center) .spatial-card-subtitle {
      font-size: 11px;
      display: none;
    }
    
    .spatial-card.left-1 .spatial-card-subtitle,
    .spatial-card.right-1 .spatial-card-subtitle,
    .spatial-card.top-1 .spatial-card-subtitle,
    .spatial-card.bottom-1 .spatial-card-subtitle {
      display: block;
    }
    
    /* Hide all text on corner cards - just show image hints */
    .spatial-card.top-left .spatial-card-content,
    .spatial-card.top-right .spatial-card-content,
    .spatial-card.bottom-left .spatial-card-content,
    .spatial-card.bottom-right .spatial-card-content {
      display: none;
    }
    
    /* Hide badge on small cards */
    .spatial-card.left-2 .spatial-card-badge,
    .spatial-card.right-2 .spatial-card-badge,
    .spatial-card.left-3 .spatial-card-badge,
    .spatial-card.right-3 .spatial-card-badge,
    .spatial-card.top-2 .spatial-card-badge,
    .spatial-card.bottom-2 .spatial-card-badge {
      display: none;
    }
    
    /* ========================================
       GRADIENT IMAGE LIBRARY
       ======================================== */
    
    /* MUSIC CATEGORY - Warm reds, magentas */
    .gradient-music-1 {
      background: 
        radial-gradient(ellipse at 30% 20%, rgba(255, 150, 100, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(200, 50, 80, 0.9) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(80, 20, 40, 1) 0%, rgba(30, 10, 20, 1) 100%);
    }
    
    .gradient-music-2 {
      background: 
        radial-gradient(ellipse at 20% 80%, rgba(255, 100, 150, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(100, 50, 150, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #1a0a15 0%, #2d1525 50%, #0f0510 100%);
    }
    
    .gradient-music-3 {
      background: 
        radial-gradient(ellipse at 60% 30%, rgba(255, 200, 100, 0.6) 0%, transparent 40%),
        radial-gradient(ellipse at 30% 70%, rgba(255, 80, 80, 0.7) 0%, transparent 50%),
        linear-gradient(180deg, #2a1a10 0%, #1a0a0a 100%);
    }
    
    .gradient-music-4 {
      background: 
        radial-gradient(ellipse at 50% 0%, rgba(255, 150, 200, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(150, 50, 100, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #150815 0%, #0a0510 100%);
    }
    
    .gradient-music-5 {
      background: 
        radial-gradient(ellipse at 70% 20%, rgba(255, 180, 100, 0.7) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 90%, rgba(200, 80, 120, 0.8) 0%, transparent 50%),
        linear-gradient(180deg, #1f1510 0%, #0a0505 100%);
    }
    
    .gradient-music-6 {
      background: 
        radial-gradient(ellipse at 40% 40%, rgba(100, 200, 255, 0.4) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 70%, rgba(255, 100, 150, 0.6) 0%, transparent 50%),
        linear-gradient(135deg, #0a1020 0%, #1a0a15 100%);
    }
    
    /* EVENANT/BUSINESS CATEGORY - Rich purples */
    .gradient-evenant-1, .gradient-business-1 {
      background: 
        radial-gradient(ellipse at 30% 30%, rgba(180, 120, 255, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(100, 50, 200, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #15102a 0%, #0a0515 100%);
    }
    
    .gradient-evenant-2, .gradient-business-2 {
      background: 
        radial-gradient(ellipse at 50% 20%, rgba(200, 150, 255, 0.6) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 80%, rgba(100, 80, 180, 0.8) 0%, transparent 50%),
        linear-gradient(180deg, #1a1030 0%, #0a0510 100%);
    }
    
    .gradient-evenant-3, .gradient-business-3 {
      background: 
        radial-gradient(ellipse at 80% 30%, rgba(150, 100, 255, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at 30% 80%, rgba(80, 50, 150, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #100820 0%, #050310 100%);
    }
    
    /* CONTENT CATEGORY - Golden ambers */
    .gradient-content-1 {
      background: 
        radial-gradient(ellipse at 40% 30%, rgba(255, 220, 100, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255, 150, 50, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #2a2010 0%, #151005 100%);
    }
    
    .gradient-content-2 {
      background: 
        radial-gradient(ellipse at 60% 40%, rgba(255, 200, 80, 0.6) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 70%, rgba(200, 100, 50, 0.7) 0%, transparent 50%),
        linear-gradient(180deg, #201810 0%, #0a0805 100%);
    }
    
    .gradient-content-3 {
      background: 
        radial-gradient(ellipse at 30% 20%, rgba(255, 180, 100, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 120, 80, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #1a1208 0%, #0a0805 100%);
    }
    
    /* PERSONAL CATEGORY - Teals, greens */
    .gradient-personal-1 {
      background: 
        radial-gradient(ellipse at 40% 40%, rgba(100, 255, 180, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(50, 200, 150, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #0a1a15 0%, #051510 100%);
    }
    
    .gradient-personal-2 {
      background: 
        radial-gradient(ellipse at 30% 60%, rgba(80, 220, 180, 0.5) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 30%, rgba(100, 255, 200, 0.6) 0%, transparent 50%),
        linear-gradient(180deg, #081812 0%, #040a08 100%);
    }
    
    .gradient-personal-3 {
      background: 
        radial-gradient(ellipse at 60% 20%, rgba(150, 255, 200, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at 25% 80%, rgba(50, 180, 150, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #0a1510 0%, #050a08 100%);
    }
    
    /* TOOLS CATEGORY - Cyans, electric blues */
    .gradient-tools-1 {
      background: 
        radial-gradient(ellipse at 35% 35%, rgba(0, 220, 220, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 70%, rgba(0, 150, 200, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, #0a1520 0%, #051015 100%);
    }
    
    .gradient-tools-2 {
      background: 
        radial-gradient(ellipse at 50% 25%, rgba(100, 230, 255, 0.5) 0%, transparent 45%),
        radial-gradient(ellipse at 20% 75%, rgba(0, 180, 200, 0.7) 0%, transparent 50%),
        linear-gradient(180deg, #081a20 0%, #040d10 100%);
    }
    
    .gradient-tools-3 {
      background: 
        radial-gradient(ellipse at 70% 30%, rgba(50, 200, 220, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at 30% 70%, rgba(0, 150, 180, 0.6) 0%, transparent 50%),
        linear-gradient(135deg, #0a1218 0%, #050810 100%);
    }

    /* ============================================
       ORACLE PAGE - Redesigned
       ============================================ */
    
    #tab-oracle {
      display: none;
      height: calc(100vh - 70px);
      overflow: hidden;
    }
    
    #tab-oracle.active {
      display: block;
    }
    
    .oracle-container {
      display: grid;
      grid-template-columns: 1fr 280px;
      height: calc(100vh - 70px);
      overflow: hidden;
    }
    
    /* Chat Wrapper - scrollbar on right edge */
    .oracle-chat-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    
    .oracle-chat-scroll {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    
    .oracle-chat-scroll::-webkit-scrollbar {
      width: 4px;
    }
    
    .oracle-chat-scroll::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .oracle-chat-scroll::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 2px;
    }
    
    /* Chat Area - Centered within its column */
    .oracle-chat-area {
      display: flex;
      flex-direction: column;
      max-width: 720px;
      width: 100%;
      margin: 0 auto;
      padding: 0 32px;
      flex: 1;
    }
    
    /* Messages Container */
    .oracle-messages {
      flex: 1;
      padding: 32px 0;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    
    /* Empty State */
    .oracle-empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      max-width: 500px;
      margin: 0 auto;
    }
    
    .oracle-empty-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }
    
    .oracle-empty-icon svg {
      width: 36px;
      height: 36px;
      color: rgba(255, 255, 255, 0.4);
    }
    
    .oracle-empty h3 {
      font-size: 24px;
      font-weight: 600;
      color: #fff;
      margin: 0 0 12px 0;
    }
    
    .oracle-empty p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5);
      line-height: 1.6;
      margin: 0 0 32px 0;
    }
    
    .oracle-suggestions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }
    
    .oracle-suggestion {
      padding: 14px 20px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      text-align: left;
      transition: all 0.15s ease;
      font-family: inherit;
    }
    
    .oracle-suggestion:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
      color: #fff;
    }
    
    /* Messages */
    .oracle-message {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .oracle-message.user {
      align-items: flex-end;
    }
    
    .oracle-message.assistant {
      align-items: flex-start;
    }
    
    .oracle-message-label {
      display: none; /* Hide label in new design */
    }
    
    /* User Message - Gray Bubble */
    .oracle-message.user .oracle-message-content {
      max-width: 75%;
      padding: 12px 16px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 18px 18px 4px 18px;
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.9);
    }
    
    /* Assistant Message - Flowing Text */
    .oracle-message.assistant .oracle-message-content {
      max-width: 100%;
      font-size: 14px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.85);
    }
    
    .oracle-message-content p {
      margin-bottom: 16px;
    }
    
    .oracle-message-content p:last-child {
      margin-bottom: 0;
    }
    
    .oracle-message-content strong {
      color: #fff;
      font-weight: 600;
    }
    
    .oracle-message-content ul, .oracle-message-content ol {
      margin: 16px 0;
      padding-left: 20px;
    }
    
    .oracle-message-content li {
      margin: 8px 0;
    }
    
    .oracle-message-meta {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.2);
      padding: 0 4px;
    }
    
    /* Typing Indicator */
    .oracle-typing {
      display: flex;
      gap: 6px;
      padding: 8px 0;
    }
    
    .oracle-typing-dot {
      width: 8px;
      height: 8px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      animation: oracle-typing 1.4s ease-in-out infinite;
    }
    
    .oracle-typing-dot:nth-child(2) { animation-delay: 0.15s; }
    .oracle-typing-dot:nth-child(3) { animation-delay: 0.3s; }
    
    @keyframes oracle-typing {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
      30% { transform: translateY(-6px); opacity: 1; }
    }
    
    /* Input Area */
    .oracle-input-area {
      padding: 16px 32px 32px;
      display: flex;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .oracle-input-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 560px;
      padding: 8px 8px 8px 20px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      transition: all 0.2s ease;
    }
    
    .oracle-input-wrapper:focus-within {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
    }
    
    .oracle-input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: #fff;
      font-size: 14px;
      font-family: inherit;
      padding: 6px 0;
      resize: none;
      min-height: 24px;
      max-height: 100px;
      line-height: 1.5;
    }
    
    .oracle-input::placeholder {
      color: rgba(255, 255, 255, 0.25);
    }
    
    .oracle-send-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: none;
      background: rgba(255, 255, 255, 0.9);
      color: #0d0d0f;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }
    
    .oracle-send-btn:hover {
      background: #fff;
    }
    
    .oracle-send-btn:active {
      transform: scale(0.97);
    }
    
    .oracle-send-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      transform: none;
    }
    
    .oracle-send-btn svg {
      width: 15px;
      height: 15px;
      margin-left: 1px;
    }

    /* Chat Voice Button (shared by Oracle & Mentor) */
    .chat-voice-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: none;
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }

    .chat-voice-btn:hover {
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.8);
    }

    .chat-voice-btn.recording {
      background: rgba(239, 68, 68, 0.2);
      color: #ef4444;
      animation: pulse-recording 1.5s ease-in-out infinite;
    }

    @keyframes pulse-recording {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }

    .chat-voice-btn svg {
      width: 16px;
      height: 16px;
    }

    /* Context Panel / Sidebar */
    .oracle-context-panel {
      width: 280px;
      border-left: 1px solid rgba(255, 255, 255, 0.06);
      padding: 20px;
      height: 100%;
      overflow-y: auto;
      flex-shrink: 0;
    }
    
    .oracle-context-panel::-webkit-scrollbar {
      width: 3px;
    }
    
    .oracle-context-panel::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .oracle-context-panel::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 2px;
    }
    
    .oracle-context-section {
      margin-bottom: 28px;
      background: none;
      border: none;
      border-radius: 0;
      padding: 0;
    }
    
    .oracle-context-section:last-child {
      margin-bottom: 0;
    }
    
    .oracle-context-header {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.3);
    }
    
    .oracle-context-header svg {
      width: 14px;
      height: 14px;
      color: rgba(255, 255, 255, 0.3);
    }
    
    .oracle-context-badge {
      margin-left: auto;
      padding: 3px 8px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 4px;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.4);
    }
    
    /* North Star Card */
    .oracle-northstar-card {
      padding: 14px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 10px;
    }
    
    .oracle-northstar-title {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 4px;
      line-height: 1.35;
    }
    
    .oracle-northstar-deadline {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.35);
    }
    
    /* Projects List */
    .oracle-projects-list {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    
    .oracle-project-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .oracle-project-item:hover {
      background: rgba(255, 255, 255, 0.04);
    }
    
    .oracle-project-name {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
    }
    
    .oracle-project-progress {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.35);
    }
    
    /* Project Tasks in Sidebar */
    .oracle-project-tasks {
      margin-top: 4px;
      margin-bottom: 8px;
      padding-left: 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    
    .oracle-task-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
      padding: 6px 0;
    }
    
    .oracle-task-item:hover {
      color: rgba(255, 255, 255, 0.6);
    }
    
    .oracle-task-item.completed {
      text-decoration: line-through;
      opacity: 0.5;
    }
    
    .oracle-task-checkbox {
      width: 12px;
      height: 12px;
      border: 1.5px solid rgba(255, 255, 255, 0.2);
      border-radius: 3px;
      flex-shrink: 0;
    }
    
    .oracle-task-item.completed .oracle-task-checkbox {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.25);
    }
    
    .oracle-task-title {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .oracle-task-due {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.25);
      flex-shrink: 0;
    }
    
    .oracle-task-due.soon {
      color: #fbbf24;
    }
    
    /* Knowledge Placeholder */
    .oracle-knowledge-placeholder {
      padding: 16px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 10px;
      text-align: center;
    }
    
    .oracle-knowledge-placeholder p {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.3);
      line-height: 1.5;
      margin: 0;
    }
    
    /* Action Toast */
    .oracle-action-toast {
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      padding: 12px 20px;
      background: rgba(6, 182, 212, 0.15);
      border: 1px solid rgba(6, 182, 212, 0.3);
      border-radius: 12px;
      color: #fff;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
      z-index: 1000;
      backdrop-filter: blur(10px);
    }
    
    .oracle-action-toast.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    
    .oracle-action-toast svg {
      width: 18px;
      height: 18px;
      color: #06b6d4;
    }
    
    /* Recent Actions Section */
    .oracle-recent-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .oracle-action-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      animation: action-fade-in 0.3s ease;
    }
    
    @keyframes action-fade-in {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .oracle-action-item svg {
      width: 14px;
      height: 14px;
      color: #06b6d4;
      flex-shrink: 0;
      margin-top: 1px;
    }
    
    .oracle-action-time {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.35);
      margin-top: 4px;
    }
    
    /* Hide chat bubble and ideas button on Oracle and Gallery pages */
    #tab-oracle.active ~ .ai-chat-toggle,
    body:has(#tab-oracle.active) .ai-chat-toggle,
    #tab-gallery.active ~ .ai-chat-toggle,
    body:has(#tab-gallery.active) .ai-chat-toggle {
      opacity: 0;
      pointer-events: none;
    }
    
    #tab-oracle.active ~ .ideas-floating-btn,
    body:has(#tab-oracle.active) .ideas-floating-btn,
    #tab-gallery.active ~ .ideas-floating-btn,
    body:has(#tab-gallery.active) .ideas-floating-btn {
      opacity: 0;
      pointer-events: none;
    }
    
    /* Responsive */
    @media (max-width: 900px) {
      .oracle-container {
        grid-template-columns: 1fr;
      }
      
      .oracle-chat-area {
        max-width: 100%;
        padding: 0 16px;
      }
      
      .oracle-input-area {
        padding: 16px 16px 24px;
      }
      
      .oracle-context-panel {
        display: none;
      }
    }

    /* ============================================
       AI CHAT ASSISTANT
       ============================================ */
    
    /* Toggle Button - Blue gradient */
    .ai-chat-toggle {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 500;
    }

    .ai-chat-toggle:hover {
      transform: scale(1.05);
      background: rgba(255, 255, 255, 0.12);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    }

    .ai-chat-toggle svg {
      width: 22px;
      height: 22px;
      color: rgba(255, 255, 255, 0.8);
    }

    .ai-chat-toggle.open {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.8);
    }

    /* Notification badge */
    .ai-chat-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 16px;
      height: 16px;
      background: #ff4444;
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 700;
      color: #fff;
      border: 2px solid #0a0a0f;
    }

    .ai-chat-badge.visible {
      display: flex;
    }

    /* Chat Panel */
    .ai-chat-panel {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 360px;
      height: 580px;
      max-height: calc(100vh - 48px);
      border-radius: 20px;
      background: #111113;
      border: 1px solid rgba(255, 255, 255, 0.06);
      box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
      z-index: 501;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      transform: translateY(20px) scale(0.96);
      pointer-events: none;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .ai-chat-panel.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    /* Panel Header */
    .ai-chat-header {
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .ai-chat-header-info {
      flex: 1;
    }

    .ai-chat-title {
      font-size: 15px;
      font-weight: 600;
      color: #fff;
    }

    .ai-chat-subtitle {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
      margin-top: 1px;
    }

    .ai-chat-header-actions {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .ai-chat-expand-btn {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .ai-chat-expand-btn:hover {
      background: rgba(6, 182, 212, 0.15);
      color: var(--primary);
    }

    .ai-chat-expand-btn svg {
      width: 14px;
      height: 14px;
    }

    .ai-chat-close-btn {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .ai-chat-close-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.8);
    }

    .ai-chat-close-btn svg {
      width: 16px;
      height: 16px;
    }

    /* Messages Area */
    .ai-chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .ai-chat-messages::-webkit-scrollbar {
      width: 0;
    }

    /* Empty State */
    .ai-chat-empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
      text-align: center;
    }

    .ai-chat-empty-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }

    .ai-chat-empty-icon svg {
      width: 28px;
      height: 28px;
      color: rgba(255, 255, 255, 0.5);
    }

    .ai-chat-empty-title {
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 8px;
    }

    .ai-chat-empty-subtitle {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: 24px;
      line-height: 1.5;
    }

    .ai-chat-suggestions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .ai-chat-suggestion {
      padding: 12px 16px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      font-size: 13px;
      font-family: inherit;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      text-align: left;
      transition: all 0.15s ease;
    }

    .ai-chat-suggestion:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
      color: #fff;
    }

    /* Message Bubbles */
    .ai-message {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-width: 85%;
    }

    .ai-message.user {
      align-self: flex-end;
      align-items: flex-end;
    }

    .ai-message.assistant {
      align-self: flex-start;
      align-items: flex-start;
    }

    .ai-message-content {
      padding: 12px 16px;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.5;
    }

    /* User bubble - gray */
    .ai-message.user .ai-message-content {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.9);
      border-bottom-right-radius: 6px;
    }

    /* Assistant bubble - dark */
    .ai-message.assistant .ai-message-content {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.9);
      border-bottom-left-radius: 6px;
    }

    .ai-message-meta {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.3);
      padding: 0 4px;
    }

    /* Rich text in assistant messages */
    .ai-message-content p {
      margin: 0;
    }

    .ai-message-content p + p {
      margin-top: 10px;
    }

    .ai-message-content strong {
      font-weight: 600;
      color: #fff;
    }

    .ai-message-content ul, .ai-message-content ol {
      margin: 10px 0;
      padding-left: 18px;
    }

    .ai-message-content li {
      margin: 6px 0;
    }

    /* Typing Indicator */
    .ai-typing-indicator {
      display: flex;
      gap: 4px;
      padding: 4px 0;
    }

    .ai-typing-dot {
      width: 6px;
      height: 6px;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      animation: ai-typing 1.4s ease-in-out infinite;
    }

    .ai-typing-dot:nth-child(2) { animation-delay: 0.15s; }
    .ai-typing-dot:nth-child(3) { animation-delay: 0.3s; }

    @keyframes ai-typing {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

    /* Input Area */
    .ai-chat-input-area {
      padding: 12px 16px 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .ai-chat-input-wrapper {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      padding: 4px 4px 4px 16px;
      transition: all 0.2s ease;
    }

    .ai-chat-input-wrapper:focus-within {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .ai-chat-input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      font-size: 14px;
      font-family: inherit;
      color: #fff;
      padding: 8px 0;
      resize: none;
      min-height: 20px;
      max-height: 200px;
      line-height: 1.4;
      overflow-y: auto;
    }

    .ai-chat-input::placeholder {
      color: rgba(255, 255, 255, 0.25);
    }

    .ai-chat-send-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }

    .ai-chat-send-btn:hover {
      background: #fff;
    }

    .ai-chat-send-btn:active {
      transform: scale(0.95);
    }

    .ai-chat-send-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      transform: none;
    }

    .ai-chat-send-btn svg {
      width: 15px;
      height: 15px;
      color: #0d0d0f;
    }

    /* Mobile Responsive */
    @media (max-width: 480px) {
      .ai-chat-panel {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
      }

      .ai-chat-toggle {
        bottom: 16px;
        right: 16px;
      }
    }

    /* ============================================
       AGENDA BUBBLE COMPONENT
       ============================================ */
    
    .agenda-bubble {
      position: fixed;
      left: 20px;
      top: 80px;
      z-index: 100;
      display: none;
    }

    .agenda-bubble.visible {
      display: block;
    }

    /* Collapsed State (Pill) */
    .agenda-collapsed {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(17, 17, 19, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      padding: 10px 14px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .agenda-bubble.expanded .agenda-collapsed {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-10px);
    }

    .agenda-collapsed:hover {
      background: rgba(25, 25, 28, 0.95);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .agenda-now-indicator {
      width: 8px;
      height: 8px;
      background: #22c55e;
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
      animation: agendaPulse 2s infinite;
      flex-shrink: 0;
    }

    .agenda-now-indicator.empty {
      background: rgba(255, 255, 255, 0.3);
      box-shadow: none;
      animation: none;
    }

    @keyframes agendaPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .agenda-now-text {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      white-space: nowrap;
    }

    .agenda-now-text strong {
      color: rgba(255, 255, 255, 0.9);
    }

    .agenda-chevron {
      width: 14px;
      height: 14px;
      color: rgba(255, 255, 255, 0.3);
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    .agenda-bubble.expanded .agenda-chevron {
      transform: rotate(180deg);
    }

    /* Expanded State (Full Panel) */
    .agenda-expanded {
      position: absolute;
      left: 0;
      top: 0;
      width: 300px;
      max-height: calc(100vh - 120px);
      background: rgba(17, 17, 19, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 16px;
      opacity: 0;
      transform: translateY(-10px) scale(0.98);
      pointer-events: none;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .agenda-bubble.expanded .agenda-expanded {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    /* Header */
    .agenda-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .agenda-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .agenda-icon {
      width: 32px;
      height: 32px;
      background: rgba(34, 197, 94, 0.15);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .agenda-icon svg {
      width: 16px;
      height: 16px;
      color: #22c55e;
    }

    .agenda-title-group h3 {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
    }

    .agenda-title-group span {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
    }

    .agenda-header-actions {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .agenda-header-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      border: none;
      background: transparent;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.4);
      transition: all 0.15s ease;
    }

    .agenda-header-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.7);
    }

    .agenda-header-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Progress Bar */
    .agenda-progress {
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .agenda-progress-bar-bg {
      height: 3px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 6px;
    }

    .agenda-progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #22c55e, #06b6d4);
      border-radius: 2px;
      transition: width 0.5s ease;
    }

    .agenda-progress-label {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.35);
      display: flex;
      justify-content: space-between;
    }

    /* Time Blocks List */
    .agenda-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      min-height: 100px;
    }

    .agenda-list::-webkit-scrollbar {
      width: 4px;
    }

    .agenda-list::-webkit-scrollbar-track {
      background: transparent;
    }

    .agenda-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 2px;
    }

    /* Empty State */
    .agenda-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 32px 20px;
      text-align: center;
    }

    .agenda-empty-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }

    .agenda-empty-icon svg {
      width: 24px;
      height: 24px;
      color: rgba(255, 255, 255, 0.3);
    }

    .agenda-empty p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
      margin: 0 0 16px 0;
      line-height: 1.5;
    }

    .agenda-empty-btn {
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .agenda-empty-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.12);
      color: #fff;
    }

    /* Individual Time Block */
    .agenda-time-block {
      display: flex;
      gap: 12px;
      padding: 12px;
      border-radius: 10px;
      margin-bottom: 4px;
      cursor: pointer;
      transition: background 0.15s ease;
      position: relative;
    }

    .agenda-time-block:hover {
      background: rgba(255, 255, 255, 0.03);
    }

    .agenda-time-block:last-child {
      margin-bottom: 0;
    }

    .agenda-time-block.past {
      opacity: 0.5;
    }

    .agenda-time-block.current {
      background: rgba(34, 197, 94, 0.08);
      border: 1px solid rgba(34, 197, 94, 0.15);
    }

    .agenda-time-block.current:hover {
      background: rgba(34, 197, 94, 0.12);
    }

    /* Delete button on hover */
    .agenda-time-block-delete {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 20px;
      height: 20px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.06);
      border: none;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.15s ease;
    }

    .agenda-time-block:hover .agenda-time-block-delete {
      opacity: 1;
    }

    .agenda-time-block-delete:hover {
      background: rgba(239, 68, 68, 0.2);
      color: #ef4444;
    }

    .agenda-time-block-delete svg {
      width: 12px;
      height: 12px;
    }

    /* Color indicator */
    .agenda-time-block-color {
      width: 3px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .agenda-time-block-color.meeting { background: #3b82f6; }
    .agenda-time-block-color.video { background: #22c55e; }
    .agenda-time-block-color.break { background: rgba(255, 255, 255, 0.2); }
    .agenda-time-block-color.admin { background: #f59e0b; }
    .agenda-time-block-color.creative { background: #ec4899; }
    .agenda-time-block-color.focus { background: #8b5cf6; }
    .agenda-time-block-color.personal { background: #06b6d4; }
    .agenda-time-block-color.work { background: #00d4d4; }

    /* Time column */
    .agenda-time-block-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 44px;
      flex-shrink: 0;
    }

    .agenda-time-block-time {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
      font-variant-numeric: tabular-nums;
    }

    .agenda-time-block.current .agenda-time-block-time {
      color: #22c55e;
    }

    .agenda-time-block-duration {
      font-size: 9px;
      color: rgba(255, 255, 255, 0.25);
      margin-top: 2px;
    }

    /* Content column */
    .agenda-time-block-content {
      flex: 1;
      min-width: 0;
    }

    .agenda-time-block-title {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 3px;
    }

    .agenda-time-block.current .agenda-time-block-title {
      color: #fff;
    }

    .agenda-time-block-subtitle {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
    }

    /* Sub-tasks */
    .agenda-time-block-tasks {
      margin-top: 8px;
    }

    .agenda-time-block-task {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.45);
      padding: 3px 0;
      padding-left: 12px;
      position: relative;
    }

    .agenda-time-block-task::before {
      content: '';
      position: absolute;
      left: 0;
      top: 9px;
      width: 4px;
      height: 4px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
    }

    /* Schedule Proposal Modal */
    .agenda-proposal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      z-index: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .agenda-proposal-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .agenda-proposal-modal {
      width: 400px;
      max-width: 90vw;
      max-height: 80vh;
      background: #111113;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      transform: translateY(20px) scale(0.96);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .agenda-proposal-overlay.active .agenda-proposal-modal {
      transform: translateY(0) scale(1);
    }

    .agenda-proposal-header {
      padding: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .agenda-proposal-header-icon {
      width: 40px;
      height: 40px;
      background: rgba(34, 197, 94, 0.15);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .agenda-proposal-header-icon svg {
      width: 20px;
      height: 20px;
      color: #22c55e;
    }

    .agenda-proposal-header h3 {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      margin: 0;
    }

    .agenda-proposal-header p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      margin: 4px 0 0 0;
    }

    .agenda-proposal-list {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      max-height: 400px;
    }

    .agenda-proposal-footer {
      padding: 16px 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .agenda-proposal-btn {
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .agenda-proposal-btn.secondary {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.7);
    }

    .agenda-proposal-btn.secondary:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .agenda-proposal-btn.primary {
      background: rgba(34, 197, 94, 0.9);
      border: none;
      color: #fff;
    }

    .agenda-proposal-btn.primary:hover {
      background: #22c55e;
    }

    /* Mobile responsive */
    @media (max-width: 768px) {
      .agenda-bubble {
        left: 12px;
        top: 70px;
      }

      .agenda-expanded {
        width: 280px;
      }
    }

    /* ============================================
       IDEAS CAPTURE SYSTEM
       ============================================ */

    /* Floating Lightbulb Button */
    .ideas-floating-btn {
      position: fixed;
      bottom: 88px; /* Stacked above chat button (24 + 52 + 12 gap) */
      right: 24px;
      width: 52px;
      height: 52px;
      background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
      border: 1px solid rgba(251, 191, 36, 0.2);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 500;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }

    .ideas-floating-btn:hover {
      transform: scale(1.05);
      background: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(245, 158, 11, 0.15) 100%);
      border-color: rgba(251, 191, 36, 0.3);
      box-shadow: 0 12px 32px rgba(251, 191, 36, 0.15);
    }

    .ideas-floating-btn-icon {
      font-size: 22px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }

    .ideas-floating-btn.panel-open {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.8);
    }

    /* Hide chat button when Ideas panel is open */
    .ideas-panel.open ~ .ai-chat-toggle,
    body:has(.ideas-panel.open) .ai-chat-toggle {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.8);
    }

    /* ============================================
       CAPTURE PANEL - Ideas Capture System
       ============================================ */
    
    /* Capture Panel Container */
    .capture-panel {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.95);
      width: 400px;
      max-height: 90vh;
      background: #0f0f12;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 300;
      opacity: 0;
      pointer-events: none;
      transition: all 0.2s ease;
    }
    
    .capture-panel.open {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%) scale(1);
    }
    
    /* Capture Header */
    .capture-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    
    .capture-title {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .capture-title-icon {
      width: 20px;
      height: 20px;
      stroke: var(--primary);
    }
    
    .capture-title-text {
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
    }
    
    .capture-close {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .capture-close:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary);
    }
    
    .capture-close svg {
      width: 16px;
      height: 16px;
    }
    
    /* Capture Body */
    .capture-body {
      flex: 1;
      padding: 20px 24px;
      overflow-y: auto;
    }
    
    .capture-body::-webkit-scrollbar {
      width: 4px;
    }
    
    .capture-body::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .capture-body::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 2px;
    }
    
    /* Mode Toggle */
    .mode-toggle {
      display: flex;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 8px;
      padding: 4px;
      gap: 4px;
    }
    
    .mode-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 12px;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .mode-btn:hover {
      color: var(--text-secondary);
    }
    
    .mode-btn.active {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
    }
    
    .mode-btn svg {
      width: 14px;
      height: 14px;
    }
    
    /* Voice Mode */
    .voice-mode {
      display: none;
      flex-direction: column;
      align-items: center;
      padding: 32px 0;
    }
    
    .voice-mode.active {
      display: flex;
    }
    
    .text-mode.hidden {
      display: none;
    }
    
    /* Mic Button */
    .mic-container {
      position: relative;
      margin-bottom: 24px;
    }
    
    .mic-btn {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.03);
      border: 2px solid rgba(255, 255, 255, 0.1);
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      position: relative;
      z-index: 2;
    }
    
    .mic-btn:hover {
      border-color: rgba(255, 255, 255, 0.2);
      color: var(--text-secondary);
    }
    
    .mic-btn.recording {
      background: rgba(6, 182, 212, 0.1);
      border-color: var(--primary);
      color: var(--primary);
    }
    
    .mic-btn svg {
      width: 32px;
      height: 32px;
    }
    
    /* Pulse Animation */
    .mic-pulse {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 88px;
      height: 88px;
      border-radius: 50%;
      border: 2px solid var(--primary);
      opacity: 0;
      z-index: 1;
    }
    
    .mic-btn.recording ~ .mic-pulse {
      animation: micPulse 1.5s ease-out infinite;
    }
    
    .mic-btn.recording ~ .mic-pulse:nth-child(2) {
      animation-delay: 0.5s;
    }
    
    @keyframes micPulse {
      0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
      }
      100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
      }
    }
    
    /* Voice Status */
    .voice-status {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 6px;
    }
    
    .voice-status.recording {
      color: var(--primary);
    }
    
    .voice-timer {
      font-size: 22px;
      font-weight: 300;
      color: var(--text-secondary);
      font-variant-numeric: tabular-nums;
      margin-bottom: 24px;
    }
    
    /* Waveform */
    .waveform {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      height: 36px;
      margin-bottom: 24px;
    }
    
    .waveform-bar {
      width: 3px;
      height: 8px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      transition: height 0.1s ease;
    }
    
    .waveform.active .waveform-bar {
      background: var(--primary);
      animation: waveformBar 0.5s ease-in-out infinite alternate;
    }
    
    .waveform.active .waveform-bar:nth-child(1) { animation-delay: 0s; }
    .waveform.active .waveform-bar:nth-child(2) { animation-delay: 0.1s; }
    .waveform.active .waveform-bar:nth-child(3) { animation-delay: 0.2s; }
    .waveform.active .waveform-bar:nth-child(4) { animation-delay: 0.3s; }
    .waveform.active .waveform-bar:nth-child(5) { animation-delay: 0.4s; }
    .waveform.active .waveform-bar:nth-child(6) { animation-delay: 0.3s; }
    .waveform.active .waveform-bar:nth-child(7) { animation-delay: 0.2s; }
    .waveform.active .waveform-bar:nth-child(8) { animation-delay: 0.1s; }
    .waveform.active .waveform-bar:nth-child(9) { animation-delay: 0s; }
    
    @keyframes waveformBar {
      0% { height: 8px; }
      100% { height: 28px; }
    }
    
    /* Transcription Container */
    .transcription-container {
      width: 100%;
      margin-bottom: 20px;
    }
    
    .transcription-label {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    
    .transcription-box {
      width: 100%;
      min-height: 80px;
      max-height: 150px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-secondary);
      overflow-y: auto;
    }
    
    .transcription-box:empty::before {
      content: 'Transcription will appear here...';
      color: var(--text-muted);
    }
    
    .transcription-box .interim {
      color: var(--text-muted);
      font-style: italic;
    }
    
    /* AI Suggestions */
    .ai-suggestions {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(6, 182, 212, 0.03);
      border: 1px solid rgba(6, 182, 212, 0.15);
      border-radius: 10px;
      overflow: hidden;
    }
    
    .ai-suggestions-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(6, 182, 212, 0.1);
      font-size: 11px;
      font-weight: 500;
      color: var(--primary);
    }
    
    .ai-suggestions-header svg {
      width: 14px;
      height: 14px;
    }
    
    .ai-badge {
      margin-left: auto;
      padding: 2px 8px;
      background: rgba(6, 182, 212, 0.15);
      border-radius: 4px;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    
    .ai-suggestions-body {
      padding: 8px;
    }
    
    .ai-suggestion-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 6px;
      transition: background 0.15s ease;
    }
    
    .ai-suggestion-item:hover {
      background: rgba(255, 255, 255, 0.02);
    }
    
    .ai-suggestion-label {
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      width: 50px;
    }
    
    .ai-suggestion-value {
      flex: 1;
      font-size: 12px;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .ai-suggestion-accept {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .ai-suggestion-accept:hover {
      background: rgba(6, 182, 212, 0.15);
      border-color: var(--primary);
      color: var(--primary);
    }
    
    .ai-suggestion-accept.accepted {
      background: rgba(34, 197, 94, 0.15);
      border-color: #22c55e;
      color: #22c55e;
    }
    
    .ai-suggestion-accept svg {
      width: 12px;
      height: 12px;
    }
    
    .ai-suggestions-actions {
      padding: 8px 14px 12px;
      border-top: 1px solid rgba(6, 182, 212, 0.1);
    }
    
    /* Voice Actions */
    .voice-actions {
      display: flex;
      gap: 10px;
      width: 100%;
    }
    
    .voice-action-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 14px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .voice-action-btn:hover {
      border-color: rgba(255, 255, 255, 0.2);
      color: var(--text-secondary);
    }
    
    .voice-action-btn.primary {
      background: var(--primary);
      border-color: var(--primary);
      color: #0a0a0c;
      font-weight: 500;
    }
    
    .voice-action-btn.primary:hover {
      filter: brightness(1.1);
    }
    
    .voice-action-btn.primary:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .voice-action-btn svg {
      width: 14px;
      height: 14px;
    }
    
    /* Voice Tips */
    .voice-tips {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      width: 100%;
    }
    
    .voice-tip {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    
    .voice-tip:last-child {
      margin-bottom: 0;
    }
    
    .voice-tip svg {
      width: 14px;
      height: 14px;
      stroke: var(--primary);
      flex-shrink: 0;
      margin-top: 1px;
    }
    
    /* Form Fields */
    .capture-field {
      margin-bottom: 18px;
    }
    
    .capture-field:last-child {
      margin-bottom: 0;
    }
    
    .capture-label {
      display: block;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    
    /* Capture Input */
    .capture-input {
      width: 100%;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      transition: all 0.15s ease;
    }
    
    .capture-input::placeholder {
      color: var(--text-muted);
    }
    
    .capture-input:focus {
      outline: none;
      border-color: rgba(255, 255, 255, 0.15);
    }
    
    .capture-input.large {
      font-size: 15px;
      padding: 12px 14px;
    }
    
    /* Capture Textarea */
    .capture-textarea {
      width: 100%;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      resize: none;
      min-height: 70px;
      transition: all 0.15s ease;
    }
    
    .capture-textarea::placeholder {
      color: var(--text-muted);
    }
    
    .capture-textarea:focus {
      outline: none;
      border-color: rgba(255, 255, 255, 0.15);
    }
    
    /* Type Selector */
    .type-selector {
      display: flex;
      gap: 6px;
    }
    
    .type-btn {
      flex: 1;
      padding: 9px 10px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    .type-btn:hover {
      border-color: rgba(255, 255, 255, 0.15);
      color: var(--text-secondary);
    }
    
    .type-btn.active {
      border-color: rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
    }
    
    .type-btn svg {
      width: 14px;
      height: 14px;
    }
    
    /* Pill Selector (Domain) */
    .pill-selector {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    
    .pill-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      color: var(--text-muted);
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .pill-btn:hover {
      border-color: rgba(255, 255, 255, 0.15);
      color: var(--text-secondary);
    }
    
    .pill-btn.active {
      border-color: rgba(255, 255, 255, 0.2);
      color: var(--text-secondary);
    }
    
    .pill-btn .pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--pill-color);
      opacity: 0.4;
    }
    
    .pill-btn.active .pill-dot {
      opacity: 1;
    }
    
    .pill-btn[data-domain="music"] { --pill-color: #f97066; }
    .pill-btn[data-domain="content"] { --pill-color: #a855f7; }
    .pill-btn[data-domain="tools"] { --pill-color: #06b6d4; }
    .pill-btn[data-domain="business"] { --pill-color: #f59e0b; }
    .pill-btn[data-domain="personal"] { --pill-color: #22c55e; }
    .pill-btn[data-domain="learning"] { --pill-color: #3b82f6; }
    
    /* Capture Select */
    .capture-select {
      width: 100%;
      padding: 9px 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      color: var(--text-secondary);
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23686870' stroke-width='1.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      transition: all 0.15s ease;
    }
    
    .capture-select:focus {
      outline: none;
      border-color: rgba(255, 255, 255, 0.15);
    }
    
    /* Collapsible Section */
    .capture-collapsible {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      margin-top: 18px;
      padding-top: 14px;
    }
    
    .collapsible-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 10px;
      font-family: inherit;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      padding: 0;
      margin-bottom: 12px;
      transition: color 0.15s ease;
    }
    
    .collapsible-toggle:hover {
      color: var(--text-secondary);
    }
    
    .collapsible-toggle svg {
      width: 12px;
      height: 12px;
      transition: transform 0.2s ease;
    }
    
    .collapsible-toggle.open svg {
      transform: rotate(180deg);
    }
    
    .collapsible-content {
      display: none;
    }
    
    .collapsible-content.open {
      display: block;
    }
    
    /* Tags Container */
    .capture-tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px 10px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      min-height: 38px;
      transition: all 0.15s ease;
    }
    
    .capture-tags-container:focus-within {
      border-color: rgba(255, 255, 255, 0.15);
    }
    
    .capture-tag {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      font-size: 11px;
      color: var(--text-secondary);
    }
    
    .capture-tag-remove {
      width: 12px;
      height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0;
      transition: color 0.15s ease;
    }
    
    .capture-tag-remove:hover {
      color: #ef4444;
    }
    
    .capture-tag-remove svg {
      width: 10px;
      height: 10px;
    }
    
    .capture-tags-input {
      flex: 1;
      min-width: 70px;
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 11px;
      font-family: inherit;
    }
    
    .capture-tags-input::placeholder {
      color: var(--text-muted);
    }
    
    .capture-tags-input:focus {
      outline: none;
    }
    
    /* Recent Section */
    .recent-section {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      margin-top: 18px;
      padding-top: 14px;
    }
    
    .recent-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    
    .recent-title {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    
    .recent-count {
      font-size: 10px;
      color: var(--text-muted);
      opacity: 0.6;
    }
    
    .recent-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    
    .recent-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .recent-item:hover {
      border-color: rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
    }
    
    .recent-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      opacity: 0.6;
    }
    
    .recent-item[data-domain="music"] .recent-dot { background: #f97066; }
    .recent-item[data-domain="content"] .recent-dot { background: #a855f7; }
    .recent-item[data-domain="tools"] .recent-dot { background: #06b6d4; }
    .recent-item[data-domain="business"] .recent-dot { background: #f59e0b; }
    .recent-item[data-domain="personal"] .recent-dot { background: #22c55e; }
    .recent-item[data-domain="learning"] .recent-dot { background: #3b82f6; }
    
    .recent-content {
      flex: 1;
      min-width: 0;
    }
    
    .recent-item-title {
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .recent-item-meta {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    
    .recent-item-type {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--text-muted);
      padding: 2px 6px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 4px;
    }
    
    /* Capture Footer */
    .capture-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
    
    .capture-shortcut {
      font-size: 10px;
      color: var(--text-muted);
    }
    
    .capture-shortcut kbd {
      padding: 2px 5px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      font-family: inherit;
      font-size: 10px;
    }
    
    .capture-submit {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 9px 16px;
      background: var(--primary);
      border: none;
      border-radius: 8px;
      color: #0a0a0c;
      font-size: 12px;
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .capture-submit:hover {
      filter: brightness(1.1);
    }
    
    .capture-submit:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .capture-submit svg {
      width: 14px;
      height: 14px;
    }

    /* ============================================
       SIMPLIFIED CAPTURE PANEL - Phase 1
       ============================================ */

    /* Main Input Area */
    .capture-input-area {
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.02);
      transition: all 0.2s ease;
    }

    .capture-input-area:focus-within {
      border-color: rgba(6, 182, 212, 0.3);
      background: rgba(6, 182, 212, 0.02);
    }

    .capture-input-area.dragover {
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.05);
    }

    .capture-main-input {
      width: 100%;
      min-height: 100px;
      padding: 16px;
      background: transparent;
      border: none;
      border-radius: 12px;
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      line-height: 1.5;
      resize: none;
      outline: none;
    }

    .capture-main-input::placeholder {
      color: var(--text-muted);
    }

    /* URL Preview Card */
    .url-preview-card {
      margin: 0 16px 16px 16px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 10px;
    }

    .url-preview-loading {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-muted);
      font-size: 12px;
    }

    .url-preview-spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(6, 182, 212, 0.2);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .url-preview-content {
      display: flex;
      gap: 12px;
      position: relative;
    }

    .url-preview-image {
      width: 80px;
      height: 60px;
      object-fit: cover;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.05);
      flex-shrink: 0;
    }

    .url-preview-info {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .url-preview-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .url-preview-description {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 4px;
    }

    .url-preview-domain {
      font-size: 10px;
      color: var(--primary);
    }

    .url-preview-remove {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-primary);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .url-preview-remove:hover {
      background: rgba(239, 68, 68, 0.2);
      border-color: rgba(239, 68, 68, 0.3);
      color: #ef4444;
    }

    .url-preview-remove svg {
      width: 12px;
      height: 12px;
    }

    /* Image Drop Zone */
    .image-drop-zone {
      display: none;
      align-items: center;
      justify-content: center;
      margin: 16px;
      padding: 24px;
      border: 2px dashed rgba(6, 182, 212, 0.3);
      border-radius: 10px;
      background: rgba(6, 182, 212, 0.02);
    }

    .capture-input-area.dragover .image-drop-zone {
      display: flex;
    }

    .capture-input-area.dragover .capture-main-input {
      opacity: 0.3;
    }

    .image-drop-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: var(--primary);
    }

    .image-drop-content svg {
      width: 32px;
      height: 32px;
      opacity: 0.7;
    }

    .image-drop-content span {
      font-size: 12px;
      font-weight: 500;
    }

    /* Image Preview */
    .image-preview {
      position: relative;
      margin: 0 16px 16px 16px;
    }

    .image-preview img {
      width: 100%;
      max-height: 150px;
      object-fit: cover;
      border-radius: 10px;
    }

    .image-preview-remove {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.7);
      border: none;
      border-radius: 50%;
      color: #fff;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .image-preview-remove:hover {
      background: rgba(239, 68, 68, 0.9);
    }

    .image-preview-remove svg {
      width: 14px;
      height: 14px;
    }

    /* Note Field */
    .capture-note-field {
      padding: 0 16px 16px 16px;
    }

    .capture-note-input {
      width: 100%;
      min-height: 60px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      line-height: 1.5;
      resize: none;
      outline: none;
      transition: all 0.15s ease;
    }

    .capture-note-input:focus {
      border-color: rgba(6, 182, 212, 0.3);
      background: rgba(6, 182, 212, 0.02);
    }

    .capture-note-input::placeholder {
      color: var(--text-muted);
    }

    /* Quick Actions */
    .capture-quick-actions {
      display: flex;
      gap: 8px;
      padding: 0 16px 16px 16px;
    }

    .capture-quick-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .capture-quick-btn:hover {
      border-color: rgba(255, 255, 255, 0.15);
      color: var(--text-secondary);
      background: rgba(255, 255, 255, 0.02);
    }

    .capture-quick-btn.active {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(6, 182, 212, 0.05);
    }

    .capture-quick-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Updated Footer with Multiple Buttons */
    .capture-footer-actions {
      display: flex;
      gap: 8px;
    }

    .capture-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 9px 16px;
      border: none;
      border-radius: 8px;
      font-size: 12px;
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
    }

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

    .capture-btn.secondary {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text-muted);
    }

    .capture-btn.secondary:hover {
      border-color: rgba(255, 255, 255, 0.2);
      color: var(--text-secondary);
      background: rgba(255, 255, 255, 0.02);
    }

    .capture-btn.primary {
      background: var(--primary);
      color: #0a0a0c;
    }

    .capture-btn.primary:hover {
      filter: brightness(1.1);
    }

    .capture-btn.accent {
      background: rgba(168, 85, 247, 0.15);
      border: 1px solid rgba(168, 85, 247, 0.3);
      color: #a855f7;
    }

    .capture-btn.accent:hover {
      background: rgba(168, 85, 247, 0.25);
      border-color: rgba(168, 85, 247, 0.5);
    }

    .capture-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* ============================================
       FRAGMENTS INBOX - Phase 2
       ============================================ */

    .inbox-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(8px);
      z-index: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .inbox-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .inbox-container {
      width: 90%;
      max-width: 600px;
      max-height: 80vh;
      background: var(--bg-secondary);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: scale(0.95);
      transition: transform 0.3s ease;
    }

    .inbox-overlay.open .inbox-container {
      transform: scale(1);
    }

    .inbox-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .inbox-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
    }

    .inbox-title svg {
      width: 20px;
      height: 20px;
      stroke: var(--primary);
    }

    .inbox-count {
      padding: 2px 8px;
      background: rgba(6, 182, 212, 0.15);
      border-radius: 10px;
      font-size: 11px;
      font-weight: 500;
      color: var(--primary);
    }

    .inbox-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .inbox-filter {
      padding: 6px 10px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
    }

    .inbox-close-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 8px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .inbox-close-btn:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary);
    }

    .inbox-close-btn svg {
      width: 18px;
      height: 18px;
    }

    .inbox-content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }

    .inbox-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Fragment Card in Inbox */
    .fragment-card {
      padding: 16px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .fragment-card:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(6, 182, 212, 0.2);
    }

    .fragment-card-header {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 8px;
    }

    .fragment-card-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(6, 182, 212, 0.1);
      border-radius: 8px;
      color: var(--primary);
      flex-shrink: 0;
    }

    .fragment-card-icon svg {
      width: 16px;
      height: 16px;
    }

    .fragment-card-info {
      flex: 1;
      min-width: 0;
    }

    .fragment-card-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fragment-card-meta {
      font-size: 11px;
      color: var(--text-muted);
    }

    .fragment-card-content {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .fragment-card-preview {
      margin-top: 12px;
      display: flex;
      gap: 12px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 8px;
    }

    .fragment-card-preview img {
      width: 60px;
      height: 45px;
      object-fit: cover;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .fragment-card-preview-info {
      flex: 1;
      min-width: 0;
    }

    .fragment-card-preview-title {
      font-size: 11px;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fragment-card-preview-domain {
      font-size: 10px;
      color: var(--primary);
    }

    /* Inbox Empty State */
    .inbox-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }

    .inbox-empty svg {
      width: 48px;
      height: 48px;
      stroke: var(--text-muted);
      opacity: 0.5;
      margin-bottom: 16px;
    }

    .inbox-empty h3 {
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
      margin: 0 0 8px 0;
    }

    .inbox-empty p {
      font-size: 13px;
      color: var(--text-muted);
      margin: 0 0 20px 0;
    }

    .inbox-capture-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      background: var(--primary);
      border: none;
      border-radius: 8px;
      color: #0a0a0c;
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .inbox-capture-btn:hover {
      filter: brightness(1.1);
    }

    .inbox-capture-btn svg {
      width: 16px;
      height: 16px;
    }

    .inbox-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .inbox-hint {
      font-size: 11px;
      color: var(--text-muted);
    }

    .inbox-clear-btn {
      padding: 8px 14px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .inbox-clear-btn:hover {
      border-color: rgba(239, 68, 68, 0.3);
      color: #ef4444;
    }

    /* ============================================
       ALLOCATION MODAL - Phase 3
       ============================================ */

    .allocation-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(8px);
      z-index: 450;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .allocation-modal-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .allocation-modal {
      width: 90%;
      max-width: 400px;
      background: var(--bg-secondary);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      overflow: hidden;
      transform: scale(0.95) translateY(10px);
      transition: transform 0.2s ease;
    }

    .allocation-modal-overlay.open .allocation-modal {
      transform: scale(1) translateY(0);
    }

    .allocation-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .allocation-header h3 {
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      margin: 0;
    }

    .allocation-close {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .allocation-close:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary);
    }

    .allocation-close svg {
      width: 16px;
      height: 16px;
    }

    .allocation-preview {
      padding: 16px 20px;
      background: rgba(255, 255, 255, 0.02);
    }

    .allocation-preview-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 4px;
    }

    .allocation-preview-content {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .allocation-destinations {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 20px;
    }

    .allocation-dest {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 20px 16px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .allocation-dest:hover {
      background: rgba(6, 182, 212, 0.05);
      border-color: rgba(6, 182, 212, 0.2);
    }

    .allocation-dest svg {
      width: 24px;
      height: 24px;
      stroke: var(--primary);
    }

    .allocation-dest-title {
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
    }

    .allocation-dest-desc {
      font-size: 10px;
      color: var(--text-muted);
      text-align: center;
    }

    .allocation-footer {
      display: flex;
      justify-content: center;
      padding: 16px 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .allocation-archive-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: transparent;
      border: 1px solid rgba(239, 68, 68, 0.2);
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 12px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .allocation-archive-btn:hover {
      background: rgba(239, 68, 68, 0.1);
      border-color: rgba(239, 68, 68, 0.3);
      color: #ef4444;
    }

    .allocation-archive-btn svg {
      width: 14px;
      height: 14px;
    }

    /* View All Button */
    .view-all-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 10px;
      margin-top: 12px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .view-all-btn:hover {
      border-color: rgba(255, 255, 255, 0.15);
      color: var(--text-secondary);
    }
    
    .view-all-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Hide ideas button when AI chat is open */
    .ai-chat-panel.open ~ .ideas-floating-btn,
    body:has(.ai-chat-panel.open) .ideas-floating-btn {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.8);
    }

    /* Ideas Panel Backdrop */
    .ideas-panel-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(4px);
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .ideas-panel-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    /* Ideas Slide-out Panel */
    .ideas-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 480px;
      background: #111113;
      border-left: 1px solid rgba(255,255,255,0.08);
      z-index: 300;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ideas-panel.open {
      transform: translateX(0);
    }

    .ideas-panel-header {
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ideas-panel-title {
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .ideas-panel-title-icon {
      font-size: 18px;
    }

    .ideas-panel-close {
      width: 32px;
      height: 32px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .ideas-panel-close:hover {
      background: rgba(255,255,255,0.08);
    }

    .ideas-panel-close svg {
      width: 16px;
      height: 16px;
      color: rgba(255,255,255,0.5);
    }

    /* Quick Capture */
    .ideas-quick-capture {
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .ideas-capture-input-wrapper {
      position: relative;
    }

    .ideas-capture-input {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      padding: 14px 50px 14px 16px;
      font-size: 14px;
      color: rgba(255,255,255,0.9);
      outline: none;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .ideas-capture-input:focus {
      border-color: rgba(251, 191, 36, 0.3);
      background: rgba(255,255,255,0.06);
    }

    .ideas-capture-input::placeholder {
      color: rgba(255,255,255,0.3);
    }

    .ideas-capture-submit {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      background: rgba(251, 191, 36, 0.15);
      border: none;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      opacity: 0.5;
    }

    .ideas-capture-input:not(:placeholder-shown) + .ideas-capture-submit {
      opacity: 1;
    }

    .ideas-capture-submit:hover {
      background: rgba(251, 191, 36, 0.25);
    }

    .ideas-capture-submit svg {
      width: 16px;
      height: 16px;
      color: #fbbf24;
    }

    .ideas-capture-hint {
      font-size: 11px;
      color: rgba(255,255,255,0.25);
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .ideas-capture-hint kbd {
      background: rgba(255,255,255,0.08);
      padding: 2px 6px;
      border-radius: 3px;
      font-family: inherit;
    }

    /* Project Selection Dropdown */
    .ideas-capture-options {
      margin-top: 10px;
    }
    
    .ideas-project-select {
      width: 100%;
      padding: 10px 14px;
      font-size: 13px;
      font-family: inherit;
      color: rgba(255, 255, 255, 0.8);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      outline: none;
      cursor: pointer;
      transition: all 0.15s ease;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
    }
    
    .ideas-project-select:hover {
      border-color: rgba(255, 255, 255, 0.15);
      background-color: rgba(255, 255, 255, 0.06);
    }
    
    .ideas-project-select:focus {
      border-color: rgba(251, 191, 36, 0.4);
      background-color: rgba(255, 255, 255, 0.06);
    }
    
    .ideas-project-select option {
      background: #1a1a1c;
      color: rgba(255, 255, 255, 0.9);
      padding: 8px;
    }
    
    .ideas-project-select optgroup {
      background: #1a1a1c;
      color: rgba(255, 255, 255, 0.5);
      font-weight: 600;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Bucket Tabs */
    .ideas-bucket-tabs {
      padding: 16px 24px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .ideas-bucket-tab {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.4);
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ideas-bucket-tab:hover {
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.6);
    }

    .ideas-bucket-tab.active {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.9);
    }

    .ideas-bucket-tab-count {
      font-size: 10px;
      color: rgba(255,255,255,0.3);
    }

    /* Ideas List */
    .ideas-list {
      flex: 1;
      overflow-y: auto;
      padding: 16px 24px;
    }

    .ideas-list::-webkit-scrollbar {
      width: 6px;
    }

    .ideas-list::-webkit-scrollbar-track {
      background: transparent;
    }

    .ideas-list::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.08);
      border-radius: 3px;
    }

    .ideas-section {
      margin-bottom: 24px;
    }

    .ideas-section-title {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.35);
      margin-bottom: 10px;
    }

    /* Idea Card */
    .idea-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
    }

    .idea-card:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
    }

    .idea-card.expanded {
      background: rgba(255,255,255,0.04);
      border-color: rgba(251, 191, 36, 0.2);
    }

    .idea-card-header {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .idea-card-icon {
      font-size: 16px;
      opacity: 0.7;
      margin-top: 2px;
    }

    .idea-card-content {
      flex: 1;
      min-width: 0;
    }

    .idea-card-title {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,0.85);
      line-height: 1.4;
      margin-bottom: 6px;
    }

    .idea-card-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: rgba(255,255,255,0.35);
    }

    .idea-card-bucket {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .idea-card-has-content {
      font-size: 11px;
      opacity: 0.6;
    }

    .idea-card-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .idea-card:hover .idea-card-actions {
      opacity: 1;
    }

    .idea-action-btn {
      width: 28px;
      height: 28px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .idea-action-btn:hover {
      background: rgba(255,255,255,0.08);
    }

    .idea-action-btn svg {
      width: 14px;
      height: 14px;
      color: rgba(255,255,255,0.5);
    }

    .idea-action-btn.favorite.active {
      background: rgba(251, 191, 36, 0.15);
      border-color: rgba(251, 191, 36, 0.2);
    }

    .idea-action-btn.favorite.active svg {
      color: #fbbf24;
      fill: #fbbf24;
    }

    .idea-action-btn.promote:hover {
      background: rgba(6, 182, 212, 0.15);
      border-color: rgba(6, 182, 212, 0.2);
    }

    .idea-action-btn.promote:hover svg {
      color: #06b6d4;
    }

    /* Expanded Idea Detail */
    .idea-expanded {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: none;
    }

    .idea-card.expanded .idea-expanded {
      display: block;
    }

    .idea-description {
      font-size: 12px;
      color: rgba(255,255,255,0.5);
      line-height: 1.6;
      margin-bottom: 14px;
    }

    .idea-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .idea-tag {
      font-size: 10px;
      padding: 3px 8px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 4px;
      color: rgba(255,255,255,0.5);
    }

    .idea-expanded-actions {
      display: flex;
      gap: 8px;
    }

    .idea-expanded-btn {
      flex: 1;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 500;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .idea-expanded-btn svg {
      width: 14px;
      height: 14px;
    }

    .idea-expanded-btn.discard {
      background: rgba(239, 68, 68, 0.1);
      color: #f87171;
    }

    .idea-expanded-btn.discard:hover {
      background: rgba(239, 68, 68, 0.2);
    }

    .idea-expanded-btn.promote {
      background: #06b6d4;
      color: #fff;
    }

    .idea-expanded-btn.promote:hover {
      background: #0891b2;
    }

    /* Panel Footer */
    .ideas-panel-footer {
      padding: 16px 24px;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ideas-panel-footer-count {
      font-size: 12px;
      color: rgba(255,255,255,0.35);
    }

    .ideas-gallery-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 500;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      color: rgba(255,255,255,0.7);
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .ideas-gallery-btn:hover {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.9);
    }

    .ideas-gallery-btn svg {
      width: 16px;
      height: 16px;
    }

    /* ============================================
       GALLERY MODE (FULL SCREEN)
       ============================================ */
    .ideas-gallery-overlay {
      position: fixed;
      inset: 0;
      background: #0a0a0b;
      z-index: 500;
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .ideas-gallery-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .ideas-gallery-header {
      padding: 20px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ideas-gallery-title {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,0.5);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .ideas-gallery-title-icon {
      font-size: 18px;
    }

    .ideas-gallery-close {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 500;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .ideas-gallery-close:hover {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.9);
    }

    .ideas-gallery-close svg {
      width: 16px;
      height: 16px;
    }

    .ideas-gallery-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 120px;
      position: relative;
    }

    .ideas-gallery-card {
      max-width: 600px;
      width: 100%;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px;
      padding: 48px;
      text-align: center;
      animation: galleryCardEnter 0.4s ease;
    }

    @keyframes galleryCardEnter {
      from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .ideas-gallery-card-icon {
      font-size: 48px;
      margin-bottom: 24px;
      opacity: 0.8;
    }

    .ideas-gallery-card-title {
      font-size: 28px;
      font-weight: 700;
      color: rgba(255,255,255,0.95);
      line-height: 1.3;
      margin-bottom: 16px;
    }

    .ideas-gallery-card-description {
      font-size: 16px;
      color: rgba(255,255,255,0.5);
      line-height: 1.6;
      margin-bottom: 24px;
    }

    .ideas-gallery-card-meta {
      font-size: 13px;
      color: rgba(255,255,255,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .ideas-gallery-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 56px;
      height: 56px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .ideas-gallery-nav-btn:hover {
      background: rgba(255,255,255,0.08);
    }

    .ideas-gallery-nav-btn svg {
      width: 24px;
      height: 24px;
      color: rgba(255,255,255,0.5);
    }

    .ideas-gallery-nav-btn.prev {
      left: 32px;
    }

    .ideas-gallery-nav-btn.next {
      right: 32px;
    }

    .ideas-gallery-footer {
      padding: 24px 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .ideas-gallery-actions {
      display: flex;
      gap: 12px;
    }

    .ideas-gallery-action-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .ideas-gallery-action-btn svg {
      width: 18px;
      height: 18px;
    }

    .ideas-gallery-action-btn.discard {
      background: rgba(239, 68, 68, 0.1);
      color: #f87171;
      border: 1px solid rgba(239, 68, 68, 0.2);
    }

    .ideas-gallery-action-btn.discard:hover {
      background: rgba(239, 68, 68, 0.2);
    }

    .ideas-gallery-action-btn.favorite {
      background: rgba(251, 191, 36, 0.1);
      color: #fbbf24;
      border: 1px solid rgba(251, 191, 36, 0.2);
    }

    .ideas-gallery-action-btn.favorite:hover {
      background: rgba(251, 191, 36, 0.2);
    }

    .ideas-gallery-action-btn.favorite.active {
      background: rgba(251, 191, 36, 0.2);
    }

    .ideas-gallery-action-btn.promote {
      background: #06b6d4;
      color: #fff;
    }

    .ideas-gallery-action-btn.promote:hover {
      background: #0891b2;
    }

    .ideas-gallery-progress {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .ideas-gallery-dots {
      display: flex;
      gap: 6px;
    }

    .ideas-gallery-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .ideas-gallery-dot.active {
      background: rgba(255,255,255,0.6);
      width: 24px;
      border-radius: 4px;
    }

    .ideas-gallery-dot:hover {
      background: rgba(255,255,255,0.3);
    }

    .ideas-gallery-counter {
      font-size: 13px;
      color: rgba(255,255,255,0.35);
    }

    .ideas-gallery-shuffle {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 500;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      color: rgba(255,255,255,0.5);
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .ideas-gallery-shuffle:hover {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
    }

    .ideas-gallery-shuffle svg {
      width: 14px;
      height: 14px;
    }

    /* ============================================
       PROMOTE MODAL
       ============================================ */
    .ideas-promote-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(8px);
      z-index: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .ideas-promote-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .ideas-promote-modal {
      width: 560px;
      max-height: 90vh;
      background: #131315;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: scale(0.95);
      transition: transform 0.3s ease;
    }

    .ideas-promote-backdrop.open .ideas-promote-modal {
      transform: scale(1);
    }

    .ideas-promote-header {
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ideas-promote-title {
      font-size: 16px;
      font-weight: 600;
    }

    .ideas-promote-close {
      width: 32px;
      height: 32px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .ideas-promote-close:hover {
      background: rgba(255,255,255,0.08);
    }

    .ideas-promote-close svg {
      width: 16px;
      height: 16px;
      color: rgba(255,255,255,0.5);
    }

    .ideas-promote-content {
      padding: 24px;
      overflow-y: auto;
    }

    .ideas-promote-original {
      background: rgba(251, 191, 36, 0.05);
      border: 1px solid rgba(251, 191, 36, 0.15);
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 24px;
    }

    .ideas-promote-original-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(251, 191, 36, 0.6);
      margin-bottom: 6px;
    }

    .ideas-promote-original-text {
      font-size: 13px;
      color: rgba(255,255,255,0.8);
      line-height: 1.5;
    }

    .ideas-promote-form-group {
      margin-bottom: 18px;
    }

    .ideas-promote-label {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.5);
      margin-bottom: 8px;
      display: block;
    }

    .ideas-promote-label .required {
      color: #ef4444;
    }

    .ideas-promote-input {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 13px;
      color: rgba(255,255,255,0.9);
      outline: none;
      transition: border-color 0.15s ease;
      font-family: inherit;
    }

    .ideas-promote-input:focus {
      border-color: rgba(255,255,255,0.15);
    }

    .ideas-promote-input::placeholder {
      color: rgba(255,255,255,0.25);
    }

    .ideas-promote-row {
      display: flex;
      gap: 16px;
    }

    .ideas-promote-row .ideas-promote-form-group {
      flex: 1;
    }

    .ideas-promote-select {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 13px;
      color: rgba(255,255,255,0.9);
      outline: none;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      font-family: inherit;
    }

    .ideas-promote-select option {
      background: #1a1a1c;
      color: rgba(255,255,255,0.9);
    }

    .ideas-alignment-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .ideas-alignment-option {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .ideas-alignment-option:hover {
      background: rgba(255,255,255,0.04);
    }

    .ideas-alignment-option.selected {
      border-color: rgba(6, 182, 212, 0.3);
      background: rgba(6, 182, 212, 0.05);
    }

    .ideas-alignment-radio {
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255,255,255,0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .ideas-alignment-option.selected .ideas-alignment-radio {
      border-color: #06b6d4;
    }

    .ideas-alignment-radio-inner {
      width: 8px;
      height: 8px;
      background: #06b6d4;
      border-radius: 50%;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .ideas-alignment-option.selected .ideas-alignment-radio-inner {
      opacity: 1;
    }

    .ideas-alignment-content {
      flex: 1;
    }

    .ideas-alignment-title {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,0.85);
      margin-bottom: 2px;
    }

    .ideas-alignment-desc {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }

    .ideas-promote-textarea {
      width: 100%;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 13px;
      color: rgba(255,255,255,0.9);
      outline: none;
      resize: none;
      min-height: 100px;
      line-height: 1.5;
      transition: border-color 0.15s ease;
      font-family: inherit;
    }

    .ideas-promote-textarea:focus {
      border-color: rgba(255,255,255,0.15);
    }

    .ideas-promote-textarea::placeholder {
      color: rgba(255,255,255,0.25);
    }

    .ideas-promote-footer {
      padding: 16px 24px;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .ideas-promote-btn {
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 500;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .ideas-promote-btn svg {
      width: 16px;
      height: 16px;
    }

    .ideas-promote-btn.cancel {
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.6);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .ideas-promote-btn.cancel:hover {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.8);
    }

    .ideas-promote-btn.submit {
      background: #06b6d4;
      color: #fff;
    }

    .ideas-promote-btn.submit:hover {
      background: #0891b2;
    }

    /* Empty state for ideas */
    .ideas-empty-state {
      text-align: center;
      padding: 40px 20px;
      color: rgba(255,255,255,0.3);
    }

    .ideas-empty-state-icon {
      font-size: 32px;
      margin-bottom: 12px;
      opacity: 0.5;
    }

    .ideas-empty-state-text {
      font-size: 13px;
    }

    .ideas-empty-state-hint {
      font-size: 12px;
      margin-top: 4px;
    }

    /* ============================================
       IDEA DETAIL MODAL
       ============================================ */
    .idea-detail-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      z-index: 9000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 40px;
    }

    .idea-detail-backdrop.open {
      display: flex;
    }

    .idea-detail-modal {
      width: 100%;
      max-width: 720px;
      max-height: 90vh;
      background: #18181b;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .idea-detail-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .idea-detail-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
    }

    .idea-detail-icon {
      font-size: 24px;
    }

    .idea-detail-title {
      flex: 1;
      font-size: 20px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.95);
      background: transparent;
      border: none;
      outline: none;
      padding: 0;
    }

    .idea-detail-title::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .idea-detail-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .idea-detail-action-btn,
    .idea-detail-favorite,
    .idea-detail-close {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.4);
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .idea-detail-action-btn:hover,
    .idea-detail-favorite:hover,
    .idea-detail-close:hover {
      color: rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.06);
    }

    .idea-detail-action-btn:hover {
      color: var(--primary);
    }

    .idea-detail-action-btn svg {
      width: 18px;
      height: 18px;
    }

    .idea-detail-favorite.active {
      color: rgba(251, 191, 36, 0.9);
    }

    .idea-detail-favorite.active svg {
      fill: rgba(251, 191, 36, 0.9);
    }

    .idea-detail-favorite svg,
    .idea-detail-close svg {
      width: 20px;
      height: 20px;
    }

    .idea-detail-meta {
      display: flex;
      gap: 16px;
      padding: 16px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(0, 0, 0, 0.15);
    }

    .idea-detail-meta-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .idea-detail-meta-item.tags {
      flex: 1;
    }

    .idea-detail-meta-item label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.4);
    }

    .idea-detail-select {
      padding: 8px 12px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      min-width: 140px;
    }

    .idea-detail-select:focus {
      outline: none;
      border-color: rgba(6, 182, 212, 0.5);
    }

    .idea-detail-tags-container {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .idea-detail-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .idea-detail-tag {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      font-size: 11px;
      color: rgba(6, 182, 212, 0.9);
      background: rgba(6, 182, 212, 0.15);
      border-radius: 12px;
    }

    .idea-detail-tag-remove {
      width: 14px;
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: rgba(6, 182, 212, 0.6);
      cursor: pointer;
      transition: color 0.15s ease;
    }

    .idea-detail-tag-remove:hover {
      color: rgba(239, 68, 68, 0.8);
    }

    .idea-detail-tag-input {
      padding: 6px 10px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      outline: none;
      width: 100px;
    }

    .idea-detail-tag-input:focus {
      border-color: rgba(6, 182, 212, 0.4);
      background: rgba(255, 255, 255, 0.06);
    }

    .idea-detail-tag-input::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .idea-detail-content {
      flex: 1;
      min-height: 200px;
      max-height: 300px;
      overflow-y: auto;
      padding: 20px 24px;
    }

    .idea-detail-editor {
      min-height: 160px;
      font-size: 14px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.85);
      outline: none;
    }

    .idea-detail-editor:empty::before {
      content: attr(placeholder);
      color: rgba(255, 255, 255, 0.3);
      pointer-events: none;
    }

    .idea-detail-attachments {
      padding: 16px 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(0, 0, 0, 0.1);
    }

    .idea-detail-attachments-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .idea-detail-attachments-header > span {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.4);
    }

    .idea-detail-attachment-actions {
      display: flex;
      gap: 8px;
    }

    .idea-detail-attach-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .idea-detail-attach-btn:hover {
      color: rgba(255, 255, 255, 0.8);
      background: rgba(255, 255, 255, 0.08);
    }

    .idea-detail-attach-btn svg {
      width: 14px;
      height: 14px;
    }

    .idea-detail-links {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 12px;
    }

    .idea-detail-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
    }

    .idea-detail-link-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(99, 102, 241, 0.8);
      background: rgba(99, 102, 241, 0.1);
      border-radius: 6px;
    }

    .idea-detail-link-icon svg {
      width: 16px;
      height: 16px;
    }

    .idea-detail-link-content {
      flex: 1;
      min-width: 0;
    }

    .idea-detail-link-url {
      font-size: 13px;
      color: rgba(99, 102, 241, 0.9);
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
    }

    .idea-detail-link-url:hover {
      text-decoration: underline;
    }

    .idea-detail-link-remove {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.3);
      background: transparent;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0;
      transition: all 0.15s ease;
    }

    .idea-detail-link:hover .idea-detail-link-remove {
      opacity: 1;
    }

    .idea-detail-link-remove:hover {
      color: rgba(239, 68, 68, 0.8);
      background: rgba(239, 68, 68, 0.1);
    }

    .idea-detail-link-remove svg {
      width: 14px;
      height: 14px;
    }

    .idea-detail-images {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 12px;
    }

    .idea-detail-image {
      position: relative;
      aspect-ratio: 1;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .idea-detail-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .idea-detail-image-remove {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .idea-detail-image:hover .idea-detail-image-remove {
      opacity: 1;
    }

    .idea-detail-image-remove:hover {
      background: rgba(239, 68, 68, 0.8);
    }

    .idea-detail-image-remove svg {
      width: 14px;
      height: 14px;
    }

    .idea-detail-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(0, 0, 0, 0.2);
    }

    .idea-detail-footer-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .idea-detail-date {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.35);
    }

    .idea-detail-save-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.35);
    }

    .idea-detail-save-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }

    .idea-detail-save-dot.saved {
      background: rgba(34, 197, 94, 0.8);
    }

    .idea-detail-save-dot.saving {
      background: rgba(251, 191, 36, 0.8);
      animation: pulseDot 1s ease-in-out infinite;
    }

    @keyframes pulseDot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    .idea-detail-footer-actions {
      display: flex;
      gap: 10px;
    }

    .idea-detail-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 500;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .idea-detail-btn svg {
      width: 16px;
      height: 16px;
    }

    .idea-detail-btn.discard {
      color: rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.04);
    }

    .idea-detail-btn.discard:hover {
      color: rgba(239, 68, 68, 0.9);
      background: rgba(239, 68, 68, 0.1);
    }

    /* ============================================
       FOCUS MODE OVERLAY
       ============================================ */
    .focus-mode-overlay {
        position: fixed;
        inset: 0;
        z-index: 10000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }
    
    .focus-mode-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    
    .focus-bg-base {
        position: absolute;
        inset: 0;
        background: #050508;
        z-index: 0;
    }
    
    .focus-bg-image {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0.30;
        filter: blur(2px) saturate(0.8);
        z-index: 1;
        animation: focusBreathe 8s ease-in-out infinite;
        transition: background-image 0.5s ease;
    }
    
    @keyframes focusBreathe {
        0%, 100% { opacity: 0.30; }
        50% { opacity: 0.35; }
    }
    
    .focus-bg-gradient {
        position: absolute;
        inset: 0;
        background: 
            radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(5,5,8,0.4) 50%, rgba(5,5,8,0.95) 100%),
            linear-gradient(180deg, rgba(5,5,8,0.3) 0%, rgba(5,5,8,0.6) 100%);
        z-index: 2;
    }
    
    .focus-bg-vignette {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%);
        z-index: 3;
    }
    
    .focus-content-wrapper {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .focus-glass-panel {
        position: relative;
        padding: 60px 80px;
        background: rgba(255,255,255,0.03);
        border-radius: 24px;
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow: 
            0 0 0 1px rgba(255,255,255,0.05) inset,
            0 25px 50px -12px rgba(0,0,0,0.4);
    }
    
    .focus-glass-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 24px;
        padding: 1px;
        background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 40%, transparent 50%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
    
    .focus-glass-panel::after {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
        pointer-events: none;
    }
    
    .focus-timer {
        font-size: 96px;
        font-weight: 300;
        letter-spacing: -0.03em;
        color: rgba(255,255,255,0.9);
        font-variant-numeric: tabular-nums;
        margin-bottom: 24px;
        text-shadow: 0 4px 40px rgba(0,0,0,0.5);
        text-align: center;
    }
    
    .focus-timer-colon {
        opacity: 0.6;
        animation: focusColonBlink 2s ease-in-out infinite;
    }
    
    @keyframes focusColonBlink {
        0%, 100% { opacity: 0.6; }
        50% { opacity: 0.3; }
    }
    
    .focus-glass-panel .focus-task-title {
        font-size: 16px;
        font-weight: 500;
        color: rgba(255,255,255,0.6);
        max-width: 500px;
        line-height: 1.5;
        margin-bottom: 8px;
        text-align: center;
    }
    
    .focus-glass-panel .focus-task-project {
        font-size: 13px;
        font-weight: 500;
        color: rgba(255,255,255,0.25);
        letter-spacing: 0.02em;
        text-align: center;
    }
    
    /* Focus Writing Panel */
    .focus-writing-panel {
        position: relative;
        width: 100%;
        max-width: 800px;
        height: 70vh;
        max-height: 700px;
        display: flex;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 20px;
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 
            0 0 0 1px rgba(255, 255, 255, 0.03) inset,
            0 25px 50px -12px rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }
    
    .focus-writing-panel.hidden {
        display: none;
    }
    
    .focus-writing-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 20px;
        padding: 1px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.03) 40%, transparent 50%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
    
    .focus-writing-header {
        padding: 20px 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        flex-shrink: 0;
    }
    
    .focus-writing-title {
        width: 100%;
        background: transparent;
        border: none;
        font-size: 22px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
        outline: none;
        padding: 0;
        margin-bottom: 10px;
        font-family: inherit;
    }
    
    .focus-writing-title::placeholder {
        color: rgba(255, 255, 255, 0.25);
    }
    
    .focus-writing-meta {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.35);
    }
    
    .focus-writing-timer {
        font-variant-numeric: tabular-nums;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 500;
    }
    
    .focus-writing-save-status {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .focus-writing-save-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }
    
    .focus-writing-save-dot.saved {
        background: rgba(34, 197, 94, 0.8);
    }
    
    .focus-writing-save-dot.saving {
        background: rgba(251, 191, 36, 0.8);
        animation: focusWritingPulse 1s ease-in-out infinite;
    }
    
    @keyframes focusWritingPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }
    
    /* Focus Writing Toolbar */
    .focus-writing-toolbar {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 10px 20px;
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        flex-shrink: 0;
    }
    
    .focus-toolbar-group {
        display: flex;
        align-items: center;
        gap: 2px;
    }
    
    .focus-toolbar-btn {
        width: 32px;
        height: 32px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 6px;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.15s ease;
    }
    
    .focus-toolbar-btn:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.8);
    }
    
    .focus-toolbar-btn:active {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .focus-toolbar-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .focus-toolbar-btn strong {
        font-weight: 700;
    }
    
    .focus-toolbar-btn em {
        font-style: italic;
    }
    
    .focus-toolbar-btn u {
        text-decoration: underline;
    }
    
    .focus-toolbar-divider {
        width: 1px;
        height: 20px;
        background: rgba(255, 255, 255, 0.08);
        margin: 0 8px;
    }
    
    .focus-writing-editor {
        flex: 1;
        padding: 24px 28px;
        overflow-y: auto;
        font-size: 16px;
        line-height: 1.9;
        color: rgba(255, 255, 255, 0.85);
        outline: none;
    }
    
    .focus-writing-editor:empty::before {
        content: attr(placeholder);
        color: rgba(255, 255, 255, 0.2);
        pointer-events: none;
    }
    
    .focus-writing-editor::-webkit-scrollbar {
        width: 6px;
    }
    
    .focus-writing-editor::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .focus-writing-editor::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }
    
    .focus-writing-editor h1,
    .focus-writing-editor h2,
    .focus-writing-editor h3 {
        color: rgba(255, 255, 255, 0.95);
        margin-top: 1.5em;
        margin-bottom: 0.5em;
    }
    
    .focus-writing-editor h1 { font-size: 1.5em; font-weight: 600; }
    .focus-writing-editor h2 { font-size: 1.25em; font-weight: 600; }
    .focus-writing-editor h3 { font-size: 1.1em; font-weight: 600; }
    
    .focus-writing-editor p {
        margin-bottom: 1em;
    }
    
    .focus-writing-editor blockquote {
        border-left: 3px solid rgba(255, 255, 255, 0.2);
        padding-left: 16px;
        margin: 1em 0;
        color: rgba(255, 255, 255, 0.6);
        font-style: italic;
    }
    
    .focus-writing-editor code {
        background: rgba(255, 255, 255, 0.08);
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'SF Mono', 'Fira Code', monospace;
        font-size: 0.9em;
    }
    
    .focus-writing-editor ul,
    .focus-writing-editor ol {
        padding-left: 24px;
        margin: 1em 0;
    }
    
    .focus-writing-editor li {
        margin-bottom: 0.5em;
    }
    
    /* Writing mode keyboard hints adjustment */
    .focus-mode-writing .focus-keyboard-hints {
        top: auto;
        bottom: 100px;
    }
    
    /* Hide default controls in writing mode */
    .focus-mode-writing .focus-controls {
        display: none;
    }
    
    /* Adjust content wrapper for writing mode */
    .focus-mode-writing .focus-content-wrapper {
        justify-content: center;
        padding: 40px;
    }
    
    /* Show exit hint in writing mode */
    .focus-mode-writing .focus-ambient-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    /* Responsive */
    @media (max-width: 900px) {
        .focus-writing-panel {
            max-width: 95%;
            height: 65vh;
        }
        
        .focus-writing-title {
            font-size: 18px;
        }
        
        .focus-writing-editor {
            font-size: 15px;
            padding: 20px 24px;
        }
    }
    
    @media (max-width: 600px) {
        .focus-writing-panel {
            height: 60vh;
            border-radius: 16px;
        }
        
        .focus-writing-header {
            padding: 16px 20px;
        }
        
        .focus-writing-title {
            font-size: 16px;
        }
        
        .focus-writing-meta {
            gap: 10px;
            font-size: 11px;
        }
        
        .focus-writing-editor {
            padding: 16px 20px;
            font-size: 14px;
            line-height: 1.8;
        }
    }
    
    .focus-session-indicator {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 500;
        color: rgba(255,255,255,0.3);
        letter-spacing: 0.05em;
        z-index: 20;
    }
    
    .focus-session-dot {
        width: 6px;
        height: 6px;
        background: rgba(34, 197, 94, 0.8);
        border-radius: 50%;
        animation: focusPulse 2.5s ease-in-out infinite;
    }
    
    @keyframes focusPulse {
        0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); }
        50% { opacity: 0.5; box-shadow: 0 0 4px rgba(34, 197, 94, 0.2); }
    }
    
    .focus-controls {
        position: fixed;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 12px;
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 20;
    }
    
    .focus-mode-overlay:hover .focus-controls {
        opacity: 1;
    }
    
    .focus-control-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        font-size: 13px;
        font-weight: 500;
        color: rgba(255,255,255,0.7);
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px;
        cursor: pointer;
        backdrop-filter: blur(20px);
        transition: all 0.2s ease;
    }
    
    .focus-control-btn:hover {
        background: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.9);
    }
    
    .focus-control-btn.primary {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.15);
    }
    
    .focus-control-btn svg {
        width: 16px;
        height: 16px;
        opacity: 0.8;
    }
    
    .focus-ambient-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 16px 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 20;
    }
    
    .focus-mode-overlay:hover .focus-ambient-bar {
        opacity: 1;
    }
    
    .focus-ambient-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }
    
    .focus-ambient-scene {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: rgba(255,255,255,0.5);
    }
    
    .focus-change-scene-btn {
        font-size: 11px;
        color: rgba(255,255,255,0.35);
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 4px 8px;
        transition: color 0.15s ease;
    }
    
    .focus-change-scene-btn:hover {
        color: rgba(255,255,255,0.6);
    }
    
    .focus-ambient-right {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 11px;
        color: rgba(255,255,255,0.25);
    }
    
    .focus-ambient-right kbd {
        display: inline-block;
        padding: 2px 6px;
        background: rgba(255,255,255,0.06);
        border-radius: 4px;
        font-family: inherit;
        margin-left: 4px;
    }

    .focus-pin-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        color: rgba(255,255,255,0.35);
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 4px 8px;
        transition: all 0.15s ease;
        border-radius: 4px;
    }
    
    .focus-pin-btn:hover {
        color: rgba(255,255,255,0.6);
        background: rgba(255,255,255,0.05);
    }
    
    .focus-pin-btn svg {
        width: 12px;
        height: 12px;
    }
    
    .focus-keyboard-hints {
        position: fixed;
        top: 40px;
        right: 40px;
        font-size: 10px;
        color: rgba(255,255,255,0.15);
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 20;
    }
    
    .focus-mode-overlay:hover .focus-keyboard-hints {
        opacity: 1;
    }
    
    .focus-keyboard-hints div {
        margin-bottom: 4px;
    }
    
    .focus-keyboard-hints kbd {
        display: inline-block;
        min-width: 18px;
        padding: 2px 5px;
        background: rgba(255,255,255,0.06);
        border-radius: 3px;
        font-family: inherit;
        text-align: center;
        margin-right: 6px;
    }
    
    /* Entry Screen */
    .focus-entry-screen {
        position: absolute;
        inset: 0;
        z-index: 50;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(5,5,8,0.95);
        backdrop-filter: blur(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    
    .focus-entry-screen.hidden {
        opacity: 0;
        pointer-events: none;
        transform: scale(1.02);
    }
    
    .focus-entry-title {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.1em;
        color: rgba(255,255,255,0.4);
        margin-bottom: 8px;
    }
    
    .focus-entry-task {
        font-size: 22px;
        font-weight: 500;
        color: rgba(255,255,255,0.85);
        max-width: 500px;
        text-align: center;
        line-height: 1.4;
        margin-bottom: 40px;
    }
    
    .focus-entry-options {
        display: flex;
        gap: 12px;
        margin-bottom: 32px;
    }
    
    .focus-entry-option {
        padding: 12px 20px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(255,255,255,0.5);
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    
    .focus-entry-option:hover {
        background: rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.7);
    }
    
    .focus-entry-option.selected {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.15);
        color: rgba(255,255,255,0.9);
    }
    
    .focus-entry-start-btn {
        padding: 16px 48px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255,255,255,0.9);
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .focus-entry-start-btn:hover {
        background: rgba(255,255,255,0.12);
        transform: translateY(-1px);
    }
    
    .focus-entry-hint {
        position: absolute;
        bottom: 32px;
        font-size: 11px;
        color: rgba(255,255,255,0.2);
    }
    
    .focus-entry-hint kbd {
        display: inline-block;
        padding: 2px 6px;
        background: rgba(255,255,255,0.06);
        border-radius: 4px;
        font-family: inherit;
    }
    
    /* Session Complete Modal */
    .focus-complete-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.8);
        backdrop-filter: blur(12px);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
    .focus-complete-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }
    
    .focus-complete-modal {
        background: rgba(17, 17, 19, 0.95);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 16px;
        padding: 32px;
        width: 440px;
        text-align: center;
        backdrop-filter: blur(40px);
    }
    
    .focus-complete-label {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        color: rgba(255,255,255,0.3);
        margin-bottom: 16px;
    }
    
    .focus-complete-timer {
        font-size: 48px;
        font-weight: 300;
        color: rgba(255,255,255,0.9);
        margin-bottom: 12px;
        font-variant-numeric: tabular-nums;
    }
    
    .focus-complete-task {
        font-size: 15px;
        color: rgba(255,255,255,0.5);
        margin-bottom: 28px;
    }
    
    .focus-complete-divider {
        height: 1px;
        background: rgba(255,255,255,0.06);
        margin-bottom: 24px;
    }
    
    .focus-complete-notes-label {
        font-size: 11px;
        color: rgba(255,255,255,0.35);
        text-align: left;
        margin-bottom: 8px;
    }
    
    .focus-complete-notes {
        width: 100%;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 10px;
        padding: 14px 16px;
        font-size: 13px;
        font-family: 'Inter', sans-serif;
        color: rgba(255,255,255,0.85);
        outline: none;
        resize: none;
        min-height: 80px;
        line-height: 1.6;
        margin-bottom: 18px;
    }
    
    .focus-complete-notes:focus {
        border-color: rgba(255,255,255,0.12);
    }
    
    .focus-complete-notes::placeholder {
        color: rgba(255,255,255,0.2);
    }
    
    .focus-complete-checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        color: rgba(255,255,255,0.5);
        cursor: pointer;
        margin-bottom: 24px;
        justify-content: flex-start;
    }
    
    .focus-checkbox-box {
        width: 16px;
        height: 16px;
        border: 1.5px solid rgba(255,255,255,0.2);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
    }
    
    .focus-complete-checkbox.checked .focus-checkbox-box {
        background: rgba(255,255,255,0.8);
        border-color: rgba(255,255,255,0.8);
    }
    
    .focus-checkbox-box svg {
        width: 10px;
        height: 10px;
        color: #0a0a0b;
        opacity: 0;
    }
    
    .focus-complete-checkbox.checked .focus-checkbox-box svg {
        opacity: 1;
    }
    
    .focus-complete-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    
    .focus-complete-btn {
        padding: 11px 24px;
        font-size: 13px;
        font-weight: 500;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.15s ease;
        border: none;
    }
    
    .focus-complete-btn.discard {
        background: transparent;
        color: rgba(255,255,255,0.4);
        border: 1px solid rgba(255,255,255,0.08);
    }
    
    .focus-complete-btn.discard:hover {
        background: rgba(255,255,255,0.04);
        color: rgba(255,255,255,0.6);
    }
    
    .focus-complete-btn.save {
        background: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.9);
        border: 1px solid rgba(255,255,255,0.15);
    }
    
    .focus-complete-btn.save:hover {
        background: rgba(255,255,255,0.15);
    }
    
    /* Scene Picker */
    .focus-scene-picker-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(8px);
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
    .focus-scene-picker-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }
    
    .focus-scene-picker {
        background: rgba(20, 20, 22, 0.95);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 16px;
        padding: 24px;
        width: 400px;
        backdrop-filter: blur(40px);
    }
    
    .focus-scene-picker-title {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255,255,255,0.8);
        margin-bottom: 18px;
        text-align: center;
    }
    
    /* Ambient Player in Focus Mode - override positioning */
    .ambient-player-dropdown.focus-mode-open {
        position: fixed !important;
        bottom: 70px !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(0) !important;
        right: auto !important;
        top: auto !important;
        z-index: 100000 !important;
        width: 340px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Background Gallery */
    .focus-bg-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .focus-bg-gallery::-webkit-scrollbar {
        width: 6px;
    }
    
    .focus-bg-gallery::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.1);
        border-radius: 3px;
    }
    
    .focus-bg-item {
        aspect-ratio: 16/9;
        border-radius: 8px;
        background-size: cover;
        background-position: center;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all 0.15s ease;
        position: relative;
    }
    
    .focus-bg-item:hover {
        border-color: rgba(255,255,255,0.3);
    }
    
    .focus-bg-item.selected {
        border-color: rgba(255,255,255,0.6);
    }
    
    .focus-bg-item.add-new {
        background: rgba(255,255,255,0.02);
        border: 2px dashed rgba(255,255,255,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: rgba(255,255,255,0.3);
    }
    
    .focus-bg-item.add-new:hover {
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.2);
        color: rgba(255,255,255,0.5);
    }
    
    .focus-bg-delete {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 20px;
        height: 20px;
        background: rgba(0,0,0,0.6);
        border: none;
        border-radius: 50%;
        color: rgba(255,255,255,0.7);
        font-size: 12px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .focus-bg-item:hover .focus-bg-delete {
        opacity: 1;
    }
    
    .focus-bg-upload-input {
        display: none;
    }
    
    /* ============================================
       FOCUS SOUNDS PICKER
       ============================================ */
    .focus-sounds-picker-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
    .focus-sounds-picker-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }
    
    .focus-sounds-picker {
        background: rgba(20, 20, 22, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 24px;
        width: 420px;
        max-height: 80vh;
        backdrop-filter: blur(40px);
        display: flex;
        flex-direction: column;
    }
    
    .focus-sounds-picker-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    
    .focus-sounds-picker-title {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
    }
    
    .focus-sounds-now-playing {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 20px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
    }
    
    .focus-sounds-now-playing.playing {
        background: rgba(34, 197, 94, 0.1);
        color: rgba(34, 197, 94, 0.9);
    }
    
    .focus-sounds-playing-icon {
        font-size: 14px;
    }
    
    .focus-sounds-stop-btn {
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        border-radius: 4px;
        color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
    }
    
    .focus-sounds-now-playing.playing .focus-sounds-stop-btn {
        display: flex;
    }
    
    .focus-sounds-stop-btn:hover {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }
    
    .focus-sounds-stop-btn svg {
        width: 12px;
        height: 12px;
    }
    
    .focus-sounds-volume {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
        margin-bottom: 16px;
    }
    
    .focus-volume-icon {
        font-size: 14px;
        opacity: 0.6;
    }
    
    .focus-volume-slider {
        flex: 1;
        height: 4px;
        -webkit-appearance: none;
        appearance: none;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
        outline: none;
    }
    
    .focus-volume-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        background: white;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    
    .focus-volume-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        background: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    
    .focus-volume-value {
        font-size: 11px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.4);
        min-width: 32px;
        text-align: right;
    }
    
    .focus-sounds-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        max-height: 320px;
        overflow-y: auto;
        margin-bottom: 16px;
    }
    
    .focus-sounds-grid::-webkit-scrollbar {
        width: 6px;
    }
    
    .focus-sounds-grid::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }
    
    .focus-sound-card {
        aspect-ratio: 1;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.15s ease;
        position: relative;
        overflow: hidden;
    }
    
    .focus-sound-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .focus-sound-card.active {
        background: rgba(34, 197, 94, 0.1);
        border-color: rgba(34, 197, 94, 0.3);
    }
    
    .focus-sound-card.active::before {
        content: '';
        position: absolute;
        top: 8px;
        right: 8px;
        width: 8px;
        height: 8px;
        background: #22c55e;
        border-radius: 50%;
        animation: focusSoundPulse 1.5s ease-in-out infinite;
    }
    
    @keyframes focusSoundPulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(0.9); }
    }
    
    .focus-sound-icon {
        font-size: 24px;
    }
    
    .focus-sound-name {
        font-size: 10px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
        padding: 0 6px;
        line-height: 1.3;
        max-height: 26px;
        overflow: hidden;
    }
    
    .focus-sound-card.active .focus-sound-name {
        color: rgba(34, 197, 94, 0.9);
    }
    
    .focus-sound-yt-badge {
        position: absolute;
        top: 6px;
        left: 6px;
        background: rgba(255, 0, 0, 0.15);
        padding: 2px 5px;
        border-radius: 4px;
    }
    
    .focus-sound-yt-badge svg {
        width: 12px;
        height: 12px;
        fill: #ff0000;
    }
    
    .focus-sounds-add-youtube {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px dashed rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.15s ease;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.4);
    }
    
    .focus-sounds-add-youtube:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.6);
    }
    
    .focus-sounds-add-youtube svg {
        width: 16px;
        height: 16px;
    }
    
    @media (max-width: 500px) {
        .focus-sounds-picker {
            width: 95%;
            padding: 20px;
        }
        
        .focus-sounds-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .focus-sounds-picker-header {
            flex-direction: column;
            gap: 12px;
            align-items: flex-start;
        }
    }

/* ============================================
   DAILY INTENTION OVERLAY
   ============================================ */

    .daily-intention-overlay {
        position: fixed;
        inset: 0;
        z-index: 10001;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }

    .daily-intention-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .daily-intention-bg-base {
        position: absolute;
        inset: 0;
        background: #050508;
        z-index: 0;
    }

    .daily-intention-bg-image {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0.25;
        filter: blur(4px) saturate(0.6);
        z-index: 1;
        animation: dailyIntentionBreathe 15s ease-in-out infinite;
        transition: background-image 0.8s ease;
    }

    @keyframes dailyIntentionBreathe {
        0%, 100% { transform: scale(1); opacity: 0.25; }
        50% { transform: scale(1.03); opacity: 0.28; }
    }

    .daily-intention-bg-gradient {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 60% at 50% 40%,
            rgba(6, 60, 50, 0.15) 0%,
            rgba(5, 5, 8, 0.7) 50%,
            rgba(5, 5, 8, 0.95) 100%);
        z-index: 2;
    }

    .daily-intention-bg-vignette {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center,
            transparent 0%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0.7) 100%);
        z-index: 3;
    }

    /* Daily Intention Display View */
    .daily-intention-display {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 80px 40px;
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }

    /* Labels - Editorial style */
    .di-display-label {
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: 20px;
    }

    /* Hero Section - The One Thing */
    .di-display-hero {
        margin-bottom: 100px;
    }

    .di-display-title {
        font-size: 52px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.95);
        line-height: 1.15;
        margin: 0 0 24px 0;
        letter-spacing: -0.02em;
    }

    .di-display-subtitle {
        font-size: 18px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.45);
        margin: 0;
        letter-spacing: 0.01em;
    }

    /* Current Focus Section */
    .di-display-focus {
        margin-bottom: 120px;
    }

    .di-display-focus-name {
        font-size: 36px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.9);
        margin: 0 0 12px 0;
        letter-spacing: -0.01em;
    }

    .di-display-focus-deadline {
        font-size: 15px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.4);
        margin: 0;
    }

    /* Bottom Row - Remember & Avoid */
    .di-display-bottom {
        display: flex;
        justify-content: center;
        gap: 120px;
        margin-bottom: 80px;
    }

    .di-display-bottom-item {
        text-align: center;
    }

    .di-display-value {
        font-size: 15px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.55);
        margin: 0;
        letter-spacing: 0.01em;
    }

    /* Start Day Button - Fades in */
    .di-display-start-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.6);
        padding: 14px 32px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: all 0.3s ease;
        opacity: 0;
        animation: diButtonFadeIn 0.5s ease 10s forwards;
    }

    .di-display-start-btn svg {
        width: 16px;
        height: 16px;
        opacity: 0.7;
    }

    .di-display-start-btn:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.85);
    }

    @keyframes diButtonFadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Close Button */
    .daily-intention-close {
        position: fixed;
        top: 24px;
        right: 24px;
        z-index: 20;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.15s ease;
        opacity: 0.3;
    }

    .daily-intention-close svg {
        width: 20px;
        height: 20px;
        color: rgba(255, 255, 255, 0.5);
    }

    .daily-intention-close:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.06);
    }

    .daily-intention-close:hover svg {
        color: rgba(255, 255, 255, 0.8);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .daily-intention-display {
            padding: 60px 24px;
        }

        .di-display-hero {
            margin-bottom: 60px;
        }

        .di-display-title {
            font-size: 36px;
        }

        .di-display-subtitle {
            font-size: 16px;
        }

        .di-display-focus {
            margin-bottom: 80px;
        }

        .di-display-focus-name {
            font-size: 28px;
        }

        .di-display-bottom {
            flex-direction: column;
            gap: 40px;
        }
    }

/* ============================================
   WEEKLY REVIEW OVERLAY
   ============================================ */

    .weekly-review-overlay {
        position: fixed;
        inset: 0;
        z-index: 10001;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
        overflow-y: auto;
    }

    .weekly-review-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .weekly-review-bg-base {
        position: fixed;
        inset: 0;
        background: #050508;
        z-index: 0;
    }

    .weekly-review-bg-image {
        position: fixed;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0.25;
        filter: blur(3px) saturate(0.7);
        z-index: 1;
        animation: weeklyReviewBreathe 12s ease-in-out infinite;
        transition: background-image 0.8s ease;
    }

    @keyframes weeklyReviewBreathe {
        0%, 100% { transform: scale(1); opacity: 0.25; }
        50% { transform: scale(1.03); opacity: 0.28; }
    }

    .weekly-review-bg-gradient {
        position: fixed;
        inset: 0;
        background: radial-gradient(ellipse at center, transparent 0%, rgba(5,5,8,0.7) 70%);
        z-index: 2;
    }

    .weekly-review-bg-vignette {
        position: fixed;
        inset: 0;
        background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.6) 100%);
        z-index: 3;
    }

    /* Progress indicator */
    .weekly-review-progress {
        position: fixed;
        top: 32px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .weekly-review-progress-bar {
        width: 200px;
        height: 3px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
        overflow: hidden;
    }

    .weekly-review-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #06b6d4, #22c55e);
        border-radius: 2px;
        transition: width 0.4s ease;
    }

    .weekly-review-progress-steps {
        display: flex;
        gap: 32px;
    }

    .weekly-review-step {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.35);
        transition: all 0.3s ease;
    }

    .weekly-review-step.active {
        color: rgba(255, 255, 255, 0.9);
    }

    .weekly-review-step.completed {
        color: #22c55e;
    }

    /* Content */
    .weekly-review-content {
        position: relative;
        z-index: 10;
        min-height: 100vh;
        padding: 120px 24px 140px;
        display: flex;
        justify-content: center;
    }

    .weekly-review-section {
        display: none;
        max-width: 600px;
        width: 100%;
        animation: weeklyReviewFadeIn 0.5s ease;
    }

    .weekly-review-section.active {
        display: block;
    }

    @keyframes weeklyReviewFadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .weekly-review-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .weekly-review-category-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }

    .weekly-review-category-title {
        font-size: 36px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.95);
        margin-bottom: 8px;
    }

    .weekly-review-category-subtitle {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.5);
    }

    /* Questions */
    .weekly-review-questions {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .weekly-review-question {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .weekly-review-label {
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.75);
    }

    .weekly-review-textarea {
        width: 100%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 16px 18px;
        font-size: 15px;
        font-family: inherit;
        color: rgba(255, 255, 255, 0.95);
        resize: none;
        min-height: 80px;
        outline: none;
        transition: all 0.2s ease;
        line-height: 1.5;
    }

    .weekly-review-textarea::placeholder {
        color: rgba(255, 255, 255, 0.3);
    }

    .weekly-review-textarea:focus {
        border-color: rgba(6, 182, 212, 0.4);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.08);
    }

    /* Rating */
    .weekly-review-rating {
        margin-top: 36px;
        text-align: center;
    }

    .weekly-review-rating-label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 16px;
    }

    .weekly-review-rating-buttons {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .weekly-review-rating-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.5);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .weekly-review-rating-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.8);
    }

    .weekly-review-rating-btn.selected {
        background: rgba(6, 182, 212, 0.2);
        border-color: #06b6d4;
        color: #06b6d4;
    }

    /* Footer */
    .weekly-review-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 20;
        padding: 20px 24px 28px;
        background: linear-gradient(to top, rgba(5,5,8,0.95) 0%, rgba(5,5,8,0.8) 50%, transparent 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .weekly-review-toggle {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        user-select: none;
    }

    .weekly-review-toggle input {
        display: none;
    }

    .weekly-review-toggle-slider {
        width: 40px;
        height: 22px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 11px;
        position: relative;
        transition: all 0.2s ease;
    }

    .weekly-review-toggle-slider::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        transition: all 0.2s ease;
    }

    .weekly-review-toggle input:checked + .weekly-review-toggle-slider {
        background: rgba(6, 182, 212, 0.4);
    }

    .weekly-review-toggle input:checked + .weekly-review-toggle-slider::after {
        transform: translateX(18px);
        background: #06b6d4;
    }

    .weekly-review-toggle-label {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
    }

    .weekly-review-actions {
        display: flex;
        gap: 12px;
    }

    .weekly-review-next-btn,
    .weekly-review-save-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 28px !important;
        font-size: 15px !important;
        font-weight: 500;
    }

    .weekly-review-next-btn svg,
    .weekly-review-save-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Close button */
    .weekly-review-close {
        position: fixed;
        top: 24px;
        right: 24px;
        z-index: 30;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .weekly-review-close svg {
        width: 20px;
        height: 20px;
        color: rgba(255, 255, 255, 0.5);
    }

    .weekly-review-close:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .weekly-review-close:hover svg {
        color: rgba(255, 255, 255, 0.8);
    }

    /* Responsive */
    @media (max-width: 600px) {
        .weekly-review-category-title {
            font-size: 28px;
        }

        .weekly-review-category-icon {
            font-size: 40px;
        }

        .weekly-review-content {
            padding: 100px 20px 160px;
        }

        .weekly-review-rating-buttons {
            flex-wrap: wrap;
            max-width: 240px;
            margin: 0 auto;
        }

        .weekly-review-rating-btn {
            width: 36px;
            height: 36px;
            font-size: 12px;
        }

        .weekly-review-progress-steps {
            gap: 20px;
        }

        .weekly-review-actions {
            flex-direction: column;
            width: 100%;
        }

        .weekly-review-actions .btn {
            width: 100%;
        }
    }

/* ============================================
   LIFE HUB STYLES
   ============================================ */

        :root {
            /* Design System */
            --bg-deep: #0a0a0b;
            --bg-elevated: #131315;
            --bg-surface: #1a1a1f;
            --border-subtle: rgba(255, 255, 255, 0.06);
            --border-glass: rgba(255, 255, 255, 0.08);
            
            /* Text */
            --text-primary: rgba(255, 255, 255, 0.92);
            --text-secondary: rgba(255, 255, 255, 0.64);
            --text-tertiary: rgba(255, 255, 255, 0.40);
            --text-muted: rgba(255, 255, 255, 0.25);
            
            /* Accent */
            --accent: #06b6d4;
            --accent-hover: #0891b2;
            --accent-soft: rgba(6, 182, 212, 0.15);
            
            /* Domain Colors */
            --domain-career: #3b82f6;
            --domain-development: #8B5CF6;
            --domain-relationships: #EC4899;
            --domain-spirituality: #06b6d4;
            --domain-environment: #F59E0B;
            --domain-recreation: #10B981;
            --domain-health: #EF4444;
            --domain-finances: #22C55E;
            
            /* Semantic */
            --success: #22c55e;
            --warning: #f59e0b;
            --danger: #ef4444;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        *, input, button, select, textarea {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        body {
            background: var(--bg-deep);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* ================================
           NAVIGATION BAR (styles in main CSS)
           ================================ */
        /* Nav styles are defined in main workbook.css section */

        .nav-icon-btn {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(255, 255, 255, 0.03);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            color: rgba(255, 255, 255, 0.4);
        }

        .nav-icon-btn:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
        }

        .nav-icon-btn svg {
            width: 16px;
            height: 16px;
        }

        /* ================================
           PAGE LAYOUT
           ================================ */
        .page-wrapper {
            padding-top: 52px;
        }

        .page-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 32px;
        }

        .page-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 40px;
        }

        .page-title-group h1 {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .page-subtitle {
            font-size: 13px;
            color: var(--text-tertiary);
        }

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

        /* Buttons */
        .btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 500;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s ease;
            border: none;
        }

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

        .btn-secondary {
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.7);
            border: 1px solid rgba(255,255,255,0.08);
        }

        .btn-secondary:hover {
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.9);
        }

        .btn-primary {
            background: var(--accent);
            color: #fff;
        }

        .btn-primary:hover {
            background: var(--accent-hover);
        }

        .btn-ghost {
            background: transparent;
            color: rgba(255,255,255,0.5);
        }

        .btn-ghost:hover {
            color: rgba(255,255,255,0.8);
        }

        .btn-success {
            background: var(--success);
            color: #fff;
        }

        .btn-success:hover {
            background: #16a34a;
        }

        .btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* ================================
           MAIN GRID LAYOUT
           ================================ */
        .main-grid {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 32px;
        }

        /* ================================
           WHEEL SECTION
           ================================ */
        .wheel-section {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 20px;
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .wheel-container {
            position: relative;
            width: 420px;
            height: 420px;
        }

        .wheel-svg {
            width: 100%;
            height: 100%;
        }

        .wheel-ring {
            fill: none;
            stroke: rgba(255,255,255,0.06);
            stroke-width: 1;
        }

        .wheel-ring.ring-5 {
            stroke: rgba(255,255,255,0.1);
        }

        .wheel-ring.ring-10 {
            stroke: rgba(255,255,255,0.12);
        }

        .wheel-axis {
            stroke: rgba(255,255,255,0.08);
            stroke-width: 1;
        }

        .wheel-polygon {
            fill: url(#polygonGradient);
            stroke: rgba(255,255,255,0.3);
            stroke-width: 2;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .score-point {
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .score-point:hover {
            transform: scale(1.15);
        }

        .score-point-circle {
            fill: rgba(0,0,0,0.6);
            stroke-width: 3;
        }

        .score-point-text {
            fill: #fff;
            font-size: 11px;
            font-weight: 600;
            text-anchor: middle;
            dominant-baseline: central;
        }

        /* Domain Labels */
        .domain-label {
            fill: var(--text-secondary);
            font-size: 11px;
            font-weight: 500;
            text-anchor: middle;
        }

        /* Wheel Stats */
        .wheel-stats {
            display: flex;
            gap: 32px;
            margin-top: 32px;
        }

        .wheel-stat {
            text-align: center;
        }

        .wheel-stat-value {
            font-size: 32px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .wheel-stat-label {
            font-size: 11px;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-top: 4px;
        }

        /* Quick Stats Bar */
        .quick-stats {
            display: flex;
            gap: 12px;
            margin-top: 24px;
        }

        .quick-stat {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .quick-stat-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .quick-stat-dot.up { background: var(--success); }
        .quick-stat-dot.stable { background: var(--text-tertiary); }
        .quick-stat-dot.down { background: var(--danger); }

        /* Tooltip */
        .wheel-tooltip {
            position: absolute;
            background: var(--bg-elevated);
            border: 1px solid var(--border-glass);
            border-radius: 8px;
            padding: 10px 14px;
            pointer-events: none;
            opacity: 0;
            transform: translateY(5px);
            transition: all 0.15s ease;
            z-index: 10;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        }

        .wheel-tooltip.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .tooltip-domain {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .tooltip-score {
            font-size: 11px;
            color: var(--text-secondary);
        }

        /* ================================
           SIDEBAR
           ================================ */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* Domain Cards Grid */
        .domain-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .domain-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 12px;
            padding: 14px;
            cursor: pointer;
            transition: all 0.15s ease;
            position: relative;
            overflow: hidden;
        }

        .domain-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--domain-color);
            opacity: 0.5;
        }

        .domain-card:hover {
            background: rgba(255,255,255,0.04);
            border-color: var(--border-glass);
        }

        .domain-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .domain-card-icon {
            font-size: 16px;
        }

        .domain-card-name {
            font-size: 12px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .domain-card-score {
            display: flex;
            align-items: baseline;
        }

        .domain-card-score-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .domain-card-score-max {
            font-size: 13px;
            color: var(--text-tertiary);
            margin-left: 2px;
        }

        .domain-card-trend {
            position: absolute;
            top: 12px;
            right: 12px;
            font-size: 14px;
        }

        .domain-card-trend.up { color: var(--success); }
        .domain-card-trend.stable { color: var(--text-tertiary); }
        .domain-card-trend.down { color: var(--danger); }

        /* AI Insights Panel */
        .insights-panel {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 16px;
            padding: 20px;
        }

        .insights-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .insights-icon {
            font-size: 18px;
        }

        .insights-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .insight-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 12px;
        }

        .insight-card:last-child {
            margin-bottom: 0;
        }

        .insight-text {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 12px;
        }

        .insight-text strong {
            color: var(--text-primary);
        }

        .insight-actions {
            display: flex;
            gap: 8px;
        }

        .insight-btn {
            padding: 6px 12px;
            font-size: 11px;
            font-weight: 500;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s ease;
            border: none;
        }

        .insight-btn-primary {
            background: var(--accent-soft);
            color: var(--accent);
        }

        .insight-btn-primary:hover {
            background: rgba(6, 182, 212, 0.25);
        }

        .insight-btn-ghost {
            background: transparent;
            color: var(--text-tertiary);
        }

        .insight-btn-ghost:hover {
            color: var(--text-secondary);
        }

        /* Enhanced insight card with icon */
        .insight-card {
            display: flex;
            gap: 12px;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .insight-icon-wrapper {
            font-size: 20px;
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.03);
        }

        .insight-content {
            flex: 1;
            min-width: 0;
        }

        .insight-content .insight-text {
            margin-bottom: 10px;
        }

        /* Insight type colors */
        .insight-warning {
            border-color: rgba(245, 158, 11, 0.3);
        }

        .insight-warning .insight-icon-wrapper {
            background: rgba(245, 158, 11, 0.1);
        }

        .insight-caution {
            border-color: rgba(168, 85, 247, 0.3);
        }

        .insight-caution .insight-icon-wrapper {
            background: rgba(168, 85, 247, 0.1);
        }

        .insight-success {
            border-color: rgba(34, 197, 94, 0.3);
        }

        .insight-success .insight-icon-wrapper {
            background: rgba(34, 197, 94, 0.1);
        }

        .insight-info {
            border-color: rgba(6, 182, 212, 0.3);
        }

        .insight-info .insight-icon-wrapper {
            background: rgba(6, 182, 212, 0.1);
        }

        /* Empty state */
        .insight-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px;
            text-align: center;
            color: var(--text-muted);
        }

        .insight-empty-icon {
            font-size: 24px;
            margin-bottom: 8px;
            opacity: 0.5;
        }

        .insight-empty p {
            font-size: 13px;
            margin: 0;
        }

        .insights-container {
            min-height: 60px;
        }

        /* ================================
           MODAL BACKDROP
           ================================ */
        .modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.75);
            backdrop-filter: blur(12px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 32px;
        }

        .modal-backdrop.active {
            display: flex;
        }

        /* ================================
           QUICK UPDATE MODAL
           ================================ */
        .quick-modal {
            width: 100%;
            max-width: 640px;
            max-height: calc(100vh - 64px);
            background: var(--bg-elevated);
            border: 1px solid var(--border-glass);
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 25px 80px rgba(0,0,0,0.6);
            animation: modalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes modalIn {
            from {
                opacity: 0;
                transform: scale(0.96) translateY(10px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 28px 20px;
            border-bottom: 1px solid var(--border-subtle);
        }

        .modal-header-left {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .modal-icon {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(34, 197, 94, 0.1));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }

        .modal-title-group h2 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .modal-subtitle {
            font-size: 13px;
            color: var(--text-tertiary);
        }

        .modal-close {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            cursor: pointer;
            color: var(--text-tertiary);
            transition: all 0.15s ease;
            background: transparent;
            border: none;
        }

        .modal-close:hover {
            background: rgba(255,255,255,0.06);
            color: var(--text-secondary);
        }

        .modal-close svg {
            width: 18px;
            height: 18px;
        }

        .modal-content {
            flex: 1;
            overflow-y: auto;
            padding: 24px 28px;
        }

        .modal-content::-webkit-scrollbar {
            width: 6px;
        }

        .modal-content::-webkit-scrollbar-track {
            background: transparent;
        }

        .modal-content::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.08);
            border-radius: 3px;
        }

        .modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            padding: 16px 28px;
            border-top: 1px solid var(--border-subtle);
            background: rgba(0,0,0,0.2);
        }

        /* Mini Wheel in Modal */
        .wheel-preview {
            display: flex;
            justify-content: center;
            margin-bottom: 24px;
        }

        .mini-wheel {
            width: 160px;
            height: 160px;
        }

        .wheel-polygon-previous {
            fill: none;
            stroke: rgba(255,255,255,0.2);
            stroke-width: 1.5;
            stroke-dasharray: 4 3;
        }

        .wheel-polygon-current {
            fill: url(#miniWheelGradient);
            stroke: rgba(255,255,255,0.4);
            stroke-width: 2;
        }

        /* Modal Intro */
        .modal-intro {
            font-size: 13px;
            color: var(--text-tertiary);
            margin-bottom: 24px;
            line-height: 1.5;
        }

        /* Domain Row (Quick Update) */
        .domain-row {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255,255,255,0.04);
        }

        .domain-row:last-of-type {
            border-bottom: none;
        }

        .domain-info {
            width: 130px;
            flex-shrink: 0;
        }

        .domain-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .domain-icon {
            font-size: 18px;
        }

        .domain-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .domain-previous {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 4px;
            margin-left: 28px;
        }

        /* Score Selector */
        .score-selector {
            flex: 1;
            display: flex;
            gap: 6px;
        }

        .score-btn {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 500;
            color: var(--text-tertiary);
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .score-btn:hover {
            background: rgba(255,255,255,0.06);
            border-color: var(--border-glass);
            color: var(--text-secondary);
        }

        .score-btn.previous-score {
            background: transparent;
            border-style: dashed;
            border-color: rgba(255,255,255,0.15);
        }

        .score-btn.selected {
            border-color: transparent;
            color: #fff;
            font-weight: 600;
        }

        .score-btn.selected.low {
            background: rgba(239,68,68,0.3);
            color: #f87171;
        }

        .score-btn.selected.mid {
            background: rgba(251,191,36,0.3);
            color: #fbbf24;
        }

        .score-btn.selected.high {
            background: rgba(34,197,94,0.3);
            color: #4ade80;
        }

        .score-change {
            font-size: 12px;
            font-weight: 600;
            min-width: 32px;
            text-align: right;
        }

        .score-change.up { color: var(--success); }
        .score-change.down { color: var(--danger); }
        .score-change.same { color: var(--text-muted); }

        /* Notes Section */
        .notes-section {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--border-subtle);
        }

        .notes-label {
            display: block;
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 10px;
        }

        .notes-label span {
            color: var(--text-muted);
        }

        .notes-input {
            width: 100%;
            min-height: 80px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 13px;
            color: var(--text-primary);
            resize: none;
            outline: none;
            transition: border-color 0.15s ease;
        }

        .notes-input:focus {
            border-color: var(--border-glass);
        }

        .notes-input::placeholder {
            color: var(--text-muted);
        }

        /* Summary Bar */
        .summary-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin-top: 20px;
            padding: 14px 20px;
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 12px;
        }

        .summary-item {
            flex: 1;
            text-align: center;
        }

        .summary-value {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .summary-label {
            font-size: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .summary-divider {
            width: 1px;
            height: 32px;
            background: var(--border-subtle);
        }

        .summary-change.up .summary-value { color: var(--success); }
        .summary-change.down .summary-value { color: var(--danger); }

        /* ================================
           FULL REVIEW WIZARD MODAL
           ================================ */
        .wizard-modal {
            width: 720px;
            max-height: 90vh;
            background: var(--bg-elevated);
            border: 1px solid var(--border-glass);
            border-radius: 20px;
            box-shadow: 0 25px 80px rgba(0,0,0,0.6);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: modalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .wizard-header {
            padding: 24px 28px 20px;
            border-bottom: 1px solid var(--border-subtle);
            background: rgba(0,0,0,0.2);
        }

        .wizard-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .wizard-title {
            font-size: 18px;
            font-weight: 600;
        }

        /* Step Indicator */
        .step-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .step-dot {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .step-number {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 600;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border-glass);
            color: var(--text-muted);
            transition: all 0.3s ease;
        }

        .step-dot.active .step-number {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

        .step-dot.completed .step-number {
            background: rgba(20,184,166,0.15);
            border-color: rgba(20,184,166,0.3);
            color: var(--accent);
        }

        .step-connector {
            width: 32px;
            height: 2px;
            background: var(--border-glass);
            border-radius: 1px;
            transition: background 0.3s ease;
        }

        .step-connector.completed {
            background: rgba(20,184,166,0.4);
        }

        .wizard-content {
            flex: 1;
            overflow-y: auto;
            padding: 24px 28px;
        }

        /* Step Content */
        .step-content {
            display: none;
            animation: stepEnter 0.3s ease;
        }

        .step-content.active {
            display: block;
        }

        @keyframes stepEnter {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

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

        .step-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .step-description {
            font-size: 13px;
            color: var(--text-tertiary);
            line-height: 1.5;
        }

        /* Wizard Domain List */
        .wizard-domain-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .wizard-domain-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            transition: all 0.15s ease;
        }

        .wizard-domain-row:hover {
            background: rgba(255,255,255,0.03);
        }

        .wizard-domain-icon {
            font-size: 18px;
            width: 32px;
            text-align: center;
        }

        .wizard-domain-info {
            flex: 1;
            min-width: 0;
        }

        .wizard-domain-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .wizard-domain-previous {
            font-size: 11px;
            color: var(--text-muted);
        }

        .wizard-score-buttons {
            display: flex;
            gap: 4px;
        }

        .wizard-score-btn {
            width: 28px;
            height: 28px;
            border: 1px solid var(--border-glass);
            border-radius: 6px;
            background: transparent;
            color: var(--text-tertiary);
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .wizard-score-btn:hover {
            background: rgba(255,255,255,0.06);
            color: var(--text-secondary);
        }

        .wizard-score-btn.previous-score {
            border-style: dashed;
            border-color: rgba(255,255,255,0.15);
        }

        .wizard-score-btn.selected {
            border-color: transparent;
            color: #fff;
            font-weight: 600;
        }

        .wizard-score-btn.selected.score-low {
            background: rgba(239,68,68,0.25);
            color: #f87171;
        }

        .wizard-score-btn.selected.score-mid {
            background: rgba(251,191,36,0.25);
            color: #fbbf24;
        }

        .wizard-score-btn.selected.score-high {
            background: rgba(34,197,94,0.25);
            color: #4ade80;
        }

        .wizard-change-indicator {
            font-size: 11px;
            font-weight: 600;
            min-width: 36px;
            text-align: right;
        }

        .wizard-change-indicator.positive { color: var(--success); }
        .wizard-change-indicator.negative { color: var(--danger); }
        .wizard-change-indicator.neutral { color: var(--text-muted); }

        /* Wizard Summary Stats */
        .wizard-summary-stats {
            display: flex;
            gap: 12px;
            padding: 14px;
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            margin-top: 20px;
        }

        .wizard-summary-stat {
            flex: 1;
            text-align: center;
        }

        .wizard-summary-stat-value {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .wizard-summary-stat-label {
            font-size: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .wizard-summary-stat-divider {
            width: 1px;
            background: var(--border-subtle);
        }

        /* Reflection Cards */
        .reflection-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .reflection-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 12px;
            padding: 16px;
            position: relative;
            overflow: hidden;
        }

        .reflection-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--domain-color);
            opacity: 0.6;
        }

        .reflection-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .reflection-icon {
            font-size: 18px;
        }

        .reflection-domain {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .reflection-change {
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 4px;
            margin-left: auto;
        }

        .reflection-change.negative {
            background: rgba(239,68,68,0.15);
            color: #f87171;
        }

        .reflection-change.positive {
            background: rgba(34,197,94,0.15);
            color: #4ade80;
        }

        .reflection-prompt {
            font-size: 12px;
            color: var(--text-tertiary);
            margin-bottom: 10px;
            line-height: 1.5;
        }

        .reflection-textarea {
            width: 100%;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-glass);
            border-radius: 8px;
            padding: 12px;
            font-size: 13px;
            color: var(--text-primary);
            outline: none;
            resize: none;
            min-height: 80px;
            line-height: 1.5;
            transition: border-color 0.15s ease;
        }

        .reflection-textarea:focus {
            border-color: rgba(255,255,255,0.15);
        }

        .reflection-textarea::placeholder {
            color: var(--text-muted);
        }

        /* No Changes Message */
        .no-changes-message {
            text-align: center;
            padding: 40px 20px;
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 12px;
        }

        .no-changes-icon {
            font-size: 32px;
            margin-bottom: 12px;
            opacity: 0.5;
        }

        .no-changes-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }

        .no-changes-text {
            font-size: 12px;
            color: var(--text-tertiary);
        }

        /* Target Rows */
        .target-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px;
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
        }

        .target-scores {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: auto;
        }

        .current-score {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-tertiary);
        }

        .target-arrow {
            color: var(--text-muted);
            font-size: 14px;
        }

        .target-input {
            width: 48px;
            height: 36px;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border-glass);
            border-radius: 6px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            outline: none;
            transition: all 0.15s ease;
        }

        .target-input:focus {
            border-color: var(--accent);
            background: rgba(20,184,166,0.08);
        }

        .target-input::placeholder {
            color: var(--text-muted);
        }

        /* Action Item Cards */
        .action-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            position: relative;
            overflow: hidden;
        }

        .action-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--domain-color);
            opacity: 0.6;
        }

        .action-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }

        .action-domain {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .action-score {
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 4px;
            background: rgba(239,68,68,0.15);
            color: #f87171;
            margin-left: auto;
        }

        .action-prompt {
            font-size: 12px;
            color: var(--text-tertiary);
            margin-bottom: 12px;
        }

        .action-inputs {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .action-input-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .action-number {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 600;
            color: var(--text-tertiary);
            flex-shrink: 0;
        }

        .action-input {
            flex: 1;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-glass);
            border-radius: 6px;
            padding: 10px 12px;
            font-size: 13px;
            color: var(--text-primary);
            outline: none;
            transition: border-color 0.15s ease;
        }

        .action-input:focus {
            border-color: rgba(255,255,255,0.15);
        }

        .action-input::placeholder {
            color: var(--text-muted);
        }

        /* Summary Step */
        .summary-section {
            margin-bottom: 24px;
        }

        .summary-section-title {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        .summary-wheels {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-bottom: 24px;
        }

        .summary-wheel {
            text-align: center;
        }

        .summary-wheel svg {
            width: 150px;
            height: 150px;
        }

        .summary-wheel-label {
            font-size: 11px;
            color: var(--text-tertiary);
            margin-top: 8px;
        }

        .summary-comparison {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 16px;
        }

        .comparison-item {
            text-align: center;
        }

        .comparison-value {
            font-size: 24px;
            font-weight: 700;
        }

        .comparison-value.before {
            color: var(--text-tertiary);
        }

        .comparison-value.after {
            color: var(--accent);
        }

        .comparison-label {
            font-size: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .comparison-arrow {
            display: flex;
            align-items: center;
            color: var(--text-muted);
            font-size: 18px;
        }

        /* Summary Lists */
        .summary-list {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            overflow: hidden;
        }

        .summary-list-item {
            padding: 12px 14px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .summary-list-item:last-child {
            border-bottom: none;
        }

        .summary-list-icon {
            font-size: 14px;
            margin-top: 2px;
        }

        .summary-list-content {
            flex: 1;
        }

        .summary-list-domain {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-tertiary);
            margin-bottom: 3px;
        }

        .summary-list-text {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .summary-empty {
            padding: 20px;
            text-align: center;
            font-size: 12px;
            color: var(--text-muted);
        }

        /* Wizard Footer */
        .wizard-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 28px;
            border-top: 1px solid var(--border-subtle);
            background: rgba(0,0,0,0.2);
        }

        .footer-left {
            display: flex;
            gap: 10px;
        }

        .footer-right {
            display: flex;
            gap: 10px;
        }

        .step-progress-text {
            font-size: 11px;
            color: var(--text-muted);
        }

        /* ================================
           DOMAIN DETAIL PANEL
           ================================ */
        .panel-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(8px);
            z-index: 1000;
            display: none;
        }

        .panel-backdrop.active {
            display: block;
        }

        .detail-panel {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 520px;
            background: #111113;
            border-left: 1px solid var(--border-glass);
            display: flex;
            flex-direction: column;
            z-index: 1001;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .detail-panel.active {
            transform: translateX(0);
        }

        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-subtle);
            background: rgba(0,0,0,0.3);
        }

        .panel-header-left {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .domain-icon-large {
            width: 48px;
            height: 48px;
            background: var(--domain-color-soft);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .domain-title-group h2 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .domain-subtitle {
            font-size: 12px;
            color: var(--text-tertiary);
        }

        .panel-close {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            cursor: pointer;
            color: var(--text-tertiary);
            transition: all 0.15s ease;
            background: transparent;
            border: none;
        }

        .panel-close:hover {
            background: rgba(255,255,255,0.06);
            color: var(--text-secondary);
        }

        .panel-close svg {
            width: 20px;
            height: 20px;
        }

        .panel-content {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
        }

        /* Score Section */
        .score-section {
            display: flex;
            gap: 20px;
            margin-bottom: 28px;
        }

        .score-card {
            flex: 1;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-subtle);
            border-radius: 14px;
            padding: 20px;
            text-align: center;
        }

        .score-card-label {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-bottom: 8px;
        }

        .score-card-value {
            font-size: 42px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1;
        }

        .score-card-value span {
            font-size: 18px;
            font-weight: 500;
            color: var(--text-muted);
        }

        .score-card.current {
            background: var(--domain-color-soft);
            border-color: var(--domain-color-border);
        }

        .score-card.current .score-card-value {
            color: var(--domain-color);
        }

        .score-card.target {
            border-style: dashed;
        }

        .score-progress {
            margin-top: 20px;
        }

        .score-progress-bar {
            height: 6px;
            background: rgba(255,255,255,0.08);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 8px;
        }

        .score-progress-fill {
            height: 100%;
            background: var(--domain-color);
            border-radius: 3px;
            transition: width 0.5s ease;
        }

        .score-progress-label {
            font-size: 11px;
            color: var(--text-tertiary);
            text-align: center;
        }

        /* Panel Section */
        .panel-section {
            margin-bottom: 28px;
        }

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .section-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .section-title svg {
            width: 14px;
            height: 14px;
            opacity: 0.6;
        }

        .section-action {
            font-size: 11px;
            color: var(--accent);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .section-action:hover {
            text-decoration: underline;
        }

        /* Trend Chart */
        .trend-chart-container {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 12px;
            padding: 16px;
        }

        .chart-svg {
            width: 100%;
            height: 120px;
        }

        .chart-grid-line {
            stroke: rgba(255,255,255,0.06);
            stroke-width: 1;
        }

        .chart-area {
            fill: url(#chartGradient);
            opacity: 0.3;
        }

        .chart-line {
            fill: none;
            stroke-width: 2;
        }

        .chart-dot {
            fill: var(--bg-elevated);
            stroke-width: 2;
        }

        .chart-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
        }

        .chart-label {
            font-size: 10px;
            color: var(--text-muted);
        }

        /* Project List */
        .project-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .project-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .project-item:hover {
            background: rgba(255,255,255,0.04);
        }

        .project-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .project-info {
            flex: 1;
            min-width: 0;
        }

        .project-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .project-meta {
            font-size: 11px;
            color: var(--text-muted);
        }

        .project-status {
            font-size: 10px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .project-status.active {
            background: rgba(34, 197, 94, 0.15);
            color: #4ade80;
        }

        .project-status.paused {
            background: rgba(251, 191, 36, 0.15);
            color: #fbbf24;
        }

        /* Reflection */
        .panel-reflection-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 12px;
            padding: 16px;
        }

        .panel-reflection-text {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.7;
        }

        .panel-reflection-text p {
            margin-bottom: 12px;
        }

        .panel-reflection-text p:last-child {
            margin-bottom: 0;
        }

        /* AI Card */
        .ai-card {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(59, 130, 246, 0.05));
            border: 1px solid rgba(6, 182, 212, 0.15);
            border-radius: 12px;
            padding: 16px;
        }

        .ai-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .ai-icon {
            font-size: 16px;
        }

        .ai-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .ai-suggestion {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.6;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255,255,255,0.04);
        }

        .ai-suggestion:last-of-type {
            border-bottom: none;
        }

        .ai-action {
            margin-top: 12px;
        }

        .ai-action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: rgba(6, 182, 212, 0.15);
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            color: var(--accent);
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .ai-action-btn:hover {
            background: rgba(6, 182, 212, 0.25);
        }

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

        .ai-suggestions-container {
            min-height: 40px;
        }

        .ai-suggestion-placeholder {
            font-size: 12px;
            color: var(--text-muted);
            font-style: italic;
            padding: 8px 0;
        }

        /* Panel Footer */
        .panel-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 24px;
            border-top: 1px solid var(--border-subtle);
            background: rgba(0,0,0,0.2);
        }

        .panel-nav-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: transparent;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .panel-nav-btn:hover {
            background: rgba(255,255,255,0.04);
            color: var(--text-secondary);
        }

        .panel-nav-btn svg {
            width: 14px;
            height: 14px;
        }

        .panel-updated {
            font-size: 11px;
            color: var(--text-muted);
        }

        /* ================================
           RESPONSIVE
           ================================ */
        @media (max-width: 1100px) {
            .main-grid {
                grid-template-columns: 1fr;
            }
            
            .wheel-container {
                width: 360px;
                height: 360px;
            }
        }

        @media (max-width: 768px) {
            .nav-items {
                display: none;
            }
            
            .page-content {
                padding: 24px 16px;
            }
            
            .wheel-container {
                width: 300px;
                height: 300px;
            }
            
            .domain-cards {
                grid-template-columns: 1fr;
            }
            
            .detail-panel {
                width: 100%;
            }
        }

        /* ================================
           REFLECTION EDIT STYLES
           ================================ */
        .panel-reflection-textarea {
            width: 100%;
            min-height: 120px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-glass);
            border-radius: 8px;
            padding: 12px;
            font-size: 13px;
            color: var(--text-primary);
            line-height: 1.7;
            resize: vertical;
            outline: none;
            transition: border-color 0.15s ease;
        }

        .panel-reflection-textarea:focus {
            border-color: var(--accent);
        }

        .panel-reflection-textarea::placeholder {
            color: var(--text-muted);
        }

        .reflection-edit-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 12px;
        }

        .reflection-empty-state {
            color: var(--text-muted);
            font-style: italic;
        }

        /* ================================
           LINK PROJECT MODAL STYLES
           ================================ */
        .link-project-search {
            margin-bottom: 16px;
        }

        .link-project-input {
            width: 100%;
            padding: 12px 14px;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            font-size: 13px;
            color: var(--text-primary);
            outline: none;
            transition: border-color 0.15s ease;
        }

        .link-project-input:focus {
            border-color: var(--border-glass);
        }

        .link-project-input::placeholder {
            color: var(--text-muted);
        }

        .link-project-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 320px;
            overflow-y: auto;
        }

        .link-project-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .link-project-item:hover {
            background: rgba(255,255,255,0.04);
            border-color: var(--border-glass);
        }

        .link-project-item.linked {
            background: rgba(6, 182, 212, 0.08);
            border-color: rgba(6, 182, 212, 0.2);
        }

        .link-project-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .link-project-info {
            flex: 1;
            min-width: 0;
        }

        .link-project-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .link-project-meta {
            font-size: 11px;
            color: var(--text-muted);
        }

        .link-project-check {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid var(--border-glass);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.15s ease;
        }

        .link-project-item.linked .link-project-check {
            background: var(--accent);
            border-color: var(--accent);
        }

        .link-project-check svg {
            width: 12px;
            height: 12px;
            color: white;
            opacity: 0;
        }

        .link-project-item.linked .link-project-check svg {
            opacity: 1;
        }

        .link-project-empty {
            text-align: center;
            padding: 32px 16px;
            color: var(--text-muted);
            font-size: 13px;
        }

        /* Unlink button in detail panel */
        .project-item-unlink {
            opacity: 0;
            padding: 4px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .project-item:hover .project-item-unlink {
            opacity: 1;
        }

        .project-item-unlink:hover {
            color: var(--danger);
        }

        .project-item-unlink svg {
            width: 14px;
            height: 14px;
        }

        /* ============================================
           AI CHAT PANEL STYLES - Using main workbook styles
           (Floating popup in bottom-right corner)
           ============================================ */
        /* Life Hub specific AI chat styles removed - using shared workbook styles */


    /* ============================================
       PROJECT WORKSPACE MODAL
       Full-screen workspace for deep project work
       ============================================ */
    
    /* Open Workspace Button (in project popup) */
    .open-workspace-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
      padding: 12px 24px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .open-workspace-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.15);
    }
    
    .open-workspace-btn svg {
      width: 16px;
      height: 16px;
      opacity: 0.8;
    }
    
    /* Workspace Overlay */
    .workspace-overlay {
      position: fixed;
      inset: 0;
      background: #0a0a0b;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .workspace-overlay.open {
      opacity: 1;
      visibility: visible;
    }
    
    .workspace-container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    /* Workspace Header */
    .workspace-header {
      height: 64px;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(255, 255, 255, 0.02);
      flex-shrink: 0;
    }
    
    .workspace-header-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .workspace-back-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
      background: transparent;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .workspace-back-btn:hover {
      background: rgba(255, 255, 255, 0.04);
      color: rgba(255, 255, 255, 0.8);
    }
    
    .workspace-back-btn svg {
      width: 16px;
      height: 16px;
    }
    
    .workspace-project-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    
    .workspace-project-title {
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
    }
    
    .workspace-project-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
    }
    
    .workspace-meta-dot {
      width: 3px;
      height: 3px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
    }
    
    .workspace-alignment-badge {
      padding: 2px 8px;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-radius: 4px;
      background: rgba(6, 182, 212, 0.15);
      color: #06b6d4;
    }
    
    .workspace-alignment-badge.supporting {
      background: rgba(59, 130, 246, 0.15);
      color: #3b82f6;
    }
    
    .workspace-alignment-badge.exploratory {
      background: rgba(168, 85, 247, 0.15);
      color: #a855f7;
    }

    /* Project Link Selector (for standalone docs) */
    .workspace-project-link {
      position: relative;
      margin-left: 4px;
    }

    .workspace-link-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .workspace-link-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.9);
    }

    .workspace-link-btn.has-project {
      background: rgba(6, 182, 212, 0.1);
      border-color: rgba(6, 182, 212, 0.3);
      color: #06b6d4;
    }

    .workspace-link-btn.has-project:hover {
      background: rgba(6, 182, 212, 0.15);
    }

    .workspace-link-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 240px;
      max-height: 300px;
      overflow-y: auto;
      background: #1a1a1f;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      z-index: 1000;
      padding: 6px;
    }

    .workspace-link-dropdown.open {
      display: block;
    }

    .workspace-link-dropdown-header {
      padding: 8px 10px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.4);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      margin-bottom: 4px;
    }

    .workspace-link-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.1s ease;
    }

    .workspace-link-item:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .workspace-link-item.active {
      background: rgba(6, 182, 212, 0.15);
      color: #06b6d4;
    }

    .workspace-link-item-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .workspace-link-item-name {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .workspace-link-item-check {
      width: 16px;
      height: 16px;
      opacity: 0;
    }

    .workspace-link-item.active .workspace-link-item-check {
      opacity: 1;
    }

    .workspace-link-unlink {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      margin-top: 4px;
      cursor: pointer;
      transition: all 0.1s ease;
    }

    .workspace-link-unlink:hover {
      color: #f97066;
      background: rgba(249, 112, 102, 0.1);
      border-radius: 6px;
    }

    .workspace-header-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .workspace-focus-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .workspace-focus-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .workspace-focus-btn svg {
      width: 16px;
      height: 16px;
      opacity: 0.8;
    }

    .workspace-action-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .workspace-action-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.9);
    }
    
    .workspace-action-btn svg {
      width: 16px;
      height: 16px;
      opacity: 0.7;
    }
    
    /* Workspace Main Area */
    .workspace-main {
      flex: 1;
      display: flex;
      overflow: hidden;
    }
    
    /* Workspace Sidebar */
    .workspace-sidebar {
      width: 280px;
      background: rgba(255, 255, 255, 0.02);
      border-right: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }
    
    .workspace-sidebar::after {
      content: '';
      position: absolute;
      top: 5%;
      bottom: 5%;
      right: 0;
      width: 1px;
      background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
      pointer-events: none;
    }
    
    .workspace-sidebar-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    
    .workspace-section {
      margin-bottom: 24px;
    }
    
    .workspace-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    
    .workspace-section-title {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.35);
    }
    
    .workspace-section-action {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.3);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: color 0.15s ease;
      line-height: 1;
      padding: 0;
    }
    
    .workspace-section-action:hover {
      color: rgba(255, 255, 255, 0.6);
    }

    /* Task Items */
    .workspace-tasks-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .workspace-task-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
    }

    .workspace-task-item:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
    }

    .workspace-task-item.completed {
      opacity: 0.5;
    }

    .workspace-task-checkbox {
      width: 14px;
      height: 14px;
      border: 1.5px solid rgba(255, 255, 255, 0.3);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      transition: all 0.15s ease;
      background: transparent;
    }

    .workspace-task-checkbox:hover {
      border-color: var(--primary);
    }

    .workspace-task-item.completed .workspace-task-checkbox {
      background: var(--primary);
      border-color: var(--primary);
    }

    .workspace-task-checkbox svg {
      width: 10px;
      height: 10px;
      opacity: 0;
      stroke: #0a0a0c;
      stroke-width: 3;
    }

    .workspace-task-item.completed .workspace-task-checkbox svg {
      opacity: 1;
    }

    .workspace-task-title {
      flex: 1;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.75);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }

    .workspace-task-item.completed .workspace-task-title {
      text-decoration: line-through;
      color: rgba(255, 255, 255, 0.4);
    }

    .workspace-task-delete {
      position: absolute;
      right: 6px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0;
      transition: all 0.15s ease;
      color: rgba(255, 255, 255, 0.4);
    }

    .workspace-task-item:hover .workspace-task-delete {
      opacity: 1;
    }

    .workspace-task-delete:hover {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
    }

    .workspace-task-delete svg {
      width: 12px;
      height: 12px;
    }

    .workspace-task-input {
      margin-bottom: 8px;
    }

    .workspace-task-input input {
      width: 100%;
      padding: 8px 10px;
      font-size: 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      color: rgba(255, 255, 255, 0.9);
      outline: none;
      transition: border-color 0.15s ease;
    }

    .workspace-task-input input:focus {
      border-color: var(--primary);
    }

    .workspace-task-input input::placeholder {
      color: rgba(255, 255, 255, 0.35);
    }

    .workspace-task-input-actions {
      display: flex;
      gap: 6px;
      margin-top: 6px;
      justify-content: flex-end;
    }

    .workspace-task-btn {
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 500;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .workspace-task-btn.cancel {
      background: transparent;
      color: rgba(255, 255, 255, 0.5);
    }

    .workspace-task-btn.cancel:hover {
      color: rgba(255, 255, 255, 0.8);
    }

    .workspace-task-btn.save {
      background: var(--primary);
      color: #0a0a0c;
    }

    .workspace-task-btn.save:hover {
      background: var(--primary-hover);
    }

    .workspace-add-task-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      width: 100%;
      margin-top: 6px;
    }

    .workspace-add-task-btn:hover {
      background: rgba(255, 255, 255, 0.02);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.6);
    }

    .workspace-tasks-empty {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.35);
      text-align: center;
      padding: 12px;
    }

    /* Document Items */
    .workspace-doc-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      margin-bottom: 6px;
    }
    
    .workspace-doc-item:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
    }
    
    .workspace-doc-item.active {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
    }
    
    .workspace-doc-icon {
      font-size: 14px;
      opacity: 0.7;
    }
    
    .workspace-doc-content {
      flex: 1;
      min-width: 0;
    }
    
    .workspace-doc-title {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .workspace-doc-meta {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.35);
      margin-top: 2px;
    }
    
    .workspace-doc-star {
      font-size: 12px;
      color: rgba(251, 191, 36, 0.8);
    }
    
    .workspace-doc-delete {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0;
      transition: all 0.15s ease;
      color: rgba(255, 255, 255, 0.4);
    }
    
    .workspace-doc-item {
      position: relative;
    }
    
    .workspace-doc-item:hover .workspace-doc-delete {
      opacity: 1;
    }
    
    .workspace-doc-item:hover .workspace-doc-star {
      opacity: 0;
    }
    
    .workspace-doc-delete:hover {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
    }
    
    .workspace-doc-delete svg {
      width: 14px;
      height: 14px;
    }
    
    .workspace-new-doc-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      width: 100%;
    }
    
    .workspace-new-doc-btn:hover {
      background: rgba(255, 255, 255, 0.02);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.6);
    }
    
    /* Idea Items */
    .workspace-idea-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      margin-bottom: 6px;
    }
    
    .workspace-idea-item:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
    }
    
    .workspace-idea-icon {
      font-size: 12px;
      opacity: 0.7;
      margin-top: 1px;
    }
    
    .workspace-idea-text {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.5;
      flex: 1;
    }
    
    .workspace-capture-idea-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      width: 100%;
    }
    
    .workspace-capture-idea-btn:hover {
      background: rgba(255, 255, 255, 0.02);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.6);
    }
    
    /* Inline Idea Input */
    .workspace-idea-input {
      display: none;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      margin-bottom: 6px;
    }
    
    .workspace-idea-input.active {
      display: block;
    }
    
    .workspace-idea-input textarea {
      width: 100%;
      background: transparent;
      border: none;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.9);
      outline: none;
      resize: none;
      min-height: 60px;
      line-height: 1.5;
      font-family: inherit;
    }
    
    .workspace-idea-input textarea::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }
    
    .workspace-idea-actions {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      margin-top: 8px;
    }
    
    .workspace-idea-btn {
      padding: 5px 10px;
      font-size: 10px;
      font-weight: 500;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
      border: none;
    }
    
    .workspace-idea-btn.cancel {
      background: transparent;
      color: rgba(255, 255, 255, 0.4);
    }
    
    .workspace-idea-btn.cancel:hover {
      color: rgba(255, 255, 255, 0.6);
    }
    
    .workspace-idea-btn.save {
      background: rgba(6, 182, 212, 0.2);
      color: #06b6d4;
    }
    
    .workspace-idea-btn.save:hover {
      background: rgba(6, 182, 212, 0.3);
    }
    
    /* Inspiration Grid */
    .workspace-inspiration-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 8px;
    }
    
    .workspace-inspiration-thumb {
      aspect-ratio: 1;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .workspace-inspiration-thumb:hover {
      border-color: rgba(255, 255, 255, 0.15);
      transform: scale(1.02);
    }
    
    .workspace-inspiration-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .workspace-inspiration-more {
      aspect-ratio: 1;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
    }
    
    .workspace-inspiration-more:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.6);
    }
    
    .workspace-add-inspiration-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 16px;
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      width: 100%;
    }
    
    .workspace-add-inspiration-btn:hover {
      background: rgba(255, 255, 255, 0.02);
      border-color: rgba(255, 255, 255, 0.15);
    }
    
    .workspace-add-inspiration-btn span {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.3);
    }
    
    .workspace-add-inspiration-btn small {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.25);
    }
    
    /* Editor Area */
    .workspace-editor-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }
    
    .workspace-editor-container {
      flex: 1;
      margin: 24px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    }
    
    /* Glass edge effects */
    .workspace-editor-container::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 40%, transparent 50%, transparent 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    
    .workspace-editor-container::after {
      content: '';
      position: absolute;
      top: 0;
      left: 15%;
      right: 15%;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
      pointer-events: none;
    }
    
    /* Editor Header */
    .workspace-editor-header {
      padding: 20px 28px 0;
      flex-shrink: 0;
    }
    
    .workspace-editor-title {
      width: 100%;
      background: transparent;
      border: none;
      font-size: 24px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.95);
      outline: none;
      padding: 0;
      margin-bottom: 12px;
      font-family: inherit;
    }
    
    .workspace-editor-title::placeholder {
      color: rgba(255, 255, 255, 0.25);
    }
    
    /* Toolbar */
    .workspace-editor-toolbar {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 10px 28px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }
    
    .workspace-toolbar-group {
      display: flex;
      align-items: center;
      gap: 2px;
    }
    
    .workspace-toolbar-divider {
      width: 1px;
      height: 20px;
      background: rgba(255, 255, 255, 0.08);
      margin: 0 8px;
    }
    
    .workspace-toolbar-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      color: rgba(255, 255, 255, 0.4);
      font-size: 13px;
      font-weight: 600;
    }
    
    .workspace-toolbar-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.7);
    }
    
    .workspace-toolbar-btn.active {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.9);
    }
    
    .workspace-toolbar-btn svg {
      width: 16px;
      height: 16px;
    }
    
    /* Editor Content */
    .workspace-editor-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px 28px;
    }
    
    .workspace-editor-body {
      min-height: 100%;
      font-size: 14px;
      line-height: 1.8;
      color: rgba(255, 255, 255, 0.8);
      outline: none;
    }
    
    .workspace-editor-body:empty::before {
      content: 'Start writing...';
      color: rgba(255, 255, 255, 0.25);
    }
    
    .workspace-editor-body h1 {
      font-size: 22px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.95);
      margin: 28px 0 16px;
    }
    
    .workspace-editor-body h1:first-child {
      margin-top: 0;
    }
    
    .workspace-editor-body h2 {
      font-size: 18px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      margin: 24px 0 12px;
    }
    
    .workspace-editor-body h3 {
      font-size: 15px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.85);
      margin: 20px 0 10px;
    }
    
    .workspace-editor-body p {
      margin-bottom: 14px;
    }
    
    .workspace-editor-body ul,
    .workspace-editor-body ol {
      margin: 14px 0;
      padding-left: 24px;
    }
    
    .workspace-editor-body li {
      margin-bottom: 8px;
    }
    
    .workspace-editor-body blockquote {
      border-left: 3px solid rgba(255, 255, 255, 0.15);
      padding-left: 20px;
      margin: 20px 0;
      color: rgba(255, 255, 255, 0.6);
      font-style: italic;
    }
    
    .workspace-editor-body code {
      background: rgba(255, 255, 255, 0.08);
      padding: 3px 8px;
      border-radius: 4px;
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 13px;
    }
    
    .workspace-editor-body pre {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      padding: 16px 20px;
      overflow-x: auto;
      margin: 20px 0;
    }
    
    .workspace-editor-body pre code {
      background: transparent;
      padding: 0;
    }
    
    .workspace-editor-body strong {
      font-weight: 600;
      color: rgba(255, 255, 255, 0.95);
    }
    
    .workspace-editor-body em {
      font-style: italic;
    }
    
    /* Editor Footer */
    .workspace-editor-footer {
      padding: 14px 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      position: relative;
      z-index: 20;
      background: #0a0a0b;
    }
    
    .workspace-editor-footer-left {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.35);
    }
    
    .workspace-save-status {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .workspace-save-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    
    .workspace-save-dot.saved {
      background: rgba(34, 197, 94, 0.8);
    }
    
    .workspace-save-dot.saving {
      background: rgba(251, 191, 36, 0.8);
      animation: workspacePulse 1s ease-in-out infinite;
    }
    
    .workspace-save-dot.unsaved {
      background: rgba(239, 68, 68, 0.8);
    }
    
    @keyframes workspacePulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    .workspace-editor-footer-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .workspace-main-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 12px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .workspace-main-toggle:hover {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.7);
    }
    
    .workspace-main-toggle.is-main {
      background: rgba(251, 191, 36, 0.1);
      border-color: rgba(251, 191, 36, 0.2);
      color: rgba(251, 191, 36, 0.9);
    }

    /* Lyrics Mode Toggle */
    .workspace-lyrics-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .workspace-lyrics-toggle svg {
      width: 14px;
      height: 14px;
    }

    .workspace-lyrics-toggle:hover {
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.7);
    }

    .workspace-lyrics-toggle.active {
      background: rgba(139, 92, 246, 0.15);
      border-color: rgba(139, 92, 246, 0.3);
      color: rgba(139, 92, 246, 0.9);
    }

    /* ============================================
       LYRICS EDITOR
       ============================================ */

    .lyrics-editor {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      position: relative;
    }

    /* View Tabs */
    .lyrics-view-tabs {
      display: flex;
      gap: 4px;
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.02);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .lyrics-view-tab {
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
      background: transparent;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-view-tab:hover {
      color: rgba(255, 255, 255, 0.6);
    }

    .lyrics-view-tab.active {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.95);
    }

    /* Header Bar */
    .lyrics-header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      flex-shrink: 0;
    }

    .lyrics-export-actions {
      display: flex;
      gap: 8px;
    }

    .lyrics-export-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-export-btn:hover {
      color: rgba(255, 255, 255, 0.8);
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .lyrics-export-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Main Layout */
    .lyrics-main {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      position: relative;
    }

    /* Sections Container */
    .lyrics-sections {
      flex: 1;
      overflow-y: auto;
      padding: 20px 24px;
      margin-right: 260px; /* Space for bank */
    }

    /* Section */
    .lyrics-section {
      margin-bottom: 32px;
    }

    .lyrics-section-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .lyrics-section-type {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255, 255, 255, 0.5);
      padding: 4px 8px;
      margin: -4px -8px;
      border-radius: 4px;
      outline: none;
      border: 1px solid transparent;
      transition: all 0.15s ease;
    }

    .lyrics-section-type:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    .lyrics-section-type:focus {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.8);
    }

    .lyrics-section-variants {
      display: flex;
      gap: 4px;
    }

    .lyrics-section-variant-tab {
      width: 24px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-section-variant-tab:hover {
      color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.06);
    }

    .lyrics-section-variant-tab.active {
      color: rgba(255, 255, 255, 0.9);
      background: rgba(139, 92, 246, 0.2);
      border-color: rgba(139, 92, 246, 0.3);
    }

    .lyrics-section-variant-add {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.2);
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-section-variant-add:hover {
      color: rgba(255, 255, 255, 0.5);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .lyrics-section-line {
      flex: 1;
      height: 1px;
      background: rgba(255, 255, 255, 0.06);
    }

    .lyrics-section-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .lyrics-section:hover .lyrics-section-actions {
      opacity: 1;
    }

    .lyrics-section-action {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.3);
      background: transparent;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-section-action:hover {
      color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.06);
    }

    .lyrics-section-action.delete:hover {
      color: rgba(239, 68, 68, 0.8);
      background: rgba(239, 68, 68, 0.1);
    }

    .lyrics-section-action svg {
      width: 14px;
      height: 14px;
    }

    /* Lines */
    .lyrics-lines {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .lyrics-line {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-line:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.08);
    }

    .lyrics-line.dragging {
      opacity: 0.5;
    }

    /* Reorder drop target - blue left border */
    .lyrics-line.drop-target-reorder {
      border-left: 3px solid rgba(59, 130, 246, 0.8);
      background: rgba(59, 130, 246, 0.05);
    }

    /* Merge drop target - purple highlight (shift held) */
    .lyrics-line.drop-target-merge {
      border-color: rgba(139, 92, 246, 0.5);
      background: rgba(139, 92, 246, 0.1);
      box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
    }

    /* Fallback for bank items */
    .lyrics-line.drop-target {
      border-color: rgba(139, 92, 246, 0.4);
      background: rgba(139, 92, 246, 0.05);
    }

    /* Section drop target (for creating new lines OR moving lines between sections) */
    .lyrics-lines.section-drop-target,
    .lyrics-add-line.section-drop-target {
      background: rgba(34, 197, 94, 0.08);
      border-color: rgba(34, 197, 94, 0.4);
      border-style: dashed;
    }

    .lyrics-lines.section-drop-target {
      border: 2px dashed rgba(34, 197, 94, 0.4);
      border-radius: 10px;
      min-height: 60px;
    }

    .lyrics-add-line.section-drop-target {
      color: rgba(34, 197, 94, 0.8);
      border-color: rgba(34, 197, 94, 0.4);
      background: rgba(34, 197, 94, 0.1);
    }

    /* Drag hint tooltip */
    .lyrics-drag-hint {
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 16px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      background: rgba(0, 0, 0, 0.85);
      border-radius: 8px;
      z-index: 100;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .lyrics-drag-hint.visible {
      opacity: 1;
    }

    .lyrics-drag-hint kbd {
      padding: 2px 6px;
      font-size: 11px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 4px;
      margin: 0 2px;
    }

    .lyrics-line-drag {
      display: flex;
      align-items: center;
      color: rgba(255, 255, 255, 0.2);
      cursor: grab;
    }

    .lyrics-line-drag:active {
      cursor: grabbing;
    }

    .lyrics-line-drag svg {
      width: 12px;
      height: 12px;
    }

    .lyrics-line-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .lyrics-line-text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.4;
    }

    .lyrics-line-text[contenteditable="true"] {
      outline: none;
      cursor: text;
    }

    .lyrics-line-meta {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .lyrics-line-syllables {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.35);
    }

    .lyrics-line-rating {
      font-size: 9px;
      letter-spacing: 1px;
      color: rgba(251, 191, 36, 0.7);
    }

    .lyrics-line-variants-count {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      font-size: 10px;
      font-weight: 600;
      color: rgba(139, 92, 246, 0.8);
      background: rgba(139, 92, 246, 0.15);
      border-radius: 10px;
    }

    .lyrics-line-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .lyrics-line:hover .lyrics-line-actions {
      opacity: 1;
    }

    .lyrics-line-action {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.3);
      background: transparent;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-line-action:hover {
      color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.06);
    }

    .lyrics-line-action.delete:hover {
      color: rgba(239, 68, 68, 0.8);
      background: rgba(239, 68, 68, 0.1);
    }

    .lyrics-line-action svg {
      width: 14px;
      height: 14px;
    }

    /* Add Line */
    .lyrics-add-line {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-add-line:hover {
      color: rgba(255, 255, 255, 0.5);
    }

    .lyrics-add-line svg {
      width: 14px;
      height: 14px;
    }

    /* Add Section Button */
    .lyrics-add-section-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 14px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
      margin-top: 20px;
    }

    .lyrics-add-section-btn:hover {
      color: rgba(255, 255, 255, 0.6);
      border-color: rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.02);
    }

    .lyrics-add-section-btn svg {
      width: 16px;
      height: 16px;
    }

    /* ============================================
       BRAINSTORM BANK
       ============================================ */

    .lyrics-bank {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 260px;
      display: flex;
      flex-direction: column;
      background: rgba(15, 15, 17, 0.95);
      border-left: 1px solid rgba(255, 255, 255, 0.06);
      z-index: 10;
    }

    .lyrics-bank-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .lyrics-bank-title {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.7);
    }

    .lyrics-bank-count {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.06);
      padding: 2px 8px;
      border-radius: 10px;
    }

    .lyrics-bank-search {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 12px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 6px;
    }

    .lyrics-bank-search svg {
      width: 14px;
      height: 14px;
      color: rgba(255, 255, 255, 0.3);
      flex-shrink: 0;
    }

    .lyrics-bank-search input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.9);
    }

    .lyrics-bank-search input::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .lyrics-bank-items {
      flex: 1;
      overflow-y: auto;
      padding: 0 12px 12px;
    }

    .lyrics-bank-item {
      display: flex;
      gap: 8px;
      padding: 10px 12px;
      margin-bottom: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      cursor: grab;
      transition: all 0.15s ease;
    }

    .lyrics-bank-item:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .lyrics-bank-item.dragging {
      opacity: 0.5;
      cursor: grabbing;
    }

    .lyrics-bank-item.used {
      opacity: 0.5;
      border-left: 2px solid rgba(34, 197, 94, 0.5);
    }

    .lyrics-bank-item-drag {
      display: flex;
      align-items: flex-start;
      padding-top: 2px;
      color: rgba(255, 255, 255, 0.2);
    }

    .lyrics-bank-item-drag svg {
      width: 12px;
      height: 12px;
    }

    .lyrics-bank-item-content {
      flex: 1;
      min-width: 0;
    }

    .lyrics-bank-item-text {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.4;
      margin-bottom: 4px;
    }

    .lyrics-bank-item-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .lyrics-bank-tag {
      font-size: 9px;
      font-weight: 500;
      padding: 2px 6px;
      color: rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.06);
      border-radius: 4px;
    }

    .lyrics-bank-item-actions {
      display: flex;
      flex-direction: column;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .lyrics-bank-item:hover .lyrics-bank-item-actions {
      opacity: 1;
    }

    .lyrics-bank-item-action {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.3);
      background: transparent;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-bank-item-action:hover {
      color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.06);
    }

    .lyrics-bank-item-action.delete:hover {
      color: rgba(239, 68, 68, 0.8);
    }

    .lyrics-bank-item-action svg {
      width: 12px;
      height: 12px;
    }

    .lyrics-bank-add {
      display: flex;
      gap: 8px;
      padding: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .lyrics-bank-add input {
      flex: 1;
      padding: 8px 12px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      outline: none;
    }

    .lyrics-bank-add input:focus {
      border-color: rgba(139, 92, 246, 0.4);
    }

    .lyrics-bank-add input::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .lyrics-bank-add-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.06);
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-bank-add-btn:hover {
      color: rgba(255, 255, 255, 0.8);
      background: rgba(255, 255, 255, 0.1);
    }

    .lyrics-bank-add-btn svg {
      width: 16px;
      height: 16px;
    }

    .lyrics-bank-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0 12px 12px;
    }

    .lyrics-bank-tag-filter {
      font-size: 10px;
      font-weight: 500;
      padding: 4px 8px;
      color: rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-bank-tag-filter:hover {
      color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.06);
    }

    .lyrics-bank-tag-filter.active {
      color: rgba(139, 92, 246, 0.9);
      background: rgba(139, 92, 246, 0.15);
      border-color: rgba(139, 92, 246, 0.3);
    }

    /* ============================================
       LYRICS MODALS & PANELS
       ============================================ */

    .lyrics-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    .lyrics-modal {
      width: 400px;
      max-width: 90%;
      background: #18181b;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      overflow: hidden;
    }

    .lyrics-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .lyrics-modal-header h3 {
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.95);
    }

    .lyrics-modal-close {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: rgba(255, 255, 255, 0.4);
      background: transparent;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-modal-close:hover {
      color: rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.06);
    }

    .lyrics-modal-body {
      padding: 20px;
    }

    .lyrics-section-types {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .lyrics-section-type-btn {
      padding: 14px 16px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-section-type-btn:hover {
      color: rgba(255, 255, 255, 0.95);
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
    }

    /* Variants Panel */
    .lyrics-variants-panel {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      max-width: 90%;
      max-height: 60vh;
      background: #18181b;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      z-index: 9998;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .lyrics-variants-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .lyrics-variants-title {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.7);
    }

    .lyrics-variants-close {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.4);
      background: transparent;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-variants-close:hover {
      color: rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.06);
    }

    .lyrics-variants-list {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }

    .lyrics-variant-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      margin-bottom: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-variant-item:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .lyrics-variant-item.active {
      background: rgba(139, 92, 246, 0.1);
      border-color: rgba(139, 92, 246, 0.3);
    }

    .lyrics-variant-radio {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lyrics-variant-item.active .lyrics-variant-radio {
      border-color: rgba(139, 92, 246, 0.8);
    }

    .lyrics-variant-item.active .lyrics-variant-radio::after {
      content: '';
      width: 8px;
      height: 8px;
      background: rgba(139, 92, 246, 0.8);
      border-radius: 50%;
    }

    .lyrics-variant-content {
      flex: 1;
      min-width: 0;
    }

    .lyrics-variant-text-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .lyrics-variant-label {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.4);
    }

    .lyrics-variant-item.active .lyrics-variant-label {
      color: rgba(139, 92, 246, 0.8);
    }

    .lyrics-variant-syllables {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.05);
      padding: 2px 6px;
      border-radius: 4px;
    }

    .lyrics-variant-text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.5;
      margin-bottom: 8px;
      padding: 8px 10px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      border: 1px solid transparent;
      outline: none;
      transition: all 0.15s ease;
    }

    .lyrics-variant-text:focus {
      border-color: rgba(139, 92, 246, 0.4);
      background: rgba(0, 0, 0, 0.3);
    }

    .lyrics-variant-meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .lyrics-variant-time {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.3);
    }

    .lyrics-variant-rating {
      display: flex;
      gap: 2px;
    }

    .lyrics-variant-star {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.15);
      cursor: pointer;
      transition: all 0.1s ease;
      padding: 2px;
    }

    .lyrics-variant-star:hover {
      color: rgba(251, 191, 36, 0.5);
      transform: scale(1.2);
    }

    .lyrics-variant-star.filled {
      color: rgba(251, 191, 36, 0.9);
    }

    .lyrics-variant-actions {
      display: flex;
      flex-direction: column;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .lyrics-variant-item:hover .lyrics-variant-actions {
      opacity: 1;
    }

    .lyrics-variant-action {
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.3);
      background: transparent;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-variant-action:hover {
      color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.06);
    }

    .lyrics-variant-action.make-active:hover {
      color: rgba(34, 197, 94, 0.9);
      background: rgba(34, 197, 94, 0.1);
    }

    .lyrics-variant-action.delete:hover {
      color: rgba(239, 68, 68, 0.8);
      background: rgba(239, 68, 68, 0.1);
    }

    .lyrics-variant-action svg {
      width: 14px;
      height: 14px;
    }

    .lyrics-variants-add {
      display: flex;
      gap: 8px;
      padding: 14px 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .lyrics-variants-add input {
      flex: 1;
      padding: 10px 14px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      outline: none;
    }

    .lyrics-variants-add input:focus {
      border-color: rgba(139, 92, 246, 0.4);
    }

    .lyrics-variants-add input::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .lyrics-variant-add-btn {
      padding: 10px 16px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      background: rgba(139, 92, 246, 0.2);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .lyrics-variant-add-btn:hover {
      background: rgba(139, 92, 246, 0.3);
    }

    /* Clean View */
    .lyrics-editor.clean-view .lyrics-bank {
      display: none;
    }

    .lyrics-editor.clean-view .lyrics-sections {
      padding-right: 24px;
      margin-right: 0;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .lyrics-editor.clean-view .lyrics-line-variants-count,
    .lyrics-editor.clean-view .lyrics-line-actions,
    .lyrics-editor.clean-view .lyrics-section-actions,
    .lyrics-editor.clean-view .lyrics-section-variants,
    .lyrics-editor.clean-view .lyrics-line-drag,
    .lyrics-editor.clean-view .lyrics-line-meta,
    .lyrics-editor.clean-view .lyrics-add-line,
    .lyrics-editor.clean-view .lyrics-add-section-btn {
      display: none;
    }

    .lyrics-editor.clean-view .lyrics-line {
      background: transparent;
      border-color: transparent;
      padding-left: 0;
    }

    .lyrics-editor.clean-view .lyrics-line-text {
      font-size: 16px;
    }

    .lyrics-editor.clean-view .lyrics-section-type {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
    }
    
    /* Empty State */

    .lyrics-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }

    .lyrics-empty-state svg {
      width: 48px;
      height: 48px;
      color: rgba(255, 255, 255, 0.15);
      margin-bottom: 16px;
    }

    .lyrics-empty-state h3 {
      font-size: 16px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 8px;
    }

    .lyrics-empty-state p {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.3);
      max-width: 300px;
    }
    
    /* Empty State */
    .workspace-editor-empty {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #0a0a0b;
    }
    
    .workspace-editor-empty.hidden {
      display: none;
    }
    
    .workspace-editor-empty svg {
      color: rgba(255, 255, 255, 0.15);
    }
    
    .workspace-editor-empty h3 {
      font-size: 16px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.5);
    }
    
    .workspace-editor-empty p {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.3);
    }
    
    .workspace-empty-create-btn {
      margin-top: 8px;
      padding: 10px 20px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .workspace-empty-create-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    /* Responsive - Tablet */
    @media (max-width: 1024px) {
      .workspace-sidebar {
        width: 240px;
      }
      
      .workspace-editor-container {
        margin: 16px;
      }
      
      .workspace-editor-title {
        font-size: 20px;
      }
    }
    
    /* Responsive - Mobile */
    @media (max-width: 768px) {
      .workspace-main {
        flex-direction: column;
      }
      
      .workspace-sidebar {
        width: 100%;
        height: auto;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      
      .workspace-sidebar::after {
        display: none;
      }
      
      .workspace-editor-area {
        min-height: 60vh;
      }
      
      .workspace-editor-container {
        margin: 12px;
        border-radius: 12px;
      }
      
      .workspace-editor-header {
        padding: 16px 20px 0;
      }
      
      .workspace-editor-toolbar {
        padding: 8px 20px;
        overflow-x: auto;
      }
      
      .workspace-editor-content {
        padding: 16px 20px;
      }
      
      .workspace-editor-footer {
        padding: 12px 20px;
      }
      
      .workspace-back-btn span {
        display: none;
      }
      
      .workspace-focus-btn span {
        display: none;
      }
      
      .workspace-project-meta {
        display: none;
      }
    }
    
    @media (max-width: 480px) {
      .workspace-header {
        height: 56px;
        padding: 0 12px;
      }
      
      .workspace-project-title {
        font-size: 14px;
      }
      
      .workspace-sidebar {
        max-height: 35vh;
      }
      
      .workspace-editor-container {
        margin: 8px;
      }
      
      .workspace-editor-title {
        font-size: 18px;
      }
      
      .workspace-toolbar-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
      }
      
      .workspace-toolbar-divider {
        margin: 0 4px;
      }
    }

/* ============================================
   INSPIRATION LIBRARY STYLES
   Merged from inspiration.html
   ============================================ */
    /* Main Layout */
    .insp-lib-container {
      padding: 0;
      background: var(--bg);
      color: var(--text);
    }

    /* Zone Tabs - Sleek Version */
    .zone-tabs {
      display: flex;
      gap: 0;
      padding: 0 24px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(to bottom, rgba(17, 17, 17, 0.8), rgba(10, 10, 10, 0.9));
    }

    .zone-tab {
      padding: 16px 28px;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.4);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      position: relative;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: 0.01em;
      text-decoration: none;
    }

    .zone-tab:hover {
      color: rgba(255, 255, 255, 0.64);
    }

    .zone-tab.active {
      color: #ffffff;
    }

    .zone-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 16px;
      right: 16px;
      height: 2px;
      background: var(--primary);
      border-radius: 2px 2px 0 0;
    }

    .zone-tab svg {
      width: 16px;
      height: 16px;
      opacity: 0.7;
    }

    .zone-tab.active svg {
      opacity: 1;
    }

    /* Zone Content */
    .zone-content {
      display: none;
      padding: 24px;
      background: var(--bg);
      color: var(--text);
    }

    .zone-content.active {
      display: block;
    }

    /* ==================== */
    /* ZONE 1: INSPIRATION LIBRARY */
    /* ==================== */

    .library-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .library-title {
      font-size: 24px;
      font-weight: 600;
      color: var(--text);
    }

    .library-subtitle {
      color: var(--text-muted);
      font-size: 14px;
      margin-top: 4px;
    }

    .library-actions {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .btn {
      padding: 10px 18px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-primary {
      background: var(--primary);
      border: none;
      color: white;
    }

    .btn-primary:hover {
      background: var(--primary-hover);
    }

    .btn-secondary {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-soft);
    }

    .btn-secondary:hover {
      background: var(--bg-hover);
      color: var(--text);
    }

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

    /* Category Filter */
    .category-filter {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .category-btn {
      padding: 7px 14px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.4);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .category-btn:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.6);
    }

    .category-btn.active {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.9);
    }

    .category-count {
      background: rgba(255, 255, 255, 0.05);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.25);
      transition: all 0.15s ease;
    }

    .category-btn.active .category-count {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.6);
    }

    /* Search Bar */
    .search-container {
      position: relative;
      display: flex;
      align-items: center;
    }

    .search-container svg {
      position: absolute;
      left: 12px;
      width: 16px;
      height: 16px;
      color: var(--text-muted);
      pointer-events: none;
    }

    .search-input {
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px 10px 38px;
      color: var(--text);
      font-size: 13px;
      width: 220px;
      transition: all 0.2s;
    }

    .search-input:focus {
      outline: none;
      border-color: var(--primary);
      width: 280px;
    }

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

    /* View Toggle */
    .view-toggle {
      display: flex;
      background: var(--bg-hover);
      border-radius: 8px;
      padding: 4px;
      gap: 2px;
    }

    .view-btn {
      padding: 8px;
      border: none;
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      color: var(--text-muted);
      transition: all 0.2s;
    }

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

    .view-btn.active {
      background: var(--bg-card);
      color: var(--primary);
    }

    .view-btn svg {
      width: 18px;
      height: 18px;
    }

    /* Filter Row */
    .filter-row {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 24px;
    }

    /* Tag Filter */
    .tag-filter {
      display: none;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      animation: slideDown 0.2s ease;
    }

    .tag-filter.visible {
      display: flex;
    }

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

    .tag-filter-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .tag-filter-chip {
      padding: 5px 10px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.4);
      font-size: 11px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .tag-filter-chip:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.6);
    }

    .tag-filter-chip.active {
      background: rgba(6, 182, 212, 0.15);
      border-color: rgba(6, 182, 212, 0.3);
      color: var(--primary);
    }

    .tag-clear-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .tag-clear-btn:hover {
      background: #ef4444;
      border-color: #ef4444;
      color: white;
    }

    /* Tags Toggle Row */
    .tags-toggle-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .tags-toggle-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.4);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .tags-toggle-btn:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.6);
    }

    .tags-toggle-btn.active {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.9);
    }

    .tags-toggle-btn svg {
      width: 14px;
      height: 14px;
    }

    .tags-toggle-btn .tags-toggle-icon-off {
      display: block;
    }

    .tags-toggle-btn .tags-toggle-icon {
      display: none;
    }

    .tags-toggle-btn.active .tags-toggle-icon-off {
      display: none;
    }

    .tags-toggle-btn.active .tags-toggle-icon {
      display: block;
    }

    .tags-count {
      background: rgba(255, 255, 255, 0.05);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.25);
    }

    .tags-toggle-btn.active .tags-count {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.6);
    }

    /* Settings Button */
    .btn-icon {
      padding: 10px;
      border-radius: 8px;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      color: var(--text-soft);
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-icon:hover {
      background: rgba(6, 182, 212, 0.1);
      border-color: var(--primary);
      color: var(--primary);
    }

    .btn-icon svg {
      width: 18px;
      height: 18px;
    }

    /* Settings Dropdown */
    .settings-dropdown-container {
      position: relative;
    }

    .settings-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 240px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 8px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      z-index: 100;
      display: none;
      animation: dropdownFade 0.15s ease;
    }

    .settings-dropdown.open {
      display: block;
    }

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

    .dropdown-section {
      padding: 8px;
    }

    .dropdown-divider {
      height: 1px;
      background: var(--border);
      margin: 4px 0;
    }

    .dropdown-label {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    .dropdown-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .dropdown-row .dropdown-label {
      margin-bottom: 0;
    }

    .dropdown-hint {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 6px;
    }

    .dropdown-toggle-group {
      display: flex;
      background: var(--bg-hover);
      border-radius: 6px;
      padding: 3px;
    }

    .dropdown-toggle-btn {
      flex: 1;
      padding: 6px 12px;
      border: none;
      background: transparent;
      border-radius: 4px;
      font-size: 12px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
    }

    .dropdown-toggle-btn:hover {
      color: var(--text);
    }

    .dropdown-toggle-btn.active {
      background: var(--primary);
      color: white;
    }

    .dropdown-action-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      border: none;
      background: transparent;
      border-radius: 8px;
      font-size: 13px;
      color: var(--text-soft);
      cursor: pointer;
      transition: all 0.15s;
      text-align: left;
    }

    .dropdown-action-btn:hover {
      background: var(--bg-hover);
      color: var(--text);
    }

    .dropdown-action-btn svg {
      width: 16px;
      height: 16px;
    }

    /* Toggle Switch */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 22px;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: 22px;
      transition: all 0.2s;
    }

    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 2px;
      bottom: 2px;
      background: var(--text-muted);
      border-radius: 50%;
      transition: all 0.2s;
    }

    .toggle-switch input:checked + .toggle-slider {
      background: var(--primary);
      border-color: var(--primary);
    }

    .toggle-switch input:checked + .toggle-slider:before {
      background: white;
      transform: translateX(18px);
    }

    /* Reorder Mode */
    .reorder-active .inspiration-card {
      cursor: grab;
    }

    .reorder-active .inspiration-card:active {
      cursor: grabbing;
    }

    .reorder-active .inspiration-card.dragging {
      opacity: 0.5;
      transform: scale(1.02);
      box-shadow: 0 8px 32px rgba(6, 182, 212, 0.3);
    }

    .reorder-active .inspiration-card.drag-over {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.3);
    }

    .reorder-active .card-actions {
      display: none !important;
    }

    .reorder-active .add-inspiration-card {
      display: none;
    }

    .reorder-indicator {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--primary);
      color: white;
      padding: 12px 24px;
      border-radius: 24px;
      font-size: 13px;
      font-weight: 500;
      display: none;
      align-items: center;
      gap: 10px;
      box-shadow: 0 4px 16px rgba(6, 182, 212, 0.4);
      z-index: 100;
    }

    .reorder-indicator.visible {
      display: flex;
    }

    .reorder-indicator svg {
      width: 18px;
      height: 18px;
    }

    /* Settings Modal Styles */
    .settings-section {
      margin-bottom: 24px;
    }

    .settings-section:last-child {
      margin-bottom: 0;
    }

    .settings-section-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .category-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .category-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: 8px;
      transition: all 0.2s;
    }

    .category-item:hover {
      border-color: var(--text-muted);
    }

    .category-item-drag {
      color: var(--text-muted);
      cursor: grab;
    }

    .category-item-drag svg {
      width: 16px;
      height: 16px;
    }

    .category-item-name {
      flex: 1;
      font-size: 13px;
      color: var(--text);
    }

    .category-item-name input {
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 13px;
      width: 100%;
      padding: 0;
    }

    .category-item-name input:focus {
      outline: none;
    }

    .category-item-actions {
      display: flex;
      gap: 4px;
    }

    .category-action-btn {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }

    .category-action-btn:hover {
      background: var(--bg-card);
      color: var(--text);
    }

    .category-action-btn.danger:hover {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
    }

    .category-action-btn.active {
      color: var(--primary);
    }

    .category-action-btn svg {
      width: 14px;
      height: 14px;
    }

    .add-category-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px;
      background: transparent;
      border: 1px dashed var(--border);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
      width: 100%;
    }

    .add-category-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(6, 182, 212, 0.05);
    }

    .add-category-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Card Actions (Settings & Expand icons) */
    .card-actions {
      position: absolute;
      top: 8px;
      right: 8px;
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.2s;
      z-index: 10;
    }

    .inspiration-card:hover .card-actions {
      opacity: 1;
    }

    .card-action-btn {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-soft);
      transition: all 0.2s;
    }

    .card-action-btn:hover {
      background: var(--primary);
      color: white;
    }

    .card-action-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Favorite button */
    .card-action-btn.favorite-btn.active {
      color: #f43f5e;
      background: rgba(244, 63, 94, 0.2);
    }

    .card-action-btn.favorite-btn.active:hover {
      background: rgba(244, 63, 94, 0.3);
      color: #f43f5e;
    }

    .card-action-btn.favorite-btn:hover {
      color: #f43f5e;
    }

    /* Show favorite button always when item is favorited */
    .inspiration-card.is-favorite .card-action-btn.favorite-btn {
      opacity: 1;
    }

    .inspiration-card.is-favorite .card-actions {
      opacity: 1;
    }

    .inspiration-card.is-favorite .card-action-btn:not(.favorite-btn) {
      opacity: 0;
    }

    .inspiration-card.is-favorite:hover .card-action-btn {
      opacity: 1;
    }

    /* List View Styles */
    .inspiration-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .inspiration-list .inspiration-card {
      display: flex;
      flex-direction: row;
      height: auto;
      min-height: 80px;
    }

    .inspiration-list .inspiration-thumbnail {
      width: 120px;
      min-width: 120px;
      height: 80px;
      border-radius: 8px 0 0 8px;
    }

    .inspiration-list .inspiration-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 12px 16px;
    }

    .inspiration-list .inspiration-title {
      font-size: 14px;
    }

    .inspiration-list .card-actions {
      position: relative;
      top: auto;
      right: auto;
      opacity: 1;
      align-self: center;
      padding-right: 12px;
    }

    /* Inspiration Grid */
    .inspiration-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }

    /* Empty State */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 40px;
      text-align: center;
    }

    .empty-state-icon {
      width: 80px;
      height: 80px;
      margin-bottom: 24px;
      color: var(--text-muted);
      opacity: 0.5;
    }

    .empty-state-icon svg {
      width: 100%;
      height: 100%;
    }

    .empty-state-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--text);
    }

    .empty-state-text {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 24px;
      max-width: 400px;
    }

    .inspiration-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }

    .inspiration-card:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
    }

    .inspiration-thumbnail {
      aspect-ratio: 16/10;
      background: var(--bg-hover);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .inspiration-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .inspiration-thumbnail-placeholder {
      color: var(--text-muted);
    }

    .inspiration-thumbnail-placeholder svg {
      width: 40px;
      height: 40px;
    }

    .inspiration-type-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .type-track { background: rgba(6, 182, 212, 0.9); }
    .type-video { background: rgba(239, 68, 68, 0.9); }
    .type-album { background: rgba(34, 197, 94, 0.9); }
    .type-artwork { background: rgba(236, 72, 153, 0.9); }
    .type-quote { background: rgba(245, 158, 11, 0.9); }
    .type-film { background: rgba(6, 182, 212, 0.9); }
    .type-article { background: rgba(99, 102, 241, 0.9); }
    /* Learning types */
    .type-tutorial { background: rgba(16, 185, 129, 0.9); }
    .type-breakdown { background: rgba(245, 158, 11, 0.9); }
    .type-masterclass { background: rgba(139, 92, 246, 0.9); }
    .type-interview { background: rgba(236, 72, 153, 0.9); }
    .type-course { background: rgba(6, 182, 212, 0.9); }
    .type-tip { background: rgba(251, 191, 36, 0.9); }

    /* Linked indicator - shows item is in both libraries */
    .card-linked {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      backdrop-filter: blur(4px);
    }

    .inspiration-info {
      padding: 16px;
    }

    .inspiration-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .inspiration-artist {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .inspiration-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .inspiration-tag {
      padding: 3px 8px;
      background: var(--bg-hover);
      border-radius: 4px;
      font-size: 10px;
      color: var(--text-soft);
    }

    /* Add Inspiration Card */
    .add-inspiration-card {
      border: 2px dashed var(--border);
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .add-inspiration-card:hover {
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.05);
    }

    .add-inspiration-card svg {
      width: 32px;
      height: 32px;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .add-inspiration-card span {
      color: var(--text-muted);
      font-size: 13px;
    }

    /* ==================== */
    /* ADD INSPIRATION MODAL */
    /* ==================== */

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(4px);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .modal-overlay.open {
      display: flex;
    }

    .modal {
      width: 100%;
      max-width: 560px;
      max-height: 90vh;
      background: var(--bg-card);
      border-radius: 16px;
      border: 1px solid var(--border);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .modal-title {
      font-size: 18px;
      font-weight: 600;
    }

    .modal-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }

    .modal-close:hover {
      background: var(--bg-hover);
      color: var(--text);
    }

    .modal-close svg {
      width: 18px;
      height: 18px;
    }

    .modal-body {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-soft);
      margin-bottom: 8px;
    }

    .form-input {
      width: 100%;
      padding: 12px 14px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      transition: all 0.2s;
    }

    .form-input:focus {
      outline: none;
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.05);
    }

    .form-input::placeholder {
      color: var(--text-muted);
    }

    .form-textarea,
    textarea.form-textarea {
      width: 100%;
      padding: 12px 14px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      transition: all 0.2s;
      min-height: 80px;
      resize: vertical;
      font-family: inherit;
    }

    .form-textarea:focus,
    textarea.form-textarea:focus {
      outline: none;
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.05);
    }

    .form-textarea::placeholder,
    textarea.form-textarea::placeholder {
      color: var(--text-muted);
    }

    /* Release modal textarea specific */
    #release-notes-input {
      background: var(--bg-input) !important;
      color: var(--text) !important;
    }

    /* Checkbox */
    .checkbox-label {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: 13px;
      color: var(--text-soft);
    }

    .checkbox-label input[type="checkbox"] {
      display: none;
    }

    .checkbox-custom {
      width: 18px;
      height: 18px;
      border: 2px solid var(--border-light);
      border-radius: 4px;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
      background: var(--primary);
      border-color: var(--primary);
    }

    .checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
      content: '';
      width: 4px;
      height: 8px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      margin-bottom: 2px;
    }

    /* Type Selector */
    .type-selector {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 20px;
    }

    .type-option {
      padding: 12px;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }

    .type-option:hover {
      border-color: var(--text-muted);
    }

    .type-option.active {
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.1);
    }

    .type-option-icon {
      width: 24px;
      height: 24px;
      margin: 0 auto 6px;
      color: var(--text-soft);
    }

    .type-option.active .type-option-icon {
      color: var(--primary);
    }

    .type-option-label {
      font-size: 11px;
      color: var(--text-muted);
    }

    .type-option.active .type-option-label {
      color: var(--text);
    }

    /* Drop Zone */
    .drop-zone {
      border: 2px dashed var(--border);
      border-radius: 12px;
      padding: 32px;
      text-align: center;
      transition: all 0.2s;
      cursor: pointer;
    }

    .drop-zone:hover,
    .drop-zone.drag-over {
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.05);
    }

    .drop-zone svg {
      width: 32px;
      height: 32px;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .drop-zone-text {
      font-size: 13px;
      color: var(--text-muted);
    }

    .drop-zone-text span {
      color: var(--primary);
      cursor: pointer;
    }

    .drop-zone-hint {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 8px;
      opacity: 0.7;
    }

    /* Tags Input */
    .tags-input-container {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 10px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      min-height: 44px;
      cursor: text;
    }

    .tags-input-container:focus-within {
      border-color: var(--primary);
    }

    .tag-chip {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .tag-chip:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.8);
    }

    .tag-chip.active {
      background: rgba(6, 182, 212, 0.2);
      border-color: rgba(6, 182, 212, 0.4);
      color: var(--primary);
    }

    .tag-chip-remove {
      cursor: pointer;
      opacity: 0.7;
      font-size: 14px;
    }

    .tag-chip-remove:hover {
      opacity: 1;
    }

    .tags-input {
      flex: 1;
      min-width: 80px;
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 13px;
      outline: none;
    }

    .tags-input::placeholder {
      color: var(--text-muted);
    }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      padding: 16px 24px;
      border-top: 1px solid var(--border);
      background: var(--bg-hover);
      flex-shrink: 0;
    }

    .btn-danger {
      background: #ef4444;
      border: none;
      color: white;
    }

    .btn-danger:hover {
      background: #dc2626;
    }

    .btn-small {
      padding: 6px 12px;
      font-size: 12px;
    }

    /* Detail Modal */
    .detail-modal {
      max-width: 700px;
    }

    .detail-body {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .detail-embed {
      width: 100%;
      aspect-ratio: 16/9;
      background: var(--bg-hover);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .detail-embed iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    .detail-embed img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .detail-embed-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: var(--text-muted);
    }

    .detail-embed-placeholder svg {
      width: 48px;
      height: 48px;
      opacity: 0.5;
    }

    .detail-meta {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
      background: var(--bg-hover);
      border-radius: 8px;
    }

    .detail-meta-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .detail-label {
      font-size: 12px;
      color: var(--text-muted);
      min-width: 80px;
    }

    .detail-value {
      font-size: 13px;
      color: var(--text);
    }

    .detail-type-badge {
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 500;
      background: rgba(6, 182, 212, 0.15);
      color: var(--primary);
    }

    .detail-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .detail-tags .inspiration-tag {
      background: var(--bg-card);
    }

    .detail-link {
      color: var(--primary);
      font-size: 13px;
      text-decoration: none;
    }

    .detail-link:hover {
      text-decoration: underline;
    }

    .detail-notes-section {
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }

    .detail-notes {
      min-height: 100px;
    }

    /* ==================== */
    /* ZONE 2: MY MUSIC OVERVIEW */
    /* ==================== */

    .overview-layout {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 24px;
      min-height: calc(100vh - 200px);
    }

    .track-pool {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      height: fit-content;
      max-height: calc(100vh - 220px);
      overflow-y: auto;
    }

    .track-pool-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }

    .track-pool-title {
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .track-pool-count {
      background: var(--bg-hover);
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .track-pool-search {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      margin-bottom: 12px;
    }

    .track-pool-search:focus {
      outline: none;
      border-color: var(--primary);
    }

    .pool-track {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px;
      background: var(--bg-hover);
      border-radius: 8px;
      margin-bottom: 8px;
      cursor: grab;
      transition: all 0.2s;
    }

    .pool-track:hover {
      background: rgba(6, 182, 212, 0.15);
    }

    .pool-track-artwork {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      background: linear-gradient(135deg, var(--primary), var(--accent-blue));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .pool-track-artwork svg {
      width: 18px;
      height: 18px;
      color: white;
    }

    .pool-track-info {
      flex: 1;
      min-width: 0;
    }

    .pool-track-title {
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .pool-track-meta {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* Album Concepts Area */
    .concepts-area {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .concepts-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .concepts-title {
      font-size: 18px;
      font-weight: 600;
    }

    .concepts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 20px;
    }

    .concept-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      min-height: 250px;
      transition: all 0.2s;
    }

    .concept-card:hover {
      border-color: rgba(255, 255, 255, 0.15);
    }

    .concept-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
    }

    .concept-name {
      font-size: 16px;
      font-weight: 600;
    }

    .concept-type {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .concept-color {
      width: 24px;
      height: 24px;
      border-radius: 6px;
    }

    .concept-tracks {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 120px;
      padding: 12px;
      background: var(--bg-hover);
      border-radius: 8px;
      border: 2px dashed transparent;
      transition: all 0.2s;
    }

    .concept-tracks.drag-over {
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.1);
    }

    .concept-track-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      background: var(--bg-card);
      border-radius: 6px;
      font-size: 12px;
    }

    .concept-track-num {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      background: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 600;
    }

    .concept-empty {
      color: var(--text-muted);
      font-size: 12px;
      text-align: center;
      padding: 20px;
    }

    .concept-footer {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .concept-track-count {
      font-size: 11px;
      color: var(--text-muted);
    }

    .concept-action {
      padding: 6px 12px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-soft);
      font-size: 11px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .concept-action:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
    }

    /* Add Concept Card */
    .add-concept-card {
      border: 2px dashed var(--border);
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .add-concept-card:hover {
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.05);
    }

    .add-concept-card svg {
      width: 28px;
      height: 28px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .add-concept-card span {
      color: var(--text-muted);
      font-size: 13px;
    }

    /* New Project Modal */
    .new-project-options {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
    }

    .new-project-option {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .new-project-option:hover {
      border-color: var(--text-muted);
    }

    .new-project-option.active {
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.1);
    }

    .new-project-option-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--bg-card);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
    }

    .new-project-option.active .new-project-option-icon {
      background: var(--primary);
      color: white;
    }

    .new-project-option-icon svg {
      width: 20px;
      height: 20px;
    }

    .new-project-option-info h4 {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 2px;
    }

    .new-project-option-info p {
      font-size: 12px;
      color: var(--text-muted);
    }

    .ideas-select {
      width: 100%;
      padding: 12px 14px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      margin-top: 12px;
    }

    .ideas-select:focus {
      outline: none;
      border-color: var(--primary);
    }

    /* ==================== */
    /* ZONE 3: ALBUM WORKBENCH */
    /* ==================== */

    .workbench-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }

    .workbench-header-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .project-dropdown {
      position: relative;
    }

    .project-dropdown-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
      min-width: 220px;
    }

    .project-dropdown-btn:hover {
      border-color: var(--text-muted);
    }

    .project-dropdown-color {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      flex-shrink: 0;
    }

    .project-dropdown-info {
      flex: 1;
      text-align: left;
    }

    .project-dropdown-name {
      font-size: 14px;
      font-weight: 600;
    }

    .project-dropdown-meta {
      font-size: 11px;
      color: var(--text-muted);
    }

    .project-dropdown-arrow {
      color: var(--text-muted);
    }

    .project-dropdown-arrow svg {
      width: 16px;
      height: 16px;
    }

    .project-dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      width: 280px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 8px;
      display: none;
      z-index: 50;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    }

    .project-dropdown-menu.open {
      display: block;
    }

    .project-dropdown-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .project-dropdown-item:hover {
      background: var(--bg-hover);
    }

    .project-dropdown-item.active {
      background: rgba(6, 182, 212, 0.15);
    }

    .project-dropdown-item-color {
      width: 24px;
      height: 24px;
      border-radius: 6px;
    }

    .project-dropdown-item-info {
      flex: 1;
    }

    .project-dropdown-item-name {
      font-size: 13px;
      font-weight: 500;
    }

    .project-dropdown-item-count {
      font-size: 11px;
      color: var(--text-muted);
    }

    .workbench-header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .toggle-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .toggle-btn:hover {
      background: var(--bg-hover);
      color: var(--text-soft);
    }

    .toggle-btn.active {
      background: rgba(6, 182, 212, 0.15);
      border-color: var(--primary);
      color: var(--primary);
    }

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

    /* Workbench Layout */
    .workbench-layout {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 24px;
      min-height: calc(100vh - 240px);
    }

    .workbench-layout.with-moodboard {
      grid-template-columns: 340px 1fr 340px;
    }

    /* Left Panel - Core Info */
    .workbench-panel {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      height: fit-content;
    }

    .panel-section {
      margin-bottom: 24px;
    }

    .panel-section:last-child {
      margin-bottom: 0;
    }

    .panel-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
    }

    .panel-input {
      width: 100%;
      padding: 12px 14px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
      transition: all 0.2s;
    }

    .panel-input:focus {
      outline: none;
      border-color: var(--primary);
      background: rgba(6, 182, 212, 0.03);
    }

    .panel-input::placeholder {
      color: var(--text-muted);
    }

    .panel-textarea {
      min-height: 100px;
      resize: vertical;
      font-family: inherit;
      line-height: 1.5;
    }

    /* Album Cover Preview */
    .album-cover-container {
      margin-bottom: 24px;
    }

    .album-cover-preview {
      aspect-ratio: 1;
      background: linear-gradient(135deg, #1a1a2e, #16213e);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s;
    }

    .album-cover-preview:hover {
      opacity: 0.9;
    }

    .album-cover-placeholder {
      text-align: center;
      color: var(--text-muted);
    }

    .album-cover-placeholder svg {
      width: 40px;
      height: 40px;
      margin-bottom: 8px;
    }

    .album-cover-placeholder span {
      font-size: 12px;
    }

    /* Color Palette */
    .color-palette {
      display: flex;
      gap: 8px;
    }

    .color-swatch {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      border: 2px solid transparent;
    }

    .color-swatch:hover {
      transform: scale(1.1);
    }

    .color-swatch.active {
      border-color: white;
    }

    .color-swatch-add {
      border: 2px dashed var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
    }

    .color-swatch-add:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    .color-swatch-add svg {
      width: 14px;
      height: 14px;
    }

    /* Theme Tags */
    .theme-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .theme-tag {
      padding: 6px 12px;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 12px;
      color: var(--text-soft);
      cursor: pointer;
      transition: all 0.2s;
    }

    .theme-tag:hover {
      border-color: var(--primary);
    }

    .theme-tag.active {
      background: rgba(6, 182, 212, 0.2);
      border-color: var(--primary);
      color: var(--primary);
    }

    .add-theme-tag {
      padding: 6px 12px;
      background: transparent;
      border: 1px dashed var(--border);
      border-radius: 6px;
      font-size: 12px;
      color: var(--text-muted);
      cursor: pointer;
    }

    .add-theme-tag:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    /* Center - Notes/Writing Area */
    .writing-area {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      display: flex;
      flex-direction: column;
    }

    .writing-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .writing-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    .writing-tabs {
      display: flex;
      gap: 4px;
      background: var(--bg-hover);
      padding: 3px;
      border-radius: 8px;
    }

    .writing-tab {
      padding: 6px 12px;
      background: transparent;
      border: none;
      border-radius: 6px;
      font-size: 12px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
    }

    .writing-tab:hover {
      color: var(--text-soft);
    }

    .writing-tab.active {
      background: var(--bg-card);
      color: var(--text);
    }

    .writing-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .writing-textarea {
      flex: 1;
      width: 100%;
      padding: 16px;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text);
      font-size: 14px;
      line-height: 1.7;
      resize: none;
      font-family: inherit;
      min-height: 300px;
    }

    .writing-textarea:focus {
      outline: none;
      border-color: var(--primary);
    }

    .writing-textarea::placeholder {
      color: var(--text-muted);
    }

    .writing-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .writing-footer-hint {
      font-size: 11px;
      color: var(--text-muted);
    }

    .writing-footer-actions {
      display: flex;
      gap: 8px;
    }

    /* Mood Board - Toggleable */
    .mood-board {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      display: none;
      flex-direction: column;
    }

    .mood-board.visible {
      display: flex;
    }

    .mood-board-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .mood-board-title {
      font-size: 14px;
      font-weight: 600;
    }

    .mood-board-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 120px;
      gap: 10px;
      flex: 1;
    }

    .mood-item {
      background: var(--bg-hover);
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: all 0.2s;
    }

    .mood-item:hover {
      transform: scale(1.02);
    }

    .mood-item.large {
      grid-column: span 2;
      grid-row: span 2;
    }

    .mood-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mood-item-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      border: 2px dashed var(--border);
      border-radius: 10px;
    }

    .mood-item-placeholder svg {
      width: 20px;
      height: 20px;
      margin-bottom: 6px;
    }

    .mood-item-placeholder span {
      font-size: 10px;
    }

    /* ============================================
       NAVIGATION HISTORY DROPDOWN
       ============================================ */
    
    .nav-history-container {
      position: relative;
    }
    
    .nav-history-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 280px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.2s ease;
      z-index: 1000;
      overflow: hidden;
    }
    
    .nav-history-dropdown.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .nav-history-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .nav-history-list {
      max-height: 320px;
      overflow-y: auto;
    }
    
    .nav-history-empty {
      padding: 24px 16px;
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
    }
    
    .nav-history-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      cursor: pointer;
      transition: background 0.15s;
    }
    
    .nav-history-item:hover {
      background: var(--bg-hover);
    }
    
    .nav-history-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg-hover);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .nav-history-icon svg {
      width: 16px;
      height: 16px;
      color: var(--primary);
    }
    
    .nav-history-info {
      flex: 1;
      min-width: 0;
    }
    
    .nav-history-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .nav-history-meta {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* ============================================
       NAVIGATION PINS DROPDOWN
       ============================================ */
    
    .nav-pins-container {
      position: relative;
    }
    
    .nav-pins-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 300px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.2s ease;
      z-index: 1000;
      overflow: hidden;
    }
    
    .nav-pins-dropdown.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .nav-pins-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    
    .nav-pins-add {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }
    
    .nav-pins-add:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: #000;
    }
    
    .nav-pins-add svg {
      width: 16px;
      height: 16px;
    }
    
    .nav-pins-list {
      max-height: 400px;
      overflow-y: auto;
    }
    
    .nav-pins-empty {
      padding: 32px 16px;
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .nav-pins-hint {
      font-size: 11px;
      opacity: 0.7;
    }
    
    .nav-pins-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      cursor: pointer;
      transition: background 0.15s;
      position: relative;
    }
    
    .nav-pins-item:hover {
      background: var(--bg-hover);
    }
    
    .nav-pins-item.unavailable {
      opacity: 0.5;
    }
    
    .nav-pins-item.unavailable::after {
      content: 'Unavailable';
      position: absolute;
      right: 16px;
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .nav-pins-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: var(--bg-hover);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 16px;
    }
    
    .nav-pins-icon svg {
      width: 16px;
      height: 16px;
      color: var(--primary);
    }
    
    .nav-pins-info {
      flex: 1;
      min-width: 0;
    }
    
    .nav-pins-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .nav-pins-meta {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .nav-pins-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.15s;
    }
    
    .nav-pins-item:hover .nav-pins-actions {
      opacity: 1;
    }
    
    .nav-pins-action {
      width: 26px;
      height: 26px;
      border-radius: 5px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }
    
    .nav-pins-action:hover {
      background: var(--bg-card);
      color: var(--text);
    }
    
    .nav-pins-action.delete:hover {
      color: #ef4444;
    }
    
    .nav-pins-action svg {
      width: 14px;
      height: 14px;
    }
    
    .nav-pins-counter {
      padding: 8px 16px;
      border-top: 1px solid var(--border);
      font-size: 11px;
      color: var(--text-muted);
      text-align: center;
    }

    /* Rename input */
    .nav-pins-rename-input {
      background: var(--bg-hover);
      border: 1px solid var(--primary);
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 13px;
      color: var(--text);
      width: 100%;
      outline: none;
    }

    /* ============================================
       PROJECT QUICK DOCUMENT BUTTON
       ============================================ */
    
    .project-quick-doc-btn {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.15s;
      flex-shrink: 0;
      margin-right: 4px;
    }
    
    .project-row-v2:hover .project-quick-doc-btn {
      opacity: 1;
    }
    
    .project-quick-doc-btn:hover {
      background: var(--bg-hover);
      color: var(--primary);
    }
    
    .project-quick-doc-btn svg {
      width: 16px;
      height: 16px;
    }

    /* ============================================
       WORKSPACE AI CHAT BUBBLE
       ============================================ */
    
    .workspace-ai-bubble {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), #0891b2);
      border: none;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(6, 182, 212, 0.4);
      transition: all 0.2s;
      z-index: 100;
    }
    
    .workspace-ai-bubble:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 28px rgba(6, 182, 212, 0.5);
    }
    
    .workspace-ai-bubble svg {
      width: 24px;
      height: 24px;
    }
    
    /* Workspace AI Chat Panel */
    .workspace-ai-panel {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 380px;
      max-height: 500px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
      display: none;
      flex-direction: column;
      z-index: 100;
      overflow: hidden;
    }
    
    .workspace-ai-panel.open {
      display: flex;
    }
    
    .workspace-ai-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-hover);
    }
    
    .workspace-ai-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .workspace-ai-title svg {
      width: 18px;
      height: 18px;
      color: var(--primary);
    }
    
    .workspace-ai-close {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .workspace-ai-close:hover {
      background: var(--bg-hover);
      color: var(--text);
    }
    
    .workspace-ai-close svg {
      width: 16px;
      height: 16px;
    }
    
    .workspace-ai-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 200px;
      max-height: 320px;
    }
    
    .workspace-ai-message {
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13px;
      line-height: 1.5;
      max-width: 85%;
    }
    
    .workspace-ai-message.user {
      background: var(--primary);
      color: white;
      align-self: flex-end;
      border-bottom-right-radius: 4px;
    }
    
    .workspace-ai-message.assistant {
      background: var(--bg-hover);
      color: var(--text);
      align-self: flex-start;
      border-bottom-left-radius: 4px;
    }
    
    .workspace-ai-input-area {
      padding: 12px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 8px;
    }
    
    .workspace-ai-input {
      flex: 1;
      padding: 10px 14px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: var(--bg-input);
      color: var(--text);
      font-size: 13px;
      outline: none;
    }
    
    .workspace-ai-input:focus {
      border-color: var(--primary);
    }
    
    .workspace-ai-send {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--primary);
      border: none;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }
    
    .workspace-ai-send:hover {
      background: #0891b2;
    }
    
    .workspace-ai-send svg {
      width: 16px;
      height: 16px;
    }

    /* ============================================
       WELLNESS MODULES SECTION
       ============================================ */
    
    .wellness-modules-section {
      margin-bottom: 32px;
    }
    
    .section-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.35);
      margin-bottom: 14px;
    }
    
    .wellness-modules-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    
    .wellness-module-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
      min-width: 180px;
    }
    
    .wellness-module-card:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
    }
    
    .wellness-module-card.disabled {
      opacity: 0.5;
      cursor: default;
    }
    
    .wellness-module-card.disabled:hover {
      background: rgba(255,255,255,0.02);
      border-color: rgba(255,255,255,0.06);
    }
    
    .wellness-module-icon {
      width: 20px;
      height: 20px;
      color: rgba(255,255,255,0.5);
    }
    
    .wellness-module-icon svg {
      width: 100%;
      height: 100%;
    }
    
    .wellness-module-card:hover .wellness-module-icon {
      color: rgba(255,255,255,0.7);
    }
    
    .wellness-module-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    
    .wellness-module-name {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
    }
    
    .wellness-module-meta {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }
    
    .wellness-module-meta.accent {
      color: var(--primary);
    }
    
    .wellness-module-arrow {
      margin-left: auto;
      color: rgba(255,255,255,0.2);
      transition: all 0.15s ease;
    }
    
    .wellness-module-arrow svg {
      width: 14px;
      height: 14px;
    }
    
    .wellness-module-card:hover .wellness-module-arrow {
      color: rgba(255,255,255,0.4);
      transform: translateX(2px);
    }

    /* ============================================
       FORGE OVERLAY
       ============================================ */
    
    .forge-overlay {
      position: fixed;
      inset: 0;
      background: #0a0a0b;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease, visibility 0.25s ease;
      overflow-y: auto;
    }
    
    .forge-overlay.open {
      opacity: 1;
      visibility: visible;
    }
    
    .forge-header {
      position: sticky;
      top: 0;
      background: rgba(10,10,11,0.95);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 16px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 10;
    }
    
    .forge-header-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .forge-back-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,0.6);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .forge-back-btn:hover {
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.9);
    }
    
    .forge-back-btn svg {
      width: 16px;
      height: 16px;
    }
    
    .forge-title-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .forge-logo {
      width: 24px;
      height: 24px;
      color: rgba(255,255,255,0.7);
    }
    
    .forge-logo svg {
      width: 100%;
      height: 100%;
    }
    
    .forge-title {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.02em;
      background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .forge-header-actions {
      display: flex;
      gap: 10px;
    }
    
    .forge-content {
      max-width: 1100px;
      margin: 0 auto;
      padding: 32px;
    }

    /* ============================================
       FORGE SCREENS
       ============================================ */
    
    .forge-screen {
      display: none;
    }
    
    .forge-screen.active {
      display: block;
    }

    /* ============================================
       FORGE DASHBOARD
       ============================================ */
    
    .forge-grid {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 24px;
    }
    
    .forge-main {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .forge-program-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      padding: 20px 24px;
    }
    
    .forge-program-phase {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--primary);
      margin-bottom: 4px;
    }
    
    .forge-program-name {
      font-size: 20px;
      font-weight: 700;
      color: rgba(255,255,255,0.95);
      margin-bottom: 4px;
    }
    
    .forge-program-week {
      font-size: 13px;
      color: rgba(255,255,255,0.4);
      margin-bottom: 20px;
    }
    
    .forge-week-progress-label {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      margin-bottom: 10px;
    }
    
    .forge-week-progress-label span:first-child {
      color: rgba(255,255,255,0.5);
    }
    
    .forge-week-progress-label span:last-child {
      font-weight: 600;
      color: rgba(255,255,255,0.8);
    }
    
    .forge-progress-bar {
      height: 8px;
      background: rgba(255,255,255,0.06);
      border-radius: 4px;
      overflow: hidden;
    }
    
    .forge-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--primary), #0891b2);
      border-radius: 4px;
      transition: width 0.3s ease;
    }
    
    /* Next Workout Card */
    .forge-next-workout-card {
      background: linear-gradient(135deg, rgba(20,184,166,0.1) 0%, rgba(20,184,166,0.02) 100%);
      border: 1px solid rgba(20,184,166,0.2);
      border-radius: 16px;
      padding: 24px;
      position: relative;
      overflow: hidden;
    }
    
    .forge-next-workout-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(20,184,166,0.4), transparent);
    }
    
    .forge-next-workout-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.4);
      margin-bottom: 10px;
    }
    
    .forge-next-workout-name {
      font-size: 22px;
      font-weight: 700;
      color: rgba(255,255,255,0.95);
      margin-bottom: 4px;
    }
    
    .forge-next-workout-focus {
      font-size: 14px;
      color: rgba(255,255,255,0.5);
      margin-bottom: 24px;
    }
    
    .forge-start-workout-btn {
      width: 100%;
      padding: 16px;
      font-size: 15px;
      font-weight: 600;
      color: #0a0a0b;
      background: linear-gradient(135deg, var(--primary) 0%, #0891b2 100%);
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    
    .forge-start-workout-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(20,184,166,0.3);
    }
    
    .forge-start-workout-btn svg {
      width: 20px;
      height: 20px;
    }
    
    /* Stats Grid */
    .forge-section-title {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.35);
      margin-bottom: 12px;
    }
    
    .forge-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    
    .forge-stat-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      padding: 18px;
      text-align: center;
    }
    
    .forge-stat-value {
      font-size: 24px;
      font-weight: 700;
      color: rgba(255,255,255,0.95);
      margin-bottom: 2px;
    }
    
    .forge-stat-value.positive {
      color: #22c55e;
    }
    
    .forge-stat-change {
      font-size: 11px;
      color: #22c55e;
      margin-bottom: 6px;
    }
    
    .forge-stat-label {
      font-size: 10px;
      color: rgba(255,255,255,0.4);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    
    .forge-stat-icon {
      width: 20px;
      height: 20px;
      margin: 0 auto 8px;
      color: #22c55e;
    }
    
    .forge-stat-icon svg {
      width: 100%;
      height: 100%;
    }
    
    /* Sidebar */
    .forge-sidebar {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .forge-recent-workouts {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      padding: 18px;
    }
    
    .forge-recent-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    
    .forge-recent-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    
    .forge-recent-item:first-child {
      padding-top: 0;
    }
    
    .forge-recent-icon {
      width: 36px;
      height: 36px;
      background: rgba(255,255,255,0.04);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.5);
    }
    
    .forge-recent-icon svg {
      width: 18px;
      height: 18px;
    }
    
    .forge-recent-info {
      flex: 1;
    }
    
    .forge-recent-name {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.85);
      margin-bottom: 2px;
    }
    
    .forge-recent-meta {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }
    
    .forge-recent-check {
      color: #22c55e;
    }
    
    .forge-recent-check svg {
      width: 18px;
      height: 18px;
    }
    
    .forge-empty-state {
      padding: 24px;
      text-align: center;
      color: rgba(255,255,255,0.4);
      font-size: 13px;
    }
    
    /* Quick Actions */
    .forge-quick-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .forge-quick-action-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .forge-quick-action-btn:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
    }
    
    .forge-quick-action-btn svg {
      width: 18px;
      height: 18px;
      opacity: 0.6;
    }

    /* ============================================
       FORGE ACTIVE WORKOUT
       ============================================ */
    
    .forge-workout-container {
      max-width: 600px;
      margin: 0 auto;
    }
    
    .forge-workout-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    
    .forge-workout-session-name {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
    }
    
    .forge-workout-done-btn {
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 600;
      background: rgba(20,184,166,0.15);
      color: var(--primary);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .forge-workout-done-btn:hover {
      background: rgba(20,184,166,0.25);
    }
    
    .forge-workout-content {
      padding-bottom: 40px;
    }
    
    .forge-exercise-counter {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255,255,255,0.4);
      margin-bottom: 8px;
    }
    
    .forge-exercise-name {
      font-size: 24px;
      font-weight: 800;
      color: rgba(255,255,255,0.95);
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }
    
    .forge-exercise-target {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;
    }
    
    .forge-target-item {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
    }
    
    .forge-target-item strong {
      color: rgba(255,255,255,0.8);
    }
    
    .forge-last-session {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 20px;
    }
    
    .forge-last-session-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.35);
      margin-bottom: 4px;
    }
    
    .forge-last-session-value {
      font-size: 13px;
      color: rgba(255,255,255,0.7);
    }
    
    /* Sets Container */
    .forge-sets-container {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
    }
    
    .forge-set-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    
    .forge-set-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    
    .forge-set-row:first-child {
      padding-top: 0;
    }
    
    .forge-set-number {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,0.4);
      width: 50px;
    }
    
    .forge-set-input-group {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .forge-set-input {
      width: 70px;
      padding: 10px 12px;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      text-align: center;
      color: rgba(255,255,255,0.9);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      outline: none;
      transition: all 0.15s ease;
    }
    
    .forge-set-input:focus {
      border-color: rgba(20,184,166,0.5);
      background: rgba(20,184,166,0.05);
    }
    
    .forge-set-input::placeholder {
      color: rgba(255,255,255,0.25);
    }
    
    .forge-set-unit {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
    }
    
    .forge-set-check {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .forge-set-check.checked {
      background: rgba(34,197,94,0.2);
      border-color: rgba(34,197,94,0.3);
    }
    
    .forge-set-check svg {
      width: 16px;
      height: 16px;
      color: rgba(255,255,255,0.3);
    }
    
    .forge-set-check.checked svg {
      color: #22c55e;
    }
    
    /* Session Total */
    .forge-session-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 10px;
      margin-bottom: 20px;
    }
    
    .forge-session-total-label {
      font-size: 12px;
      color: rgba(255,255,255,0.5);
    }
    
    .forge-session-total-value {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
    }
    
    .forge-session-total-compare {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
    }
    
    /* Pain Rating */
    .forge-pain-section {
      margin-bottom: 16px;
    }
    
    .forge-pain-label {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.6);
      margin-bottom: 10px;
    }
    
    .forge-pain-buttons {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    
    .forge-pain-btn {
      padding: 10px 12px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255,255,255,0.6);
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: center;
    }
    
    .forge-pain-btn:hover {
      background: rgba(255,255,255,0.04);
    }
    
    .forge-pain-btn.active[data-pain="0"] {
      background: rgba(34,197,94,0.15);
      border-color: rgba(34,197,94,0.3);
      color: #22c55e;
    }
    
    .forge-pain-btn.active[data-pain="1"] {
      background: rgba(251,191,36,0.15);
      border-color: rgba(251,191,36,0.3);
      color: #fbbf24;
    }
    
    .forge-pain-btn.active[data-pain="2"] {
      background: rgba(239,68,68,0.15);
      border-color: rgba(239,68,68,0.3);
      color: #ef4444;
    }
    
    /* Notes */
    .forge-notes-input {
      width: 100%;
      padding: 12px 14px;
      font-size: 13px;
      font-family: inherit;
      color: rgba(255,255,255,0.9);
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      outline: none;
      resize: none;
      margin-bottom: 20px;
      transition: all 0.15s ease;
    }
    
    .forge-notes-input:focus {
      border-color: rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.03);
    }
    
    .forge-notes-input::placeholder {
      color: rgba(255,255,255,0.3);
    }
    
    /* Workout Actions */
    .forge-workout-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    
    .forge-rest-timer-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,0.7);
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .forge-rest-timer-btn:hover {
      background: rgba(255,255,255,0.06);
    }
    
    .forge-rest-timer-btn.active {
      background: rgba(20,184,166,0.15);
      border-color: rgba(20,184,166,0.3);
      color: var(--primary);
    }
    
    .forge-rest-timer-btn svg {
      width: 18px;
      height: 18px;
      opacity: 0.6;
    }
    
    .forge-next-exercise-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px;
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.95);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .forge-next-exercise-btn:hover {
      background: rgba(255,255,255,0.12);
    }
    
    .forge-next-exercise-btn svg {
      width: 18px;
      height: 18px;
    }

    /* ============================================
       FORGE PROGRESS SCREEN
       ============================================ */
    
    .forge-progress-container {
      max-width: 700px;
      margin: 0 auto;
    }
    
    .forge-screen-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
    }
    
    .forge-screen-title {
      font-size: 20px;
      font-weight: 700;
      color: rgba(255,255,255,0.95);
    }
    
    .forge-progress-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 24px;
    }
    
    .forge-progress-tab {
      flex: 1;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: center;
    }
    
    .forge-progress-tab:hover {
      background: rgba(255,255,255,0.04);
    }
    
    .forge-progress-tab.active {
      color: rgba(255,255,255,0.95);
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.1);
    }
    
    .forge-progress-panel {
      display: none;
    }
    
    .forge-progress-panel.active {
      display: block;
    }
    
    /* Lift Cards */
    .forge-lift-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
    }
    
    .forge-lift-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
    }
    
    .forge-lift-name {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
    }
    
    .forge-lift-change {
      font-size: 12px;
      font-weight: 600;
      color: #22c55e;
    }
    
    .forge-lift-progress-bar {
      height: 10px;
      background: rgba(255,255,255,0.06);
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 10px;
    }
    
    .forge-lift-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--primary), #0891b2);
      border-radius: 5px;
    }
    
    .forge-lift-stats {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(255,255,255,0.5);
    }
    
    .forge-lift-stats strong {
      color: rgba(255,255,255,0.8);
    }
    
    .forge-add-lift-btn {
      width: 100%;
      padding: 12px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.5);
      background: transparent;
      border: 1px dashed rgba(255,255,255,0.1);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s ease;
      margin-top: 8px;
    }
    
    .forge-add-lift-btn:hover {
      background: rgba(255,255,255,0.02);
      border-color: rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.7);
    }
    
    /* Volume Chart */
    .forge-volume-chart {
      margin-bottom: 20px;
    }
    
    .forge-volume-bar-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }
    
    .forge-volume-week {
      font-size: 11px;
      font-weight: 500;
      color: rgba(255,255,255,0.4);
      width: 50px;
    }
    
    .forge-volume-bar-container {
      flex: 1;
      height: 24px;
      background: rgba(255,255,255,0.03);
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }
    
    .forge-volume-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--primary), #0891b2);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
    }
    
    .forge-volume-value {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
    }
    
    .forge-volume-change {
      font-size: 11px;
      color: #22c55e;
      margin-left: 12px;
      width: 50px;
    }
    
    /* Body Stats */
    .forge-body-stat-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }
    
    .forge-body-stat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .forge-body-stat-label {
      font-size: 12px;
      color: rgba(255,255,255,0.5);
    }
    
    .forge-body-stat-change {
      font-size: 12px;
      font-weight: 600;
      color: #22c55e;
    }
    
    .forge-body-stat-value {
      font-size: 28px;
      font-weight: 700;
      color: rgba(255,255,255,0.95);
    }
    
    .forge-body-stat-range {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
      margin-top: 4px;
    }
    
    /* Photos Grid */
    .forge-photos-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    
    .forge-photo-card {
      aspect-ratio: 1;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
      overflow: hidden;
      position: relative;
    }
    
    .forge-photo-card:hover {
      border-color: rgba(255,255,255,0.12);
    }
    
    .forge-photo-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .forge-photo-date {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 6px;
      background: linear-gradient(transparent, rgba(0,0,0,0.8));
      font-size: 9px;
      font-weight: 500;
      color: rgba(255,255,255,0.8);
      text-align: center;
    }
    
    .forge-add-photo {
      font-size: 24px;
      color: rgba(255,255,255,0.3);
    }
    
    .forge-add-photo-icon {
      font-size: 24px;
      color: rgba(255,255,255,0.3);
    }
    
    .forge-add-photo-label {
      font-size: 10px;
      color: rgba(255,255,255,0.3);
      margin-top: 4px;
    }

    /* ============================================
       FORGE EXERCISE LIBRARY
       ============================================ */
    
    .forge-library-container {
      max-width: 700px;
      margin: 0 auto;
    }
    
    .forge-library-search {
      margin-bottom: 16px;
    }
    
    .forge-search-input-container {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      transition: all 0.15s ease;
    }
    
    .forge-search-input-container:focus-within {
      border-color: rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.04);
    }
    
    .forge-search-input-container svg {
      width: 18px;
      height: 18px;
      color: rgba(255,255,255,0.35);
    }
    
    .forge-search-input {
      flex: 1;
      font-size: 14px;
      font-family: inherit;
      color: rgba(255,255,255,0.9);
      background: transparent;
      border: none;
      outline: none;
    }
    
    .forge-search-input::placeholder {
      color: rgba(255,255,255,0.35);
    }
    
    .forge-library-filters {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      overflow-x: auto;
      padding-bottom: 4px;
    }
    
    .forge-filter-btn {
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
    }
    
    .forge-filter-btn:hover {
      background: rgba(255,255,255,0.04);
    }
    
    .forge-filter-btn.active {
      color: rgba(255,255,255,0.95);
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.12);
    }
    
    .forge-exercise-count {
      margin-left: auto;
      font-size: 12px;
      color: rgba(255,255,255,0.4);
      font-weight: 500;
    }
    
    .forge-exercise-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .forge-exercise-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 12px;
      padding: 16px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .forge-exercise-card:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.08);
    }
    
    .forge-exercise-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }
    
    .forge-exercise-card-icon {
      width: 40px;
      height: 40px;
      background: rgba(255,255,255,0.04);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    
    .forge-exercise-card-info {
      flex: 1;
    }
    
    .forge-exercise-card-name {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      margin-bottom: 2px;
    }
    
    .forge-exercise-card-category {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }
    
    .forge-exercise-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    
    .forge-safety-tag {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      font-size: 10px;
      font-weight: 500;
      background: rgba(34,197,94,0.1);
      color: #22c55e;
      border-radius: 4px;
    }
    
    .forge-equipment-tag {
      padding: 4px 8px;
      font-size: 10px;
      font-weight: 500;
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.5);
      border-radius: 4px;
    }

    /* ============================================
       FORGE PROGRAM CENTER
       ============================================ */
    
    .forge-programs-container {
      padding: 24px;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .forge-programs-section {
      margin-bottom: 40px;
    }
    
    .forge-section-title {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: rgba(255,255,255,0.5);
      margin-bottom: 16px;
    }
    
    .forge-programs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
    }
    
    .forge-programs-grid.supplementary {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    
    .forge-program-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .forge-program-card:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.1);
      transform: translateY(-2px);
    }
    
    .forge-program-card.current {
      border-color: var(--primary);
      background: rgba(0, 200, 255, 0.05);
    }
    
    .forge-program-card.completed {
      opacity: 0.6;
    }
    
    .forge-program-card.supplementary {
      border-style: dashed;
    }
    
    .forge-program-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .forge-program-card-phase {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--primary);
    }
    
    .forge-program-badge {
      font-size: 10px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 10px;
      background: var(--primary);
      color: #000;
    }
    
    .forge-program-badge.completed {
      background: #22c55e;
      color: #000;
    }
    
    .forge-program-card-name {
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 4px;
    }
    
    .forge-program-card-meta {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      margin-bottom: 12px;
    }
    
    .forge-program-card-desc {
      font-size: 13px;
      color: rgba(255,255,255,0.7);
      line-height: 1.5;
      margin-bottom: 12px;
    }
    
    .forge-program-card-goal {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #22c55e;
      font-weight: 500;
    }
    
    .forge-program-desc {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      margin-top: 8px;
      line-height: 1.4;
    }

    /* ============================================
       FORGE RESPONSIVE
       ============================================ */
    
    @media (max-width: 900px) {
      .forge-grid {
        grid-template-columns: 1fr;
      }
      
      .forge-header {
        padding: 16px;
        flex-wrap: wrap;
        gap: 12px;
      }
      
      .forge-content {
        padding: 20px 16px;
      }
      
      .forge-stats-grid {
        grid-template-columns: 1fr;
      }
      
      .forge-photos-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* ============================================
       HAVEN - SANCTUARY FOR SPIRIT
       ============================================ */

    /* HAVEN Module Card in Life Hub */
    .wellness-module-card.haven {
      background: linear-gradient(135deg, rgba(45, 74, 62, 0.3), rgba(26, 35, 50, 0.3));
      border-color: rgba(45, 74, 62, 0.3);
    }
    
    .wellness-module-card.haven:hover {
      background: linear-gradient(135deg, rgba(45, 74, 62, 0.4), rgba(26, 35, 50, 0.4));
      border-color: rgba(45, 74, 62, 0.5);
    }

    /* HAVEN Overlay */
    .haven-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #0a0a0f;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
    }
    
    .haven-overlay.open {
      opacity: 1;
      visibility: visible;
    }

    /* HAVEN Background */
    .haven-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
    }
    
    .haven-background-image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
      background-position: center;
      opacity: 0.4;
      animation: haven-breathe 8s ease-in-out infinite;
    }
    
    @keyframes haven-breathe {
      0%, 100% { opacity: 0.35; transform: scale(1); }
      50% { opacity: 0.45; transform: scale(1.02); }
    }
    
    .haven-background-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, 
        rgba(10, 10, 15, 0.7) 0%, 
        rgba(10, 10, 15, 0.5) 50%,
        rgba(10, 10, 15, 0.8) 100%
      );
    }

    /* HAVEN Header */
    .haven-header {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 32px;
      background: rgba(10, 10, 15, 0.6);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    
    .haven-header-left {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    
    .haven-back-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      color: rgba(255,255,255,0.7);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .haven-back-btn:hover {
      background: rgba(255,255,255,0.08);
      color: #fff;
    }
    
    .haven-back-btn svg {
      width: 16px;
      height: 16px;
    }
    
    .haven-logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .haven-logo svg {
      width: 28px;
      height: 28px;
      color: #d4a574;
    }
    
    .haven-title {
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 2px;
      color: #fff;
    }
    
    .haven-header-actions {
      display: flex;
      gap: 12px;
    }

    /* HAVEN Content */
    .haven-content {
      position: relative;
      z-index: 10;
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    /* HAVEN Screens */
    .haven-screen {
      display: none;
      flex: 1;
      padding: 40px;
    }
    
    .haven-screen.active {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* Landing Screen */
    .haven-landing {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 500px;
      width: 100%;
    }
    
    .haven-landing-question {
      font-size: 28px;
      font-weight: 300;
      color: rgba(255,255,255,0.9);
      margin-bottom: 48px;
      text-align: center;
    }
    
    .haven-session-cards {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }
    
    .haven-session-card {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 24px;
      background: rgba(20, 20, 30, 0.7);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .haven-session-card:hover {
      background: rgba(30, 30, 45, 0.8);
      border-color: rgba(212, 165, 116, 0.3);
      transform: translateY(-2px);
    }
    
    .haven-session-icon {
      font-size: 32px;
      width: 48px;
      text-align: center;
    }
    
    .haven-session-info {
      flex: 1;
    }
    
    .haven-session-name {
      font-size: 18px;
      font-weight: 500;
      color: #fff;
      margin-bottom: 4px;
    }
    
    .haven-session-meta {
      font-size: 14px;
      color: rgba(255,255,255,0.5);
    }
    
    .haven-landing-stats {
      margin-top: 48px;
      font-size: 13px;
      color: rgba(255,255,255,0.4);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .haven-stats-divider {
      color: rgba(255,255,255,0.2);
    }

    /* Soundscape Selection Screen */
    .haven-soundscape-picker {
      max-width: 500px;
      width: 100%;
    }
    
    .haven-back-link {
      display: flex;
      align-items: center;
      gap: 8px;
      background: none;
      border: none;
      color: rgba(255,255,255,0.6);
      font-size: 14px;
      cursor: pointer;
      padding: 0;
      margin-bottom: 32px;
    }
    
    .haven-back-link:hover {
      color: #fff;
    }
    
    .haven-back-link svg {
      width: 18px;
      height: 18px;
    }
    
    .haven-soundscape-header {
      text-align: center;
      margin-bottom: 32px;
    }
    
    .haven-soundscape-session-name {
      font-size: 24px;
      font-weight: 500;
      color: #fff;
      margin-bottom: 8px;
    }
    
    .haven-soundscape-session-meta {
      font-size: 14px;
      color: rgba(255,255,255,0.5);
    }
    
    .haven-soundscape-label {
      font-size: 14px;
      color: rgba(255,255,255,0.6);
      margin-bottom: 16px;
    }
    
    .haven-soundscape-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 32px;
    }
    
    .haven-soundscape-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      background: rgba(20, 20, 30, 0.6);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .haven-soundscape-item:hover {
      background: rgba(30, 30, 45, 0.7);
      border-color: rgba(255,255,255,0.1);
    }
    
    .haven-soundscape-item.selected {
      border-color: #d4a574;
      background: rgba(212, 165, 116, 0.1);
    }
    
    .haven-soundscape-radio {
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .haven-soundscape-item.selected .haven-soundscape-radio {
      border-color: #d4a574;
    }
    
    .haven-soundscape-item.selected .haven-soundscape-radio::after {
      content: '';
      width: 10px;
      height: 10px;
      background: #d4a574;
      border-radius: 50%;
    }
    
    .haven-soundscape-info {
      flex: 1;
    }
    
    .haven-soundscape-title {
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      margin-bottom: 2px;
    }
    
    .haven-soundscape-duration {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
    }
    
    .haven-soundscape-preview {
      padding: 8px;
      background: rgba(255,255,255,0.05);
      border: none;
      border-radius: 8px;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
    }
    
    .haven-soundscape-preview:hover {
      background: rgba(255,255,255,0.1);
      color: #fff;
    }
    
    .haven-soundscape-preview svg {
      width: 18px;
      height: 18px;
    }
    
    .haven-breathing-option {
      padding: 20px;
      background: rgba(20, 20, 30, 0.5);
      border-radius: 12px;
      margin-bottom: 32px;
    }
    
    .haven-toggle-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: rgba(255,255,255,0.8);
    }
    
    .haven-breathing-pattern-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,0.06);
      font-size: 13px;
      color: rgba(255,255,255,0.6);
    }
    
    .haven-select {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 8px 12px;
      color: #fff;
      font-size: 13px;
    }
    
    .haven-start-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 18px 32px;
      background: linear-gradient(135deg, #d4a574, #b8956a);
      border: none;
      border-radius: 12px;
      color: #000;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .haven-start-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(212, 165, 116, 0.3);
    }
    
    .haven-start-btn svg {
      width: 20px;
      height: 20px;
    }

    /* Active Session Screen */
    .haven-session-active {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 40px;
    }
    
    .haven-breathing-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 60px;
    }
    
    .haven-breathing-circle {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(212, 165, 116, 0.2) 0%, transparent 70%);
      border: 2px solid rgba(212, 165, 116, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease-out;
    }
    
    .haven-breathing-circle.inhale {
      transform: scale(1.4);
      border-color: rgba(212, 165, 116, 0.6);
      background: radial-gradient(circle, rgba(212, 165, 116, 0.3) 0%, transparent 70%);
    }
    
    .haven-breathing-circle.hold {
      transform: scale(1.4);
    }
    
    .haven-breathing-circle.exhale {
      transform: scale(1);
    }
    
    .haven-breathing-text {
      font-size: 16px;
      font-weight: 300;
      color: rgba(255,255,255,0.6);
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    
    .haven-timer {
      font-size: 32px;
      font-weight: 300;
      color: rgba(255,255,255,0.8);
      margin-bottom: 16px;
      font-variant-numeric: tabular-nums;
    }
    
    .haven-timer-divider {
      color: rgba(255,255,255,0.3);
      margin: 0 8px;
    }
    
    .haven-timer-total {
      color: rgba(255,255,255,0.4);
    }
    
    .haven-progress-bar {
      width: 300px;
      height: 3px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      margin-bottom: 60px;
      overflow: hidden;
    }
    
    .haven-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #d4a574, #b8956a);
      border-radius: 2px;
      transition: width 1s linear;
    }
    
    .haven-session-controls {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    
    .haven-control-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 20px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      color: rgba(255,255,255,0.7);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .haven-control-btn:hover {
      background: rgba(255,255,255,0.1);
      color: #fff;
    }
    
    .haven-control-btn svg {
      width: 20px;
      height: 20px;
    }
    
    .haven-end-btn {
      border-color: rgba(239, 68, 68, 0.3);
      color: rgba(239, 68, 68, 0.8);
    }
    
    .haven-end-btn:hover {
      background: rgba(239, 68, 68, 0.1);
      border-color: rgba(239, 68, 68, 0.5);
      color: #ef4444;
    }
    
    .haven-volume-slider {
      display: none;
      background: rgba(20, 20, 30, 0.9);
      padding: 12px 16px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    
    .haven-volume-slider.visible {
      display: block;
    }
    
    .haven-volume-slider input {
      width: 120px;
    }

    /* Exit Screen */
    .haven-exit {
      max-width: 500px;
      width: 100%;
      text-align: center;
    }
    
    .haven-exit-title {
      font-size: 28px;
      font-weight: 300;
      color: #fff;
      margin-bottom: 8px;
    }
    
    .haven-exit-meta {
      font-size: 14px;
      color: rgba(255,255,255,0.5);
      margin-bottom: 40px;
    }
    
    .haven-rating-section {
      margin-bottom: 32px;
    }
    
    .haven-rating-label {
      font-size: 15px;
      color: rgba(255,255,255,0.7);
      margin-bottom: 16px;
    }
    
    .haven-rating-label .optional {
      color: rgba(255,255,255,0.4);
    }
    
    .haven-rating-scale {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }
    
    .haven-rating-end {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
    }
    
    .haven-rating-stars {
      display: flex;
      gap: 8px;
    }
    
    .haven-star {
      font-size: 28px;
      background: none;
      border: none;
      cursor: pointer;
      opacity: 0.3;
      transition: all 0.15s ease;
      filter: grayscale(1);
    }
    
    .haven-star:hover,
    .haven-star.active {
      opacity: 1;
      filter: grayscale(0);
      transform: scale(1.1);
    }
    
    .haven-skip-btn {
      background: none;
      border: none;
      color: rgba(255,255,255,0.4);
      font-size: 13px;
      cursor: pointer;
      margin-top: 12px;
    }
    
    .haven-skip-btn:hover {
      color: rgba(255,255,255,0.6);
    }
    
    .haven-exit-divider {
      height: 1px;
      background: rgba(255,255,255,0.1);
      margin: 32px 0;
    }
    
    .haven-next-section {
      text-align: left;
    }
    
    .haven-next-label {
      font-size: 14px;
      color: rgba(255,255,255,0.5);
      margin-bottom: 16px;
    }
    
    .haven-next-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .haven-next-btn {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      background: rgba(20, 20, 30, 0.6);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      color: #fff;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: left;
    }
    
    .haven-next-btn:hover {
      background: rgba(30, 30, 45, 0.8);
      border-color: rgba(212, 165, 116, 0.3);
    }
    
    .haven-next-btn.secondary {
      background: transparent;
      border-color: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.7);
    }
    
    .haven-next-btn svg {
      width: 22px;
      height: 22px;
      color: rgba(255,255,255,0.5);
    }

    /* History Screen */
    .haven-history,
    .haven-settings,
    .haven-sound-library,
    .haven-brown-noise {
      max-width: 600px;
      width: 100%;
      align-self: flex-start;
      padding: 0;
    }
    
    .haven-screen-header {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 32px;
    }
    
    .haven-screen-title {
      font-size: 24px;
      font-weight: 500;
      color: #fff;
    }
    
    .haven-history-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 32px;
    }
    
    .haven-history-stat {
      background: rgba(20, 20, 30, 0.6);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
    }
    
    .haven-history-stat-value {
      display: block;
      font-size: 28px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 4px;
    }
    
    .haven-history-stat-label {
      font-size: 12px;
      color: rgba(255,255,255,0.5);
    }
    
    .haven-history-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .haven-history-item {
      background: rgba(20, 20, 30, 0.5);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 12px;
      padding: 16px 20px;
    }
    
    .haven-history-item-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 8px;
    }
    
    .haven-history-item-name {
      font-size: 15px;
      font-weight: 500;
      color: #fff;
    }
    
    .haven-history-item-date {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
    }
    
    .haven-history-item-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 13px;
      color: rgba(255,255,255,0.5);
    }
    
    .haven-history-item-rating {
      color: #f59e0b;
    }

    /* Settings Screen */
    .haven-settings-section {
      background: rgba(20, 20, 30, 0.5);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 20px;
    }
    
    .haven-settings-section-title {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: rgba(255,255,255,0.4);
      margin-bottom: 20px;
    }
    
    .haven-setting-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    
    .haven-setting-row:last-child {
      border-bottom: none;
    }
    
    .haven-setting-row label {
      font-size: 14px;
      color: rgba(255,255,255,0.8);
    }
    
    .haven-setting-row.toggle {
      padding: 16px 0;
    }
    
    .haven-volume-control {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .haven-volume-control input {
      width: 120px;
    }
    
    .haven-volume-control span {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      min-width: 40px;
    }
    
    .haven-settings-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 16px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      color: rgba(255,255,255,0.8);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.15s ease;
      margin-top: 12px;
    }
    
    .haven-settings-btn:hover {
      background: rgba(255,255,255,0.06);
      color: #fff;
    }
    
    .haven-settings-btn svg {
      width: 20px;
      height: 20px;
      color: rgba(255,255,255,0.5);
    }

    /* Sound Library Screen */
    .haven-upload-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      padding: 20px;
      background: rgba(212, 165, 116, 0.1);
      border: 2px dashed rgba(212, 165, 116, 0.3);
      border-radius: 12px;
      color: #d4a574;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      margin-bottom: 32px;
    }
    
    .haven-upload-btn:hover {
      background: rgba(212, 165, 116, 0.15);
      border-color: rgba(212, 165, 116, 0.5);
    }
    
    .haven-upload-btn svg {
      width: 22px;
      height: 22px;
    }
    
    .haven-library-section {
      margin-bottom: 32px;
    }
    
    .haven-library-section-title {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: rgba(255,255,255,0.4);
      margin-bottom: 16px;
    }
    
    .haven-library-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .haven-library-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      background: rgba(20, 20, 30, 0.5);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 12px;
    }
    
    .haven-library-item-icon {
      font-size: 24px;
      width: 40px;
      text-align: center;
    }
    
    .haven-library-item-info {
      flex: 1;
    }
    
    .haven-library-item-title {
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      margin-bottom: 2px;
    }
    
    .haven-library-item-meta {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
    }
    
    .haven-library-item-actions {
      display: flex;
      gap: 8px;
    }
    
    .haven-library-action {
      padding: 8px;
      background: rgba(255,255,255,0.05);
      border: none;
      border-radius: 6px;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
    }
    
    .haven-library-action:hover {
      background: rgba(255,255,255,0.1);
      color: #fff;
    }
    
    .haven-library-action svg {
      width: 16px;
      height: 16px;
    }

    /* Brown Noise Parameters Screen */
    .haven-noise-param {
      margin-bottom: 28px;
    }
    
    .haven-noise-param-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .haven-noise-param-header label {
      font-size: 15px;
      font-weight: 500;
      color: #fff;
    }
    
    .haven-noise-param-range {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
    }
    
    .haven-noise-slider {
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: rgba(255,255,255,0.1);
      appearance: none;
      cursor: pointer;
    }
    
    .haven-noise-slider::-webkit-slider-thumb {
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #d4a574;
      cursor: pointer;
    }
    
    .haven-noise-value {
      display: block;
      text-align: right;
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      margin-top: 8px;
    }
    
    .haven-noise-actions {
      display: flex;
      gap: 12px;
      margin-bottom: 32px;
    }
    
    .haven-noise-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 20px;
      background: linear-gradient(135deg, #d4a574, #b8956a);
      border: none;
      border-radius: 10px;
      color: #000;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .haven-noise-btn:hover {
      transform: translateY(-1px);
    }
    
    .haven-noise-btn.secondary {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.8);
    }
    
    .haven-noise-btn.secondary:hover {
      background: rgba(255,255,255,0.08);
      color: #fff;
    }
    
    .haven-noise-btn svg {
      width: 18px;
      height: 18px;
    }
    
    .haven-noise-presets {
      background: rgba(20, 20, 30, 0.5);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 24px;
    }
    
    .haven-noise-presets-title {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,0.5);
      margin-bottom: 16px;
    }
    
    .haven-noise-presets-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    
    .haven-noise-preset {
      padding: 12px 16px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      color: rgba(255,255,255,0.7);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .haven-noise-preset:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(212, 165, 116, 0.3);
      color: #fff;
    }
    
    .haven-save-custom-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 16px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      color: rgba(255,255,255,0.8);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    
    .haven-save-custom-btn:hover {
      background: rgba(255,255,255,0.06);
      color: #fff;
    }
    
    .haven-save-custom-btn svg {
      width: 18px;
      height: 18px;
    }

    /* Upload Modal */
    .haven-upload-tags {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    
    .haven-upload-tags label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: rgba(255,255,255,0.7);
      cursor: pointer;
    }
    
    .haven-upload-tags input {
      accent-color: #d4a574;
    }

    /* Empty State */
    .haven-empty-state {
      text-align: center;
      padding: 40px;
      color: rgba(255,255,255,0.4);
      font-size: 14px;
    }

    /* HAVEN Responsive */
    @media (max-width: 768px) {
      .haven-header {
        padding: 16px;
        flex-wrap: wrap;
        gap: 12px;
      }
      
      .haven-header-left {
        width: 100%;
        justify-content: space-between;
      }
      
      .haven-header-actions {
        width: 100%;
        justify-content: flex-end;
      }
      
      .haven-screen {
        padding: 24px 16px;
      }
      
      .haven-landing-question {
        font-size: 22px;
        margin-bottom: 32px;
      }
      
      .haven-session-card {
        padding: 18px;
      }
      
      .haven-session-icon {
        font-size: 26px;
      }
      
      .haven-session-name {
        font-size: 16px;
      }
      
      .haven-breathing-circle {
        width: 160px;
        height: 160px;
      }
      
      .haven-timer {
        font-size: 24px;
      }
      
      .haven-progress-bar {
        width: 250px;
      }
      
      .haven-history-stats {
        grid-template-columns: 1fr;
      }
      
      .haven-noise-presets-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ============================================
       HOME DASHBOARD
       ============================================ */

    /* Shared Home Styles */
    .home-greeting {
      margin-bottom: 48px;
    }

    .home-greeting-time {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.35);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }

    .home-greeting-text {
      font-size: 28px;
      font-weight: 600;
      color: rgba(255,255,255,0.95);
      margin-bottom: 4px;
    }

    .home-greeting-date {
      font-size: 15px;
      color: rgba(255,255,255,0.4);
    }

    /* App Icon Base */
    .home-app-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--app-color, rgba(255,255,255,0.06));
      position: relative;
      box-shadow: 0 4px 20px var(--app-glow, rgba(255,255,255,0.1));
    }

    .home-app-icon svg {
      color: rgba(255,255,255,0.9);
    }

    .home-app-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      font-size: 10px;
      font-weight: 600;
      color: #fff;
      background: #ef4444;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .home-app-badge:empty,
    .home-app-badge[data-count="0"] {
      display: none;
    }

    /* Quick Capture */
    .home-quick-capture {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .home-quick-capture:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.1);
    }

    .home-quick-capture svg {
      width: 20px;
      height: 20px;
      color: rgba(255,255,255,0.4);
    }

    .home-quick-capture span {
      font-size: 14px;
      color: rgba(255,255,255,0.4);
    }

    .home-quick-capture kbd {
      margin-left: auto;
      padding: 3px 8px;
      font-size: 11px;
      font-family: inherit;
      color: rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.04);
      border-radius: 5px;
    }

    /* Section Header */
    .home-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .home-section-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.35);
    }

    .home-section-link {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
      text-decoration: none;
      cursor: pointer;
      transition: color 0.15s ease;
    }

    .home-section-link:hover {
      color: rgba(255,255,255,0.7);
    }

    /* Today Card */
    .home-today-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      overflow: hidden;
    }

    .home-today-empty {
      padding: 32px 16px;
      text-align: center;
      color: rgba(255,255,255,0.4);
      font-size: 13px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .home-today-hint {
      font-size: 11px;
      opacity: 0.7;
    }

    .home-today-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      transition: background 0.15s ease;
      cursor: pointer;
    }

    .home-today-item:last-of-type {
      border-bottom: none;
    }

    .home-today-item:hover {
      background: rgba(255,255,255,0.02);
    }

    .home-today-checkbox {
      width: 18px;
      height: 18px;
      border: 1.5px solid rgba(255,255,255,0.2);
      border-radius: 50%;
      margin-top: 2px;
      flex-shrink: 0;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .home-today-checkbox:hover {
      border-color: rgba(255,255,255,0.4);
    }

    .home-today-content {
      flex: 1;
      min-width: 0;
    }

    .home-today-task {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,0.85);
      margin-bottom: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .home-today-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: rgba(255,255,255,0.35);
    }

    .home-today-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--project-color, rgba(255,255,255,0.3));
    }

    .home-today-progress {
      padding: 12px 16px;
      background: rgba(255,255,255,0.02);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .home-today-progress-text {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
    }

    .home-today-progress-text strong {
      color: rgba(255,255,255,0.7);
    }

    .home-today-progress-bar {
      width: 80px;
      height: 4px;
      background: rgba(255,255,255,0.08);
      border-radius: 2px;
      overflow: hidden;
    }

    .home-today-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #06b6d4, #22c55e);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    /* ============================================
       MOBILE HOME LAYOUT
       ============================================ */
    
    .home-mobile-layout {
      display: none; /* Hidden by default, shown via media query on mobile */
      flex-direction: column;
      padding: 60px 24px 32px;
      padding-top: max(60px, env(safe-area-inset-top, 60px));
      padding-bottom: max(32px, env(safe-area-inset-bottom, 32px));
      max-width: 500px;
      margin: 0 auto;
    }

    .home-mobile-layout .home-greeting {
      text-align: center;
    }

    /* Mobile App Grid */
    .home-app-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 32px;
    }

    .home-app-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 20px 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .home-app-tile::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .home-app-tile:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.1);
      transform: translateY(-2px);
    }

    .home-app-tile:hover::before {
      opacity: 1;
    }

    .home-app-tile:active {
      transform: scale(0.97);
    }

    .home-app-tile .home-app-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
    }

    .home-app-tile .home-app-icon svg {
      width: 24px;
      height: 24px;
    }

    .home-app-name {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.7);
    }

    .home-mobile-layout .home-quick-capture {
      margin-bottom: 32px;
    }

    .home-mobile-layout .home-today-section {
      flex: 1;
    }

    /* ============================================
       HOME AMBIENT BACKGROUND
       ============================================ */
    
    /* Home Ambient Background */
    .home-ambient-bg {
      position: fixed;
      inset: 0;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.8s ease;
      pointer-events: none;
    }
    
    .home-ambient-bg.active {
      opacity: 1;
    }
    
    .home-ambient-base {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #0a0a0f 0%, #0d0d14 50%, #0a0a12 100%);
    }
    
    .home-ambient-glow {
      position: absolute;
      inset: 0;
      background: 
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 30%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 50% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
      animation: homeAmbientPulse 12s ease-in-out infinite;
    }
    
    .home-ambient-orbs {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    
    .home-ambient-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.4;
      animation: homeOrbFloat 20s ease-in-out infinite;
    }
    
    .home-ambient-orb.orb-1 {
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
      top: -10%;
      left: 10%;
      animation-delay: 0s;
    }
    
    .home-ambient-orb.orb-2 {
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%);
      top: 30%;
      right: 5%;
      animation-delay: -7s;
      animation-duration: 25s;
    }
    
    .home-ambient-orb.orb-3 {
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%);
      bottom: 10%;
      left: 30%;
      animation-delay: -14s;
      animation-duration: 22s;
    }
    
    .home-ambient-vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.4) 100%);
    }
    
    @keyframes homeAmbientPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.8; transform: scale(1.02); }
    }
    
    @keyframes homeOrbFloat {
      0%, 100% { transform: translate(0, 0) scale(1); }
      25% { transform: translate(30px, -20px) scale(1.05); }
      50% { transform: translate(-20px, 30px) scale(0.95); }
      75% { transform: translate(-30px, -10px) scale(1.02); }
    }
    
    /* Ambient toggle button */
    .home-ambient-toggle {
      position: fixed;
      bottom: 24px;
      left: 24px;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      z-index: 100;
    }
    
    .on-tab-home .home-ambient-toggle {
      display: flex;
    }
    
    .home-ambient-toggle:hover {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.7);
    }
    
    .home-ambient-toggle.active {
      background: rgba(59, 130, 246, 0.15);
      border-color: rgba(59, 130, 246, 0.3);
      color: #60a5fa;
    }
    
    .home-ambient-toggle svg {
      width: 20px;
      height: 20px;
    }


    /* ============================================
       DESKTOP HOME LAYOUT - GRID DASHBOARD
       ============================================ */
    
    .home-desktop-layout {
      display: none;
      flex-direction: column;
      align-items: center;
      padding: 60px 32px 80px;
      max-width: 720px;
      margin: 0 auto;
    }

    .home-desktop-layout .home-greeting {
      text-align: center;
      margin-bottom: 48px;
    }

    .home-desktop-layout .home-greeting-time {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.15em;
      color: rgba(255,255,255,0.4);
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .home-desktop-layout .home-greeting-text {
      font-size: 32px;
      font-weight: 600;
      color: rgba(255,255,255,0.95);
      margin-bottom: 8px;
    }

    .home-desktop-layout .home-greeting-date {
      font-size: 14px;
      color: rgba(255,255,255,0.5);
    }

    /* Apple-style Uniform Grid */
    .home-grid-apple {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 140px));
      gap: 16px;
      justify-content: center;
      margin-bottom: 0;
    }

    .home-grid-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 12px 20px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .home-grid-tile:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
      transform: translateY(-2px);
    }

    .home-grid-tile:active {
      transform: scale(0.98);
    }

    .home-grid-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--tile-color, rgba(255,255,255,0.06));
      margin-bottom: 14px;
      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

    .home-grid-tile:hover .home-grid-icon {
      transform: scale(1.08);
      box-shadow: 0 4px 20px var(--tile-glow, rgba(255,255,255,0.15));
      background: var(--tile-color-hover, var(--tile-color));
    }

    .home-grid-icon svg {
      width: 28px;
      height: 28px;
      color: var(--tile-stroke, rgba(255,255,255,0.8));
      stroke: var(--tile-stroke, rgba(255,255,255,0.8));
      fill: none;
      stroke-width: 1.5;
    }

    .home-grid-label {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      margin-bottom: 4px;
    }

    .home-grid-meta {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }

    /* Desktop Idea Capture */
    .home-desktop-layout .home-quick-capture {
      max-width: 600px;
      width: 100%;
      margin-top: 24px;
    }

    /* ============================================
       HOME LAYOUT RESPONSIVE
       ============================================ */

    /* Mobile: Show mobile layout, hide desktop */
    @media (max-width: 767px) {
      .home-mobile-layout {
        display: flex;
      }
      .home-desktop-layout {
        display: none !important;
      }
    }

    /* Desktop: Show desktop layout, hide mobile */
    @media (min-width: 768px) {
      .home-mobile-layout {
        display: none;
      }
      .home-desktop-layout {
        display: flex;
      }
    }

    /* Large desktop */
    @media (min-width: 1024px) {
      .home-desktop-layout {
        max-width: 800px;
        padding: 60px 48px 80px;
      }

      .home-grid-apple {
        grid-template-columns: repeat(4, minmax(0, 160px));
        gap: 24px;
      }

      .home-grid-tile {
        padding: 24px 16px 20px;
      }

      .home-grid-icon {
        width: 72px;
        height: 72px;
      }

      .home-grid-label {
        font-size: 15px;
      }

      .home-grid-meta {
        font-size: 12px;
      }
    }


    .home-capture-section .home-quick-capture {
      max-width: 100%;
    }

    .home-desktop-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .home-desktop-left {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Large App Tiles */
    .home-app-tile-large {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .home-app-tile-large::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .home-app-tile-large:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
      transform: translateY(-1px);
    }

    .home-app-tile-large:hover::before {
      opacity: 1;
    }

    .home-app-tile-large .home-app-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
    }

    .home-app-tile-large .home-app-icon svg {
      width: 26px;
      height: 26px;
    }

    .home-tile-info {
      flex: 1;
    }

    .home-tile-name {
      font-size: 15px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      margin-bottom: 2px;
    }

    .home-tile-desc {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
    }

    .home-tile-arrow {
      color: rgba(255,255,255,0.2);
      transition: all 0.15s ease;
    }

    .home-app-tile-large:hover .home-tile-arrow {
      color: rgba(255,255,255,0.4);
      transform: translateX(2px);
    }

    .home-tile-arrow svg {
      width: 18px;
      height: 18px;
    }

    /* Wellness Row */
    .home-wellness-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .home-wellness-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 24px 16px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .home-wellness-tile:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
      transform: translateY(-2px);
    }

    .home-wellness-tile .home-app-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
    }

    .home-wellness-tile .home-app-icon svg {
      width: 28px;
      height: 28px;
    }

    .home-wellness-name {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
    }

    .home-wellness-stat {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }

    /* Additional Tiles Row */
    .home-additional-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .home-additional-tile {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,0.7);
    }

    .home-additional-tile:hover {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.1);
    }

    .home-app-icon-small {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--app-color, rgba(255,255,255,0.06));
    }

    .home-app-icon-small svg {
      width: 16px;
      height: 16px;
      color: rgba(255,255,255,0.8);
    }

    .home-desktop-right {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* ============================================
       HOME RESPONSIVE
       ============================================ */
    
    /* Mobile: Show mobile layout, hide desktop */
    @media (max-width: 767px) {
      .home-mobile-layout {
        display: flex;
      }
      .home-desktop-layout {
        display: none;
      }
    }

    /* Desktop: Show desktop layout, hide mobile */
    @media (min-width: 768px) {
      .home-mobile-layout {
        display: none;
      }
      .home-desktop-layout {
        display: flex;
      }
    }

    /* Larger mobile tweaks */
    @media (min-width: 400px) and (max-width: 767px) {
      .home-app-grid {
        gap: 20px;
      }

      .home-app-tile {
        padding: 24px 16px;
      }

      .home-app-tile .home-app-icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
      }

      .home-app-tile .home-app-icon svg {
        width: 28px;
        height: 28px;
      }
    }

    /* Logo hover effect */
    .nav-bg-logo:hover {
      opacity: 0.8;
    }

    .nav-bg-logo {
      transition: opacity 0.15s ease;
    }

    /* ============================================
       QUICK CAPTURE MODAL
       ============================================ */
    
    .quick-capture-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 15vh;
      z-index: 3000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s ease;
    }

    .quick-capture-overlay.open {
      opacity: 1;
      visibility: visible;
    }

    .quick-capture-modal {
      width: 100%;
      max-width: 480px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      transform: translateY(-20px) scale(0.95);
      transition: all 0.2s ease;
      overflow: hidden;
    }

    .quick-capture-overlay.open .quick-capture-modal {
      transform: translateY(0) scale(1);
    }

    .quick-capture-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      color: rgba(255, 255, 255, 0.5);
      font-size: 14px;
    }

    .quick-capture-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(6, 182, 212, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .quick-capture-icon svg {
      width: 18px;
      height: 18px;
      color: var(--primary);
    }

    .quick-capture-header kbd {
      margin-left: auto;
      padding: 4px 8px;
      font-size: 11px;
      font-family: inherit;
      color: rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.05);
      border-radius: 5px;
    }

    .quick-capture-input {
      width: 100%;
      padding: 20px;
      font-size: 18px;
      font-weight: 500;
      color: var(--text);
      background: transparent;
      border: none;
      outline: none;
    }

    .quick-capture-input::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    .quick-capture-options {
      display: flex;
      gap: 12px;
      padding: 0 20px 16px;
    }

    .quick-capture-bucket,
    .quick-capture-project {
      flex: 1;
      padding: 10px 12px;
      font-size: 13px;
      color: var(--text-soft);
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .quick-capture-bucket:hover,
    .quick-capture-project:hover {
      border-color: rgba(255, 255, 255, 0.15);
    }

    .quick-capture-bucket:focus,
    .quick-capture-project:focus {
      border-color: var(--primary);
      outline: none;
    }

    .quick-capture-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      padding: 16px 20px;
      border-top: 1px solid var(--border);
      background: rgba(0, 0, 0, 0.2);
    }

    .quick-capture-cancel {
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .quick-capture-cancel:hover {
      background: var(--bg-hover);
      color: var(--text);
    }

    .quick-capture-save {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 500;
      color: #000;
      background: var(--primary);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .quick-capture-save:hover {
      background: #00e5e5;
      transform: translateY(-1px);
    }

    .quick-capture-save svg {
      width: 16px;
      height: 16px;
    }

    /* ============================================
       AUTO-HIDE DOCK (Desktop Only)
       ============================================ */
    
    .dock-trigger {
      display: none;
    }

    .dock {
      display: none;
    }

    @media (min-width: 768px) {
      .dock-trigger {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 24px;
        z-index: 1999;
      }

      .dock {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%) translateY(100px);
        padding: 10px 16px;
        background: rgba(20, 20, 25, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
        z-index: 2000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .dock.visible {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
        visibility: visible;
      }

      .dock-item {
        position: relative;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: var(--app-color, rgba(255, 255, 255, 0.06));
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .dock-item:hover {
        transform: translateY(-8px) scale(1.1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
      }

      .dock-item:active {
        transform: translateY(-4px) scale(1.05);
      }

      .dock-item svg {
        width: 24px;
        height: 24px;
        color: rgba(255, 255, 255, 0.85);
      }

      .dock-tooltip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        background: rgba(0, 0, 0, 0.8);
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.15s ease;
        pointer-events: none;
      }

      .dock-item:hover .dock-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
      }

      .dock-divider {
        width: 1px;
        height: 32px;
        background: rgba(255, 255, 255, 0.1);
        margin: 0 4px;
      }

      .dock-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
        font-weight: 600;
        color: #fff;
        background: #ef4444;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .dock-badge:empty {
        display: none;
      }

      .home-dock-item {
        background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(0, 96, 128, 0.2));
      }
    }

    @media (min-width: 1200px) {
      .dock-item {
        width: 52px;
        height: 52px;
      }

      .dock-item svg {
        width: 26px;
        height: 26px;
      }
    }

/* ============================================
   MUSIC SECTION
   ============================================ */

.music-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.music-page .page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.music-page .page-title-group h1 {
  font-size: 28px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 4px;
}

.music-page .page-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.music-page .page-actions {
  display: flex;
  gap: 12px;
}

/* Quick Actions */
.music-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.music-quick-action-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.music-quick-action-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.music-quick-action-icon {
  font-size: 32px;
}

.music-quick-action-content {
  flex: 1;
}

.music-quick-action-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 4px;
}

.music-quick-action-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.music-quick-action-arrow {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease;
}

.music-quick-action-card:hover .music-quick-action-arrow {
  transform: translateX(4px);
  color: rgba(255, 255, 255, 0.6);
}

/* Section Headers */
.music-page .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.music-page .section-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.music-page .section-link {
  font-size: 13px;
  color: rgba(59, 130, 246, 0.8);
  text-decoration: none;
}

.music-page .section-link:hover {
  color: rgba(59, 130, 246, 1);
  text-decoration: underline;
}

/* Pipeline Section */
.music-pipeline-section {
  margin-bottom: 32px;
}

.music-pipeline-total {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

.music-pipeline-stages {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.music-stage-card {
  flex: 1;
  min-width: 90px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.music-stage-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.music-stage-card.release {
  background: rgba(139, 92, 246, 0.05);
  border-color: rgba(139, 92, 246, 0.15);
}

.music-stage-card.release:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.25);
}

.music-stage-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.music-stage-count {
  font-size: 24px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 4px;
}

.music-stage-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.music-stage-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.music-stage-bar.seed { background: linear-gradient(90deg, #94a3b8, #94a3b8); }
.music-stage-bar.sprout { background: linear-gradient(90deg, #a3e635, #a3e635); }
.music-stage-bar.sapling { background: linear-gradient(90deg, #22c55e, #22c55e); }
.music-stage-bar.plant { background: linear-gradient(90deg, #f59e0b, #f59e0b); }
.music-stage-bar.tree { background: linear-gradient(90deg, #f97316, #f97316); }
.music-stage-bar.finished { background: linear-gradient(90deg, #06b6d4, #06b6d4); }
.music-stage-bar.assets { background: linear-gradient(90deg, #8b5cf6, #8b5cf6); }
.music-stage-bar.distribution { background: linear-gradient(90deg, #ec4899, #ec4899); }
.music-stage-bar.released { background: linear-gradient(90deg, #10b981, #10b981); }

.music-pipeline-divider {
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.2);
}

.music-pipeline-divider svg {
  width: 20px;
  height: 20px;
}

/* Recent Section */
.music-recent-section {
  margin-bottom: 32px;
}

.music-recent-tracks {
  display: grid;
  gap: 8px;
}

.music-track-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.music-track-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.music-track-art {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.music-track-art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.music-track-info {
  flex: 1;
  min-width: 0;
}

.music-track-title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-track-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  gap: 8px;
  align-items: center;
}

.music-track-stage {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

.music-track-stage.seed { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.music-track-stage.sprout { background: rgba(163, 230, 53, 0.15); color: #a3e635; }
.music-track-stage.sapling { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.music-track-stage.plant { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.music-track-stage.tree { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.music-track-stage.finished { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }

.music-track-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

/* Empty State */
.music-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: rgba(255, 255, 255, 0.4);
}

.music-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.music-empty-text {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}

.music-empty-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
}

/* Progress Section */
.music-progress-section {
  margin-bottom: 32px;
}

.music-progress-count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

.music-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.music-progress-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.music-progress-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.music-progress-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.music-progress-art {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.music-progress-art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.music-progress-info {
  flex: 1;
  min-width: 0;
}

.music-progress-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-progress-project {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.music-progress-bar-container {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.music-progress-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.music-progress-bar-fill.seed { width: 10%; background: #94a3b8; }
.music-progress-bar-fill.sprout { width: 25%; background: #a3e635; }
.music-progress-bar-fill.sapling { width: 45%; background: #22c55e; }
.music-progress-bar-fill.plant { width: 65%; background: #f59e0b; }
.music-progress-bar-fill.tree { width: 85%; background: #f97316; }
.music-progress-bar-fill.finished { width: 100%; background: #06b6d4; }

.music-progress-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.music-progress-stage {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.music-progress-date {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   BROWSE MODAL (⌘K)
   ============================================ */

/* Browse Trigger Button */
.browse-trigger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-right: 8px;
}

.browse-trigger-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}

.browse-trigger-btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.browse-trigger-label {
  font-size: 12px;
}

.browse-trigger-kbd {
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 10px;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 4px;
}

@media (max-width: 768px) {
  .browse-trigger-btn {
    padding: 8px;
  }
  
  .browse-trigger-label,
  .browse-trigger-kbd {
    display: none;
  }
}

.browse-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease;
}

.browse-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.browse-modal {
  background: #0a0a0c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  width: 100%;
  max-width: 816px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.15s ease;
}

.browse-modal-overlay.open .browse-modal {
  transform: translateY(0) scale(1);
}

/* Browse Top Bar */
.browse-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 0 24px;
}

.browse-title {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.browse-top-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.browse-manage-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s ease;
  background: none;
  border: none;
  font-family: inherit;
}

.browse-manage-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.browse-manage-link svg {
  width: 14px;
  height: 14px;
}

.browse-close-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.browse-close-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.browse-close-btn svg {
  width: 16px;
  height: 16px;
}

.browse-close-btn kbd {
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 10px;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.4);
}

/* ============ NAV MORE DROPDOWN ============ */
.nav-more-container {
  position: relative;
}

.nav-more-btn {
  position: relative;
}

.nav-more-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #131316;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  min-width: 200px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s ease;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.nav-more-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.nav-more-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
}

.nav-more-item svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  flex-shrink: 0;
}

.nav-more-item:hover svg {
  opacity: 0.9;
}

.nav-more-item span:first-of-type {
  flex: 1;
}

.nav-more-status {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent);
  border-radius: 4px;
  display: none;
}

.nav-more-status.active {
  display: inline-block;
}

.nav-more-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  display: none;
}

.nav-more-badge.has-items {
  display: inline-block;
}

.nav-more-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 6px 0;
}

/* ============ NAV SUBPANELS ============ */
.nav-subpanel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease;
}

.nav-subpanel-overlay.open {
  opacity: 1;
  visibility: visible;
}

.nav-subpanel {
  position: fixed;
  top: 60px;
  right: 16px;
  background: #131316;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  width: 320px;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.15s ease;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.nav-subpanel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-subpanel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.nav-subpanel-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-subpanel-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.nav-subpanel-close svg {
  width: 16px;
  height: 16px;
}

.nav-subpanel-actions {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-subpanel-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-subpanel-action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.nav-subpanel-action-btn svg {
  width: 14px;
  height: 14px;
}

.nav-subpanel-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  max-height: 400px;
}

.nav-subpanel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 32px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

.nav-subpanel-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

.nav-subpanel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-subpanel-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.nav-subpanel-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-subpanel-item-content {
  flex: 1;
  min-width: 0;
}

.nav-subpanel-item-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-subpanel-item-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.nav-subpanel-item-remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}

.nav-subpanel-item:hover .nav-subpanel-item-remove {
  opacity: 1;
}

.nav-subpanel-item-remove:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}

.nav-subpanel-item-remove svg {
  width: 14px;
  height: 14px;
}

/* Ambient subpanel specific */
.ambient-subpanel {
  width: 360px;
}

.ambient-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ambient-subpanel .ambient-sounds-grid {
  padding: 12px;
}

.ambient-subpanel .ambient-volume-control {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Browse Header / Search */
.browse-header {
  padding: 20px 24px 16px 24px;
}

.browse-search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.browse-search-icon {
  position: absolute;
  left: 16px;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.browse-search-input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
  transition: all 0.15s ease;
}

.browse-search-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.browse-search-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
}

/* Browse Filters */
.browse-filters {
  padding: 12px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.browse-type-tabs {
  display: flex;
  gap: 4px;
}

.browse-type-tab {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.browse-type-tab:hover {
  color: rgba(255, 255, 255, 0.7);
}

.browse-type-tab.active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.browse-domain-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.browse-domain-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.browse-domain-btn:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
}

.browse-domain-btn.active {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

.browse-domain-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.browse-domain-btn.active .browse-domain-dot {
  opacity: 1;
}

.browse-domain-btn[data-domain="music"] .browse-domain-dot { background: #f97066; }
.browse-domain-btn[data-domain="content"] .browse-domain-dot { background: #a855f7; }
.browse-domain-btn[data-domain="evenant"] .browse-domain-dot { background: #3b82f6; }
.browse-domain-btn[data-domain="tools"] .browse-domain-dot { background: #06b6d4; }
.browse-domain-btn[data-domain="business"] .browse-domain-dot { background: #f59e0b; }
.browse-domain-btn[data-domain="personal"] .browse-domain-dot { background: #64748b; }
.browse-domain-btn[data-domain="other"] .browse-domain-dot { background: #94a3b8; }

/* Results Header */
.browse-results-header {
  padding: 10px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.browse-results-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

/* Results List */
.browse-results {
  flex: 1;
  overflow-y: auto;
  min-height: 200px;
  max-height: 400px;
}

.browse-results::-webkit-scrollbar {
  width: 6px;
}

.browse-results::-webkit-scrollbar-track {
  background: transparent;
}

.browse-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* Browse Item */
.browse-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.1s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.browse-item:hover,
.browse-item.selected {
  background: rgba(255, 255, 255, 0.03);
}

.browse-item.selected {
  background: rgba(6, 182, 212, 0.06);
}

/* Legacy indicator - hidden, replaced by icons */
.browse-item-indicator {
  display: none;
}

.browse-item-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.browse-item-title {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.1s ease;
}

.browse-item:hover .browse-item-title,
.browse-item.selected .browse-item-title {
  color: rgba(255, 255, 255, 1);
}

.browse-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

.browse-item-type {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 9px;
  opacity: 0.8;
}

.browse-item-area {
  padding: 3px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.browse-item:hover .browse-item-area {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
}

.browse-item-date {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

/* Browse item icons */
.browse-item-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* Action items styling */
.browse-item-action {
  background: rgba(6, 182, 212, 0.04);
  border: 1px solid rgba(6, 182, 212, 0.1);
}

.browse-item-action:hover {
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(6, 182, 212, 0.2);
}

.browse-item-action.selected {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.3);
}

.browse-item-action-hint {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.browse-item-shortcut {
  font-size: 11px;
  color: rgba(6, 182, 212, 0.6);
  padding: 2px 6px;
  background: rgba(6, 182, 212, 0.1);
  border-radius: 4px;
}

/* Domain colors for new types */
.browse-item[data-domain="action"] .browse-item-indicator { background: #06b6d4; }
.browse-item[data-domain="other"] .browse-item-indicator { background: #64748b; }

/* Empty State */
.browse-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.browse-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

.browse-empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.15);
}

.browse-empty-icon svg {
  width: 100%;
  height: 100%;
}

.browse-empty-state p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  max-width: 280px;
  line-height: 1.5;
}

/* Browse Footer */
.browse-footer {
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: center;
}

.browse-footer-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

.browse-footer-hint kbd {
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 10px;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 4px;
}

/* Browse Modal Responsive */
@media (max-width: 860px) {
  .browse-modal-overlay {
    padding: 16px;
    padding-top: 16px;
  }
  
  .browse-modal {
    max-height: calc(100vh - 32px);
  }
}

@media (max-width: 640px) {
  .browse-modal-overlay {
    padding: 8px;
    padding-top: 8px;
  }
  
  .browse-modal {
    max-width: 100%;
    max-height: calc(100vh - 16px);
    border-radius: 12px;
  }
  
  .browse-top-bar {
    padding: 12px 16px 0 16px;
  }
  
  .browse-header {
    padding: 16px 16px 12px 16px;
  }
  
  .browse-search-input {
    font-size: 16px; /* Prevent iOS zoom */
  }
  
  .browse-filters {
    padding: 12px 16px;
  }
  
  .browse-domain-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  
  .browse-domain-filters::-webkit-scrollbar {
    display: none;
  }
  
  .browse-results-header {
    padding: 10px 16px;
  }
  
  .browse-item {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 12px 16px;
  }
  
  .browse-item-date {
    display: none;
  }
  
  .browse-footer {
    padding: 12px 16px;
  }
  
  .browse-footer-hint {
    font-size: 10px;
  }
  
  .browse-close-btn kbd {
    display: none;
  }
  
  .browse-manage-link span {
    display: none;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .music-quick-actions {
    grid-template-columns: 1fr;
  }
  
  .music-pipeline-stages {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .music-pipeline-stages::-webkit-scrollbar {
    display: none;
  }
  
  .music-stage-card {
    min-width: 80px;
    padding: 12px;
  }
  
  .music-pipeline-divider {
    display: none;
  }
  
  .music-page .page-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .music-page .page-actions {
    width: 100%;
  }
  
  .music-page .page-actions .btn {
    flex: 1;
  }
}

/* ============================================
   TOOLS DEVELOPMENT PAGE
   ============================================ */

.tools-container {
  padding: 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Tools Header */
.tools-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 24px;
}

.tools-header-left {
  flex: 1;
}

.tools-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
}

.tools-title-icon {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.tools-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

.tools-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tools-search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  transition: border-color 0.15s ease;
}

.tools-search-container:focus-within {
  border-color: var(--primary);
}

.tools-search-container svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.tools-search-input {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  outline: none;
  width: 200px;
}

.tools-search-input::placeholder {
  color: var(--text-muted);
}

.tools-add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--primary);
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.tools-add-btn:hover {
  background: var(--primary-hover);
}

.tools-add-btn svg {
  width: 16px;
  height: 16px;
}

/* Stats Bar */
.tools-stats-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 32px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 20px;
}

.tools-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 80px;
}

.tools-stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}

.tools-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tools-stat-idea { color: #a855f7; }
.tools-stat-mvp { color: #f59e0b; }
.tools-stat-development { color: #3b82f6; }
.tools-stat-working { color: #06b6d4; }
.tools-stat-finished { color: #22c55e; }

/* Filter Row */
.tools-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.tools-status-filters {
  display: flex;
  gap: 8px;
}

.tools-filter-btn {
  padding: 8px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tools-filter-btn:hover {
  background: var(--bg-card);
  color: var(--text);
}

.tools-filter-btn.active {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
}

.tools-filter-btn.parked-filter {
  margin-left: 12px;
  border-left: 1px solid var(--border);
  padding-left: 20px;
  color: var(--text-muted);
}

.tools-filter-btn.parked-filter.active {
  background: rgba(100, 116, 139, 0.9);
  color: #fff;
  border-color: #64748b;
}

.tools-category-filters {
  display: flex;
  gap: 8px;
}

.tools-category-chip {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tools-category-chip:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

.tools-category-chip.active {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--primary);
  color: var(--primary);
}

.tools-category-chip[data-category="life"] { --chip-color: #22c55e; }
.tools-category-chip[data-category="music"] { --chip-color: #f97066; }
.tools-category-chip[data-category="evenant"] { --chip-color: #3b82f6; }
.tools-category-chip[data-category="educational"] { --chip-color: #a855f7; }
.tools-category-chip[data-category="creative"] { --chip-color: #f59e0b; }
.tools-category-chip[data-category="business"] { --chip-color: #06b6d4; }

.tools-category-chip[data-category]:not([data-category="all"]).active {
  background: rgba(var(--chip-color-rgb, 6, 182, 212), 0.15);
  border-color: var(--chip-color, var(--primary));
  color: var(--chip-color, var(--primary));
}

/* Tools Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.tools-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
}

.tools-empty-state svg {
  width: 64px;
  height: 64px;
  color: var(--text-muted);
  margin-bottom: 20px;
  opacity: 0.5;
}

.tools-empty-state h3 {
  font-size: 18px;
  color: var(--text);
  margin: 0 0 8px 0;
}

.tools-empty-state p {
  color: var(--text-muted);
  margin: 0 0 24px 0;
}

.tools-empty-btn {
  padding: 12px 24px;
  background: var(--primary);
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.tools-empty-btn:hover {
  background: var(--primary-hover);
}

/* Tool Card - Redesigned */
.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.tool-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.tool-card-image {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.tool-card-image.has-hero {
  background: var(--bg-input);
}

.tool-card-image img,
.tool-card-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tool-card:hover .tool-card-hero {
  transform: scale(1.05);
}

/* Favorite star button - top left corner */
.tool-card-favorite {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transition: all 0.2s ease;
}

.tool-card:hover .tool-card-favorite {
  opacity: 1;
}

.tool-card-favorite:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #fbbf24;
  transform: scale(1.1);
}

.tool-card-favorite.active {
  opacity: 1;
  color: #fbbf24;
}

.tool-card-favorite.active:hover {
  color: rgba(255, 255, 255, 0.7);
}

.tool-card-favorite svg {
  width: 16px;
  height: 16px;
}

/* Status badge in top-right corner - smaller */
.tool-card-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}

.tool-card-status[data-status="idea"] {
  background: rgba(168, 85, 247, 0.9);
  color: #fff;
}

.tool-card-status[data-status="mvp"] {
  background: rgba(245, 158, 11, 0.9);
  color: #000;
}

.tool-card-status[data-status="development"] {
  background: rgba(59, 130, 246, 0.9);
  color: #fff;
}

.tool-card-status[data-status="working"] {
  background: rgba(34, 197, 94, 0.9);
  color: #000;
}

.tool-card-status[data-status="finished"] {
  background: rgba(34, 197, 94, 0.9);
  color: #000;
}

.tool-card-status[data-status="parked"] {
  background: rgba(100, 116, 139, 0.9);
  color: #fff;
}

.tool-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tool-card-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-card-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Progress Section */
.tool-card-progress-section {
  margin-bottom: 16px;
}

.tool-card-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.tool-card-progress-label {
  font-size: 12px;
  color: var(--text-muted);
}

.tool-card-progress-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.tool-card-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.tool-card-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Tags */
.tool-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tool-card-tag {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

/* Legacy support */
.tool-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tool-card-category {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: capitalize;
}

.tool-card-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.tool-card-icon {
  font-size: 48px;
  line-height: 1;
}

/* Tool Modal */
.tool-modal {
  max-width: 560px;
}

.tool-modal .form-row {
  display: flex;
  gap: 16px;
}

.tool-modal .form-group {
  margin-bottom: 20px;
  flex: 1;
}

.tool-modal .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tool-modal .form-group input[type="text"],
.tool-modal .form-group textarea,
.tool-modal .form-group select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
  box-sizing: border-box;
}

.tool-modal .form-group input[type="text"]:focus,
.tool-modal .form-group textarea:focus,
.tool-modal .form-group select:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(6, 182, 212, 0.05);
}

.tool-modal .form-group input[type="text"]::placeholder,
.tool-modal .form-group textarea::placeholder {
  color: var(--text-muted);
}

.tool-modal .form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.tool-modal .form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a8b0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.tool-modal .form-group select option {
  background: var(--bg-secondary);
  color: var(--text);
  padding: 8px;
}

/* Icon input special styling */
.tool-modal .form-group input#tool-icon {
  text-align: center;
  font-size: 24px;
  padding: 8px;
}

/* Tool Detail Modal */
#tool-detail-overlay {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
}

/* Tool Detail Modal - Redesigned */
.tool-detail-modal {
  max-width: 960px;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Header */
.tool-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.tool-detail-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tool-detail-icon {
  font-size: 28px;
  line-height: 1;
}

.tool-detail-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.tool-detail-status-badge {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tool-detail-status-badge[data-status="idea"] {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.tool-detail-status-badge[data-status="mvp"] {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.tool-detail-status-badge[data-status="development"] {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.tool-detail-status-badge[data-status="working"] {
  background: rgba(6, 182, 212, 0.15);
  color: #06b6d4;
}

.tool-detail-status-badge[data-status="finished"] {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.tool-detail-status-badge[data-status="parked"] {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
}

.tool-detail-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-right: 8px;
}

.tool-detail-tag {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

.tool-detail-add-tag-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tool-detail-add-tag-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  border-style: solid;
}

.tool-detail-action-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tool-detail-action-btn:hover {
  background: var(--bg-input);
  color: var(--text);
  border-color: var(--text-muted);
}

.tool-detail-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: #ef4444;
}

.tool-detail-action-btn svg {
  width: 15px;
  height: 15px;
}

/* Body: Two-column layout */
.tool-detail-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  background: var(--bg-primary);
}

.tool-detail-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tool-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Summary Card with gradient border */
.tool-detail-summary-card {
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #06b6d4, #a855f7) 1;
}

.tool-detail-summary-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

/* Cards */
.tool-detail-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.tool-detail-card h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
}

.tool-detail-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}

.tool-detail-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tool-detail-card-header h3 {
  margin: 0;
}

.tool-detail-add-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tool-detail-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  border-style: solid;
}

.tool-detail-add-btn svg {
  width: 13px;
  height: 13px;
}

/* Progress bar */
.tool-detail-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tool-detail-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}

.tool-detail-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #22c55e);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.tool-detail-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
}

/* Hero Image Upload */
.tool-hero-upload {
  position: relative;
}

.tool-hero-preview {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/10;
}

.tool-hero-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool-hero-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}

.tool-hero-preview:hover .tool-hero-remove {
  opacity: 1;
}

.tool-hero-remove:hover {
  background: #ef4444;
}

.tool-hero-remove svg {
  width: 14px;
  height: 14px;
}

.tool-hero-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  aspect-ratio: 16/10;
}

.tool-hero-dropzone:hover {
  border-color: var(--primary);
  background: rgba(6, 182, 212, 0.05);
}

.tool-hero-dropzone svg {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  opacity: 0.5;
}

.tool-hero-dropzone span {
  font-size: 12px;
  color: var(--text-muted);
}

/* Links */
.tool-detail-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tech Stack */
.tool-detail-tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-detail-tech-badge {
  padding: 6px 12px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 6px;
  font-size: 12px;
  color: var(--primary);
}

/* URLs */
.tool-detail-urls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-detail-url-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s ease;
}

.tool-detail-url-link:hover {
  background: var(--bg-card);
}

.tool-detail-url-link svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.tool-detail-url-link span {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Checklist */
.tool-detail-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.tool-checklist-item:hover {
  background: var(--bg-card);
}

.tool-checklist-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.tool-checklist-checkbox:hover {
  border-color: var(--primary);
}

.tool-checklist-checkbox.checked {
  background: var(--primary);
  border-color: var(--primary);
}

.tool-checklist-checkbox.checked svg {
  width: 12px;
  height: 12px;
  color: #000;
}

.tool-checklist-text {
  font-size: 14px;
  color: var(--text);
  flex: 1;
}

.tool-checklist-item.completed .tool-checklist-text {
  color: var(--text-muted);
  text-decoration: line-through;
}

.tool-checklist-delete {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}

.tool-checklist-item:hover .tool-checklist-delete {
  opacity: 1;
}

.tool-checklist-delete:hover {
  color: #ef4444;
}

.tool-checklist-delete svg {
  width: 14px;
  height: 14px;
}

.tool-checklist-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Resource Links */
.tool-detail-resource-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-resource-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s ease;
}

.tool-resource-link:hover {
  background: var(--bg-card);
}

.tool-resource-link-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 182, 212, 0.1);
  border-radius: 6px;
  flex-shrink: 0;
}

.tool-resource-link-icon svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.tool-resource-link-info {
  flex: 1;
  min-width: 0;
}

.tool-resource-link-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-resource-link-type {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: capitalize;
}

.tool-resource-link-delete {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}

.tool-resource-link:hover .tool-resource-link-delete {
  opacity: 1;
}

.tool-resource-link-delete:hover {
  color: #ef4444;
}

.tool-resource-link-delete svg {
  width: 14px;
  height: 14px;
}

.tool-resource-links-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 13px;
}

/* GUI References */
.tool-detail-references {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.tool-reference-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--bg-input);
}

.tool-reference-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool-reference-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
}

.tool-reference-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}

.tool-reference-item:hover .tool-reference-delete {
  opacity: 1;
}

.tool-reference-delete:hover {
  background: #ef4444;
}

.tool-reference-delete svg {
  width: 14px;
  height: 14px;
}

.tool-references-empty {
  aspect-ratio: 16/10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  padding: 20px;
}

.tool-references-empty svg {
  width: 32px;
  height: 32px;
  color: var(--text-muted);
  opacity: 0.4;
  margin-bottom: 8px;
}

.tool-references-empty span {
  font-size: 12px;
  color: var(--text-muted);
}

/* Tool Detail Footer */
.tool-detail-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.tool-status-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.tool-park-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tool-park-btn:hover {
  background: rgba(100, 116, 139, 0.15);
  border-color: #64748b;
  color: #94a3b8;
}

.tool-park-btn.active {
  background: rgba(100, 116, 139, 0.2);
  border-color: #64748b;
  color: #94a3b8;
}

.tool-park-btn svg {
  flex-shrink: 0;
}

.tool-status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.tool-status-step:hover {
  color: var(--text);
}

.tool-status-step:hover .step-dot {
  background: var(--text-secondary);
  transform: scale(1.2);
}

.step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--bg-primary);
  transition: all 0.2s ease;
}

.step-label {
  font-weight: 500;
  letter-spacing: 0.3px;
}

.step-connector {
  width: 40px;
  height: 2px;
  background: var(--border);
  transition: background 0.2s ease;
}

/* Active state */
.tool-status-step.active .step-dot {
  background: var(--primary);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}

.tool-status-step.active .step-label {
  color: var(--primary);
}

/* Completed state */
.tool-status-step.completed .step-dot {
  background: #22c55e;
}

.tool-status-step.completed .step-label {
  color: #22c55e;
}

.step-connector.completed {
  background: #22c55e;
}

/* Legacy class support */
.tool-status-progression {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
}

.status-connector {
  display: none;
}

/* Tool Mini Modal */
.tool-mini-modal {
  max-width: 420px;
}

.tool-mini-modal .form-group {
  margin-bottom: 20px;
}

.tool-mini-modal .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tool-mini-modal .form-group input[type="text"],
.tool-mini-modal .form-group input[type="url"],
.tool-mini-modal .form-group textarea,
.tool-mini-modal .form-group select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
  box-sizing: border-box;
}

.tool-mini-modal .form-group input[type="text"]:focus,
.tool-mini-modal .form-group input[type="url"]:focus,
.tool-mini-modal .form-group textarea:focus,
.tool-mini-modal .form-group select:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(6, 182, 212, 0.05);
}

.tool-mini-modal .form-group input::placeholder,
.tool-mini-modal .form-group textarea::placeholder {
  color: var(--text-muted);
}

.tool-mini-modal .form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a8b0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.tool-mini-modal .form-group select option {
  background: var(--bg-secondary);
  color: var(--text);
  padding: 8px;
}

/* Tag Selector Modal */
.tool-tag-modal {
  max-width: 400px;
}

.tool-tag-existing {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 0;
}

.tool-tag-existing:empty::after {
  content: 'No existing tags yet';
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

.tool-tag-option {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.tool-tag-option:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tool-tag-option.selected {
  border-width: 2px;
  transform: scale(1.05);
}

.tool-tag-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

.tool-tag-divider::before,
.tool-tag-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.tool-tag-divider span {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#tool-tag-new {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  transition: all 0.15s ease;
}

#tool-tag-new:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

#tool-tag-new::placeholder {
  color: var(--text-muted);
}

/* Tools Button Style */
.tools-btn {
  background: rgba(6, 182, 212, 0.1) !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
}

.tools-btn:hover {
  background: rgba(6, 182, 212, 0.2) !important;
  border-color: var(--primary) !important;
}

.tools-btn svg {
  color: var(--primary);
}

/* Tools Settings Button */
.tools-settings-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tools-settings-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--primary);
  color: var(--primary);
}

.tools-settings-btn svg {
  width: 20px;
  height: 20px;
}

/* Tools Management Modal */
.tools-manage-modal {
  max-width: 800px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.tools-manage-body {
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.tools-manage-list {
  display: flex;
  flex-direction: column;
}

.tools-manage-item {
  display: grid;
  grid-template-columns: 40px 1fr 140px 120px 100px 40px;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.tools-manage-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.tools-manage-item:last-child {
  border-bottom: none;
}

.tools-manage-icon {
  font-size: 24px;
  text-align: center;
}

.tools-manage-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tools-manage-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tools-manage-summary {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tools-manage-tags {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tools-manage-tags-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tools-manage-tags-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}

.tools-manage-tags-input:focus {
  outline: none;
  border-color: var(--primary);
}

.tools-manage-tags-input::placeholder {
  color: var(--text-muted);
}

.tools-manage-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tools-manage-progress-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tools-manage-progress-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tools-manage-progress-input {
  width: 50px;
  padding: 6px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  text-align: center;
}

.tools-manage-progress-input:focus {
  outline: none;
  border-color: var(--primary);
}

.tools-manage-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}

.tools-manage-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.2s ease;
}

.tools-manage-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tools-manage-status-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tools-manage-status-select {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a8a8b0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}

.tools-manage-status-select:focus {
  outline: none;
  border-color: var(--primary);
}

.tools-manage-status-select option {
  background: var(--bg-secondary);
  color: var(--text);
}

.tools-manage-actions {
  display: flex;
  justify-content: center;
}

.tools-manage-delete-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tools-manage-delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.tools-manage-delete-btn svg {
  width: 16px;
  height: 16px;
}

.tools-manage-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

/* Tools Manage Header Row */
.tools-manage-header {
  display: grid;
  grid-template-columns: 40px 1fr 140px 120px 100px 40px;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tools-manage-header span:first-child {
  text-align: center;
}

/* Responsive for Tools Manage Modal */
@media (max-width: 768px) {
  .tools-manage-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tools-manage-header {
    display: none;
  }

  .tools-manage-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .tools-manage-icon {
    display: none;
  }

  .tools-manage-info {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .tools-manage-tags,
  .tools-manage-progress,
  .tools-manage-status {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .tools-manage-tags-label,
  .tools-manage-progress-label,
  .tools-manage-status-label {
    min-width: 60px;
  }

  .tools-manage-tags-input,
  .tools-manage-status-select {
    flex: 1;
  }

  .tools-manage-actions {
    justify-content: flex-end;
  }
}

/* ============================================
   CONTENT FORMATS SYSTEM
   ============================================ */

/* Formats View */
.formats-view {
  display: none;
  flex-direction: column;
  gap: 24px;
  padding: 0 8px;
}

.formats-view.active {
  display: flex;
}

/* Formats Header */
.formats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.formats-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.formats-filter-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.formats-filter-btn:hover {
  background: var(--bg-card);
  color: var(--text);
}

.formats-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #000;
}

.formats-add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.formats-add-btn:hover {
  background: var(--primary-hover);
}

.formats-add-btn svg {
  width: 16px;
  height: 16px;
}

/* Formats Grid */
.formats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

/* Format Card */
.format-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.format-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.format-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.format-card-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.format-card-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.format-card-status[data-status="active"] {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.format-card-status[data-status="testing"] {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.format-card-status[data-status="considering"] {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.format-card-status[data-status="paused"] {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

.format-card-status[data-status="archived"] {
  background: rgba(75, 85, 99, 0.15);
  color: #6b7280;
}

.format-card-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.format-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.format-card-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.format-card-meta-item svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.format-card-meta-item.format-ideas-count {
  color: #a855f7;
}

.format-card-meta-item.format-ideas-count svg {
  opacity: 1;
  stroke: #a855f7;
}

.format-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.format-card-platforms {
  display: flex;
  gap: 6px;
}

.format-card-platform {
  padding: 3px 8px;
  background: rgba(6, 182, 212, 0.1);
  border-radius: 4px;
  font-size: 11px;
  color: var(--primary);
}

.format-card-tags {
  display: flex;
  gap: 6px;
}

.format-card-tag {
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Formats Empty State */
.formats-empty {
  text-align: center;
  padding: 60px 20px;
}

.formats-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: rgba(6, 182, 212, 0.1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.formats-empty-icon svg {
  width: 40px;
  height: 40px;
  color: var(--primary);
}

.formats-empty h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.formats-empty p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px;
}

.formats-empty-btn {
  padding: 12px 24px;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.formats-empty-btn:hover {
  background: var(--primary-hover);
}

/* Format Modal */
.format-modal {
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
}

.format-modal .form-row {
  display: flex;
  gap: 16px;
}

.format-modal .form-group {
  margin-bottom: 20px;
  flex: 1;
}

.format-modal .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.format-modal .form-group input[type="text"],
.format-modal .form-group textarea,
.format-modal .form-group select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
  box-sizing: border-box;
}

.format-modal .form-group input[type="text"]:focus,
.format-modal .form-group textarea:focus,
.format-modal .form-group select:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(6, 182, 212, 0.05);
}

.format-modal .form-group input[type="text"]::placeholder,
.format-modal .form-group textarea::placeholder {
  color: var(--text-muted);
}

.format-modal .form-group textarea {
  min-height: 60px;
  resize: vertical;
}

.format-modal .form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a8b0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.format-modal .form-group select option {
  background: var(--bg-secondary);
  color: var(--text);
}

/* Format Detail Modal */
.format-detail-modal {
  max-width: 900px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.format-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 16px;
}

.format-detail-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.format-detail-status-badge {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.format-detail-status-badge[data-status="active"] {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.format-detail-status-badge[data-status="testing"] {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.format-detail-status-badge[data-status="considering"] {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}

.format-detail-status-badge[data-status="paused"] {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

.format-detail-status-badge[data-status="archived"] {
  background: rgba(75, 85, 99, 0.2);
  color: #6b7280;
}

.format-detail-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.format-detail-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.format-detail-action-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.format-detail-action-btn:hover {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--text-secondary);
}

.format-detail-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: #ef4444;
}

.format-detail-action-btn svg {
  width: 16px;
  height: 16px;
}

/* Format Detail Body */
.format-detail-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.format-detail-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.format-detail-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.format-detail-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.format-detail-section p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}

.format-detail-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.format-detail-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.format-detail-add-btn:hover {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--primary);
}

.format-detail-add-btn svg {
  width: 14px;
  height: 14px;
}

/* Format Creators List */
.format-creators-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.format-creator-card {
  padding: 16px;
  background: var(--bg-input);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.format-creator-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.format-creator-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.format-creator-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.format-creator-handle {
  font-size: 13px;
  color: var(--primary);
}

.format-creator-platform {
  font-size: 12px;
  color: var(--text-muted);
}

.format-creator-actions {
  display: flex;
  gap: 4px;
}

.format-creator-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.format-creator-action-btn:hover {
  background: var(--bg-card);
  color: var(--text);
}

.format-creator-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.format-creator-action-btn svg {
  width: 14px;
  height: 14px;
}

.format-creator-noticed {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.format-creator-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-size: 13px;
  text-decoration: none;
  margin-top: 4px;
}

.format-creator-link:hover {
  text-decoration: underline;
}

.format-creator-link svg {
  width: 14px;
  height: 14px;
}

.format-creators-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-input);
  border-radius: 10px;
}

/* Format Detail Notes */
.format-detail-notes {
  min-height: 80px;
  padding: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  outline: none;
}

.format-detail-notes:empty:before {
  content: attr(placeholder);
  color: var(--text-muted);
}

.format-detail-notes:focus {
  border-color: var(--primary);
  background: rgba(6, 182, 212, 0.05);
}

/* Format Detail Sidebar */
.format-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.format-detail-meta {
  padding: 16px;
  background: var(--bg-input);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.format-detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.format-detail-meta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.format-detail-meta-value {
  font-size: 14px;
  color: var(--text);
}

.format-detail-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.format-detail-platform {
  padding: 4px 10px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 6px;
  font-size: 12px;
  color: var(--primary);
}

.format-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.format-detail-tag {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Format Status Section */
.format-detail-status-section {
  padding: 16px;
  background: var(--bg-input);
  border-radius: 10px;
}

.format-detail-status-section h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}

.format-status-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.format-status-btn {
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.format-status-btn:hover {
  background: var(--bg-card);
  color: var(--text);
}

.format-status-btn.active {
  border-color: var(--primary);
  background: rgba(6, 182, 212, 0.1);
  color: var(--primary);
}

/* Format Creator Modal */
.format-creator-modal {
  max-width: 500px;
}

.format-creator-modal .form-row {
  display: flex;
  gap: 16px;
}

.format-creator-modal .form-group {
  margin-bottom: 20px;
  flex: 1;
}

.format-creator-modal .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.format-creator-modal .form-group input[type="text"],
.format-creator-modal .form-group textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s;
  box-sizing: border-box;
}

.format-creator-modal .form-group input[type="text"]:focus,
.format-creator-modal .form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(6, 182, 212, 0.05);
}

.format-creator-modal .form-group input[type="text"]::placeholder,
.format-creator-modal .form-group textarea::placeholder {
  color: var(--text-muted);
}

.format-creator-modal .form-group textarea {
  min-height: 80px;
  resize: vertical;
}

/* Responsive for Formats */
@media (max-width: 900px) {
  .format-detail-body {
    grid-template-columns: 1fr;
  }

  .format-detail-sidebar {
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }

  .format-detail-meta,
  .format-detail-status-section {
    flex: 1;
    min-width: 200px;
  }
}

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

  .formats-header {
    flex-direction: column;
    align-items: stretch;
  }

  .formats-filters {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .format-modal .form-row,
  .format-creator-modal .form-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ============================================
   MOBILE RESPONSIVE - v11
   Based on mockup design for iPhone 17 Pro
   ============================================ */

/* ============================================
   RELEASE PIPELINE
   ============================================ */

/* Sub-navigation */
.music-subnav {
  display: flex;
  gap: 4px;
  margin-top: 12px;
}

.music-subnav-btn {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.music-subnav-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}

.music-subnav-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

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

.music-header .page-title-group h1 {
  margin-bottom: 0;
}

/* Countdown Section */
.release-countdown-section {
  margin-bottom: 24px;
}

.release-countdown-card {
  position: relative;
  width: 100%;
  min-height: 180px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.2s ease;
}

.release-countdown-card:hover {
  transform: scale(1.003);
}

/* Background image layer */
.release-countdown-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(12px);
  transform: scale(1.15);
  opacity: 0.6;
}

/* Fallback gradient when no image */
.release-countdown-bg:empty {
  background: linear-gradient(135deg, #2a1a4a 0%, #1a2a4a 50%, #1a3a4a 100%);
  filter: none;
  transform: none;
  opacity: 1;
}

/* Gradient overlay - dark on left, transparent on right */
.release-countdown-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15, 10, 25, 0.9) 0%, rgba(15, 10, 25, 0.7) 40%, rgba(15, 10, 25, 0.5) 100%);
}

/* Purple/blue music tint */
.release-countdown-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.15) 100%);
}

/* Edge glow frame */
.release-countdown-glow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow: inset 0 0 60px rgba(139, 92, 246, 0.15);
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(59, 130, 246, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

/* Content layer */
.release-countdown-content {
  position: relative;
  z-index: 1;
  padding: 24px;
  text-align: center;
}

.release-countdown-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.release-countdown-title {
  font-size: 22px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.98);
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.release-countdown-days {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.countdown-number {
  font-size: 52px;
  font-weight: 700;
  color: #a78bfa;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(139, 92, 246, 0.5);
}

.countdown-unit {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}

.release-countdown-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.release-countdown-btn {
  background: rgba(139, 92, 246, 0.25) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
  backdrop-filter: blur(4px);
}

.release-countdown-btn:hover {
  background: rgba(139, 92, 246, 0.35) !important;
}

/* Releases List */
.releases-group {
  margin-bottom: 32px;
}

.releases-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.releases-group-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.releases-group-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 10px;
}

.releases-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Release Card */
.release-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.release-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.release-card-artwork {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.release-card-artwork svg {
  width: 100%;
  height: 100%;
}

.release-card-info {
  flex: 1;
  min-width: 0;
}

.release-card-title {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 4px;
}

.release-card-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
}

.release-card-type {
  text-transform: capitalize;
}

.release-card-progress {
  margin-top: 8px;
}

.release-card-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.release-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #3b82f6);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.release-card-progress-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.release-card-progress-text.overdue {
  color: #f59e0b;
}

.release-card-date {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.release-card-date.soon {
  color: #8b5cf6;
  font-weight: 500;
}

/* Release Detail */
.release-back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 16px;
}

.release-back-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

.release-back-btn svg {
  width: 18px;
  height: 18px;
}

.release-detail-header {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.release-detail-artwork {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
}

.release-detail-artwork svg {
  width: 100%;
  height: 100%;
}

.release-detail-info {
  flex: 1;
}

.release-detail-title {
  font-size: 28px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 8px;
}

.release-detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
}

.release-detail-type {
  text-transform: capitalize;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 12px;
}

.release-detail-countdown {
  color: #8b5cf6;
  font-weight: 500;
}

.release-detail-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.release-status-badge {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.release-status-badge.planning { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
.release-status-badge.production { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.release-status-badge.pre-release { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.release-status-badge.released { background: rgba(34, 197, 94, 0.2); color: #22c55e; }

.release-detail-distributor {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

.release-detail-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.release-track-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.release-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Progress Section */
.release-progress-section {
  margin-bottom: 24px;
}

.release-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.release-progress-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}

.release-progress-percent {
  font-size: 14px;
  font-weight: 600;
  color: #8b5cf6;
}

.release-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.release-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #3b82f6);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Phases/Checklist */
.release-phases {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.release-phase {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
}

.release-phase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}

.release-phase-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

.release-phase-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.release-phase-toggle {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease;
}

.release-phase.expanded .release-phase-toggle {
  transform: rotate(90deg);
}

.release-phase-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.release-phase-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.release-phase-check {
  width: 20px;
  height: 20px;
  color: #22c55e;
  opacity: 0;
}

.release-phase.complete .release-phase-check {
  opacity: 1;
}

.release-phase-tasks {
  display: none;
  padding: 0 16px 16px;
}

.release-phase.expanded .release-phase-tasks {
  display: block;
}

.release-task {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.release-task:last-child {
  border-bottom: none;
}

.release-task-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.15s ease;
}

.release-task-checkbox:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.release-task-checkbox.checked {
  background: #22c55e;
  border-color: #22c55e;
}

.release-task-checkbox svg {
  width: 12px;
  height: 12px;
  color: white;
  opacity: 0;
}

.release-task-checkbox.checked svg {
  opacity: 1;
}

.release-task-content {
  flex: 1;
}

.release-task-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.release-task.completed .release-task-title {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
}

.release-task-due {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

.release-task-due.overdue {
  color: #f59e0b;
}

/* Notes Section */
.release-notes-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
}

.release-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.release-notes-header h3 {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.release-notes-content {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

.release-notes-empty {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

/* Track Selector in Modal */
.track-selector {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.track-selector .form-input {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.track-selector-list {
  max-height: 280px;
  overflow-y: auto;
}

.track-selector-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.track-selector-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.track-selector-item.selected {
  background: rgba(139, 92, 246, 0.1);
}

.track-selector-item-art {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
}

.track-selector-item-art svg {
  width: 100%;
  height: 100%;
}

.track-selector-item-info {
  flex: 1;
}

.track-selector-item-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.track-selector-item-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.track-selector-item-check {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.track-selector-item.selected .track-selector-item-check {
  background: #8b5cf6;
  border-color: #8b5cf6;
}

.track-selector-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 40px;
}

.track-selector-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  font-size: 12px;
  color: #8b5cf6;
}

.track-selector-chip-remove {
  width: 14px;
  height: 14px;
  cursor: pointer;
  opacity: 0.7;
}

.track-selector-chip-remove:hover {
  opacity: 1;
}

/* Release Modal */
.release-modal {
  max-width: 560px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.btn-danger-subtle {
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.3);
}

.btn-danger-subtle:hover {
  background: rgba(244, 63, 94, 0.1);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
}

.btn-ghost:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Empty State for Releases */
.releases-empty {
  text-align: center;
  padding: 48px 24px;
  color: rgba(255, 255, 255, 0.4);
}

.releases-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.releases-empty-text {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}

.releases-empty-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 16px;
}

/* ============================================
   MUSIC CONCEPTS TAB
   ============================================ */

.concepts-container {
  padding: 24px;
}

.concepts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.concepts-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.concepts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.concept-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.concept-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.concept-card-header {
  width: 100%;
  height: 120px;
  background: linear-gradient(135deg, #f97066 0%, #ef4444 50%, #dc2626 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.concept-card-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5v20M15 25l15-20M45 25l-15-20M10 35h40M15 45l15-10M45 45l-15-10M30 35v20' stroke='rgba(255,255,255,0.1)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  opacity: 0.5;
}

.concept-card-icon {
  font-size: 48px;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.concept-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.concept-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.concept-card-description {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.concept-card-tracks {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: auto;
}

.concept-card-tracks svg {
  width: 14px;
  height: 14px;
  color: #f97066;
}

.concept-card-track-count {
  color: var(--text-secondary);
}

/* Concept Modal */
.concept-modal {
  max-width: 560px;
}

.concept-modal .form-group {
  margin-bottom: 20px;
}

.concept-modal .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.concept-modal .form-group input[type="text"],
.concept-modal .form-group textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.concept-modal .form-group input[type="text"]:focus,
.concept-modal .form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.concept-modal .form-group textarea {
  min-height: 80px;
  resize: vertical;
}

/* Track Selector */
.concept-track-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.concept-track-selector:empty::before {
  content: 'No tracks available in Release Pipeline';
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

.concept-track-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.concept-track-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.concept-track-item.selected {
  border-color: var(--primary);
  background: rgba(6, 182, 212, 0.1);
}

.concept-track-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.concept-track-item.selected .concept-track-checkbox {
  background: var(--primary);
  border-color: var(--primary);
}

.concept-track-checkbox svg {
  width: 12px;
  height: 12px;
  color: #fff;
  opacity: 0;
}

.concept-track-item.selected .concept-track-checkbox svg {
  opacity: 1;
}

.concept-track-info {
  flex: 1;
  min-width: 0;
}

.concept-track-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.concept-track-stage {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Empty State */
.concepts-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
}

.concepts-empty-icon {
  width: 64px;
  height: 64px;
  color: var(--text-muted);
  margin-bottom: 20px;
  opacity: 0.5;
}

.concepts-empty-text {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.concepts-empty-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* ============================================
   MUSICAL REFERENCES LIBRARY
   ============================================ */

.reflib-header {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border);
}

.reflib-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.reflib-header-title-group {
  display: flex;
  flex-direction: column;
}

.reflib-header-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.reflib-header-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.5px;
  margin: 0;
}

.reflib-header-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 6px;
}

.reflib-header-subtitle span {
  color: var(--text-secondary);
}

.reflib-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Search */
.reflib-search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.reflib-search-container svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.reflib-search-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px 10px 38px;
  color: var(--text);
  font-size: 13px;
  width: 240px;
  transition: all 0.2s;
}

.reflib-search-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  width: 300px;
}

.reflib-search-input::placeholder {
  color: var(--text-muted);
}

/* Filter Section */
.reflib-filter-section {
  padding: 0 24px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.reflib-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 12px;
}

.reflib-filter-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.reflib-filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.reflib-filter-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.reflib-filter-toggle-btn.active {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  color: var(--primary);
}

.reflib-filter-toggle-btn svg {
  width: 14px;
  height: 14px;
}

.reflib-filter-badge {
  background: var(--primary);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.reflib-active-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.reflib-active-filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  animation: reflib-chipIn 0.15s ease;
}

@keyframes reflib-chipIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.reflib-active-filter-chip .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.reflib-active-filter-chip .chip-remove {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.1s;
  padding: 0;
}

.reflib-active-filter-chip .chip-remove:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.reflib-active-filter-chip .chip-remove svg {
  width: 10px;
  height: 10px;
}

.reflib-clear-filters-btn {
  padding: 6px 12px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.reflib-clear-filters-btn:hover {
  color: #ef4444;
}

/* Filter Panel Dropdown */
.reflib-filter-panel {
  display: none;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  animation: reflib-panelSlide 0.2s ease;
}

.reflib-filter-panel.open {
  display: block;
}

@keyframes reflib-panelSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.reflib-filter-panel-section {
  margin-bottom: 16px;
}

.reflib-filter-panel-section:last-child {
  margin-bottom: 0;
}

.reflib-filter-panel-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.reflib-filter-panel-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.reflib-filter-panel-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.reflib-filter-panel-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

.reflib-filter-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reflib-filter-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.reflib-filter-tag:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}

.reflib-filter-tag.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

.reflib-filter-tag .tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.7;
}

.reflib-filter-tag.active .tag-dot {
  opacity: 1;
}

/* Main Content */
.reflib-main-content {
  padding: 24px;
}

.reflib-results-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.reflib-results-count {
  font-size: 13px;
  color: var(--text-muted);
}

.reflib-results-count span {
  color: var(--text);
  font-weight: 600;
}

/* Reference Grid */
.reflib-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* Reference Card */
.reflib-reference-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.reflib-reference-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.reflib-card-thumbnail {
  aspect-ratio: 16/9;
  background: var(--bg-hover);
  position: relative;
  overflow: hidden;
}

.reflib-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.reflib-reference-card:hover .reflib-card-thumbnail img {
  transform: scale(1.05);
}

.reflib-card-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-hover), var(--bg-card));
}

.reflib-card-thumbnail-placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
  opacity: 0.5;
}

.reflib-card-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.reflib-reference-card:hover .reflib-card-play-overlay {
  opacity: 1;
}

.reflib-play-btn {
  width: 56px;
  height: 56px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.5);
  transform: scale(0.9);
  transition: transform 0.2s;
}

.reflib-reference-card:hover .reflib-play-btn {
  transform: scale(1);
}

.reflib-play-btn svg {
  width: 24px;
  height: 24px;
  color: white;
  margin-left: 3px;
}

.reflib-card-source-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(8px);
}

.reflib-source-youtube { background: rgba(255, 0, 0, 0.85); color: white; }
.reflib-source-spotify { background: rgba(30, 215, 96, 0.85); color: white; }
.reflib-source-soundcloud { background: rgba(255, 85, 0, 0.85); color: white; }
.reflib-source-other { background: rgba(255, 255, 255, 0.15); color: white; }

.reflib-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.reflib-reference-card:hover .reflib-card-actions {
  opacity: 1;
}

.reflib-card-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.reflib-card-action-btn:hover {
  background: var(--primary);
  color: white;
}

.reflib-card-action-btn.delete:hover {
  background: #ef4444;
}

.reflib-card-action-btn.favorite-btn.active {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.3);
}

.reflib-card-action-btn.favorite-btn.active:hover {
  background: rgba(244, 63, 94, 0.5);
}

.reflib-card-action-btn svg {
  width: 16px;
  height: 16px;
}

.reflib-card-info {
  padding: 16px;
}

.reflib-card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reflib-card-artist {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.reflib-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.reflib-card-tag {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.reflib-card-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Add Card */
.reflib-add-card {
  border: 2px dashed var(--border);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 14px;
}

.reflib-add-card:hover {
  border-color: var(--primary);
  background: rgba(6, 182, 212, 0.05);
}

.reflib-add-card svg {
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.reflib-add-card:hover svg {
  color: var(--primary);
}

.reflib-add-card span {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

.reflib-add-card:hover span {
  color: var(--text-secondary);
}

/* Empty State */
.reflib-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
  grid-column: 1 / -1;
}

.reflib-empty-state-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  color: var(--text-muted);
  opacity: 0.4;
}

.reflib-empty-state-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.reflib-empty-state-text {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 400px;
}

/* Tag Selector */
.reflib-tag-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reflib-tag-option {
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.reflib-tag-option:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
}

.reflib-tag-option.selected {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--primary);
  color: var(--primary);
}

/* Detail Modal */
.reflib-detail-embed {
  aspect-ratio: 16/9;
  background: var(--bg-primary);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.reflib-detail-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.reflib-detail-info {
  margin-bottom: 20px;
}

.reflib-detail-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}

.reflib-detail-artist {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.reflib-detail-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.reflib-detail-note {
  padding: 16px;
  background: var(--bg-hover);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.reflib-detail-note-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.reflib-detail-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* Settings Modal Styles */
.reflib-settings-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.reflib-settings-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.reflib-settings-section-header {
  margin-bottom: 16px;
}

.reflib-settings-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

.reflib-settings-section-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.reflib-settings-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 40px;
}

.reflib-settings-tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.reflib-settings-tag-item .tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.reflib-settings-tag-item .tag-name {
  font-weight: 500;
}

.reflib-settings-tag-item .tag-delete {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.15s;
  margin-left: 4px;
}

.reflib-settings-tag-item .tag-delete:hover {
  background: #ef4444;
  color: white;
}

.reflib-settings-tag-item .tag-delete svg {
  width: 12px;
  height: 12px;
}

.reflib-settings-tag-item.default-tag .tag-delete {
  display: none;
}

.reflib-settings-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.reflib-settings-add-input {
  flex: 1;
}

.reflib-settings-color-input {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
  cursor: pointer;
  padding: 4px;
}

.reflib-settings-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.reflib-settings-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
  .release-detail-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .release-detail-artwork {
    width: 120px;
    height: 120px;
  }
  
  .release-detail-meta {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .release-detail-status {
    justify-content: center;
  }
  
  .release-detail-tracks {
    justify-content: center;
  }
  
  .release-detail-actions {
    flex-direction: row;
    justify-content: center;
    margin-top: 16px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  
  /* ============================================
     GLOBAL RESETS
     ============================================ */
  html, body {
    overflow-x: hidden !important;
  }
  
  .tab-content {
    padding: 16px !important;
  }

  /* ============================================
     HIDE ELEMENTS ON MOBILE
     ============================================ */
  .nav-item[data-tab="oracle"],
  .nav-pins-container,
  .ambient-player-container,
  #focus-lock-btn,
  .nav-bg-logo .logo-text {
    display: none !important;
  }

  /* ============================================
     NAV BAR - Compact
     ============================================ */
  .nav-bg-bar {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  
  .nav-pill {
    gap: 2px !important;
    padding: 3px !important;
  }
  
  .nav-item {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
  }
  
  .nav-item svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* ============================================
     TASKS PAGE
     ============================================ */
  
  /* Tasks Navigation - Stack vertically */
  .tasks-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  
  /* Tabs row */
  .tasks-tabs {
    display: flex !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  
  .tasks-tabs::-webkit-scrollbar {
    display: none !important;
  }
  
  .tasks-tab {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  
  /* Actions row: [Filter] [Add] [____Search____] */
  .tasks-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  .tasks-actions .filter-dropdown-container {
    flex-shrink: 0 !important;
  }
  
  .tasks-actions .add-project-btn {
    flex-shrink: 0 !important;
  }
  
  .tasks-actions .search-container {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .tasks-actions .search-input {
    width: 100% !important;
  }

  /* ============================================
     TODAY'S FOCUS CARD
     ============================================ */
  .focus-zone {
    margin: 0 -16px 20px -16px !important;
    width: calc(100% + 32px) !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }
  
  .focus-content {
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Header row: label + date badge */
  .focus-header-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
  }
  
  .focus-title-group {
    flex: 1 !important;
  }
  
  .focus-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  
  .focus-badge span {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: rgba(255,255,255,0.5) !important;
  }
  
  .focus-main-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }
  
  .focus-subtitle {
    font-size: 13px !important;
    color: rgba(255,255,255,0.5) !important;
    margin-bottom: 16px !important;
  }
  
  .focus-date-badge {
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }
  
  /* Task items inside focus card */
  .focus-tasks-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  
  .focus-task-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
  }
  
  .focus-task-checkbox {
    width: 22px !important;
    height: 22px !important;
    border: 2px solid rgba(255,255,255,0.25) !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }
  
  .focus-task-checkbox.completed {
    background: rgba(34,197,94,0.3) !important;
    border-color: #22c55e !important;
  }
  
  .focus-task-info {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .focus-task-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.9) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
  
  .focus-task-project,
  .focus-task-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 2px !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.45) !important;
  }
  
  .focus-task-priority {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  
  /* Hide due date text on mobile */
  .focus-task-due {
    display: none !important;
  }
  
  /* Add task row */
  .focus-add-task,
  .add-task-inline {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    color: rgba(255,255,255,0.4) !important;
    font-size: 13px !important;
  }
  
  /* Progress footer */
  .focus-footer-row {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }
  
  .focus-progress-bar-container {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .focus-progress-track {
    flex: 1 !important;
    height: 6px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
  }
  
  .focus-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #06b6d4, #22c55e) !important;
    border-radius: 3px !important;
  }
  
  .focus-progress-labels {
    display: flex !important;
    gap: 4px !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.5) !important;
    white-space: nowrap !important;
  }
  
  /* Hide stats pills on mobile - just show progress bar */
  .focus-stats-pills {
    display: none !important;
  }

  /* ============================================
     TIMELINE / COMING UP SECTION
     ============================================ */
  .timeline-section {
    margin-top: 8px !important;
  }
  
  .timeline-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
  }
  
  .timeline-section-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(255,255,255,0.35) !important;
  }
  
  .timeline-task-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
  }

  /* ============================================
     PROJECTS PAGE
     ============================================ */
  
  /* North Star Banner */
  .north-star-banner {
    margin: 0 -16px 20px -16px !important;
    width: calc(100% + 32px) !important;
    padding: 20px 16px !important;
    border-radius: 20px !important;
    min-height: auto !important;
  }
  
  .flip-card,
  .flip-card-face {
    min-height: auto !important;
    height: auto !important;
  }
  
  .north-star-content {
    display: block !important;
    padding: 0 !important;
  }
  
  .north-star-left {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  
  .north-star-icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }
  
  .north-star-icon svg {
    width: 28px !important;
    height: 28px !important;
  }
  
  .north-star-info {
    flex: 1 !important;
  }
  
  .north-star-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  
  .north-star-subtitle {
    font-size: 13px !important;
    color: rgba(255,255,255,0.5) !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
  }
  
  /* Stats row */
  .north-star-center {
    display: none !important;
  }
  
  .north-star-right {
    display: block !important;
  }
  
  .north-star-stats {
    display: flex !important;
    gap: 20px !important;
  }
  
  .ns-stat {
    text-align: center !important;
  }
  
  .ns-stat-value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.95) !important;
  }
  
  .ns-stat-label {
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: rgba(255,255,255,0.4) !important;
  }
  
  /* Days remaining - show inline */
  .days-remaining {
    font-size: 20px !important;
    font-weight: 700 !important;
  }
  
  .days-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
  }

  /* Projects Navigation */
  .projects-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  
  .projects-tabs {
    display: flex !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  
  .projects-tabs::-webkit-scrollbar {
    display: none !important;
  }
  
  .projects-tab {
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  
  /* Actions row */
  .projects-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  .projects-actions .search-container {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Project Cards */
  .project-list,
  .alignment-section .project-items,
  .domain-section .project-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .project-item {
    display: flex !important;
    gap: 14px !important;
    padding: 16px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 14px !important;
  }
  
  .project-item .project-thumb {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }
  
  .project-item .project-info {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .project-item .project-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .project-item .project-meta {
    font-size: 12px !important;
    color: rgba(255,255,255,0.4) !important;
    margin-bottom: 8px !important;
  }
  
  .project-item .project-stats {
    display: flex !important;
    gap: 16px !important;
    font-size: 11px !important;
  }
  
  /* Hide progress bar, show text only */
  .project-item .project-progress-bar {
    display: none !important;
  }
  
  .project-item .project-arrow {
    display: flex !important;
    align-items: center !important;
    color: rgba(255,255,255,0.2) !important;
    flex-shrink: 0 !important;
  }

  /* ============================================
     LIFE HUB PAGE
     ============================================ */
  
  .life-hub-dashboard {
    padding: 0 !important;
  }
  
  /* Header */
  .life-hub-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
  }
  
  .life-hub-header h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
  }
  
  .life-hub-header p {
    font-size: 13px !important;
    color: rgba(255,255,255,0.4) !important;
  }
  
  .life-hub-actions {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  
  .life-hub-actions .btn {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  /* Hide Journal and Sleep */
  .wellness-module-card[data-module="journal"],
  .wellness-module-card[data-module="sleep"] {
    display: none !important;
  }

  /* Wellness Modules - 2 column grid */
  .wellness-modules-section {
    margin-bottom: 20px !important;
  }
  
  .wellness-modules-section .section-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(255,255,255,0.35) !important;
    margin-bottom: 12px !important;
  }
  
  .wellness-modules-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  
  .wellness-module-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 16px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    text-align: center !important;
  }
  
  .wellness-module-card .wellness-module-icon {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
  }
  
  .wellness-module-card .wellness-module-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }
  
  .wellness-module-card .wellness-module-meta {
    font-size: 12px !important;
  }
  
  .wellness-module-card .wellness-module-arrow {
    display: none !important;
  }

  /* Balance Overview */
  .balance-section,
  .balance-overview-section {
    margin-top: 8px !important;
  }
  
  .wheel-card {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    padding: 20px !important;
  }
  
  .wheel-card canvas {
    max-width: 280px !important;
    max-height: 280px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  .wheel-score {
    text-align: center !important;
    margin-top: 16px !important;
  }
  
  .wheel-score-value {
    font-size: 40px !important;
    font-weight: 700 !important;
  }
  
  .wheel-score-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.4) !important;
  }

  /* ============================================
     FLOATING ELEMENTS
     ============================================ */
  .ideas-floating-btn,
  .ai-chat-toggle {
    position: fixed !important;
    bottom: 24px !important;
    right: 16px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    z-index: 100 !important;
  }
  
  /* Hide on Content tab */
  body.on-tab-ideas .ideas-floating-btn,
  body.on-tab-ideas .ai-chat-toggle {
    display: none !important;
  }

  /* Hide dock */
  .dock,
  .dock-trigger {
    display: none !important;
  }

  /* ============================================
     MODALS
     ============================================ */
  .modal-overlay {
    padding: 8px !important;
  }
  
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
  }

  /* Filter dropdown */
  .filter-dropdown {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* ============================================
   SMALL PHONES (375px and below)
   ============================================ */
@media (max-width: 375px) {
  .focus-main-title {
    font-size: 20px !important;
  }
  
  .north-star-title {
    font-size: 16px !important;
  }
  
  .life-hub-header h1 {
    font-size: 24px !important;
  }
  
  .wellness-modules-row {
    gap: 8px !important;
  }
  
  .wellness-module-card {
    padding: 16px 12px !important;
  }
}