:root {
      --primary: #6366f1;
      --primary-dark: #4f46e5;
      --gold: #f9cb00;
      --gold-dark: #d4ab00;
      --dark: #0f0f1a;
      --dark-deep: #0a0a14;
      --dark-surface: #1a1a2e;
      --dark-elevated: #252540;
      --dark-hover: #2d2d4a;
      --text: #ffffff;
      --text-secondary: rgba(255,255,255,0.7);
      --text-muted: rgba(255,255,255,0.5);
      --border: rgba(255,255,255,0.1);
      --border-color: rgba(255,255,255,0.1);
      --panel-bg: #1a1a2e;
      --hover-bg: #2d2d4a;
      --text-primary: #ffffff;
      --success: #10b981;
      --warning: #f59e0b;
      --error: #ef4444;
      --remodely-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    }

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

    body {
      font-family: 'Inter', -apple-system, sans-serif;
      background: var(--dark);
      color: var(--text);
      min-height: 100vh;
      overflow: hidden;
    }

    .app {
      height: 100vh;
      max-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Header - MUST stay at top */
    .header {
      background: linear-gradient(90deg, rgba(30, 30, 46, 0.98) 0%, rgba(26, 26, 38, 0.98) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 56px;
      min-height: 56px;
      max-height: 56px;
      flex-shrink: 0;
      flex-grow: 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      position: relative;
      z-index: 100;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .logo-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }

    .logo img {
      height: 28px;
    }

    .logo-divider {
      width: 1px;
      height: 24px;
      background: var(--border);
    }

    .powered-by {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .powered-by .remodely-badge {
      background: var(--remodely-gradient);
      padding: 3px 8px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 10px;
      color: white;
    }

    .project-input {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 12px;
      color: var(--text);
      font-size: 14px;
      font-weight: 500;
      min-width: 200px;
    }

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

    .header-center {
      display: flex;
      gap: 4px;
      background: var(--dark-elevated);
      padding: 4px;
      border-radius: 8px;
    }

    .view-btn {
      padding: 8px 16px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.2s;
    }

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

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

    .header-zoom-controls {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-left: 12px;
      padding-left: 12px;
      border-left: 1px solid var(--border);
    }

    .header-zoom-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.15s ease;
    }

    .header-zoom-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text);
    }

    .header-zoom-level {
      font-size: 11px;
      font-weight: 600;
      color: var(--gold);
      min-width: 40px;
      text-align: center;
      padding: 4px 6px;
      background: rgba(249, 203, 0, 0.1);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .header-zoom-level:hover {
      background: rgba(249, 203, 0, 0.2);
    }

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

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

    .user-menu-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-primary);
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      transition: all 0.2s;
    }

    .user-menu-btn:hover {
      background: var(--hover-bg);
      border-color: var(--gold);
    }

    .user-avatar-small {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold), #cca600);
      color: #1a1a2e;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 12px;
    }

    .user-name-display {
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .user-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 8px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      min-width: 200px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.2s;
      z-index: 9999;
      pointer-events: none;
    }

    .user-dropdown.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }

    .dropdown-item:first-child {
      border-radius: 10px 10px 0 0;
    }

    .dropdown-item:last-child {
      border-radius: 0 0 10px 10px;
    }

    .dropdown-item:hover {
      background: var(--hover-bg);
      color: var(--text-primary);
    }

    .dropdown-item svg {
      opacity: 0.7;
    }

    .dropdown-item:hover svg {
      opacity: 1;
    }

    .dropdown-divider {
      height: 1px;
      background: var(--border-color);
      margin: 4px 0;
    }

    .dropdown-item.logout-item {
      color: #ff6b6b;
    }

    .dropdown-item.logout-item:hover {
      background: rgba(255, 107, 107, 0.1);
      color: #ff6b6b;
    }

    .dropdown-item.google-signin {
      background: #fff;
      color: #3c4043;
      font-weight: 500;
      border-bottom: 1px solid var(--border);
    }

    .dropdown-item.google-signin:hover {
      background: #f8f9fa;
    }

    .dropdown-item.google-signin svg {
      opacity: 1;
    }

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

    .btn-secondary {
      background: var(--dark-elevated);
      color: var(--text);
      border: 1px solid var(--border);
    }

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

    .btn-primary {
      background: var(--gold);
      color: #000;
    }

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

    .btn-sm {
      padding: 6px 10px;
      font-size: 11px;
    }

    /* Export Dropdown */
    .export-dropdown {
      position: relative;
    }

    .export-menu {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 4px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 0;
      min-width: 180px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.4);
      z-index: 1000;
      display: none;
    }

    .export-menu.show {
      display: block;
    }

    .export-menu button {
      width: 100%;
      padding: 10px 16px;
      background: none;
      border: none;
      color: var(--text);
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
    }

    .export-menu button:hover {
      background: var(--dark-hover);
    }

    .export-menu button svg {
      flex-shrink: 0;
      color: var(--text-muted);
    }

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

    /* (Pro Tools removed) */

    .dropdown-divider {
      height: 1px;
      background: rgba(139, 92, 246, 0.2);
      margin: 8px 0;
    }

    /* Main Layout */
    .main {
      flex: 1;
      display: flex;
      overflow: hidden;
      min-height: 0; /* Prevents flex children from overflowing */
      max-height: calc(100vh - 56px); /* Header height is 56px */
    }

    /* Sidebar */
    .sidebar {
      width: 220px;
      min-width: 220px;
      max-width: 220px;
      background: linear-gradient(180deg, rgba(30, 30, 46, 0.98) 0%, rgba(26, 26, 38, 0.98) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      flex-grow: 0;
      overflow-y: auto;
      overflow-x: hidden;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
      max-height: 100%;
    }

    /* =============================================
       UPGRADED SIDEBAR SECTIONS - Enhanced UX
       ============================================= */
    .sidebar-section {
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      transition: background 0.2s ease;
    }

    .sidebar-section:hover {
      background: rgba(255, 255, 255, 0.01);
    }

    .sidebar-header {
      padding: 6px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s ease;
      position: relative;
    }

    .sidebar-header::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 0;
      background: var(--gold);
      border-radius: 0 2px 2px 0;
      transition: height 0.2s ease;
    }

    .sidebar-header:hover {
      background: rgba(255, 255, 255, 0.03);
    }

    .sidebar-header:hover::before {
      height: 60%;
    }

    .sidebar-section.expanded .sidebar-header::before {
      height: 80%;
    }

    .sidebar-title {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.4px;
      transition: color 0.2s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-header:hover .sidebar-title {
      color: var(--text);
    }

    .sidebar-section.expanded .sidebar-title {
      color: var(--gold);
    }

    .sidebar-toggle {
      color: var(--text-muted);
      font-size: 10px;
      transition: transform 0.25s ease, color 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
    }

    .sidebar-content.collapsed + .sidebar-header .sidebar-toggle,
    .sidebar-header:has(+ .sidebar-content.collapsed) .sidebar-toggle {
      transform: rotate(-90deg);
    }

    .sidebar-header:hover .sidebar-toggle {
      color: var(--text);
    }

    .sidebar-content {
      padding: 0 8px 6px;
      max-height: 1000px;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
      opacity: 1;
    }

    .sidebar-content.collapsed {
      max-height: 0;
      padding: 0 8px;
      opacity: 0;
    }

    /* Room List */
    .room-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 200px;
      overflow-y: auto;
    }

    .room-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .room-item:hover {
      background: var(--dark-surface);
      border-color: var(--primary);
    }

    .room-item.active {
      background: rgba(249, 203, 0, 0.1);
      border-color: var(--gold);
    }

    .room-icon {
      font-size: 16px;
    }

    .room-name {
      flex: 1;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-primary);
    }

    .room-size {
      font-size: 10px;
      color: var(--text-secondary);
      background: var(--dark);
      padding: 2px 6px;
      border-radius: 4px;
    }

    .room-delete-btn {
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--text-secondary);
      font-size: 14px;
      cursor: pointer;
      border-radius: 4px;
      opacity: 0;
      transition: all 0.2s;
    }

    .room-item:hover .room-delete-btn {
      opacity: 1;
    }

    .room-delete-btn:hover {
      background: var(--error);
      color: white;
    }

    .room-edit-btn {
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--text-secondary);
      font-size: 11px;
      cursor: pointer;
      border-radius: 4px;
      opacity: 0;
      transition: all 0.2s;
      margin-right: 4px;
    }

    .room-item:hover .room-edit-btn {
      opacity: 1;
    }

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

    /* Floor Plans Grid */
    .floorplan-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .floorplan-item {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }

    .floorplan-item:hover {
      background: var(--dark-hover);
      border-color: var(--primary);
    }

    .floorplan-item.active {
      border-color: var(--primary);
      background: rgba(99, 102, 241, 0.15);
    }

    .floorplan-preview {
      width: 100%;
      height: 40px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .floorplan-preview svg {
      width: 100%;
      height: 100%;
    }

    .floorplan-name {
      font-size: 10px;
      color: var(--text-secondary);
    }

    /* =============================================
       FAVORITES SECTION
       ============================================= */
    .favorites-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      min-height: 60px;
    }

    .favorites-empty, .notes-empty {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      color: var(--text-muted);
      font-size: 11px;
      gap: 4px;
    }

    .favorite-item {
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }

    .favorite-item:hover {
      background: var(--dark-hover);
      border-color: var(--gold);
      transform: scale(1.05);
    }

    .favorite-item .fav-icon {
      font-size: 18px;
      margin-bottom: 2px;
    }

    .favorite-item .fav-label {
      font-size: 8px;
      color: var(--text-muted);
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }

    .favorite-item .fav-remove {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 16px;
      height: 16px;
      background: #ef4444;
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: white;
      cursor: pointer;
    }

    .favorite-item:hover .fav-remove {
      display: flex;
    }

    /* =============================================
       NOTES SECTION
       ============================================= */
    .notes-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 200px;
      overflow-y: auto;
    }

    .note-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 8px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .note-item:hover {
      background: var(--dark-hover);
      border-color: var(--gold);
    }

    .note-item.selected {
      border-color: var(--gold);
      background: rgba(249, 203, 0, 0.1);
    }

    .note-color {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 2px;
    }

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

    .note-text {
      font-size: 11px;
      color: var(--text);
      line-height: 1.3;
      word-break: break-word;
    }

    .note-meta {
      font-size: 9px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .note-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .note-item:hover .note-actions {
      opacity: 1;
    }

    .note-action-btn {
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 4px;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 10px;
    }

    .note-action-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      color: var(--text);
    }

    /* Note Pin on Canvas */
    .canvas-note-pin {
      position: absolute;
      width: 24px;
      height: 24px;
      background: var(--gold);
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      z-index: 100;
      transition: transform 0.2s;
    }

    .canvas-note-pin:hover {
      transform: rotate(-45deg) scale(1.1);
    }

    .canvas-note-pin::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 8px;
      height: 8px;
      background: var(--dark-primary);
      border-radius: 50%;
    }

    .canvas-note-pin.red { background: #ef4444; }
    .canvas-note-pin.blue { background: #3b82f6; }
    .canvas-note-pin.green { background: #22c55e; }
    .canvas-note-pin.purple { background: #a855f7; }
    .canvas-note-pin.orange { background: #f97316; }

    /* Note Tooltip */
    .note-tooltip {
      position: absolute;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px;
      max-width: 200px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      z-index: 101;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .note-tooltip.show {
      opacity: 1;
    }

    /* Smart Guides */
    .smart-guide {
      position: absolute;
      background: rgba(99, 102, 241, 0.8);
      pointer-events: none;
      z-index: 50;
    }

    .smart-guide.horizontal {
      height: 1px;
      width: 100%;
    }

    .smart-guide.vertical {
      width: 1px;
      height: 100%;
    }

    .smart-guide-label {
      position: absolute;
      background: rgba(99, 102, 241, 0.9);
      color: white;
      font-size: 9px;
      padding: 2px 4px;
      border-radius: 2px;
      white-space: nowrap;
    }

    /* Element Grouping Indicator */
    .group-indicator {
      position: absolute;
      border: 2px dashed var(--gold);
      border-radius: 4px;
      pointer-events: none;
      z-index: 45;
    }

    .group-badge {
      position: absolute;
      top: -10px;
      left: 4px;
      background: var(--gold);
      color: var(--dark-primary);
      font-size: 9px;
      font-weight: 600;
      padding: 1px 5px;
      border-radius: 3px;
    }

    /* Measurement Overlay */
    .measurement-overlay { position: absolute; pointer-events: none; z-index: 100; }
    .measure-dimension { position: absolute; display: flex; align-items: center; justify-content: center; }
    .measure-dimension.measure-width { height: 1px; background: var(--gold-primary); }
    .measure-dimension.measure-width::before, .measure-dimension.measure-width::after { content: ''; position: absolute; width: 1px; height: 8px; background: var(--gold-primary); }
    .measure-dimension.measure-width::before { left: 0; }
    .measure-dimension.measure-width::after { right: 0; }
    .measure-dimension.measure-height { width: 1px; background: var(--gold-primary); flex-direction: column; }
    .measure-dimension.measure-height::before, .measure-dimension.measure-height::after { content: ''; position: absolute; height: 1px; width: 8px; background: var(--gold-primary); }
    .measure-dimension.measure-height::before { top: 0; }
    .measure-dimension.measure-height::after { bottom: 0; }
    .measure-dimension span { position: absolute; background: var(--dark-surface); color: var(--gold-primary); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
    .measure-dimension.measure-width span { top: -18px; }
    .measure-dimension.measure-height span { left: 8px; top: 50%; transform: translateY(-50%); }

    /* Quick Actions Toolbar */
    .quick-actions-toolbar { position: fixed; display: flex; gap: 4px; padding: 6px; background: var(--dark-surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 1000; }
    .quick-actions-toolbar button { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.2s; }
    .quick-actions-toolbar button:hover { background: var(--gold-primary); border-color: var(--gold-primary); }

    /* Alignment Toolbar */
    .alignment-toolbar { display: flex; gap: 4px; padding: 8px; background: var(--dark-elevated); border-radius: 8px; }
    .alignment-toolbar button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s; }
    .alignment-toolbar button:hover { background: var(--gold-primary); color: var(--dark-primary); }

    /* Pro Feature Modals */
    .shortcuts-modal, .stats-modal, .cost-summary-modal, .element-search-modal {
      position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000;
    }
    .shortcuts-content, .stats-content, .cost-summary-content, .element-search-content {
      background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 500px; width: 90%; max-height: 80vh; overflow: hidden;
    }
    .shortcuts-header, .stats-header, .cost-summary-header {
      display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border);
    }
    .shortcuts-header h3, .stats-header h3, .cost-summary-header h3 { margin: 0; font-size: 16px; color: var(--text); }
    .shortcuts-header button, .stats-header button, .cost-summary-header button {
      width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px;
    }
    .shortcuts-header button:hover, .stats-header button:hover, .cost-summary-header button:hover { background: rgba(255,255,255,0.2); color: var(--text); }
    .shortcuts-body, .stats-body, .cost-summary-body { padding: 16px 20px; overflow-y: auto; max-height: 60vh; }
    .shortcut-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .shortcut-row:last-child { border-bottom: none; }
    .shortcut-row kbd { min-width: 80px; padding: 4px 8px; background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 4px; font-family: monospace; font-size: 11px; color: var(--gold-primary); text-align: center; }
    .shortcut-row span { color: var(--text-secondary); font-size: 13px; }

    /* Stats Modal */
    .stats-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .stat-card { background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 16px; text-align: center; }
    .stat-value { font-size: 24px; font-weight: 700; color: var(--gold-primary); }
    .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .stat-breakdown { grid-column: 1 / -1; margin-top: 8px; }
    .stat-breakdown h4 { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
    .stat-breakdown ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
    .stat-breakdown li { font-size: 12px; color: var(--text-muted); padding: 4px 0; }

    /* Cost Summary */
    .cost-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .cost-table th, .cost-table td { padding: 8px; text-align: left; border-bottom: 1px solid var(--border); }
    .cost-table th { color: var(--text-muted); font-weight: 500; }
    .cost-table td { color: var(--text); }
    .cost-table tfoot tr.subtotal td { color: var(--text-secondary); }
    .cost-table tfoot tr.grand-total td { font-size: 14px; font-weight: 700; color: var(--gold-primary); border-top: 2px solid var(--gold-primary); }

    /* Element Search */
    .element-search-content { padding: 16px; }
    .element-search-content input { width: 100%; padding: 12px 16px; background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; }
    .element-search-content input:focus { outline: none; border-color: var(--gold-primary); }
    .element-search-results { margin-top: 12px; max-height: 300px; overflow-y: auto; }
    .search-result-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--dark-elevated); border-radius: 6px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s; }
    .search-result-item:hover { background: var(--dark-hover); border-left: 3px solid var(--gold-primary); }
    .search-result-icon { font-size: 18px; }
    .search-result-name { flex: 1; font-size: 13px; color: var(--text); }
    .search-result-type { font-size: 11px; color: var(--text-muted); background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px; }
    .search-empty { text-align: center; padding: 20px; color: var(--text-muted); }

    /* Zoom Controls */
    .zoom-controls {
      position: absolute;
      bottom: 16px;
      right: 16px;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      z-index: 100;
    }
    .zoom-controls button {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .zoom-controls button:hover {
      background: var(--gold-primary);
      color: var(--dark-primary);
      border-color: var(--gold-primary);
    }
    .zoom-controls span {
      min-width: 50px;
      text-align: center;
      font-size: 11px;
      color: var(--text-muted);
    }

    /* Layer Controls (for context menu) */
    .layer-controls {
      display: flex;
      gap: 4px;
      padding: 8px;
    }
    .layer-controls button {
      flex: 1;
      padding: 6px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-muted);
      font-size: 11px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .layer-controls button:hover {
      background: var(--gold-primary);
      color: var(--dark-primary);
    }

    /* Locked Element Indicator */
    .element-locked-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 20px;
      height: 20px;
      background: #ef4444;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      z-index: 10;
    }

    /* Project Info Modal */
    .project-info-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .project-info-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 480px; width: 90%; }
    .project-info-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .project-info-header h3 { margin: 0; font-size: 16px; color: var(--text); }
    .project-info-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .project-info-body { padding: 20px; }
    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
    .form-group input, .form-group textarea { width: 100%; padding: 10px 12px; background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; }
    .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--gold-primary); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
    .btn-primary, .btn-secondary { padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
    .btn-primary { background: var(--gold-primary); color: var(--dark-primary); border: none; }
    .btn-primary:hover { filter: brightness(1.1); }
    .btn-secondary { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
    .btn-secondary:hover { background: rgba(255,255,255,0.05); color: var(--text); }

    /* Measurement Line Display */
    .measure-line-display { position: absolute; pointer-events: none; z-index: 200; }
    .measure-line { position: absolute; height: 2px; background: var(--gold-primary); transform-origin: left center; }
    .measure-label { position: absolute; background: var(--gold-primary); color: var(--dark-primary); padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); }
    .measure-point { position: absolute; width: 10px; height: 10px; background: var(--gold-primary); border-radius: 50%; }

    /* Material Preview Panel */
    .material-preview-panel { position: fixed; bottom: 80px; right: 20px; width: 280px; background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); z-index: 500; opacity: 0; transform: translateY(20px); transition: all 0.2s ease; }
    .material-preview-panel.show { opacity: 1; transform: translateY(0); }
    .material-preview-image { height: 120px; background-size: cover; background-position: center; border-radius: 11px 11px 0 0; }
    .material-preview-info { padding: 12px; }
    .material-preview-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
    .material-preview-details { display: flex; flex-wrap: wrap; gap: 6px; }
    .material-preview-details span { font-size: 11px; color: var(--text-muted); background: rgba(255,255,255,0.05); padding: 3px 8px; border-radius: 4px; }
    .material-preview-details .price { background: var(--gold-primary); color: var(--dark-primary); font-weight: 600; }
    .material-preview-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background: rgba(0,0,0,0.5); border: none; border-radius: 50%; color: white; cursor: pointer; }

    /* Work Triangle Modal */
    .work-triangle-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .work-triangle-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 400px; width: 90%; }
    .work-triangle-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .work-triangle-header h3 { margin: 0; font-size: 16px; }
    .work-triangle-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .work-triangle-body { padding: 20px; }
    .triangle-status { padding: 12px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; margin-bottom: 16px; }
    .triangle-status.valid { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
    .triangle-status.invalid { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
    .triangle-measurements { display: grid; gap: 8px; }
    .triangle-leg, .triangle-total { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--dark-elevated); border-radius: 6px; font-size: 12px; }
    .triangle-leg span, .triangle-total span { color: var(--text-muted); }
    .triangle-leg strong, .triangle-total strong { color: var(--text); }
    .triangle-total { border-top: 1px solid var(--border); margin-top: 8px; }
    .triangle-total strong { color: var(--gold-primary); }
    .triangle-guide { margin-top: 16px; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 6px; }
    .triangle-guide p { margin: 0 0 8px; font-size: 12px; color: var(--text-muted); }
    .triangle-guide ul { margin: 0; padding-left: 20px; font-size: 11px; color: var(--text-muted); }

    /* Cabinet Specs Modal */
    .cabinet-specs-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .cabinet-specs-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 320px; width: 90%; }
    .cabinet-specs-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .cabinet-specs-header h3 { margin: 0; font-size: 16px; }
    .cabinet-specs-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .cabinet-specs-body { padding: 16px 20px; }
    .spec-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
    .spec-row:last-child { border-bottom: none; }
    .spec-row span { color: var(--text-muted); }
    .spec-row strong { color: var(--text); }

    /* Comparison Modal */
    .comparison-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .comparison-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 500px; width: 90%; }
    .comparison-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .comparison-header h3 { margin: 0; font-size: 16px; }
    .comparison-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .comparison-body { padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .comparison-section h4 { font-size: 12px; margin: 0 0 8px; }
    .comparison-section.added h4 { color: #22c55e; }
    .comparison-section.removed h4 { color: #ef4444; }
    .comparison-section.modified h4 { color: #f59e0b; }
    .comparison-item { font-size: 11px; padding: 6px 8px; background: var(--dark-elevated); border-radius: 4px; margin-bottom: 4px; color: var(--text-muted); }
    .comparison-empty { font-size: 11px; color: var(--text-muted); font-style: italic; }

    /* =============================================
       PRO FEATURES V5.0 - Advanced Capabilities
       ============================================= */

    /* Print Settings Modal */
    .print-settings-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .print-settings-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 400px; width: 90%; }
    .print-settings-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .print-settings-header h3 { margin: 0; font-size: 16px; }
    .print-settings-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .print-settings-body { padding: 20px; }
    .print-settings-body .form-group { margin-bottom: 16px; }
    .print-settings-body label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
    .print-settings-body select { width: 100%; padding: 10px 12px; background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; }
    .print-settings-body .form-group-row { display: flex; gap: 16px; margin-bottom: 16px; }
    .print-settings-body .form-group-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
    .print-settings-body .form-group-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

    /* Edge Profile Modal */
    .edge-profile-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .edge-profile-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 600px; width: 90%; }
    .edge-profile-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .edge-profile-header h3 { margin: 0; font-size: 16px; }
    .edge-profile-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .edge-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 20px; }
    .edge-profile-item { background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 16px; cursor: pointer; transition: all 0.2s; text-align: center; }
    .edge-profile-item:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
    .edge-profile-icon { font-size: 32px; margin-bottom: 8px; display: block; }
    .edge-profile-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
    .edge-profile-desc { font-size: 11px; color: var(--text-muted); line-height: 1.3; }

    /* Appliance Library Modal */
    .appliance-library-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .appliance-library-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 700px; width: 90%; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
    .appliance-library-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .appliance-library-header h3 { margin: 0; font-size: 16px; }
    .appliance-library-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .appliance-library-body { padding: 20px; overflow-y: auto; }
    .appliance-category { margin-bottom: 24px; }
    .appliance-category h4 { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.5px; }
    .appliance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .appliance-item { background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 14px 12px; cursor: pointer; transition: all 0.2s; text-align: center; }
    .appliance-item:hover { border-color: var(--primary); transform: translateY(-2px); }
    .appliance-icon { font-size: 24px; margin-bottom: 6px; display: block; }
    .appliance-name { font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
    .appliance-size { font-size: 10px; color: var(--text-muted); }

    /* Room Templates Modal */
    .room-templates-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .room-templates-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 700px; width: 90%; }
    .room-templates-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .room-templates-header h3 { margin: 0; font-size: 16px; }
    .room-templates-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .room-templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; padding: 20px; }
    .room-template-card { background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s; text-align: center; }
    .room-template-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
    .template-icon { font-size: 36px; margin-bottom: 10px; font-family: monospace; letter-spacing: 2px; color: var(--primary); }
    .template-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
    .template-desc { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
    .template-size { font-size: 11px; color: var(--primary); font-weight: 500; }

    /* Color Themes Modal */
    .color-themes-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .color-themes-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 500px; width: 90%; }
    .color-themes-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .color-themes-header h3 { margin: 0; font-size: 16px; }
    .color-themes-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .color-themes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px; }
    .color-theme-card { background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 16px; cursor: pointer; transition: all 0.2s; }
    .color-theme-card:hover { border-color: var(--primary); transform: scale(1.03); }
    .theme-preview { display: flex; gap: 4px; margin-bottom: 10px; border-radius: 6px; overflow: hidden; }
    .theme-swatch { height: 32px; flex: 1; }
    .theme-swatch.cabinet { border-radius: 6px 0 0 6px; }
    .theme-swatch.accent { border-radius: 0 6px 6px 0; }
    .theme-name { font-size: 12px; font-weight: 500; color: var(--text); text-align: center; }

    /* Clearance Modal */
    .clearance-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .clearance-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 450px; width: 90%; }
    .clearance-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .clearance-header h3 { margin: 0; font-size: 16px; }
    .clearance-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .clearance-body { padding: 20px; }
    .clearance-ok { background: rgba(34, 197, 94, 0.15); color: #22c55e; padding: 16px; border-radius: 10px; text-align: center; font-weight: 500; }
    .clearance-issues { margin-bottom: 16px; }
    .clearance-issue { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--dark-elevated); border-radius: 8px; margin-bottom: 8px; font-size: 13px; }
    .clearance-issue.warning { border-left: 3px solid #f59e0b; }
    .clearance-issue.error { border-left: 3px solid #ef4444; }
    .issue-icon { flex-shrink: 0; }
    .issue-text { color: var(--text-muted); }
    .clearance-standards { background: var(--dark-elevated); border-radius: 10px; padding: 16px; margin-top: 16px; }
    .clearance-standards h4 { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; text-transform: uppercase; }
    .clearance-standards ul { margin: 0; padding: 0 0 0 18px; font-size: 12px; color: var(--text-muted); }
    .clearance-standards li { margin-bottom: 4px; }

    /* Slab Calculator Modal */
    .slab-calc-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .slab-calc-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 500px; width: 90%; }
    .slab-calc-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .slab-calc-header h3 { margin: 0; font-size: 16px; }
    .slab-calc-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .slab-calc-body { padding: 20px; }
    .slab-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
    .slab-stat { background: var(--dark-elevated); border-radius: 10px; padding: 16px; text-align: center; }
    .slab-stat .stat-value { font-size: 24px; font-weight: 700; color: var(--primary); display: block; }
    .slab-stat .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .slab-pieces h4 { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; text-transform: uppercase; }
    .slab-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .slab-table th, .slab-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--border); }
    .slab-table th { color: var(--text-muted); font-weight: 500; }
    .slab-table td { color: var(--text); }
    .slab-note { font-size: 11px; color: var(--text-muted); margin-top: 16px; text-align: center; font-style: italic; }

    /* =============================================
       PRO FEATURES V6.0 - Professional Design Tools
       ============================================= */

    /* Annotation System */
    .design-annotation { position: absolute; z-index: 150; }
    .design-annotation.callout { display: flex; align-items: flex-start; gap: 4px; }
    .callout-content { background: var(--dark-surface); border: 2px solid; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--text); max-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
    .annot-delete { width: 18px; height: 18px; background: rgba(239,68,68,0.2); border: none; border-radius: 50%; color: #ef4444; cursor: pointer; font-size: 12px; opacity: 0; transition: opacity 0.2s; }
    .design-annotation:hover .annot-delete { opacity: 1; }
    .design-annotation.arrow { height: 2px; transform-origin: left center; }
    .arrow-head { position: absolute; right: -6px; top: -4px; border: 5px solid transparent; border-left-width: 8px; }
    .design-annotation.dimension .dim-line { position: absolute; height: 1px; transform-origin: left center; }
    .design-annotation.dimension .dim-label { position: absolute; background: var(--dark-surface); padding: 2px 6px; border-radius: 4px; font-size: 11px; color: #22c55e; font-weight: 600; transform: translateX(-50%); white-space: nowrap; }
    .design-annotation.dimension .dim-end { position: absolute; width: 2px; height: 12px; background: #22c55e; }
    .area-annotation { pointer-events: none; }

    /* Seam Planner */
    .planned-seam { position: absolute; background: repeating-linear-gradient(90deg, #ef4444 0, #ef4444 4px, transparent 4px, transparent 8px); z-index: 140; }
    .planned-seam.vertical { width: 2px; cursor: col-resize; }
    .planned-seam.horizontal { height: 2px; cursor: row-resize; }
    .seam-delete { position: absolute; top: -10px; right: -10px; width: 18px; height: 18px; background: #ef4444; border: none; border-radius: 50%; color: white; cursor: pointer; font-size: 10px; opacity: 0; transition: opacity 0.2s; }
    .planned-seam:hover .seam-delete { opacity: 1; }
    .seam-planner-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .seam-planner-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 450px; width: 90%; }
    .seam-planner-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .seam-planner-header h3 { margin: 0; font-size: 16px; }
    .seam-planner-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .seam-planner-body { padding: 20px; }
    .seam-info { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
    .seam-info p { margin: 0; }
    .seam-suggestions, .seam-current { margin-top: 16px; }
    .seam-suggestions h4, .seam-current h4 { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; text-transform: uppercase; }
    .seam-suggestion, .seam-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--dark-elevated); border-radius: 8px; margin-bottom: 8px; font-size: 13px; }

    /* Fabrication Plan Modal */
    .fabrication-plan-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .fabrication-plan-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 800px; width: 95%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
    .fabrication-plan-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .fabrication-plan-header h3 { margin: 0; font-size: 18px; }
    .fabrication-plan-header button { width: 32px; height: 32px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 20px; }
    .fabrication-plan-body { padding: 20px; overflow-y: auto; flex: 1; }
    .fab-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
    .fab-stat { background: var(--dark-elevated); border-radius: 10px; padding: 16px 12px; text-align: center; }
    .fab-value { font-size: 24px; font-weight: 700; color: var(--primary); display: block; }
    .fab-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; }
    .fab-section { margin-bottom: 24px; }
    .fab-section h4 { font-size: 14px; color: var(--text); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
    .fab-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .fab-table th, .fab-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--border); }
    .fab-table th { color: var(--text-muted); font-weight: 500; background: var(--dark-elevated); }
    .fab-table td { color: var(--text); }
    .fab-note { font-size: 11px; color: var(--text-muted); margin-top: 12px; text-align: center; font-style: italic; }
    .slab-layouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
    .slab-preview { background: var(--dark-elevated); border-radius: 8px; padding: 12px; }
    .slab-header { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
    .slab-diagram { background: #f5f5f5; border: 2px solid #999; border-radius: 4px; display: flex; flex-wrap: wrap; align-content: flex-start; min-height: 80px; }
    .slab-piece { background: var(--primary); border: 1px solid rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: #fff; }
    .fabrication-plan-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 12px; justify-content: flex-end; flex-shrink: 0; }
    .fab-export-btn, .fab-copy-btn { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; font-weight: 500; }
    .fab-export-btn { background: var(--primary); color: var(--dark-deep); }
    .fab-copy-btn { background: rgba(255,255,255,0.1); color: var(--text); }
    .fab-export-btn:hover { opacity: 0.9; }
    .fab-copy-btn:hover { background: rgba(255,255,255,0.15); }
    @media (max-width: 600px) { .fab-summary { grid-template-columns: repeat(3, 1fr); } }
    .seam-suggestion button, .seam-item button { padding: 4px 10px; background: var(--primary); border: none; border-radius: 4px; color: var(--dark-deep); cursor: pointer; font-size: 11px; font-weight: 600; }
    .seam-item button { background: rgba(239,68,68,0.2); color: #ef4444; }
    .no-seams { font-size: 13px; color: var(--text-muted); font-style: italic; }

    /* Backsplash Designer */
    .backsplash-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .backsplash-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 500px; width: 90%; }
    .backsplash-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .backsplash-header h3 { margin: 0; font-size: 16px; }
    .backsplash-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .backsplash-body { padding: 20px; }
    .backsplash-section { margin-bottom: 20px; }
    .backsplash-section h4 { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; text-transform: uppercase; }
    .pattern-grid, .size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
    .pattern-option, .size-option { background: var(--dark-elevated); border: 2px solid var(--border); border-radius: 8px; padding: 12px 8px; cursor: pointer; text-align: center; transition: all 0.2s; }
    .pattern-option:hover, .size-option:hover { border-color: var(--primary); }
    .pattern-option.selected, .size-option.selected { border-color: var(--primary); background: rgba(249,203,0,0.1); }
    .pattern-icon { font-size: 18px; display: block; margin-bottom: 4px; font-family: monospace; }
    .pattern-name, .size-name { font-size: 10px; color: var(--text-muted); }
    .size-preview { display: inline-block; background: var(--primary); margin-bottom: 6px; }
    .coverage-inputs { display: flex; gap: 12px; align-items: flex-end; }
    .coverage-inputs .input-group { flex: 1; }
    .coverage-inputs label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
    .coverage-inputs input { width: 100%; padding: 8px; background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; }
    .coverage-inputs .calc-btn { padding: 8px 16px; background: var(--primary); border: none; border-radius: 6px; color: var(--dark-deep); font-weight: 600; cursor: pointer; }
    .coverage-result { margin-top: 16px; background: var(--dark-elevated); border-radius: 8px; padding: 12px; }
    .coverage-result .result-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
    .coverage-result .result-row span { color: var(--text-muted); }
    .coverage-result .result-row strong { color: var(--text); }

    /* Lighting Planner */
    .lighting-fixture { position: absolute; width: 24px; height: 24px; background: rgba(249,203,0,0.2); border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: move; z-index: 145; }
    .fixture-icon { font-size: 12px; }
    .fixture-delete { position: absolute; top: -8px; right: -8px; width: 16px; height: 16px; background: #ef4444; border: none; border-radius: 50%; color: white; cursor: pointer; font-size: 10px; opacity: 0; transition: opacity 0.2s; }
    .lighting-fixture:hover .fixture-delete { opacity: 1; }
    .lighting-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
    .lighting-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 500px; width: 90%; }
    .lighting-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .lighting-header h3 { margin: 0; font-size: 16px; }
    .lighting-header button { width: 28px; height: 28px; background: rgba(255,255,255,0.1); border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 18px; }
    .lighting-body { padding: 20px; }
    .lighting-section { margin-bottom: 20px; }
    .lighting-section h4 { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; text-transform: uppercase; }
    .fixture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .fixture-btn { background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 12px 8px; cursor: pointer; text-align: center; transition: all 0.2s; }
    .fixture-btn:hover { border-color: var(--primary); background: rgba(249,203,0,0.1); }
    .fixture-type-icon { font-size: 20px; display: block; margin-bottom: 4px; }
    .fixture-type-name { font-size: 11px; color: var(--text); display: block; }
    .fixture-wattage { font-size: 10px; color: var(--text-muted); }
    .lighting-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
    .lighting-summary .summary-stat { background: var(--dark-elevated); border-radius: 10px; padding: 16px; text-align: center; }
    .lighting-summary .stat-value { font-size: 24px; font-weight: 700; color: var(--primary); display: block; }
    .lighting-summary .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .fixture-breakdown { background: var(--dark-elevated); border-radius: 8px; padding: 12px; }
    .breakdown-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .breakdown-row:last-child { border-bottom: none; }
    .no-lights { font-size: 13px; color: var(--text-muted); font-style: italic; }

    /* Material Takeoff Report */
    .takeoff-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; overflow-y: auto; padding: 20px; }
    .takeoff-content { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 12px; max-width: 600px; width: 100%; }
    .takeoff-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
    .takeoff-header h3 { margin: 0; font-size: 16px; }
    .takeoff-actions { display: flex; gap: 8px; }
    .takeoff-actions button { padding: 6px 12px; background: var(--dark-elevated); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; font-size: 12px; }
    .takeoff-actions button:first-child { background: var(--primary); border-color: var(--primary); color: var(--dark-deep); font-weight: 600; }
    .takeoff-body { padding: 20px; max-height: 70vh; overflow-y: auto; }
    .takeoff-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
    .takeoff-section:last-child { border-bottom: none; margin-bottom: 0; }
    .takeoff-section h4 { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; text-transform: uppercase; }
    .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .info-grid > div { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--dark-elevated); border-radius: 6px; font-size: 13px; }
    .info-grid span { color: var(--text-muted); }
    .info-grid strong { color: var(--text); }
    .cost-grid { display: grid; gap: 8px; }
    .cost-grid > div { display: flex; justify-content: space-between; padding: 10px 12px; background: var(--dark-elevated); border-radius: 6px; font-size: 13px; }
    .cost-grid > div.total { background: var(--primary); }
    .cost-grid > div.total span, .cost-grid > div.total strong { color: var(--dark-deep); }
    .validation-list { display: grid; gap: 8px; }
    .validation-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--dark-elevated); border-radius: 6px; font-size: 13px; }
    .validation-item.pass { border-left: 3px solid #22c55e; }
    .validation-item.warn { border-left: 3px solid #f59e0b; }

    /* =============================================
       UPGRADED TOOL GRID - Enhanced UX
       ============================================= */
    .tool-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      padding: 4px;
      background: rgba(0, 0, 0, 0.15);
      border-radius: 10px;
    }

    .tool-btn {
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 8px 4px;
      position: relative;
      overflow: hidden;
    }

    .tool-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.03) 100%);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .tool-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.1);
      color: var(--text);
      transform: translateY(-1px);
    }

    .tool-btn:hover::before {
      opacity: 1;
    }

    .tool-btn:active {
      transform: translateY(0) scale(0.98);
    }

    .tool-btn.active {
      background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
      color: white;
      border-color: transparent;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
    }

    .tool-btn.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      background: white;
      border-radius: 3px 3px 0 0;
      opacity: 0.5;
    }

    .tool-btn svg {
      width: 20px;
      height: 20px;
      margin-bottom: 3px;
      transition: transform 0.2s ease;
    }

    .tool-btn:hover svg {
      transform: scale(1.1);
    }

    .tool-btn span {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }

    /* Tool keyboard shortcut badge */
    .tool-btn[data-shortcut]::after {
      content: attr(data-shortcut);
      position: absolute;
      top: 3px;
      right: 3px;
      font-size: 8px;
      font-weight: 700;
      font-family: monospace;
      color: var(--gold);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .tool-btn:hover[data-shortcut]::after {
      opacity: 0.7;
    }

    .tool-btn.active[data-shortcut]::after {
      color: white;
      opacity: 0.6;
    }

    /* Layout Options Panel */
    .layout-options-panel {
      background: var(--dark-elevated);
      border: 1px solid var(--gold);
      border-radius: 8px;
      margin: 8px;
      overflow: hidden;
    }

    .layout-options-header {
      background: linear-gradient(135deg, var(--gold) 0%, #d4a84b 100%);
      color: var(--dark-bg);
      padding: 8px 12px;
      font-weight: 600;
      font-size: 12px;
    }

    .layout-options-content {
      padding: 10px;
    }

    .layout-option-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .layout-option-row label {
      font-size: 11px;
      color: var(--text-secondary);
      min-width: 75px;
    }

    .layout-option-row select {
      flex: 1;
      background: var(--dark-bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      padding: 4px 6px;
      font-size: 11px;
    }

    .layout-option-row select:focus {
      border-color: var(--gold);
      outline: none;
    }

    .layout-option-row input[type="checkbox"] {
      accent-color: var(--gold);
    }

    .layout-option-hint {
      font-size: 10px;
      color: var(--text-muted);
      text-align: center;
      padding-top: 4px;
      border-top: 1px solid var(--border);
      margin-top: 4px;
    }

    /* Element Grid */
    .element-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      max-height: 320px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 2px;
    }

    /* Scrollbar styling for element grid */
    .element-grid::-webkit-scrollbar {
      width: 6px;
    }

    .element-grid::-webkit-scrollbar-track {
      background: var(--dark-elevated);
      border-radius: 3px;
    }

    .element-grid::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 3px;
    }

    .element-grid::-webkit-scrollbar-thumb:hover {
      background: var(--text-muted);
    }

    .element-item {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 4px;
      cursor: grab;
      transition: all 0.2s;
      text-align: center;
      position: relative;
      min-width: 0;
      overflow: hidden;
    }

    .element-item:hover {
      background: var(--dark-hover);
      border-color: var(--primary);
    }

    .element-item:active {
      cursor: grabbing;
    }

    .element-item.has-texture {
      border-color: var(--success);
    }

    .element-icon {
      width: 40px;
      height: 40px;
      margin: 0 auto 4px;
      border-radius: 5px;
      background-size: cover;
      background-position: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.1);
      overflow: hidden;
      flex-shrink: 0;
    }

    .element-icon.element-svg {
      background: var(--dark-hover);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
    }

    .element-icon.element-svg svg {
      width: 100%;
      height: 100%;
    }

    .element-name {
      font-size: 9px;
      font-weight: 500;
      color: var(--text-secondary);
      line-height: 1.15;
      word-wrap: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .element-upload-btn {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 16px;
      height: 16px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      transition: all 0.2s;
    }

    .element-item:hover .element-upload-btn {
      opacity: 1;
    }

    .element-upload-btn:hover {
      background: var(--primary);
      border-color: var(--primary);
    }

    .element-upload-btn svg {
      width: 10px;
      height: 10px;
      color: var(--text);
    }

    /* Materials Library */
    .materials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .material-item {
      aspect-ratio: 1;
      border-radius: 6px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.2s;
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .material-item:hover {
      border-color: var(--primary);
      transform: scale(1.05);
    }

    .material-item.selected {
      border-color: var(--gold);
    }

    .material-item::after {
      content: attr(data-name);
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,0.7);
      padding: 2px 4px;
      font-size: 8px;
      text-align: center;
      border-radius: 0 0 4px 4px;
    }

    .materials-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      margin-bottom: 8px;
    }

    .material-tab {
      padding: 3px 6px;
      font-size: 9px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 3px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .material-tab:hover {
      color: var(--text);
      border-color: var(--primary);
    }

    .material-tab.active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }

    /* Element Search */
    .element-search-wrapper {
      position: relative;
      margin-bottom: 6px;
    }
    .element-search-input {
      width: 100%;
      padding: 6px 28px 6px 10px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 11px;
      outline: none;
      box-sizing: border-box;
    }
    .element-search-input:focus {
      border-color: var(--primary);
    }
    .element-search-input::placeholder {
      color: var(--text-muted);
    }
    .element-search-clear {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: var(--text-muted);
      font-size: 16px;
      line-height: 1;
    }
    .element-search-clear:hover {
      color: var(--text);
    }
    .element-search-results {
      max-height: 300px;
      overflow-y: auto;
    }

    /* Element Palette Tabs */
    .palette-tabs {
      display: flex;
      gap: 2px;
      margin-bottom: 8px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      padding: 3px;
      flex-wrap: wrap;
    }
    .palette-tab {
      flex: 1 1 calc(33.333% - 4px);
      min-width: 0;
      padding: 7px 4px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1px;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .palette-tab:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.06);
    }
    .palette-tab.active {
      background: var(--primary);
      color: white;
      box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
    }
    .palette-panel {
      max-height: 280px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .palette-sub-tabs {
      display: flex;
      gap: 2px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }
    .palette-sub-tab {
      padding: 3px 6px;
      font-size: 9px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 3px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s;
    }
    .palette-sub-tab:hover {
      color: var(--text);
      border-color: var(--primary);
    }
    .palette-sub-tab.active {
      background: rgba(99, 102, 241, 0.15);
      color: var(--text);
      border-color: var(--primary);
    }

    .material-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      max-height: 400px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .material-swatch {
      aspect-ratio: 1;
      min-height: 70px;
      border-radius: 6px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.2s;
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
    }

    .material-swatch img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    .material-swatch:hover {
      border-color: var(--primary);
      transform: scale(1.03);
    }

    .material-swatch.selected {
      border-color: var(--gold);
      box-shadow: 0 0 10px rgba(249, 203, 0, 0.4);
    }

    .material-swatch-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.9));
      padding: 22px 5px 5px;
      font-size: 11px;
      line-height: 1.2;
      text-align: center;
      font-weight: 600;
      z-index: 2;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    }

    .material-price-badge {
      position: absolute;
      bottom: 24px;
      right: 4px;
      background: var(--gold);
      color: #000;
      padding: 2px 5px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 700;
      z-index: 3;
    }

    .material-brand-badge {
      position: absolute;
      top: 4px;
      left: 4px;
      background: rgba(0,0,0,0.8);
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 8px;
      font-weight: 600;
      z-index: 3;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .material-distributor-badge {
      position: absolute;
      top: 2px;
      right: 2px;
      background: rgba(16, 185, 129, 0.9);
      color: #fff;
      font-size: 7px;
      padding: 1px 4px;
      border-radius: 3px;
      z-index: 3;
      font-weight: 600;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }

    .material-trade-label {
      color: #10b981;
      font-weight: 600;
    }

    .material-distributor-badge img {
      height: 12px;
      margin-right: 3px;
      vertical-align: middle;
    }

    .finish-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 4px 0;
    }
    .finish-option {
      padding: 3px 8px;
      font-size: 10px;
      border-radius: 10px;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.15);
      cursor: pointer;
      transition: all 0.2s;
      text-transform: capitalize;
    }
    .finish-option:hover {
      background: rgba(255,255,255,0.15);
      color: #fff;
    }
    .finish-option.active {
      background: var(--gold);
      color: #1a1a2e;
      border-color: var(--gold);
      font-weight: 600;
    }

    #distributor-loading-indicator {
      grid-column: 1 / -1;
      text-align: center;
      padding: 16px 8px;
      color: var(--gold);
      font-style: italic;
      opacity: 0.7;
      font-size: 12px;
    }

    .material-brand-header {
      grid-column: 1 / -1;
      background: var(--primary);
      color: #fff;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-radius: 4px;
      margin-top: 8px;
    }

    .material-brand-header:first-child {
      margin-top: 0;
    }

    .material-no-texture-badge {
      position: absolute;
      bottom: 22px;
      right: 4px;
      color: rgba(255,255,255,0.5);
      font-size: 8px;
      z-index: 2;
    }

    .material-hint {
      font-size: 10px;
      color: var(--text-muted);
      text-align: center;
      margin-top: 10px;
      padding: 8px;
      background: var(--dark-elevated);
      border-radius: 6px;
      border: 1px dashed var(--border);
    }

    /* Cabinet Catalog */
    .catalog-brand select,
    .catalog-series select {
      width: 100%;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      color: var(--text);
      font-size: 12px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      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='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 30px;
    }

    .catalog-brand select:hover,
    .catalog-series select:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .catalog-brand select:focus,
    .catalog-series select:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(249, 203, 0, 0.15);
    }

    .cabinet-catalog-list {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--dark);
    }

    .cabinet-catalog-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 0.15s;
    }

    .cabinet-catalog-item:last-child {
      border-bottom: none;
    }

    .cabinet-catalog-item:hover {
      background: var(--dark-elevated);
    }

    .cabinet-catalog-item.dragging {
      opacity: 0.5;
    }

    .cabinet-item-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .cabinet-item-sku {
      font-size: 10px;
      color: var(--text-muted);
      font-family: monospace;
    }

    .cabinet-item-name {
      font-size: 11px;
      color: var(--text);
      font-weight: 500;
    }

    .cabinet-item-size {
      font-size: 10px;
      color: var(--primary);
    }

    .cabinet-item-price {
      font-size: 11px;
      font-weight: 600;
      color: var(--success, #22c55e);
      margin-left: auto;
      padding: 2px 6px;
      background: rgba(34, 197, 94, 0.1);
      border-radius: 4px;
    }

    .cabinet-item-add {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background: var(--primary);
      border: none;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: bold;
      transition: background 0.15s;
    }

    .cabinet-item-add:hover {
      background: var(--primary-dark);
    }

    .catalog-actions {
      margin-top: 10px;
      display: flex;
      gap: 6px;
    }

    .catalog-actions .btn {
      flex: 1;
      justify-content: center;
    }

    /* Product Catalog */
    .product-search-bar {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
    }

    .product-search-bar input {
      flex: 1;
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--dark);
      color: var(--text);
      font-size: 12px;
    }

    .product-search-bar .search-icon {
      width: 28px;
      height: 28px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--dark);
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .product-filters {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
    }

    .product-filters select {
      flex: 1;
      padding: 6px 8px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: var(--text);
      font-size: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      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%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 6px center;
      padding-right: 22px;
    }

    .product-filters select:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
    }

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

    .product-catalog-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      max-height: 240px;
      overflow-y: auto;
      padding: 4px;
      background: var(--dark);
      border-radius: 6px;
      border: 1px solid var(--border);
    }

    .product-card {
      background: var(--dark-elevated);
      border-radius: 6px;
      padding: 6px;
      cursor: pointer;
      transition: all 0.2s;
      border: 2px solid transparent;
    }

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

    .product-card.selected {
      border-color: var(--primary);
      background: rgba(59, 130, 246, 0.1);
    }

    .product-card-image {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 4px;
      object-fit: cover;
      background: var(--dark);
      margin-bottom: 4px;
    }

    .product-card-name {
      font-size: 10px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-card-meta {
      font-size: 9px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .product-hint {
      text-align: center;
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 8px;
    }

    .loading-products {
      grid-column: 1 / -1;
      text-align: center;
      padding: 20px;
      color: var(--text-muted);
      font-size: 11px;
    }

    /* Marketplace Product Grid */
    .marketplace-product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      max-height: 280px;
      overflow-y: auto;
      padding: 4px;
      background: var(--dark);
      border-radius: 6px;
      border: 1px solid var(--border);
    }

    .marketplace-card {
      background: var(--dark-elevated);
      border-radius: 6px;
      padding: 6px;
      cursor: grab;
      transition: all 0.2s;
      border: 2px solid transparent;
      position: relative;
    }

    .marketplace-card:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .marketplace-card.out-of-stock {
      opacity: 0.5;
      pointer-events: none;
    }

    .marketplace-card-img {
      width: 100%;
      height: 80px;
      border-radius: 4px;
      object-fit: cover;
      background: var(--dark);
      margin-bottom: 4px;
    }

    .marketplace-card-name {
      font-size: 10px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .marketplace-card-brand {
      font-size: 9px;
      color: var(--text-muted);
      margin-top: 1px;
    }

    .marketplace-card-price {
      font-size: 10px;
      font-weight: 600;
      color: var(--primary);
      margin-top: 2px;
    }

    .marketplace-card-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      font-size: 8px;
      padding: 2px 5px;
      border-radius: 3px;
      font-weight: 600;
    }

    .marketplace-badge-instock {
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
    }

    .marketplace-badge-low {
      background: rgba(245, 158, 11, 0.2);
      color: #f59e0b;
    }

    .marketplace-badge-out {
      background: rgba(239, 68, 68, 0.2);
      color: #ef4444;
    }

    .marketplace-card-distributor {
      font-size: 8px;
      color: var(--text-muted);
      margin-top: 2px;
      opacity: 0.7;
    }

    .marketplace-stock-filter {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px 0;
    }

    .marketplace-stock-filter input[type="checkbox"] {
      width: 12px;
      height: 12px;
      accent-color: var(--primary);
    }

    /* Canvas Area */
    .canvas-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #12121f;
      position: relative;
      overflow: hidden;
    }

    /* =============================================
       UPGRADED CANVAS TOOLBAR - Glassmorphic Design
       ============================================= */
    .canvas-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 16px;
      background: linear-gradient(180deg,
        rgba(20, 20, 30, 0.92) 0%,
        rgba(15, 15, 25, 0.95) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      flex-shrink: 0;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    .canvas-toolbar::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50%;
      background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.04) 0%,
        transparent 100%);
      pointer-events: none;
    }

    .toolbar-group {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      z-index: 1;
    }

    .toolbar-btn-group {
      display: flex;
      align-items: center;
      background: linear-gradient(135deg,
        rgba(40, 40, 55, 0.7) 0%,
        rgba(30, 30, 45, 0.6) 100%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-top-color: rgba(255, 255, 255, 0.18);
      border-radius: 10px;
      padding: 4px;
      gap: 3px;
      box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .toolbar-btn-group .btn {
      border-radius: 7px;
      border: none;
      background: transparent;
    }

    .toolbar-btn-group .btn:hover {
      background: rgba(255, 255, 255, 0.12);
    }

    .toolbar-divider {
      width: 1px;
      height: 28px;
      background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.2) 80%,
        transparent 100%);
      margin: 0 12px;
    }

    .zoom-controls {
      display: flex;
      align-items: center;
      gap: 3px;
      background: linear-gradient(135deg,
        rgba(40, 40, 55, 0.7) 0%,
        rgba(30, 30, 45, 0.6) 100%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-top-color: rgba(255, 255, 255, 0.18);
      border-radius: 10px;
      padding: 4px;
      box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .zoom-btn {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.15s ease;
    }

    .zoom-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
    }

    .zoom-btn:active {
      background: rgba(249, 203, 0, 0.15);
      color: var(--gold);
      transform: scale(0.95);
    }

    .zoom-level {
      font-size: 12px;
      font-weight: 600;
      color: var(--gold);
      min-width: 52px;
      text-align: center;
      padding: 6px 10px;
      background: linear-gradient(135deg,
        rgba(249, 203, 0, 0.15) 0%,
        rgba(249, 203, 0, 0.08) 100%);
      border: 1px solid rgba(249, 203, 0, 0.2);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
    }

    .zoom-level:hover {
      background: linear-gradient(135deg,
        rgba(249, 203, 0, 0.25) 0%,
        rgba(249, 203, 0, 0.15) 100%);
      border-color: rgba(249, 203, 0, 0.35);
      box-shadow: 0 2px 8px rgba(249, 203, 0, 0.2);
    }

    .canvas-info {
      display: flex;
      gap: 12px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .canvas-info span {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 100%);
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
    }

    .canvas-info span::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold) 0%, #e6b800 100%);
      box-shadow: 0 0 6px rgba(249, 203, 0, 0.4);
    }

    /* Help Button in Canvas Info */
    .help-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .help-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--gold);
      border-color: var(--gold);
    }

    /* Save Status Indicator */
    .save-status {
      cursor: default;
      transition: all 0.3s ease;
    }
    .save-status::before {
      display: none !important; /* Override the dot */
    }
    .save-status .save-icon {
      flex-shrink: 0;
    }
    .save-status .save-text {
      font-size: 10px;
    }
    .save-status.saved {
      color: #22c55e;
    }
    .save-status.saved .save-icon {
      stroke: #22c55e;
    }
    .save-status.saving {
      color: #f59e0b;
    }
    .save-status.saving .save-icon {
      stroke: #f59e0b;
      animation: pulse 1s ease-in-out infinite;
    }
    .save-status.unsaved {
      color: #ef4444;
    }
    .save-status.unsaved .save-icon {
      stroke: #ef4444;
    }
    .save-status.error {
      color: #ef4444;
    }
    .save-status.error .save-icon {
      stroke: #ef4444;
    }
    .save-status .save-time {
      font-size: 9px;
      opacity: 0.7;
      margin-left: 4px;
    }
    .save-status.saved .save-time {
      color: var(--text-muted);
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    /* Tooltip Enhancement */
    [data-tooltip] {
      position: relative;
    }

    [data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      padding: 6px 10px;
      background: rgba(15, 15, 26, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.15s ease;
      z-index: 1000;
      pointer-events: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    [data-tooltip]::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 4px);
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: rgba(15, 15, 26, 0.95);
      opacity: 0;
      visibility: hidden;
      transition: all 0.15s ease;
      z-index: 1001;
    }

    [data-tooltip]:hover::after,
    [data-tooltip]:hover::before {
      opacity: 1;
      visibility: visible;
    }

    .shortcut-key {
      display: inline-block;
      padding: 2px 5px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
      font-size: 10px;
      font-family: monospace;
      margin-left: 6px;
      color: var(--gold);
    }

    .canvas-wrapper {
      flex: 1;
      position: relative;
      overflow: hidden;
      cursor: crosshair;
    }

    #canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* 3D View */
    #three-container {
      position: absolute;
      inset: 0;
      display: none;
      overflow: hidden;
    }

    #three-container.active {
      display: block;
    }

    /* =============================================
       UPGRADED 3D VIEW CONTROLS - Modern Design
       ============================================= */
    .three-controls {
      position: absolute;
      bottom: 20px;
      left: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      z-index: 100;
      max-width: calc(100% - 250px);
      background: rgba(15, 15, 26, 0.75);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 6px;
    }

    .three-controls button {
      padding: 8px 12px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      color: var(--text-secondary);
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
      white-space: nowrap;
    }

    .three-controls button:hover {
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
    }

    .three-controls button:active {
      transform: scale(0.97);
    }

    .three-controls button.active {
      background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
      color: white;
      border-color: transparent;
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    }

    .three-controls button svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      transition: transform 0.15s ease;
    }

    .three-controls button:hover svg {
      transform: scale(1.1);
    }

    /* 3D Control Groups */
    .three-controls-group {
      display: flex;
      gap: 2px;
      padding: 3px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 8px;
      margin-right: 4px;
    }

    .three-controls-divider {
      width: 1px;
      height: 28px;
      background: rgba(255, 255, 255, 0.1);
      margin: 0 4px;
      align-self: center;
    }

    .three-hint {
      position: absolute;
      bottom: 20px;
      right: 20px;
      padding: 10px 14px;
      background: rgba(15, 15, 26, 0.8);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      font-size: 11px;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .three-hint span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .three-hint .hint-key {
      display: inline-block;
      padding: 2px 6px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      font-family: monospace;
      font-size: 10px;
      color: var(--gold);
    }

    .three-hint.walkthrough-hint {
      background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(59, 130, 246, 0.95));
      color: white;
      font-size: 12px;
      padding: 12px 18px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
      animation: walkthroughPulse 2s ease-in-out infinite;
    }

    @keyframes walkthroughPulse {
      0%, 100% { box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35); }
      50% { box-shadow: 0 8px 32px rgba(139, 92, 246, 0.5); }
    }

    /* Lighting Control Panel */
    .lighting-panel {
      position: absolute;
      top: 60px;
      right: 20px;
      width: 280px;
      background: rgba(15, 15, 26, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
      z-index: 100;
      overflow: hidden;
    }

    .lighting-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      background: rgba(99, 102, 241, 0.15);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      font-weight: 600;
      font-size: 13px;
      color: var(--text);
    }

    .lighting-panel-header .close-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 20px;
      cursor: pointer;
      padding: 0 4px;
      line-height: 1;
    }

    .lighting-panel-header .close-btn:hover {
      color: var(--text);
    }

    .lighting-panel-content {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .lighting-presets label,
    .lighting-slider label {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .preset-buttons {
      display: flex;
      gap: 8px;
    }

    .preset-btn {
      flex: 1;
      padding: 10px 8px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .preset-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-2px);
    }

    .preset-btn.active {
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      border-color: transparent;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }

    .lighting-slider {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .lighting-slider input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
      outline: none;
    }

    .lighting-slider input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5);
    }

    .lighting-slider span {
      font-size: 11px;
      color: var(--gold);
      text-align: right;
    }

    .lighting-toggle {
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .lighting-toggle label {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
    }

    .lighting-toggle input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--primary);
    }

    .hd-badge {
      background: linear-gradient(135deg, #FFD700, #FFA500);
      color: #000;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 600;
      margin-left: 4px;
    }

    .hd-toggle label {
      justify-content: space-between;
    }

    .three-hint.walkthrough-hint strong {
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
      letter-spacing: 0.3px;
    }

    .three-hint.walkthrough-hint .hint-key {
      background: rgba(255, 255, 255, 0.2);
      color: white;
    }

    /* =============================================
       FLOATING QUICK-ACTION TOOLBAR - Glassmorphic
       ============================================= */
    .floating-toolbar {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 16px;
      background: linear-gradient(135deg,
        rgba(20, 20, 30, 0.92) 0%,
        rgba(15, 15, 25, 0.95) 50%,
        rgba(25, 25, 35, 0.93) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-top-color: rgba(255, 255, 255, 0.25);
      border-left-color: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
      z-index: 500;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .floating-toolbar::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50%;
      background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 100%);
      pointer-events: none;
      border-radius: 20px 20px 0 0;
    }

    .floating-toolbar.visible {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .floating-toolbar-group {
      display: flex;
      align-items: center;
      gap: 3px;
      padding: 5px 6px;
      background: linear-gradient(135deg,
        rgba(40, 40, 55, 0.6) 0%,
        rgba(30, 30, 45, 0.5) 100%);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
    }

    .floating-toolbar-divider {
      width: 1px;
      height: 32px;
      background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.2) 80%,
        transparent 100%);
      margin: 0 8px;
    }

    .float-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg,
        rgba(50, 50, 65, 0.7) 0%,
        rgba(40, 40, 55, 0.6) 100%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }

    .float-btn:hover {
      background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 100%);
      border-color: rgba(255, 255, 255, 0.2);
      color: var(--text);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .float-btn:hover svg {
      transform: scale(1.1);
    }

    .float-btn:active {
      transform: scale(0.95);
      background: rgba(255, 255, 255, 0.2);
    }

    .float-btn.primary {
      background: linear-gradient(135deg, var(--gold) 0%, #e6b800 100%);
      border-color: rgba(255, 255, 255, 0.3);
      color: #000;
      box-shadow: 0 4px 16px rgba(249, 203, 0, 0.3);
    }

    .float-btn.primary:hover {
      background: linear-gradient(135deg, #ffe033 0%, var(--gold) 100%);
      box-shadow: 0 4px 12px rgba(249, 203, 0, 0.35);
    }

    .float-btn.danger:hover {
      background: rgba(239, 68, 68, 0.2);
      color: #ef4444;
    }

    .float-btn svg {
      width: 18px;
      height: 18px;
      transition: transform 0.15s ease;
    }

    .float-btn .shortcut {
      position: absolute;
      bottom: -2px;
      right: 2px;
      font-size: 8px;
      font-weight: 700;
      font-family: monospace;
      color: var(--gold);
      opacity: 0.6;
    }

    .float-btn:hover .shortcut {
      opacity: 1;
    }

    /* Selection info badge */
    .selection-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: rgba(249, 203, 0, 0.1);
      border: 1px solid rgba(249, 203, 0, 0.2);
      border-radius: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--gold);
      margin-right: 4px;
    }

    .selection-badge .count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      background: var(--gold);
      color: #000;
      border-radius: 9px;
      font-size: 10px;
      font-weight: 700;
    }

    /* Floating toolbar mobile optimization */
    @media (max-width: 600px) {
      .floating-toolbar {
        bottom: 80px !important; /* Above mobile toolbar */
        padding: 6px 10px !important;
        max-width: calc(100% - 24px) !important;
        flex-wrap: wrap !important;
      }

      .floating-toolbar-group {
        padding: 3px 4px !important;
      }

      .floating-toolbar-divider {
        display: none !important;
      }

      .float-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 6px !important;
      }

      .float-btn svg {
        width: 16px !important;
        height: 16px !important;
      }

      .float-btn .shortcut {
        display: none !important;
      }

      .selection-badge {
        display: none !important; /* Too cluttered on mobile */
      }
    }

    /* Right Panel */
    .right-panel {
      width: 260px;
      min-width: 260px;
      max-width: 260px;
      background: linear-gradient(180deg, rgba(30, 30, 46, 0.98) 0%, rgba(26, 26, 38, 0.98) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      flex-grow: 0;
      overflow-y: auto;
      overflow-x: hidden;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
      height: 100%;
      min-height: 0;
    }

    .panel-section {
      padding: 6px 10px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .panel-section.collapsed .panel-content {
      display: none;
    }

    .panel-section.collapsed .panel-title .toggle-icon {
      transform: rotate(-90deg);
    }

    .panel-title {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      gap: 6px;
    }

    .panel-title .toggle-icon {
      font-size: 8px;
      transition: transform 0.2s;
      opacity: 0.5;
    }

    .panel-title:hover .toggle-icon {
      opacity: 1;
    }

    /* Element Selector Styles */
    #elementSelectorSection .panel-title {
      display: flex;
      align-items: center;
    }

    .element-total-count {
      background: var(--accent);
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 10px;
      margin-left: auto;
      font-weight: 600;
    }

    .element-type-selector {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 200px;
      overflow-y: auto;
    }

    .element-type-row {
      display: flex;
      align-items: center;
      padding: 6px 8px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      gap: 8px;
    }

    .element-type-row:hover {
      background: var(--dark-surface);
      border-color: var(--accent);
    }

    .element-type-row.active {
      background: rgba(99, 102, 241, 0.15);
      border-color: var(--accent);
    }

    .element-type-row.has-selection {
      border-left: 3px solid var(--accent);
    }

    .element-type-checkbox {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .element-type-row.active .element-type-checkbox {
      background: var(--accent);
      border-color: var(--accent);
    }

    .element-type-row.active .element-type-checkbox::after {
      content: '✓';
      color: white;
      font-size: 10px;
      font-weight: bold;
    }

    .element-type-label {
      flex: 1;
      font-size: 12px;
      color: var(--text);
      text-transform: capitalize;
    }

    .element-type-count {
      background: var(--dark-surface);
      color: var(--text-muted);
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 8px;
      font-weight: 500;
    }

    .element-type-row.active .element-type-count {
      background: var(--accent);
      color: white;
    }

    .element-instance-list {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
      max-height: 150px;
      overflow-y: auto;
    }

    .element-instance-item {
      display: flex;
      align-items: center;
      padding: 5px 8px;
      margin-bottom: 3px;
      background: var(--dark-surface);
      border-radius: 4px;
      cursor: pointer;
      font-size: 11px;
      color: var(--text-secondary);
      transition: all 0.1s ease;
    }

    .element-instance-item:hover {
      background: var(--dark-elevated);
      color: var(--text);
    }

    .element-instance-item.selected {
      background: rgba(99, 102, 241, 0.2);
      color: var(--accent);
      font-weight: 500;
    }

    .element-instance-dims {
      margin-left: auto;
      font-size: 10px;
      color: var(--text-muted);
    }

    .element-selector-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }

    .btn-small {
      padding: 4px 8px;
      font-size: 11px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      transition: all 0.15s ease;
    }

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

    .btn-small.btn-secondary {
      background: var(--dark-elevated);
      color: var(--text-secondary);
      border: 1px solid var(--border);
    }

    .btn-small.btn-danger {
      background: var(--error);
      color: white;
    }

    .btn-small:hover {
      opacity: 0.85;
      transform: translateY(-1px);
    }

    .no-elements-msg {
      color: var(--text-muted);
      font-size: 11px;
      text-align: center;
      padding: 12px;
    }

    /* Flat Element List Styles */
    .element-flat-list {
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--dark-bg);
      overflow: hidden;
    }

    .element-list-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: all 0.2s ease;
      position: relative;
    }

    .element-list-item:last-child {
      border-bottom: none;
    }

    .element-list-item:hover {
      background: linear-gradient(90deg, var(--dark-elevated), transparent);
      padding-left: 16px;
    }

    .element-list-item.selected {
      background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.05));
      border-left: 3px solid var(--primary);
    }

    .element-list-item.selected::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--primary), #8b5cf6);
    }

    .element-list-icon {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--dark-elevated), var(--dark-surface));
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      font-size: 12px;
      flex-shrink: 0;
    }

    .element-list-item.selected .element-list-icon {
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      border-color: transparent;
      color: white;
    }

    .element-list-info {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .element-list-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .element-list-meta {
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }

    /* Item Picker / Quote List Styles */
    .item-picker-total {
      background: linear-gradient(135deg, #22c55e, #16a34a);
      color: white;
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 4px;
      font-weight: 600;
    }

    .item-picker-controls {
      margin-bottom: 8px;
    }

    .item-filter {
      width: 100%;
      padding: 6px 8px;
      font-size: 11px;
    }

    .item-picker-list {
      min-height: 100px;
      max-height: 280px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--dark-surface);
      flex: 1 1 auto;
    }

    .item-picker-item {
      display: flex;
      flex-direction: column;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .item-picker-item:last-child {
      border-bottom: none;
    }

    .item-picker-item:hover {
      background: var(--dark-elevated);
    }

    .item-picker-item.selected {
      background: rgba(99, 102, 241, 0.15);
      border-left: 3px solid var(--accent);
    }

    .item-row-main {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .item-checkbox {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: var(--accent);
      flex-shrink: 0;
      margin: 0;
      border-radius: 4px;
    }

    .item-checkbox:checked {
      background: var(--accent);
    }

    .item-icon {
      width: 24px;
      height: 24px;
      background: var(--dark-elevated);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex-shrink: 0;
    }

    .item-details {
      flex: 1;
      min-width: 0;
    }

    .item-name {
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .item-meta {
      font-size: 10px;
      color: var(--text-muted);
      display: flex;
      gap: 8px;
    }

    .item-price {
      font-size: 11px;
      font-weight: 600;
      color: #22c55e;
      white-space: nowrap;
    }

    .item-row-secondary {
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
      padding-left: 46px;
    }

    .item-material {
      font-size: 10px;
      color: var(--accent);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 120px;
    }

    .item-dims {
      font-size: 10px;
      color: var(--text-muted);
    }

    .item-detail-line {
      font-size: 10px;
      margin-top: 2px;
      color: var(--text-muted);
    }

    .item-sku {
      background: rgba(99, 102, 241, 0.2);
      color: var(--accent);
      padding: 1px 4px;
      border-radius: 3px;
      font-family: monospace;
      font-size: 9px;
    }

    .item-catalog {
      color: var(--text-muted);
      font-size: 9px;
    }

    .item-sqft {
      color: #22c55e;
      font-weight: 500;
    }

    .item-rate {
      color: var(--text-muted);
      font-style: italic;
    }

    .item-picker-summary {
      margin-top: 8px;
      padding: 8px;
      background: var(--dark-elevated);
      border-radius: 6px;
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    .summary-row:last-child {
      margin-bottom: 0;
      font-weight: 600;
      color: var(--text);
    }

    .item-picker-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }

    .item-picker-empty {
      padding: 20px;
      text-align: center;
      color: var(--text-muted);
      font-size: 12px;
    }

    /* Room Templates Styles */
    #roomTemplatesSection .panel-content {
      max-height: 200px;
      overflow-y: auto;
    }

    .room-templates-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
    }

    .template-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 4px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      color: var(--text);
    }

    .template-btn:hover {
      background: var(--dark-surface);
      border-color: var(--accent);
      transform: translateY(-1px);
    }

    .template-btn:active {
      transform: translateY(0);
    }

    .template-icon {
      font-size: 16px;
      margin-bottom: 2px;
    }

    .template-name {
      font-size: 9px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .template-btn:hover .template-name {
      color: var(--accent);
    }

    .template-hint {
      font-size: 8px;
      color: var(--text-muted);
      text-align: center;
      margin-top: 6px;
      margin-bottom: 0;
      opacity: 0.7;
    }

    .room-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
    }

    .input-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .input-label {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .input-field {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 10px;
      color: var(--text);
      font-size: 12px;
      transition: all 0.2s ease;
    }

    .input-field:hover {
      border-color: rgba(255, 255, 255, 0.2);
    }

    .input-field:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }

    select.input-field {
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b8b8b' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      padding-right: 28px;
    }

    /* Properties Panel */
    .properties-empty {
      text-align: center;
      padding: 20px 12px;
      color: var(--text-muted);
      font-size: 12px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 8px;
      border: 1px dashed var(--border);
    }

    .quick-actions {
      display: flex;
      gap: 6px;
    }

    .quick-btn {
      padding: 8px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      color: var(--text-secondary);
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .quick-btn:hover {
      background: linear-gradient(135deg, var(--gold), #d4a944);
      color: var(--dark-bg);
      border-color: var(--gold);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(249, 203, 0, 0.25);
    }

    .quick-btn.danger:hover {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      border-color: #ef4444;
      color: white;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
    }

    /* Visibility toggle styles */
    .visibility-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 6px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 4px;
      cursor: pointer;
      font-size: 10px;
      color: var(--text-secondary);
      transition: all 0.15s;
    }

    .visibility-toggle:hover {
      background: rgba(200, 169, 106, 0.1);
      border-color: var(--gold);
    }

    .visibility-toggle input[type="checkbox"] {
      width: 14px;
      height: 14px;
      margin: 0;
      cursor: pointer;
      accent-color: var(--gold);
    }

    .visibility-toggle input[type="checkbox"]:not(:checked) + span {
      text-decoration: line-through;
      opacity: 0.5;
    }

    /* Collapsible panel styles */
    .collapsible-header {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .collapsible-header:hover {
      color: var(--gold);
    }

    .panel-toggle {
      font-size: 10px;
      transition: transform 0.2s;
    }

    .collapsible-panel .panel-content {
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      max-height: 500px;
    }

    .collapsible-panel .panel-content.collapsed {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
    }

    .property-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      gap: 8px;
    }

    .property-label {
      font-size: 10px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-shrink: 1;
      min-width: 0;
    }

    .property-input {
      width: 65px;
      min-width: 50px;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 5px;
      padding: 5px 6px;
      color: var(--text);
      font-size: 11px;
      text-align: right;
      transition: all 0.2s ease;
    }

    .property-input:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .property-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(249, 203, 0, 0.15);
    }

    .property-select {
      width: 95px;
      min-width: 70px;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 5px;
      padding: 5px 6px;
      color: var(--text);
      font-size: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      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%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 5px center;
      padding-right: 18px;
    }

    .property-select:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
    }

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

    .checkbox-group {
      display: flex;
      gap: 10px;
      font-size: 10px;
    }

    .checkbox-group label {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
    }

    .checkbox-group input[type="checkbox"] {
      width: 12px;
      height: 12px;
      accent-color: var(--primary);
    }

    .seam-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .seam-btn {
      padding: 3px 8px;
      font-size: 10px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }

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

    .seam-btn.seam-clear {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      color: var(--text-muted);
    }

    .seam-btn.seam-clear:hover {
      border-color: #dc3545;
      color: #dc3545;
    }

    .seam-count {
      font-size: 10px;
      color: var(--text-muted);
    }

    .dimension-display {
      font-size: 10px;
      color: var(--gold);
      margin-left: 6px;
      white-space: nowrap;
      min-width: 50px;
    }

    .color-picker {
      width: 70px;
      height: 26px;
      border: 1px solid var(--border);
      border-radius: 4px;
      cursor: pointer;
      padding: 0;
    }

    .texture-preview {
      width: 70px;
      height: 40px;
      border-radius: 4px;
      background-size: cover;
      background-position: center;
      border: 1px solid var(--border);
      cursor: pointer;
    }

    .texture-preview:hover {
      border-color: var(--primary);
    }

    .texture-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .texture-upload-btn,
    .texture-clear-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 4px;
      cursor: pointer;
      color: var(--text-secondary);
      font-size: 12px;
      padding: 0;
    }

    .texture-upload-btn:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
    }

    .texture-clear-btn:hover {
      background: var(--error);
      border-color: var(--error);
      color: white;
    }

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

    /* Grain Direction Controls */
    .grain-direction-controls {
      display: flex;
      gap: 4px;
    }

    .grain-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 4px;
      cursor: pointer;
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: bold;
      padding: 0;
      transition: all 0.2s;
    }

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

    .grain-btn.active {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--dark-bg);
    }

    /* Validation Panel */
    .validation-section {
      border-bottom: 1px solid var(--border);
      padding-bottom: 8px;
      margin-bottom: 8px;
      flex-shrink: 1;
    }

    .validation-section .panel-title {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .validation-toggle,
    .validation-refresh {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 12px;
      padding: 2px 6px;
      margin-left: auto;
    }

    .validation-toggle:hover,
    .validation-refresh:hover {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }

    .validation-toggle.active {
      background: var(--success);
      color: white;
      border-color: var(--success);
    }

    .validation-content {
      padding: 8px 16px;
      font-size: 11px;
      max-height: 180px;
      overflow-y: auto;
    }

    .validation-hint {
      color: var(--text-muted);
      font-style: italic;
    }

    .validation-ok {
      color: var(--success);
      font-weight: 500;
    }

    .validation-category {
      margin-bottom: 10px;
    }

    .validation-category-title {
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 4px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .validation-issue {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      padding: 4px 0;
      border-bottom: 1px solid var(--border);
    }

    .validation-issue:last-child {
      border-bottom: none;
    }

    .validation-icon {
      flex-shrink: 0;
      font-size: 12px;
    }

    .validation-error .validation-icon {
      color: var(--error);
    }

    .validation-warning .validation-icon {
      color: var(--gold);
    }

    .validation-info .validation-icon {
      color: var(--primary);
    }

    .validation-message {
      color: var(--text-secondary);
      line-height: 1.3;
    }

    /* Quote Panel */
    .quote-section {
      flex-shrink: 1;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      min-height: 200px;
      overflow: hidden;
    }

    .quote-items {
      flex: 1 1 auto;
      overflow-y: auto;
      padding: 0 16px;
      min-height: 0;
      max-height: 300px;
    }

    .quote-item {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: 11px;
    }

    .quote-item-name {
      color: var(--text-secondary);
    }

    .quote-item-value {
      color: var(--text);
      font-weight: 500;
    }

    .quote-total {
      padding: 12px 16px;
      background: var(--dark-elevated);
      border-top: 1px solid var(--border);
    }

    .quote-total-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .quote-total-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
    }

    .quote-total-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--gold);
    }

    .quote-actions {
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .btn-checkout {
      width: 100%;
      padding: 12px 16px;
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    }

    .btn-checkout:hover {
      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    }

    .btn-checkout:disabled {
      background: #4a4a5a;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }

    .quote-disclaimer {
      font-size: 10px;
      color: var(--text-secondary);
      text-align: center;
      margin: 8px 0 0;
      line-height: 1.4;
    }

    /* Payment Modal */
    .payment-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      backdrop-filter: blur(4px);
    }

    .payment-modal {
      background: var(--dark-elevated);
      border-radius: 16px;
      width: 90%;
      max-width: 480px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      border: 1px solid var(--border);
    }

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

    .payment-modal-header h2 {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
      color: var(--text);
    }

    .payment-modal-close {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: all 0.2s;
    }

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

    .payment-modal-body {
      padding: 24px;
    }

    .payment-summary {
      background: rgba(255, 255, 255, 0.03);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }

    .payment-summary-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      font-size: 13px;
    }

    .payment-summary-row.total {
      border-top: 1px solid var(--border);
      margin-top: 8px;
      padding-top: 12px;
      font-weight: 600;
      font-size: 15px;
    }

    .payment-summary-row .label {
      color: var(--text-secondary);
    }

    .payment-summary-row .value {
      color: var(--text);
    }

    .payment-summary-row.total .value {
      color: var(--gold);
    }

    .payment-options {
      margin-bottom: 20px;
    }

    .payment-option {
      background: rgba(255, 255, 255, 0.03);
      border: 2px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .payment-option:hover {
      border-color: var(--accent-color);
      background: rgba(139, 92, 246, 0.05);
    }

    .payment-option.selected {
      border-color: var(--gold);
      background: rgba(212, 175, 55, 0.1);
    }

    .payment-option-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .payment-option-title {
      font-weight: 600;
      font-size: 14px;
      color: var(--text);
    }

    .payment-option-amount {
      font-weight: 700;
      font-size: 16px;
      color: var(--gold);
    }

    .payment-option-desc {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .payment-form-group {
      margin-bottom: 16px;
    }

    .payment-form-group label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }

    .payment-form-group input {
      width: 100%;
      padding: 10px 12px;
      background: var(--dark);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
    }

    .payment-form-group input:focus {
      outline: none;
      border-color: var(--accent-color);
    }

    .payment-submit {
      width: 100%;
      padding: 14px 20px;
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.2s;
    }

    .payment-submit:hover {
      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    }

    .payment-submit:disabled {
      background: #4a4a5a;
      cursor: not-allowed;
    }

    .payment-secure {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 16px;
      font-size: 11px;
      color: var(--text-secondary);
    }

    .payment-secure svg {
      width: 14px;
      height: 14px;
    }

    /* Context Menu */
    .context-menu {
      position: fixed;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 0;
      min-width: 160px;
      z-index: 1000;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }

    .context-menu-item {
      padding: 8px 14px;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .context-menu-item:hover {
      background: var(--dark-hover);
      color: var(--text);
    }

    .context-menu-item.danger {
      color: var(--error);
    }

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

    .context-menu-divider {
      height: 1px;
      background: var(--border);
      margin: 4px 0;
    }

    .context-menu-label {
      padding: 6px 14px;
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      font-weight: 600;
    }

    /* Modals */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1001;
    }

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

    .modal {
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      width: 100%;
      max-width: 500px;
      max-height: 80vh;
      overflow-y: auto;
    }

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

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

    .modal-close {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--dark-elevated);
      border: none;
      border-radius: 4px;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 18px;
    }

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

    /* Keyboard Shortcuts Modal */
    .shortcut-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .shortcut-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-secondary);
    }
    .shortcut-item span {
      flex: 1;
    }
    .shortcut-item kbd,
    .modal-body kbd {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 24px;
      padding: 0 6px;
      background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
      border: 1px solid #4a4a4a;
      border-radius: 4px;
      font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
      font-size: 11px;
      font-weight: 500;
      color: #fff;
      box-shadow: 0 2px 0 #1a1a1a, inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .modal-title {
      display: flex;
      align-items: center;
    }

    /* Hide close button on required modals */
    .modal-overlay[data-required="true"] .modal-close {
      display: none;
    }

    /* Login Modal Styles */
    .login-modal {
      max-width: 440px !important;
      padding: 32px !important;
    }

    .google-signin-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 14px 20px;
      background: #fff;
      border: 1px solid #dadce0;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      color: #3c4043;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .google-signin-btn:hover {
      background: #f8f9fa;
      border-color: #c6c6c6;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .login-divider {
      display: flex;
      align-items: center;
      margin: 24px 0;
      color: var(--text-muted);
      font-size: 13px;
    }

    .login-divider::before,
    .login-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .login-divider span {
      padding: 0 16px;
    }

    /* Sign In Button - Clean & Modern */
    .btn-signin {
      position: relative;
      width: 100%;
      height: 50px;
      background: linear-gradient(135deg, var(--gold) 0%, #c9a227 100%);
      border: none;
      border-radius: 8px;
      color: #000;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      overflow: hidden;
      margin-bottom: 16px;
      transition: all 0.2s ease;
    }

    .btn-signin:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    }

    .btn-signin:active {
      transform: translateY(0);
    }

    .btn-signin:disabled {
      opacity: 0.7;
      cursor: not-allowed;
      transform: none;
    }

    .btn-signin-text {
      transition: opacity 0.2s ease;
    }

    .btn-signin.loading .btn-signin-text {
      opacity: 0;
    }

    .btn-signin-loader {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      border: 2px solid rgba(0, 0, 0, 0.2);
      border-top-color: #000;
      border-radius: 50%;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .btn-signin.loading .btn-signin-loader {
      opacity: 1;
      animation: spinBtn 0.6s linear infinite;
    }

    @keyframes spinBtn {
      to { transform: rotate(360deg); }
    }

    /* Material Picker Modal */
    .material-categories {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .material-category-btn {
      padding: 6px 12px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-secondary);
      font-size: 11px;
      cursor: pointer;
    }

    .material-category-btn:hover {
      border-color: var(--primary);
    }

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

    .materials-modal-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .material-modal-item {
      aspect-ratio: 1;
      border-radius: 8px;
      cursor: pointer;
      border: 2px solid transparent;
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
    }

    .material-modal-item:hover {
      border-color: var(--primary);
    }

    .material-modal-item.selected {
      border-color: var(--gold);
    }

    .material-modal-item .material-name {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,0.8);
      padding: 4px 6px;
      font-size: 9px;
      text-align: center;
    }

    .material-modal-item .material-price {
      position: absolute;
      top: 4px;
      right: 4px;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 8px;
      font-weight: 600;
      color: white;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

    .material-modal-item .material-brand {
      position: absolute;
      top: 4px;
      left: 4px;
      padding: 2px 5px;
      border-radius: 3px;
      font-size: 7px;
      font-weight: 500;
      background: rgba(0,0,0,0.7);
      color: white;
    }

    .material-modal-item.daltile-material {
      border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .material-modal-item.daltile-material:hover {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    }

    .upload-material-btn {
      aspect-ratio: 1;
      border-radius: 8px;
      border: 2px dashed var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-muted);
      gap: 4px;
    }

    .upload-material-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
    }

    .upload-material-btn svg {
      width: 24px;
      height: 24px;
    }

    .upload-material-btn span {
      font-size: 9px;
    }

    /* Share Modal */
    .share-link-box {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }

    .share-link-input {
      flex: 1;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px 12px;
      color: var(--text);
      font-size: 12px;
    }

    .permission-options {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }

    .permission-btn {
      flex: 1;
      padding: 10px;
      background: var(--dark-elevated);
      border: 2px solid var(--border);
      border-radius: 6px;
      color: var(--text-secondary);
      cursor: pointer;
      text-align: center;
    }

    .permission-btn:hover {
      border-color: var(--primary);
    }

    .permission-btn.active {
      border-color: var(--primary);
      background: rgba(99, 102, 241, 0.1);
      color: var(--text);
    }

    .permission-btn-title {
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .permission-btn-desc {
      font-size: 10px;
      color: var(--text-muted);
    }

    /* Enhanced Share Modal */
    .share-status {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-size: 12px;
      color: var(--text-secondary);
    }

    .share-status .status-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--text-muted);
    }

    .permission-section h4 {
      font-size: 12px;
      margin-bottom: 12px;
      color: var(--text-secondary);
    }

    #shareModal .permission-options {
      flex-direction: column;
    }

    #shareModal .permission-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      text-align: left;
    }

    .permission-icon {
      width: 36px;
      height: 36px;
      min-width: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--dark-hover);
      border-radius: 8px;
    }

    .permission-icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-secondary);
    }

    .permission-info {
      flex: 1;
    }

    .share-actions {
      margin-top: 16px;
    }

    .active-shares {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }

    .active-shares h4,
    .recent-activity h4 {
      font-size: 12px;
      margin-bottom: 12px;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .recent-activity {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }

    .activity-list {
      max-height: 200px;
      overflow-y: auto;
    }

    .activity-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px;
      background: var(--dark-elevated);
      border-radius: 6px;
      margin-bottom: 6px;
      font-size: 12px;
    }

    .activity-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    .activity-icon.view { background: rgba(99, 102, 241, 0.2); }
    .activity-icon.comment { background: rgba(249, 203, 0, 0.2); }
    .activity-icon.approve { background: rgba(16, 185, 129, 0.2); }
    .activity-icon.reject { background: rgba(239, 68, 68, 0.2); }

    .activity-content {
      flex: 1;
    }

    .activity-text {
      color: var(--text-primary);
      line-height: 1.4;
    }

    .activity-time {
      color: var(--text-muted);
      font-size: 10px;
      margin-top: 2px;
    }

    /* Invite Recipients Picker */
    .invite-recipients-section {
      margin: 20px 0;
      padding: 16px;
      background: rgba(99, 102, 241, 0.04);
      border-radius: 12px;
      border: 1px solid rgba(99, 102, 241, 0.15);
    }

    .invite-chips-container {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 8px;
      min-height: 0;
    }

    .invite-chips-container:empty {
      margin-bottom: 0;
    }

    .invite-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px 4px 10px;
      background: rgba(99, 102, 241, 0.15);
      border: 1px solid rgba(99, 102, 241, 0.3);
      border-radius: 16px;
      font-size: 12px;
      color: var(--text);
      max-width: 220px;
    }

    .invite-chip-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .invite-chip-remove {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-muted);
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0;
      line-height: 1;
    }

    .invite-chip-remove:hover {
      background: rgba(239, 68, 68, 0.3);
      color: #ef4444;
    }

    .invite-search-wrapper {
      position: relative;
    }

    .invite-search-wrapper input {
      width: 100%;
      padding: 10px 14px;
      background: var(--dark-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      outline: none;
      transition: border-color 0.2s;
      box-sizing: border-box;
    }

    .invite-search-wrapper input:focus {
      border-color: var(--primary);
    }

    .invite-search-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-top: 4px;
      max-height: 200px;
      overflow-y: auto;
      z-index: 1000;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .invite-search-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      cursor: pointer;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      transition: background 0.15s;
    }

    .invite-search-item:last-child {
      border-bottom: none;
    }

    .invite-search-item:hover {
      background: rgba(99, 102, 241, 0.1);
    }

    .invite-search-item-info {
      flex: 1;
      min-width: 0;
    }

    .invite-search-item-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .invite-search-item-email {
      font-size: 11px;
      color: var(--text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .invite-source-badge {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 6px;
      border-radius: 4px;
      flex-shrink: 0;
    }

    .invite-source-badge.lead {
      background: rgba(249, 168, 37, 0.15);
      color: #f9a825;
    }

    .invite-source-badge.customer {
      background: rgba(16, 185, 129, 0.15);
      color: #10b981;
    }

    .invite-source-badge.manual {
      background: rgba(99, 102, 241, 0.15);
      color: #6366f1;
    }

    .invite-search-empty {
      padding: 16px;
      text-align: center;
      color: var(--text-muted);
      font-size: 12px;
    }

    .invite-send-status {
      margin-top: 10px;
      font-size: 12px;
    }

    .invite-send-status .status-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 0;
    }

    .invite-send-status .status-item.success { color: #10b981; }
    .invite-send-status .status-item.failed { color: #ef4444; }
    .invite-send-status .status-item.sending { color: var(--text-muted); }

    /* ============================================
       MOBILE OPTIMIZATIONS FOR SHARE & OVERLAY
       ============================================ */

    /* Share Modal - Mobile */
    @media (max-width: 600px) {
      #shareModal .modal {
        max-width: 100%;
        margin: 0;
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
      }

      #shareModal .modal-content {
        max-height: calc(90vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 24px;
      }

      .share-link-box {
        flex-direction: column;
        gap: 8px;
      }

      .share-link-input {
        width: 100%;
        font-size: 14px !important;
        padding: 14px 12px !important;
      }

      .share-link-box .btn {
        width: 100%;
        padding: 14px;
        font-size: 15px;
      }

      /* Social share buttons - 2 per row on mobile */
      .social-share-section > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
      }

      .social-share-btn {
        padding: 12px 10px !important;
        font-size: 12px !important;
        justify-content: center;
        width: 100%;
      }

      /* Permission options - stack vertically with larger touch targets */
      .permission-options {
        gap: 8px !important;
      }

      #shareModal .permission-btn {
        padding: 14px 12px !important;
        min-height: 64px;
      }

      .permission-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
      }

      .permission-icon svg {
        width: 22px !important;
        height: 22px !important;
      }

      .permission-btn-title {
        font-size: 14px !important;
      }

      .permission-btn-desc {
        font-size: 11px !important;
      }

      /* Invite section */
      .invite-recipients-section {
        margin: 16px 0;
        padding: 12px;
      }

      #inviteSearchInput {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 14px 12px !important;
      }

      .invite-chip {
        padding: 8px 10px 8px 12px;
        font-size: 13px;
      }

      /* Share actions button */
      .share-actions .btn {
        width: 100%;
        padding: 16px;
        font-size: 16px;
        font-weight: 600;
      }
    }

    /* Shared Design View - Customer View Mode */
    .shared-view-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
      color: white;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 10000;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }

    .shared-view-banner-info {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1;
    }

    .shared-view-banner-title {
      font-weight: 600;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .shared-view-banner-meta {
      font-size: 12px;
      opacity: 0.8;
    }

    .shared-view-banner-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .shared-view-banner-btn {
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }

    .shared-view-banner-btn.primary {
      background: white;
      color: #4f46e5;
    }

    .shared-view-banner-btn.secondary {
      background: rgba(255, 255, 255, 0.15);
      color: white;
    }

    @media (max-width: 600px) {
      .shared-view-banner {
        flex-direction: column;
        gap: 10px;
        padding: 12px;
        text-align: center;
      }

      .shared-view-banner-info {
        flex-direction: column;
        gap: 4px;
      }

      .shared-view-banner-actions {
        width: 100%;
        justify-content: center;
      }

      .shared-view-banner-btn {
        flex: 1;
        padding: 12px 16px;
        font-size: 14px;
      }
    }

    /* Mobile Quote Summary Overlay */
    .mobile-quote-overlay {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(26, 26, 46, 0.95) 20%, #1a1a2e 100%);
      padding: 60px 16px 24px;
      z-index: 999;
      display: none;
    }

    .mobile-quote-overlay.show {
      display: block;
    }

    .mobile-quote-card {
      background: var(--dark-elevated);
      border-radius: 16px;
      padding: 20px;
      border: 1px solid var(--border);
    }

    .mobile-quote-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .mobile-quote-label {
      font-size: 13px;
      color: var(--text-muted);
    }

    .mobile-quote-amount {
      font-size: 28px;
      font-weight: 700;
      color: var(--gold);
    }

    .mobile-quote-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .mobile-quote-actions .btn {
      padding: 14px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 10px;
    }

    .mobile-quote-actions .btn-primary {
      grid-column: span 2;
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      padding: 16px;
      font-size: 16px;
    }

    /* Mobile-friendly 3D controls */
    @media (max-width: 600px) {
      .three-controls {
        bottom: 80px !important;
        left: auto !important; /* Reset left positioning */
        right: 12px !important;
        max-width: calc(100% - 24px) !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px !important;
      }

      .three-controls button {
        width: 40px !important;
        height: 40px !important;
        padding: 6px !important;
        font-size: 10px !important;
      }

      .three-controls button span {
        display: none !important; /* Hide text labels on mobile */
      }

      .three-controls button svg {
        width: 18px !important;
        height: 18px !important;
      }

      .three-controls-group {
        padding: 2px !important;
      }

      .three-controls-divider {
        display: none !important; /* Hide dividers on mobile */
      }

      /* Larger touch targets for canvas interaction */
      #three-container {
        touch-action: pan-x pan-y pinch-zoom;
      }

      /* Hide axis indicator on mobile - takes up too much space */
      .axis-indicator-container {
        display: none !important;
      }

      /* Move 3D hint to top center on mobile */
      .three-hint {
        bottom: auto !important;
        top: 70px !important;
        right: 50% !important;
        transform: translateX(50%) !important;
        font-size: 10px !important;
        padding: 6px 10px !important;
      }
    }

    /* Quote Customer Search */
    .quote-customer-search-wrap {
      position: relative;
      margin-bottom: 12px;
      grid-column: span 2;
    }
    .quote-customer-search-wrap input {
      width: 100%;
      padding: 10px 12px 10px 36px;
      background: var(--dark-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
    }
    .quote-customer-search-wrap input:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
    }
    .quote-customer-search-wrap .search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      pointer-events: none;
    }
    #quoteCustomerResults {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      max-height: 220px;
      overflow-y: auto;
      z-index: 100;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
      margin-top: 4px;
    }
    .quote-cust-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      transition: background 0.15s;
    }
    .quote-cust-item:last-child { border-bottom: none; }
    .quote-cust-item:hover { background: var(--dark-hover); }
    .quote-cust-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(99,102,241,0.15);
      color: #a5b4fc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      flex-shrink: 0;
    }
    .quote-cust-info { flex: 1; min-width: 0; }
    .quote-cust-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .quote-cust-email { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .quote-cust-jobs-badge {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 10px;
      background: rgba(99,102,241,0.12);
      color: #a5b4fc;
      font-weight: 500;
      white-space: nowrap;
    }
    .quote-customer-selected-banner {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(99,102,241,0.08);
      border: 1px solid rgba(99,102,241,0.2);
      border-radius: 8px;
      margin-bottom: 10px;
      grid-column: span 2;
    }
    .quote-customer-selected-banner .name { font-weight: 600; color: var(--text); font-size: 13px; }
    .quote-customer-selected-banner .meta { font-size: 11px; color: var(--text-muted); }
    .quote-customer-selected-banner .clear-btn {
      margin-left: auto;
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 16px;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .quote-customer-selected-banner .clear-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }

    .share-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background: var(--dark-elevated);
      border-radius: 6px;
      margin-bottom: 8px;
    }

    .share-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .share-permission {
      font-size: 11px;
      font-weight: 500;
    }

    .share-stats {
      font-size: 10px;
      color: var(--text-muted);
    }

    .share-item .share-actions {
      display: flex;
      gap: 8px;
      margin-top: 0;
    }

    .share-item .share-actions button {
      margin-left: 0;
      padding: 6px 12px;
      font-size: 11px;
    }

    /* Pricing Section in Properties */
    .pricing-section {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    /* Pricing Locked State */
    .pricing-locked {
      position: relative;
      pointer-events: none;
      opacity: 0.3;
      filter: blur(3px);
    }

    .pricing-locked-overlay {
      background: linear-gradient(135deg, rgba(26,26,46,0.95), rgba(22,33,62,0.95));
      border-radius: 12px;
      padding: 24px;
      margin: 12px;
      text-align: center;
    }

    .pricing-locked-content {
      color: var(--text);
    }

    .pricing-locked-content h4 {
      color: #fff;
      font-size: 16px;
      margin-bottom: 8px;
    }

    .pricing-locked-content p {
      color: var(--text-muted);
      font-size: 13px;
      margin-bottom: 16px;
      line-height: 1.5;
    }

    .pricing-locked-content .btn {
      background: linear-gradient(135deg, #f9cb00 0%, #e6b800 100%);
      color: #1a1a2e;
      border: none;
      padding: 12px 24px;
      font-weight: 600;
    }

    .upgrade-plan-btn {
      position: relative;
      width: 100%;
      padding: 14px 16px;
      border: 1px solid rgba(99, 102, 241, 0.3);
      border-radius: 10px;
      background: rgba(99, 102, 241, 0.1);
      color: #fff;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: left;
    }

    .upgrade-plan-btn:hover {
      background: rgba(99, 102, 241, 0.2);
      border-color: rgba(99, 102, 241, 0.5);
      transform: translateY(-1px);
    }

    .upgrade-plan-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
      transform: none;
    }

    .upgrade-plan-featured {
      border-color: #6366f1;
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.25));
    }

    .upgrade-plan-featured:hover {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(79, 70, 229, 0.35));
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .property-section-title {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
    }

    .price-override-group {
      display: flex;
      gap: 4px;
    }

    .price-input {
      width: 70px !important;
    }

    .margin-input {
      width: 60px !important;
    }

    .property-select-sm {
      width: 50px;
      padding: 5px 4px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      font-size: 10px;
    }

    .price-result {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed var(--border);
    }

    .price-highlight {
      color: var(--gold);
      font-weight: 600;
    }

    /* Enhanced Quote Panel */
    .quote-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .quote-view-toggle {
      display: flex;
      background: var(--dark-elevated);
      border-radius: 4px;
      padding: 2px;
    }

    .toggle-btn {
      padding: 4px 8px;
      font-size: 10px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      border-radius: 3px;
      transition: all 0.2s;
    }

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

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

    .quote-actions {
      display: flex;
      gap: 6px;
      margin: 10px 0;
    }

    .quote-actions .btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      padding: 6px 8px;
    }

    .quote-summary {
      margin-top: 10px;
      flex-shrink: 0;
    }

    .quote-row {
      display: flex;
      justify-content: space-between;
      padding: 4px 0;
      font-size: 11px;
      color: var(--text-secondary);
    }

    .margin-badge {
      display: inline-block;
      font-size: 9px;
      background: var(--dark-hover);
      padding: 2px 5px;
      border-radius: 3px;
      margin-left: 6px;
      color: var(--text-muted);
    }

    /* Price List Modal */
    .price-list-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 8px;
    }

    .tab-btn {
      padding: 8px 16px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 12px;
      border-radius: 4px;
      transition: all 0.2s;
    }

    .tab-btn:hover {
      color: var(--text-secondary);
      background: var(--dark-elevated);
    }

    .tab-btn.active {
      background: var(--dark-elevated);
      color: var(--text);
    }

    .price-tab {
      min-height: 200px;
    }

    .upload-dropzone {
      border: 2px dashed var(--border);
      border-radius: 8px;
      padding: 40px 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .upload-dropzone:hover {
      border-color: var(--primary);
      background: rgba(99, 102, 241, 0.05);
    }

    .column-mapping {
      padding: 16px 0;
    }

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

    .mapping-row label {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .mapping-row select {
      width: 200px;
    }

    .mapping-preview {
      margin: 16px 0;
      padding: 12px;
      background: var(--dark-elevated);
      border-radius: 6px;
    }

    .preview-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }

    .preview-table th,
    .preview-table td {
      padding: 8px 6px;
      text-align: left;
      border-bottom: 1px solid var(--border);
    }

    .preview-table th {
      background: var(--dark-hover);
      font-weight: 600;
      font-size: 10px;
      text-transform: uppercase;
    }

    .mapping-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 16px;
    }

    .saved-lists {
      min-height: 100px;
    }

    .price-list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      background: var(--dark-elevated);
      border-radius: 6px;
      margin-bottom: 8px;
    }

    .price-list-name {
      font-weight: 500;
      font-size: 13px;
    }

    .price-list-date {
      font-size: 11px;
      color: var(--text-muted);
    }

    .current-prices-header {
      margin-bottom: 12px;
    }

    .search-input {
      width: 100%;
      padding: 10px 12px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 12px;
    }

    .current-prices-list {
      max-height: 300px;
      overflow-y: auto;
    }

    .price-category-header {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      padding: 8px 0 4px;
      margin-top: 8px;
      border-bottom: 1px solid var(--border);
    }

    .current-price-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 4px;
      font-size: 11px;
      border-bottom: 1px solid var(--dark-elevated);
    }

    .price-item-name {
      flex: 1;
    }

    .price-item-sku {
      width: 80px;
      color: var(--text-muted);
      font-size: 10px;
    }

    .price-item-value {
      font-weight: 500;
      color: var(--gold);
    }

    .empty-state {
      text-align: center;
      color: var(--text-muted);
      padding: 20px;
      font-size: 12px;
    }

    /* Labor Category Accordion */
    .labor-categories {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .labor-category {
      background: var(--dark-elevated);
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .labor-category-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      cursor: pointer;
      transition: background 0.2s;
      user-select: none;
    }

    .labor-category-header:hover {
      background: var(--dark-hover);
    }

    .labor-category.expanded .labor-category-header {
      border-bottom: 1px solid var(--border);
      background: var(--dark-hover);
    }

    .category-icon {
      font-size: 16px;
      color: var(--gold);
      width: 24px;
      text-align: center;
    }

    .category-title {
      flex: 1;
      font-weight: 600;
      font-size: 14px;
      color: var(--text);
    }

    .category-toggle {
      font-size: 10px;
      color: var(--text-muted);
      transition: transform 0.2s;
    }

    .labor-category.expanded .category-toggle {
      transform: rotate(180deg);
    }

    .labor-category-items {
      display: none;
      padding: 12px 16px;
      background: rgba(0,0,0,0.2);
    }

    .labor-category.expanded .labor-category-items {
      display: block;
    }

    .labor-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }

    .labor-item:last-child {
      border-bottom: none;
    }

    .labor-item-label {
      flex: 1;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .labor-item-rate {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .labor-item-rate input {
      width: 80px;
      padding: 6px 8px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      font-size: 13px;
      text-align: right;
    }

    .labor-item-rate input:focus {
      outline: none;
      border-color: var(--gold);
    }

    .labor-item-unit {
      font-size: 11px;
      color: var(--text-muted);
      min-width: 50px;
    }

    /* Material Pricing Section */
    .material-pricing-section {
      background: var(--dark-elevated);
      border-radius: 8px;
      padding: 16px;
      border: 1px solid var(--border);
    }

    .material-price-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }

    .material-price-row:last-child {
      border-bottom: none;
    }

    .material-price-label {
      flex: 1;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .material-price-inputs {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .material-price-inputs input {
      width: 90px;
      padding: 6px 8px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      font-size: 13px;
      text-align: right;
    }

    .material-price-inputs input:focus {
      outline: none;
      border-color: var(--gold);
    }

    .material-price-inputs span {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* Quote Preview Table */
    .quote-preview-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .quote-preview-table thead {
      position: sticky;
      top: 0;
      background: var(--dark-surface);
      z-index: 1;
    }

    .quote-preview-table th {
      text-align: left;
      padding: 12px 10px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--text-muted);
      border-bottom: 2px solid var(--border);
    }

    .quote-preview-table td {
      padding: 10px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }

    .quote-preview-table tbody tr:hover {
      background: rgba(255, 255, 255, 0.03);
    }

    .quote-preview-table .room-header {
      background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, transparent 100%);
      font-weight: 600;
      color: var(--primary);
    }

    .quote-preview-table .room-header td {
      padding: 8px 10px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 1px solid rgba(99, 102, 241, 0.3);
    }

    .quote-preview-table .room-subtotal {
      background: rgba(255, 255, 255, 0.02);
    }

    .quote-preview-table .room-subtotal td {
      font-weight: 600;
      font-size: 12px;
      color: var(--text-secondary);
    }

    .quote-item-type-icon {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .quote-item-type-icon.countertop {
      background: rgba(249, 203, 0, 0.15);
      color: var(--gold);
    }

    .quote-item-type-icon.cabinet {
      background: rgba(16, 185, 129, 0.15);
      color: #34d399;
    }

    .quote-item-type-icon.labor {
      background: rgba(99, 102, 241, 0.15);
      color: #818cf8;
    }

    .quote-item-type-icon.other {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-muted);
    }

    .quote-editable-input {
      width: 100%;
      padding: 6px 8px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      font-size: 13px;
      text-align: right;
    }

    .quote-editable-input:focus {
      outline: none;
      border-color: var(--gold);
      background: var(--dark-elevated);
    }

    .quote-editable-input.modified {
      border-color: var(--warning);
      background: rgba(245, 158, 11, 0.1);
    }

    .quote-margin-badge {
      display: inline-block;
      padding: 2px 6px;
      background: rgba(16, 185, 129, 0.15);
      color: #34d399;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
    }

    .quote-margin-badge.low {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
    }

    .quote-margin-badge.high {
      background: rgba(16, 185, 129, 0.15);
      color: #34d399;
    }

    /* Room Management */
    .room-list {
      max-height: 300px;
      overflow-y: auto;
      padding: 4px;
    }

    .room-list-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .room-list-item:hover {
      border-color: var(--primary);
      background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08));
      transform: translateX(4px);
    }

    .room-list-item.active {
      border-color: var(--primary);
      background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15));
      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.2);
    }

    .room-list-item .room-color {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      flex-shrink: 0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .room-list-item .room-name {
      flex: 1;
      font-weight: 500;
      font-size: 14px;
    }

    .room-list-item .room-count {
      font-size: 11px;
      color: var(--text-muted);
      padding: 3px 10px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      font-weight: 500;
    }

    .room-list-item.active .room-count {
      background: rgba(99, 102, 241, 0.3);
      color: white;
    }

    .room-list-item .room-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.2s;
    }

    .room-list-item:hover .room-actions {
      opacity: 1;
    }

    .room-list-item .room-actions button {
      width: 28px;
      height: 28px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
    }

    .room-list-item .room-actions button:hover {
      background: var(--dark-hover);
      color: var(--text);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .room-list-item .room-actions button.delete:hover {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.3);
      color: #ef4444;
    }

    /* Room color options */
    .room-colors {
      display: flex;
      gap: 6px;
      padding: 8px 0;
    }

    .room-color-option {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 0.15s, border-color 0.15s;
    }

    .room-color-option:hover {
      transform: scale(1.1);
    }

    .room-color-option.selected {
      border-color: white;
    }

    /* Margin Modal */
    .margin-section {
      padding: 8px 0;
    }

    .margin-global {
      margin-bottom: 16px;
    }

    .margin-global label {
      display: block;
      font-size: 12px;
      margin-bottom: 6px;
      color: var(--text-secondary);
    }

    .margin-input-group {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .margin-input-group input {
      width: 80px;
    }

    .margin-symbol {
      font-size: 12px;
      color: var(--text-muted);
    }

    .margin-categories h4 {
      font-size: 12px;
      margin-bottom: 12px;
      color: var(--text-secondary);
    }

    .category-margin-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--dark-elevated);
    }

    .category-margin-row span {
      font-size: 12px;
    }

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

    /* Permission Notice */
    .permission-notice {
      position: fixed;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1002;
      animation: slideDown 0.3s ease;
    }

    .notice-content {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 16px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
      font-size: 12px;
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* Presentation Mode */
    body.presentation-mode .sidebar,
    body.presentation-mode .right-panel {
      display: none;
    }

    body.presentation-mode .canvas-container {
      width: 100%;
    }

    /* 3D Axis Indicator (Orientation Key) - Glassmorphic */
    .axis-indicator-container {
      position: absolute;
      bottom: 20px;
      left: 20px;
      width: 100px;
      height: 100px;
      z-index: 100;
      pointer-events: none;
      border-radius: 16px;
      background: linear-gradient(135deg,
        rgba(20, 20, 30, 0.92) 0%,
        rgba(15, 15, 25, 0.95) 50%,
        rgba(25, 25, 35, 0.93) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-top-color: rgba(255, 255, 255, 0.25);
      border-left-color: rgba(255, 255, 255, 0.2);
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .axis-indicator-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50%;
      background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.04) 0%,
        transparent 100%);
      pointer-events: none;
      border-radius: 16px 16px 0 0;
    }

    .axis-indicator-container canvas {
      width: 100% !important;
      height: 100% !important;
    }

    .axis-label {
      position: absolute;
      font-size: 11px;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.8);
      pointer-events: none;
    }

    .axis-label-x { color: #ff4444; }
    .axis-label-y { color: #44ff44; }
    .axis-label-z { color: #4488ff; }

    @media (max-width: 600px) {
      /* Hide axis indicator on small screens - too cluttered */
      .axis-indicator-container {
        display: none !important;
      }
      .axis-label { display: none !important; }
    }

    /* Button danger variant */
    .btn-danger {
      background: var(--error);
      color: white;
    }

    .btn-danger:hover {
      background: #dc2626;
    }

    /* ============================================= */
    /* Minimal Professional Loading Screen */
    /* ============================================= */
    .cloud-preloader {
      position: fixed;
      inset: 0;
      background: #0a0a0a;
      z-index: 99999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity 0.6s ease, visibility 0.6s ease;
    }

    .cloud-preloader.loaded {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* Main Content */
    .preloader-content {
      text-align: center;
      opacity: 0;
      animation: contentFadeIn 0.8s ease-out 0.2s forwards;
    }

    @keyframes contentFadeIn {
      0% { opacity: 0; transform: translateY(10px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Company Name */
    .preloader-company {
      font-family: 'Inter', -apple-system, sans-serif;
      font-size: 2.5rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .preloader-tagline {
      font-size: 1rem;
      color: rgba(255,255,255,0.4);
      margin-bottom: 48px;
    }

    /* Loading Bar */
    .preloader-loading {
      width: 200px;
      margin: 0 auto;
    }

    .preloader-bar {
      height: 2px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      overflow: hidden;
    }

    .preloader-bar-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #6366f1, #8b5cf6);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    /* Powered By Badge */
    .preloader-powered {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 8px;
      opacity: 0;
      animation: poweredFadeIn 0.6s ease-out 0.8s forwards;
    }

    @keyframes poweredFadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    .preloader-powered-icon {
      width: 20px;
      height: 20px;
    }

    .preloader-powered-icon svg {
      width: 20px;
      height: 20px;
    }

    .preloader-powered-text {
      font-size: 12px;
      color: rgba(255,255,255,0.3);
    }

    .preloader-powered-brand {
      color: rgba(255,255,255,0.5);
      font-weight: 600;
    }

    /* Hide old elements */
    .blueprint-grid,
    .blueprint-corners,
    .preloader-main,
    .room-wireframe,
    .steps-flow,
    .progress-section,
    .designer-section,
    .powered-by-section { display: none !important; }

    .cad-element.countertop {
      display: none;
      width: 240px;
      height: 40px;
      bottom: 60px;
      left: 80px;
      border-color: rgba(249, 203, 0, 0.7);
      animation: elementPlace 0.6s ease-out 2s forwards;
    }

    .cad-element.countertop::before { border-color: rgba(249, 203, 0, 0.5); }

    .cad-element.cabinet {
      width: 80px;
      height: 100px;
      bottom: 60px;
      left: 80px;
      border-color: rgba(139, 92, 246, 0.7);
      animation: elementPlace 0.6s ease-out 2.3s forwards;
    }

    .cad-element.cabinet::before { border-color: rgba(139, 92, 246, 0.5); }

    .cad-element.cabinet-2 {
      width: 80px;
      height: 100px;
      bottom: 60px;
      left: 180px;
      border-color: rgba(139, 92, 246, 0.7);
      animation: elementPlace 0.6s ease-out 2.5s forwards;
    }

    .cad-element.island {
      width: 120px;
      height: 80px;
      bottom: 120px;
      left: 180px;
      border-color: rgba(34, 197, 94, 0.7);
      animation: elementPlace 0.6s ease-out 2.7s forwards;
    }

    .cad-element.island::before { border-color: rgba(34, 197, 94, 0.5); }

    .cad-element.appliance {
      width: 50px;
      height: 50px;
      bottom: 60px;
      right: 80px;
      border-color: rgba(239, 68, 68, 0.7);
      animation: elementPlace 0.6s ease-out 2.9s forwards;
    }

    .cad-element.appliance::before { border-color: rgba(239, 68, 68, 0.5); }

    @keyframes elementPlace {
      0% {
        opacity: 0;
        transform: scale(0.8);
        filter: blur(4px);
      }
      50% {
        opacity: 1;
        border-color: inherit;
        box-shadow: 0 0 20px currentColor;
      }
      100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
        box-shadow: 0 0 10px currentColor;
      }
    }

    /* Node Connection Lines - ReactFlow Style */
    .node-connections {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      animation: connectionsFadeIn 0.8s ease-out 3.2s forwards;
    }

    @keyframes connectionsFadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    .connection-line {
      position: absolute;
      background: linear-gradient(90deg, rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.6));
      height: 2px;
      transform-origin: left center;
      animation: lineGrow 0.5s ease-out forwards;
    }

    .connection-line::after {
      content: '';
      position: absolute;
      right: -4px;
      top: -3px;
      width: 8px;
      height: 8px;
      background: rgba(139, 92, 246, 0.8);
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
    }

    @keyframes lineGrow {
      0% { width: 0; }
      100% { width: 100%; }
    }

    /* Right Side Panel */
    .preloader-panel {
      width: 320px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* Brand Section */
    /* Designer/Company Section - Main Focus */
    .designer-section {
      text-align: center;
      opacity: 0;
      animation: designerFadeIn 0.8s ease-out 0.8s forwards;
      margin-bottom: 32px;
    }

    @keyframes designerFadeIn {
      0% { opacity: 0; transform: translateY(-20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .designer-label {
      font-size: 11px;
      color: rgba(255,255,255,0.5);
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .designer-company {
      font-family: 'Inter', -apple-system, sans-serif;
      font-size: 1.8rem;
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 6px;
      line-height: 1.2;
    }

    .designer-tagline {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
    }

    /* Steps Node Flow */
    .steps-flow {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }

    .step-node {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 12px 16px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      position: relative;
      opacity: 0;
      transform: translateX(-20px);
      transition: all 0.4s ease;
    }

    .step-node.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .step-node.active {
      background: rgba(66, 133, 244, 0.1);
      border-color: rgba(66, 133, 244, 0.4);
      box-shadow: 0 0 30px rgba(66, 133, 244, 0.2);
    }

    .step-node.completed {
      background: rgba(34, 197, 94, 0.08);
      border-color: rgba(34, 197, 94, 0.2);
    }

    .step-node-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      transition: all 0.3s ease;
    }

    .step-node.active .step-node-icon {
      background: linear-gradient(135deg, rgba(66, 133, 244, 0.3), rgba(52, 168, 83, 0.3));
      border-color: rgba(66, 133, 244, 0.5);
      box-shadow: 0 0 20px rgba(66, 133, 244, 0.4);
    }

    .step-node.completed .step-node-icon {
      background: rgba(34, 197, 94, 0.2);
      border-color: rgba(34, 197, 94, 0.4);
    }

    .step-node-content {
      flex: 1;
    }

    .step-node-title {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      margin-bottom: 2px;
    }

    .step-node-desc {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }

    .step-node.active .step-node-title {
      color: #4285F4;
    }

    .step-node.completed .step-node-title {
      color: rgba(34, 197, 94, 0.9);
    }

    /* Connection between nodes */
    .step-connector {
      width: 2px;
      height: 16px;
      background: rgba(255,255,255,0.1);
      margin-left: 35px;
      position: relative;
      overflow: hidden;
    }

    .step-connector::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0%;
      background: linear-gradient(180deg, rgba(66, 133, 244, 0.6), rgba(52, 168, 83, 0.6));
      transition: height 0.3s ease;
    }

    .step-connector.filled::after {
      height: 100%;
    }

    /* Progress Section */
    .progress-section {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 20px;
      opacity: 0;
      animation: progressFadeIn 0.6s ease-out 1.2s forwards;
    }

    @keyframes progressFadeIn {
      0% { opacity: 0; transform: scale(0.95); }
      100% { opacity: 1; transform: scale(1); }
    }

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

    .progress-label {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,0.7);
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    .progress-percent {
      font-size: 14px;
      font-weight: 700;
      color: #818cf8;
    }

    .progress-bar-container {
      height: 8px;
      background: rgba(255,255,255,0.1);
      border-radius: 8px;
      overflow: hidden;
    }

    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #EA4335);
      border-radius: 8px;
      width: 0%;
      transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .progress-bar-fill::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      animation: shimmer 1.5s infinite;
    }

    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    /* Powered By Remodely Badge */
    .powered-by-section {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      animation: poweredByFadeIn 0.6s ease-out 1.5s forwards;
    }

    @keyframes poweredByFadeIn {
      0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
      100% { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    .powered-by-badge {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 20px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50px;
      backdrop-filter: blur(10px);
    }

    .powered-by-icon {
      width: 22px;
      height: 22px;
    }

    .powered-by-icon svg {
      width: 22px;
      height: 22px;
    }

    .powered-by-text {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .powered-by-label {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }

    .powered-by-brand {
      font-size: 12px;
      font-weight: 700;
      color: #ffffff;
    }

    /* Scan Line */
    .scan-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(66, 133, 244, 0.6), rgba(52, 168, 83, 0.6), rgba(251, 188, 5, 0.6), transparent);
      box-shadow: 0 0 20px rgba(66, 133, 244, 0.4);
      animation: scanDown 4s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes scanDown {
      0% { top: -2px; opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }

    /* Mobile Responsive */
    @media (max-width: 900px) {
      .preloader-main {
        flex-direction: column;
        gap: 30px;
      }

      .room-wireframe {
        width: 300px;
        height: 220px;
      }

      .preloader-panel {
        width: 100%;
        max-width: 350px;
      }

      .cad-element.countertop { width: 180px; height: 30px; left: 60px; }
      .cad-element.cabinet { width: 60px; height: 75px; left: 60px; }
      .cad-element.cabinet-2 { width: 60px; height: 75px; left: 130px; }
      .cad-element.island { width: 90px; height: 60px; left: 130px; }
    }

    /* Review Room */
    .loading-shared {
      pointer-events: none;
    }

    .loading-shared::after {
      display: none; /* Hide old loading, use cloud preloader instead */
      background: rgba(0,0,0,0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
      z-index: 9999;
    }

    .review-room {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
    }

    .review-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      background: linear-gradient(135deg, var(--dark-surface) 0%, #1a1a35 100%);
      border-bottom: 1px solid var(--border);
      gap: 12px;
    }

    .review-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1;
    }

    .review-back-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      color: var(--text);
      text-decoration: none;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .review-back-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      color: var(--gold);
    }

    .review-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--gold);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .review-header-right {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .review-header-right .btn {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    @media (max-width: 600px) {
      .review-header {
        padding: 10px 12px;
        flex-wrap: wrap;
      }

      .review-header-left {
        gap: 8px;
      }

      .review-back-btn {
        width: 36px;
        height: 36px;
      }

      .review-title {
        font-size: 14px;
        max-width: 120px;
      }

      .review-permission-badge {
        display: none;
      }

      .review-header-right .btn .btn-text {
        display: none;
      }

      .review-header-right .btn {
        padding: 8px 10px;
      }

      .live-indicator span:not(.live-dot) {
        display: none;
      }

      .live-indicator {
        padding: 6px;
      }
    }

    .review-permission-badge {
      padding: 4px 10px;
      background: var(--primary);
      border-radius: 12px;
      font-size: 11px;
      font-weight: 500;
    }

    /* Live Sync Indicator */
    .live-indicator {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: all 0.3s ease;
    }

    .live-indicator.connected {
      background: rgba(34, 197, 94, 0.15);
      color: #22c55e;
      border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .live-indicator.disconnected {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .live-indicator .live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      animation: livePulse 2s ease-in-out infinite;
    }

    .live-indicator.connected .live-dot {
      background: #22c55e;
    }

    .live-indicator.disconnected .live-dot {
      background: #ef4444;
      animation: none;
    }

    .live-indicator.flash {
      animation: liveFlash 0.5s ease;
    }

    @keyframes livePulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    @keyframes liveFlash {
      0% { background: rgba(34, 197, 94, 0.15); }
      50% { background: rgba(34, 197, 94, 0.4); }
      100% { background: rgba(34, 197, 94, 0.15); }
    }

    .review-header-right {
      display: flex;
      gap: 8px;
    }

    .review-panel {
      position: fixed;
      top: 56px;
      right: -380px;
      width: 380px;
      height: calc(100vh - 56px);
      background: var(--dark-surface);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      transition: right 0.3s ease;
      z-index: 999;
    }

    .review-panel.open {
      right: 0;
    }

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

    .review-panel-header h3 {
      font-size: 14px;
      font-weight: 600;
    }

    .review-panel-close {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--dark-elevated);
      border: none;
      border-radius: 4px;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 18px;
    }

    .review-summary {
      display: flex;
      padding: 16px;
      gap: 16px;
      background: var(--dark-elevated);
      border-bottom: 1px solid var(--border);
    }

    .review-stat {
      flex: 1;
      text-align: center;
    }

    .stat-value {
      display: block;
      font-size: 20px;
      font-weight: 700;
      color: var(--gold);
    }

    .stat-value.approved {
      color: var(--success);
    }

    .stat-label {
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    .review-elements {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
    }

    .review-element {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .review-element:hover {
      border-color: var(--primary);
    }

    .review-element.approved {
      border-color: var(--success);
      background: rgba(16, 185, 129, 0.1);
    }

    .review-element.rejected {
      border-color: var(--error);
      background: rgba(239, 68, 68, 0.1);
    }

    .review-element-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .review-element-status {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 12px;
      background: var(--dark-hover);
    }

    .review-element-status.approved {
      background: var(--success);
      color: white;
    }

    .review-element-status.rejected {
      background: var(--error);
      color: white;
    }

    .review-element-name {
      flex: 1;
      font-weight: 500;
      font-size: 13px;
    }

    .review-element-price {
      font-weight: 600;
      color: var(--gold);
      font-size: 13px;
    }

    .review-element-details {
      display: flex;
      gap: 12px;
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .review-element-material {
      color: var(--text-secondary);
    }

    .review-element-actions {
      display: flex;
      gap: 6px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }

    .btn-approve, .btn-reject, .btn-comment {
      flex: 1;
      padding: 6px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
    }

    .btn-approve {
      background: rgba(16, 185, 129, 0.2);
      color: var(--success);
    }

    .btn-approve:hover {
      background: var(--success);
      color: white;
    }

    .btn-reject {
      background: rgba(239, 68, 68, 0.2);
      color: var(--error);
    }

    .btn-reject:hover {
      background: var(--error);
      color: white;
    }

    .btn-comment {
      background: var(--dark-hover);
      color: var(--text-secondary);
    }

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

    /* Chat-style comments section */
    .review-chat-section {
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      height: 280px;
    }

    .review-chat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      background: var(--dark-elevated);
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      font-weight: 600;
    }

    .chat-status {
      font-size: 10px;
      color: #10b981;
      font-weight: 500;
    }

    .chat-status.disconnected {
      color: #ef4444;
    }

    .review-chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .chat-message-row {
      display: flex;
      gap: 8px;
      max-width: 85%;
    }

    .chat-message-row.outbound {
      align-self: flex-end;
      flex-direction: row-reverse;
    }

    .chat-message-row.inbound {
      align-self: flex-start;
    }

    .chat-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      flex-shrink: 0;
    }

    .chat-message-row.inbound .chat-avatar {
      background: linear-gradient(135deg, #f9cb00, #f59e0b);
      color: #1a1a2e;
    }

    .chat-message-row.outbound .chat-avatar {
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: white;
    }

    .chat-bubble-wrap {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .chat-bubble {
      padding: 8px 12px;
      border-radius: 16px;
      font-size: 13px;
      line-height: 1.4;
      word-wrap: break-word;
    }

    .chat-message-row.inbound .chat-bubble {
      background: var(--dark-elevated);
      color: var(--text);
      border-bottom-left-radius: 4px;
    }

    .chat-message-row.outbound .chat-bubble {
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: white;
      border-bottom-right-radius: 4px;
    }

    .chat-meta {
      font-size: 9px;
      color: var(--text-muted);
      padding: 0 4px;
    }

    .chat-message-row.outbound .chat-meta {
      text-align: right;
    }

    .review-chat-input {
      display: flex;
      gap: 8px;
      padding: 10px 12px;
      background: var(--dark-elevated);
      border-top: 1px solid var(--border);
    }

    .review-chat-input input {
      flex: 1;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 8px 14px;
      font-size: 13px;
      color: var(--text);
      outline: none;
    }

    .review-chat-input input:focus {
      border-color: var(--primary);
    }

    .chat-send-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      transition: transform 0.15s, opacity 0.15s;
    }

    .chat-send-btn:hover {
      transform: scale(1.05);
    }

    .chat-send-btn:active {
      transform: scale(0.95);
    }

    .chat-empty {
      text-align: center;
      padding: 30px 20px;
      color: var(--text-muted);
    }

    .chat-empty-icon {
      font-size: 32px;
      margin-bottom: 8px;
      opacity: 0.5;
    }

    /* Legacy styles for backwards compatibility */
    .review-comments-section {
      border-top: 1px solid var(--border);
      padding: 12px;
    }

    .review-comment-input {
      display: flex;
      gap: 6px;
    }

    .review-comment-input input {
      flex: 1;
      padding: 8px 10px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 12px;
    }

    .review-actions {
      padding: 12px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 8px;
    }

    .review-actions .btn {
      flex: 1;
    }

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

    .btn-success:hover {
      background: #059669;
    }

    /* Quote Approval Actions */
    .quote-approval-actions {
      flex-direction: column;
      text-align: center;
      padding: 16px;
    }

    .approval-summary {
      margin-bottom: 12px;
    }

    .approval-note {
      color: var(--text-secondary);
      font-size: 13px;
      margin: 0;
    }

    .approve-pay-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 14px 24px;
      font-size: 16px;
      font-weight: 600;
      background: linear-gradient(135deg, #22c55e, #16a34a);
      border: none;
      border-radius: 8px;
      color: white;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    }

    .approve-pay-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
      background: linear-gradient(135deg, #16a34a, #15803d);
    }

    .approve-pay-btn:active {
      transform: translateY(0);
    }

    .approve-pay-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .approval-terms {
      color: var(--text-secondary);
      font-size: 11px;
      margin: 12px 0 0 0;
      opacity: 0.8;
    }

    .btn-lg {
      padding: 14px 24px;
      font-size: 16px;
    }

    /* Adjust main content when review room is active */
    body:has(.review-room) .header {
      display: none;
    }

    body:has(.review-room) .main {
      padding-top: 56px;
      margin-top: 0;
      height: 100vh;
      box-sizing: border-box;
    }

    /* Hide sidebar completely in review mode (non-collaborators) */
    body:has(.review-room).view-only-mode .sidebar,
    body:has(.review-room).review-readonly .sidebar {
      display: none !important;
    }

    /* For full collaborators, show sidebar with adjusted position */
    body:has(.review-room):not(.view-only-mode):not(.review-readonly) .sidebar {
      margin-top: 56px;
      height: calc(100vh - 56px);
    }

    body:has(.review-room) .right-panel {
      margin-top: 56px;
      height: calc(100vh - 56px);
    }

    body:has(.review-room) .canvas-area {
      flex: 1 1 auto;
      height: calc(100vh - 56px);
      min-height: 400px;
    }

    body:has(.review-room) .canvas-wrapper {
      flex: 1 1 auto;
      height: 100%;
      min-height: 300px;
    }

    body:has(.review-room) #canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    body:has(.review-room) .canvas-toolbar {
      display: none;
    }

    body:has(.review-room) .shortcuts-hint {
      display: none;
    }

    /* Hide editing UI in review mode for non-editors */
    body.review-readonly .sidebar {
      display: none;
    }

    body.review-readonly .right-panel .panel-section:not(#quotePanel) {
      display: none;
    }

    /* View-Only Mode - hide all editing UI */
    body.view-only-mode .sidebar {
      display: none !important;
    }

    body.view-only-mode .main {
      margin-left: 0 !important;
    }

    body.view-only-mode .toolbar-btn:not([data-tool="pan"]):not([data-tool="zoom-in"]):not([data-tool="zoom-out"]) {
      display: none !important;
    }

    body.view-only-mode .element-selector,
    body.view-only-mode .item-picker,
    body.view-only-mode #saveDesignBtn,
    body.view-only-mode #shareDesignBtn,
    body.view-only-mode .add-room-btn,
    body.view-only-mode .edit-actions {
      display: none !important;
    }

    body.view-only-mode .right-panel .panel-section:not(#quotePanel) {
      display: none !important;
    }

    /* Hide mobile toolbar in view-only/review mode */
    body.view-only-mode .mobile-toolbar,
    body.review-readonly .mobile-toolbar,
    body:has(.review-room) .mobile-toolbar {
      display: none !important;
    }

    /* Hide all tool buttons in shared view */
    body.view-only-mode .tool-btn,
    body.review-readonly .tool-btn {
      display: none !important;
    }

    /* Hide the entire TOOLS section in shared view */
    body.view-only-mode .tool-grid,
    body.review-readonly .tool-grid,
    body.view-only-mode #toolsSection,
    body.review-readonly #toolsSection {
      display: none !important;
    }

    /* Hide the entire left sidebar in shared view (only show canvas and review panel) */
    body.view-only-mode .left-panel,
    body.review-readonly .left-panel,
    body.view-only-mode .sidebar,
    body.review-readonly .sidebar,
    body.view-only-mode #leftSidebar,
    body.review-readonly #leftSidebar {
      display: none !important;
    }

    /* Viewer Mode Badge */
    .viewer-mode-badge {
      position: fixed;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
      border: 1px solid var(--accent);
      border-radius: 20px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 10000;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      font-size: 13px;
      color: var(--text-light);
    }

    .viewer-mode-badge .badge-icon {
      font-size: 16px;
    }

    .viewer-mode-badge .badge-text {
      font-weight: 500;
      color: var(--accent);
    }

    .viewer-mode-badge .badge-action {
      background: var(--accent);
      color: #000;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      margin-left: 4px;
    }

    /* ============================================
       MOBILE REVIEW ROOM & SHARED VIEW
       ============================================ */

    @media (max-width: 768px) {
      /* Review Header - Mobile */
      .review-header {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
      }

      .review-header-left {
        flex: 1;
        min-width: 0;
        gap: 8px;
      }

      .review-back-btn {
        width: 36px;
        height: 36px;
      }

      .review-title {
        font-size: 14px;
        flex: 1;
        min-width: 0;
      }

      .review-permission-badge {
        display: none;
      }

      .live-indicator span:not(.live-dot) {
        display: none;
      }

      .live-indicator {
        padding: 6px;
        min-width: auto;
      }

      .review-header-right {
        gap: 6px;
      }

      .review-header-right .btn {
        padding: 8px 10px;
        font-size: 12px;
      }

      .review-header-right .btn .btn-text {
        display: none;
      }

      .review-header-right .btn svg {
        width: 18px;
        height: 18px;
      }

      .review-permission-badge-mobile {
        font-size: 10px;
        padding: 3px 8px;
      }

      .live-indicator {
        font-size: 10px;
        padding: 3px 8px;
      }

      .review-header-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
      }

      .review-header-right .btn {
        padding: 10px 14px;
        font-size: 13px;
      }

      .review-header-right .btn span {
        display: none;
      }

      .review-header-right .btn svg {
        margin: 0;
      }

      /* Review Panel - Full Screen on Mobile */
      .review-panel {
        width: 100%;
        right: -100%;
        top: auto;
        bottom: 0;
        height: 70vh;
        border-radius: 20px 20px 0 0;
        border-left: none;
        border-top: 1px solid var(--border);
      }

      .review-panel.open {
        right: 0;
      }

      .review-panel-header {
        padding: 16px;
        border-radius: 20px 20px 0 0;
      }

      .review-panel-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
      }

      .review-summary {
        padding: 12px 16px;
        gap: 12px;
      }

      .review-stat {
        flex: 1;
        text-align: center;
      }

      .stat-value {
        font-size: 20px;
      }

      .stat-label {
        font-size: 10px;
      }

      /* Review Elements List */
      .review-elements {
        max-height: calc(70vh - 280px);
        padding: 8px 16px;
      }

      .review-element {
        padding: 12px;
      }

      .review-element-name {
        font-size: 13px;
      }

      .review-element-price {
        font-size: 14px;
      }

      /* Comments Section */
      .review-comments-section {
        padding: 12px 16px;
      }

      .review-comments {
        max-height: 100px;
      }

      .review-comment-input {
        gap: 8px;
      }

      .review-comment-input input {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 12px;
      }

      /* Approval Actions */
      .review-actions {
        padding: 16px;
      }

      .quote-approval-actions {
        padding: 16px;
      }

      .approve-pay-btn {
        width: 100%;
        padding: 16px 24px;
        font-size: 17px;
      }

      .approval-note {
        font-size: 13px;
        text-align: center;
      }

      .approval-terms {
        text-align: center;
        font-size: 10px;
      }

      /* Adjust main content when review room on mobile */
      body:has(.review-room) .main {
        padding-top: 80px; /* Taller header on mobile */
      }

      /* Viewer Mode Badge - Mobile */
      .viewer-mode-badge {
        width: calc(100% - 24px);
        max-width: 400px;
        justify-content: center;
        padding: 10px 16px;
        font-size: 12px;
      }
    }

    @media (max-width: 480px) {
      .review-header-right .btn {
        padding: 10px 12px;
        font-size: 12px;
      }

      .review-panel {
        height: 80vh;
      }

      .stat-value {
        font-size: 18px;
      }

      .approve-pay-btn {
        font-size: 15px;
        padding: 14px 20px;
      }
    }

    /* Keyboard Shortcuts - auto-hide after delay */
    .shortcuts-hint {
      /* Hidden by default on this page. The side panels (Tools left,
         Room Settings right) span full height, so any floating element
         at the bottom overlaps them. Keyboard shortcuts still work. */
      display: none !important;
    }

    .shortcuts-hint.hidden {
      display: none;
    }

    .shortcuts-hint:hover {
      opacity: 1;
    }

    .shortcut {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .shortcut kbd {
      background: var(--dark-elevated);
      padding: 2px 4px;
      border-radius: 3px;
      font-family: inherit;
      font-size: 9px;
    }

    /* Responsive */
    @media (max-width: 1200px) {
      .sidebar { width: 180px; min-width: 180px; max-width: 180px; }
      .right-panel { width: 220px; min-width: 220px; max-width: 220px; }
      .element-grid { grid-template-columns: repeat(2, 1fr); gap: 3px; }
      .element-icon { width: 36px; height: 36px; }
      .element-name { font-size: 8px; }
    }

    /* Mobile toolbar - MUST be hidden by default on desktop */
    .mobile-toolbar {
      display: none !important;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--dark-elevated);
      border-top: 1px solid var(--border);
      padding: 8px 16px;
      justify-content: space-around;
      z-index: 1000;
    }

    @media (max-width: 900px) {
      .sidebar, .right-panel { display: none; }
      .header { padding: 8px 12px; }
      .header-left { gap: 8px; }
      .logo { height: 28px; }
      .view-toggle { display: none; }
      .canvas-area { margin: 0; }
      .toolbar { padding: 8px; gap: 4px; }
      .tool-btn { width: 36px; height: 36px; }

      /* Mobile bottom toolbar - only show on narrow screens */
      .mobile-toolbar {
        display: flex !important;
      }

      .canvas-wrapper {
        padding-bottom: 70px; /* Space for mobile toolbar */
      }
    }

    @media (max-width: 600px) {
      .header {
        height: auto;
        min-height: 48px;
        padding: 4px 8px;
        flex-wrap: wrap;
        overflow: visible;
      }
      .header-left { flex-shrink: 0; max-width: 100px; }
      .header-center {
        flex-shrink: 1;
        min-width: 0;
        gap: 2px;
        padding: 2px;
      }
      .header-center .view-btn {
        padding: 6px 10px;
        font-size: 11px;
      }
      .header-zoom-controls { display: none; }
      .header-right { flex-shrink: 1; gap: 4px; flex-wrap: wrap; min-width: 0; }
      .header-right .btn span { display: none; }
      .project-name-input { display: none; }
      .user-name-display { display: none; }
      .user-menu-btn { padding: 4px 8px; }
      .notification-hub-btn { width: 36px; height: 36px; }
      .btn { padding: 6px 10px; font-size: 12px; }
      .modal { margin: 10px; max-height: calc(100vh - 20px); }
      .modal-header h3 { font-size: 16px; }
      .shortcuts-hint { display: none; }

      /* Stack header actions */
      .header-actions { gap: 4px; }
      .header-actions .btn span { display: none; }
    }

    @media (max-width: 400px) {
      .logo { display: none; }
      .header-center .view-btn { padding: 4px 8px; font-size: 10px; }
      .project-name-input { display: none; }
      .user-avatar-small { width: 24px; height: 24px; font-size: 10px; }
    }

    /* Touch-friendly adjustments */
    @media (pointer: coarse) {
      .tool-btn { min-width: 44px; min-height: 44px; }
      .btn { min-height: 44px; }
      .element-item { min-height: 60px; }
      .property-row input, .property-row select { min-height: 40px; }
    }

    /* Loading overlay */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10001;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s, visibility 0.2s;
    }

    .loading-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .loading-spinner {
      width: 48px;
      height: 48px;
      border: 4px solid var(--border);
      border-top-color: var(--gold);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    .loading-text {
      color: var(--text);
      margin-top: 16px;
      font-size: 14px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Auto-save Indicator */
    .autosave-indicator {
      position: fixed;
      top: 70px;
      right: 20px;
      background: rgba(40, 167, 69, 0.9);
      color: white;
      padding: 8px 14px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      z-index: 9999;
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 0.3s, transform 0.3s;
      pointer-events: none;
    }

    .autosave-indicator.show {
      opacity: 1;
      transform: translateX(0);
    }

    .autosave-indicator svg {
      width: 14px;
      height: 14px;
    }

    @media (max-width: 600px) {
      .autosave-indicator {
        top: 56px;
        right: 10px;
        padding: 6px 10px;
        font-size: 11px;
      }
    }

    /* Undo Toast */
    .undo-toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: #1f2937;
      color: #fff;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 10000;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .undo-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .undo-toast span {
      flex: 1;
    }
    .undo-toast button {
      background: #3b82f6;
      color: #fff;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s;
    }
    .undo-toast button:hover {
      background: #2563eb;
    }
    .undo-toast button.dismiss {
      background: transparent;
      color: #9ca3af;
      padding: 4px 8px;
      font-size: 16px;
    }
    .undo-toast button.dismiss:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
    }

    /* Toast Notifications */
    .toast-container {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 12px;
      pointer-events: none;
    }

    .toast {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 20px;
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
      animation: toastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1), toastOut 0.3s ease 2.7s forwards;
      pointer-events: auto;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .toast::before {
      content: '';
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .toast.success {
      border-color: rgba(34, 197, 94, 0.5);
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), var(--dark-elevated));
    }

    .toast.success::before {
      content: '✓';
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background: #22c55e;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 700;
      color: white;
    }

    .toast.error {
      border-color: rgba(239, 68, 68, 0.5);
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), var(--dark-elevated));
    }

    .toast.error::before {
      content: '✕';
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background: #ef4444;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 700;
      color: white;
    }

    .toast.warning {
      border-color: rgba(249, 203, 0, 0.5);
      background: linear-gradient(135deg, rgba(249, 203, 0, 0.2), var(--dark-elevated));
    }

    .toast.warning::before {
      content: '!';
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background: #f9cb00;
      border-radius: 50%;
      font-size: 14px;
      font-weight: 700;
      color: #1a1a2e;
    }

    .toast.info {
      border-color: rgba(99, 102, 241, 0.5);
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), var(--dark-elevated));
    }

    .toast.info::before {
      content: 'i';
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background: var(--primary);
      border-radius: 50%;
      font-size: 13px;
      font-weight: 700;
      font-style: italic;
      color: white;
    }

    @keyframes toastIn {
      from { opacity: 0; transform: translateY(24px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes toastOut {
      from { opacity: 1; transform: translateY(0) scale(1); }
      to { opacity: 0; transform: translateY(-16px) scale(0.95); }
    }

    /* ===== MY DESIGNS MODAL ===== */
    .designs-tabs {
      display: flex;
      gap: 4px;
      padding: 0 0 16px 0;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 16px;
    }

    .designs-tab {
      padding: 10px 20px;
      background: transparent;
      border: none;
      color: var(--text-secondary);
      font-size: 14px;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s;
    }

    .designs-tab:hover {
      background: var(--dark-hover);
      color: var(--text-primary);
    }

    .designs-tab.active {
      background: var(--accent-color);
      color: white;
    }

    .designs-search {
      position: relative;
      margin-bottom: 16px;
    }

    .designs-search input {
      width: 100%;
      padding: 12px 16px 12px 44px;
      background: var(--dark-hover);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      color: var(--text-primary);
      font-size: 14px;
    }

    .designs-search svg {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      stroke: var(--text-muted);
    }

    .designs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
      max-height: 50vh;
      overflow-y: auto;
      padding: 4px 8px 8px 4px; /* Top/left for hover, right for scrollbar, bottom for shadow */
    }

    .design-card {
      background: var(--dark-hover);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s;
    }

    .design-card:hover {
      border-color: var(--accent-color);
      transform: scale(1.02);
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
      z-index: 10;
      position: relative;
    }

    .design-card-preview {
      height: 140px;
      background: var(--panel-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

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

    .design-card-preview svg {
      width: 48px;
      height: 48px;
      stroke: var(--text-muted);
    }

    .design-card-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 4px 8px;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      border-radius: 4px;
      font-size: 10px;
      color: white;
      text-transform: uppercase;
    }

    .design-card-info {
      padding: 12px;
    }

    .design-card-name {
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .design-card-customer {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--gold-primary);
      margin-bottom: 6px;
      padding: 4px 8px;
      background: rgba(249, 203, 0, 0.1);
      border-radius: 4px;
      border-left: 2px solid var(--gold-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .design-card-customer svg {
      flex-shrink: 0;
    }

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

    .design-card-date {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .design-card-comments {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .design-card-delete {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(239, 68, 68, 0.9);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s, transform 0.2s;
      z-index: 10;
    }

    .design-card-delete svg {
      stroke: white;
    }

    .design-card:hover .design-card-delete {
      opacity: 1;
    }

    .design-card-delete:hover {
      background: rgba(220, 38, 38, 1);
      transform: scale(1.1);
    }

    .design-card-badge.local {
      background: #6B7280;
    }

    .design-card-badge.cloud {
      background: #3B82F6;
    }

    .design-card-badge.shared {
      background: #10B981;
    }

    .design-card-details {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    .design-card-details span {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .design-card-room-type svg {
      width: 12px;
      height: 12px;
    }

    .design-card-dims {
      background: var(--panel-bg);
      padding: 2px 6px;
      border-radius: 4px;
    }

    .design-card-elements {
      color: var(--accent-gold);
    }

    .design-card-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .designs-loading, .designs-empty {
      text-align: center;
      padding: 40px;
      color: var(--text-muted);
    }

    .designs-empty svg {
      width: 64px;
      height: 64px;
      margin-bottom: 16px;
      stroke: var(--text-muted);
    }

    .designs-empty p {
      margin-bottom: 16px;
      font-size: 16px;
    }

    /* Notification Toast */
    .notification-toast {
      position: fixed;
      top: 20px;
      right: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      background: rgba(30, 30, 40, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      z-index: 10000;
      transform: translateX(calc(100% + 40px));
      transition: transform 0.3s ease;
      max-width: 360px;
    }

    .notification-toast.show {
      transform: translateX(0);
    }

    .notification-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-color);
      border-radius: 10px;
      flex-shrink: 0;
    }

    .notification-icon svg {
      width: 20px;
      height: 20px;
      stroke: white;
    }

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

    .notification-title {
      font-weight: 600;
      color: var(--text-primary);
      font-size: 14px;
      margin-bottom: 2px;
    }

    .notification-body {
      font-size: 13px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .notification-close {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 18px;
      border-radius: 4px;
    }

    .notification-close:hover {
      background: var(--dark-hover);
      color: var(--text-primary);
    }

    /* Comment Notification Toast - appears when customer comments */
    .comment-notification-toast {
      position: fixed !important;
      top: 80px !important;
      right: 20px !important;
      display: flex !important;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      background: #2a2040;
      background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.2));
      backdrop-filter: blur(20px);
      border: 2px solid rgba(139, 92, 246, 0.6);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4), 0 0 0 1px rgba(255,255,255,0.1);
      z-index: 999999 !important;
      cursor: pointer;
      max-width: 380px;
      min-width: 280px;
      animation: commentSlideIn 0.4s ease-out;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      color: white;
    }

    .comment-notification-toast:hover {
      transform: translateX(-4px) scale(1.02);
      box-shadow: 0 12px 40px rgba(139, 92, 246, 0.35), 0 0 0 1px rgba(255,255,255,0.1);
    }

    .comment-notification-toast.fade-out {
      animation: commentSlideOut 0.3s ease-in forwards;
    }

    @keyframes commentSlideIn {
      from {
        opacity: 0;
        transform: translateX(100px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes commentSlideOut {
      from {
        opacity: 1;
        transform: translateX(0);
      }
      to {
        opacity: 0;
        transform: translateX(100px);
      }
    }

    .comment-notification-icon {
      font-size: 24px;
      animation: commentBounce 0.6s ease-out;
    }

    @keyframes commentBounce {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }

    .comment-notification-content {
      flex: 1;
      min-width: 0;
    }

    .comment-notification-title {
      font-weight: 600;
      font-size: 13px;
      color: var(--primary-color);
      margin-bottom: 4px;
    }

    .comment-notification-message {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .comment-notification-action {
      font-size: 12px;
      font-weight: 600;
      color: var(--accent-color);
      padding: 4px 8px;
      background: rgba(249, 203, 0, 0.15);
      border-radius: 6px;
      white-space: nowrap;
    }

    /* ========================================
       GAMING-STYLE NOTIFICATION HUB
       Single unified notification center
       ======================================== */

    .notification-hub {
      position: relative;
    }

    .notification-hub-btn {
      position: relative;
      width: 40px;
      height: 40px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .notification-hub-btn:hover {
      background: var(--dark-hover);
      border-color: var(--gold);
      transform: scale(1.05);
    }

    .notification-hub-btn.has-notifications {
      border-color: #ef4444;
      animation: hubGlow 2s infinite;
    }

    @keyframes hubGlow {
      0%, 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.3); }
      50% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.6); }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }

    .notification-hub-btn svg {
      width: 20px;
      height: 20px;
      color: var(--text-secondary);
      transition: color 0.2s;
    }

    .notification-hub-btn:hover svg,
    .notification-hub-btn.has-notifications svg {
      color: var(--text);
    }

    /* ========== UNIFIED MESSAGING SYSTEM ========== */
    .messaging-hub {
      position: relative;
      margin-right: 8px;
    }

    .messaging-hub-btn {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .messaging-hub-btn:hover {
      background: var(--dark-hover);
      border-color: #3b82f6;
      transform: scale(1.05);
    }

    .messaging-hub-btn.has-messages {
      border-color: #3b82f6;
      animation: messageGlow 2s infinite;
    }

    @keyframes messageGlow {
      0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
      50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
    }

    .messaging-hub-btn svg {
      width: 20px;
      height: 20px;
      color: var(--text-secondary);
      transition: color 0.2s;
    }

    .messaging-hub-btn:hover svg {
      color: var(--text);
    }

    .msg-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 18px;
      height: 18px;
      background: #3b82f6;
      border-radius: 9px;
      font-size: 10px;
      font-weight: 700;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
    }

    .msg-badge.hidden {
      display: none;
    }

    /* Messaging Panel */
    .messaging-panel {
      position: fixed;
      top: 0;
      right: -420px;
      width: 400px;
      max-width: 100vw;
      height: 100vh;
      background: var(--dark-surface);
      border-left: 1px solid var(--border);
      z-index: 10001;
      display: flex;
      flex-direction: column;
      transition: right 0.3s ease;
      box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    }

    .messaging-panel.open {
      right: 0;
    }

    .messaging-panel-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 10000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .messaging-panel-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .msg-panel-header {
      padding: 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--dark-elevated);
    }

    .msg-panel-title {
      font-size: 16px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }

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

    .msg-panel-close:hover {
      background: var(--dark-hover);
      color: var(--text);
    }

    /* Conversation List */
    .msg-conversations {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    .msg-search {
      padding: 12px;
      border-bottom: 1px solid var(--border);
    }

    .msg-search-input {
      width: 100%;
      padding: 10px 12px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
    }

    .msg-search-input:focus {
      outline: none;
      border-color: #3b82f6;
    }

    .msg-new-chat-btn {
      margin: 12px;
      padding: 12px;
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      border: none;
      border-radius: 10px;
      color: white;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.2s;
    }

    .msg-new-chat-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .msg-conversation-list {
      flex: 1;
      overflow-y: auto;
    }

    .msg-conversation-item {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .msg-conversation-item:hover {
      background: var(--dark-elevated);
    }

    .msg-conversation-item.active {
      background: rgba(59, 130, 246, 0.1);
      border-left: 3px solid #3b82f6;
    }

    .msg-conversation-item.unread {
      background: rgba(59, 130, 246, 0.05);
    }

    .msg-conv-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 600;
      color: white;
      flex-shrink: 0;
    }

    .msg-conv-avatar.customer {
      background: linear-gradient(135deg, #f9cb00, #f59e0b);
      color: #1a1a2e;
    }

    .msg-conv-avatar.collaborator {
      background: linear-gradient(135deg, #10b981, #059669);
    }

    .msg-conv-info {
      flex: 1;
      min-width: 0;
    }

    .msg-conv-name {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .msg-conv-name .role-tag {
      font-size: 9px;
      padding: 2px 6px;
      background: var(--dark-elevated);
      border-radius: 4px;
      font-weight: 500;
      color: var(--text-muted);
    }

    .msg-conv-preview {
      font-size: 12px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .msg-conv-meta {
      text-align: right;
      flex-shrink: 0;
    }

    .msg-conv-time {
      font-size: 11px;
      color: var(--text-muted);
    }

    .msg-conv-unread {
      width: 8px;
      height: 8px;
      background: #3b82f6;
      border-radius: 50%;
      margin-top: 6px;
      margin-left: auto;
    }

    .msg-conv-unread-badge {
      min-width: 18px;
      height: 18px;
      background: var(--gold-primary);
      color: var(--dark-primary);
      border-radius: 9px;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      margin-top: 4px;
    }

    .msg-sender-name {
      font-size: 11px;
      font-weight: 600;
      color: var(--gold-primary);
      margin-bottom: 4px;
    }

    .msg-message-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
    }

    .msg-read-receipt {
      font-size: 11px;
      color: var(--text-muted);
    }

    .msg-message-row.outbound .msg-read-receipt {
      color: var(--gold-primary);
    }

    /* Chat View */
    .msg-chat-view {
      position: absolute;
      inset: 0;
      background: var(--dark-surface);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.3s ease;
    }

    .msg-chat-view.open {
      transform: translateX(0);
    }

    .msg-chat-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--dark-elevated);
    }

    .msg-chat-back {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: transparent;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .msg-chat-back:hover {
      background: var(--dark-hover);
      color: var(--text);
    }

    .msg-chat-recipient {
      flex: 1;
    }

    .msg-chat-recipient-name {
      font-size: 14px;
      font-weight: 600;
    }

    .msg-chat-recipient-status {
      font-size: 11px;
      color: var(--text-muted);
    }

    .msg-chat-recipient-status.online {
      color: #10b981;
    }

    .msg-chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .msg-message-row {
      display: flex;
      gap: 8px;
      max-width: 85%;
    }

    .msg-message-row.outbound {
      align-self: flex-end;
      flex-direction: row-reverse;
    }

    .msg-message-row.inbound {
      align-self: flex-start;
    }

    .msg-message-bubble {
      padding: 10px 14px;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.4;
      max-width: 100%;
      word-wrap: break-word;
    }

    .msg-message-row.inbound .msg-message-bubble {
      background: var(--dark-elevated);
      color: var(--text);
      border-bottom-left-radius: 4px;
    }

    .msg-message-row.outbound .msg-message-bubble {
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: white;
      border-bottom-right-radius: 4px;
    }

    .msg-message-time {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 4px;
      text-align: right;
    }

    .msg-message-row.outbound .msg-message-time {
      color: rgba(255,255,255,0.7);
    }

    .msg-chat-input-area {
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      background: var(--dark-elevated);
    }

    .msg-chat-input-wrapper {
      display: flex;
      gap: 8px;
      align-items: flex-end;
    }

    .msg-chat-input {
      flex: 1;
      padding: 10px 14px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      color: var(--text);
      font-size: 14px;
      resize: none;
      max-height: 100px;
      min-height: 40px;
    }

    .msg-chat-input:focus {
      outline: none;
      border-color: #3b82f6;
    }

    .msg-send-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      border: none;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .msg-send-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .msg-send-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    /* New Chat Modal */
    .msg-new-chat-modal {
      position: absolute;
      inset: 0;
      background: var(--dark-surface);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.3s ease;
    }

    .msg-new-chat-modal.open {
      transform: translateX(0);
    }

    .msg-add-recipient {
      padding: 16px;
    }

    .msg-add-recipient label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .msg-email-input-wrapper {
      display: flex;
      gap: 8px;
    }

    .msg-email-input {
      flex: 1;
      padding: 12px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
    }

    .msg-email-input:focus {
      outline: none;
      border-color: #3b82f6;
    }

    .msg-add-email-btn {
      padding: 12px 16px;
      background: #3b82f6;
      border: none;
      border-radius: 8px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }

    .msg-add-email-btn:hover {
      background: #2563eb;
    }

    .msg-collaborators-section {
      padding: 0 16px 16px;
    }

    .msg-collaborators-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .msg-collaborator-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 300px;
      overflow-y: auto;
    }

    .msg-collaborator-item {
      padding: 12px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .msg-collaborator-item:hover {
      border-color: #3b82f6;
      background: rgba(59, 130, 246, 0.1);
    }

    .msg-empty-state {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 32px;
      text-align: center;
    }

    .msg-empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .msg-empty-text {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .msg-empty-subtext {
      font-size: 13px;
      color: var(--text-muted);
      max-width: 280px;
    }

    /* Responsive */
    @media (max-width: 480px) {
      .messaging-panel {
        width: 100vw;
        right: -100vw;
      }
    }

    .hub-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 18px;
      height: 18px;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
      font-size: 10px;
      font-weight: 700;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      border: 2px solid var(--dark);
      animation: badgeBounce 0.3s ease;
    }

    @keyframes badgeBounce {
      0% { transform: scale(0); }
      50% { transform: scale(1.3); }
      100% { transform: scale(1); }
    }

    .hub-badge.hidden {
      display: none;
    }

    /* Notification Dropdown Panel */
    .notification-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 360px;
      max-height: 480px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px) scale(0.95);
      transition: all 0.2s ease;
      overflow: hidden;
    }

    .notification-dropdown.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

    .notification-dropdown-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: linear-gradient(90deg, rgba(99, 102, 241, 0.1), transparent);
      border-bottom: 1px solid var(--border);
    }

    .notification-dropdown-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .notification-dropdown-title span {
      font-size: 16px;
    }

    .mark-all-read {
      font-size: 11px;
      color: var(--primary);
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: background 0.2s;
    }

    .mark-all-read:hover {
      background: rgba(99, 102, 241, 0.15);
    }

    /* Tab Filter */
    .notification-tabs {
      display: flex;
      padding: 8px 12px;
      gap: 6px;
      border-bottom: 1px solid var(--border);
      background: rgba(0, 0, 0, 0.2);
    }

    .notification-tab {
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      background: none;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .notification-tab:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.05);
    }

    .notification-tab.active {
      color: var(--gold);
      background: rgba(249, 203, 0, 0.15);
    }

    .notification-tab .tab-count {
      font-size: 9px;
      padding: 2px 5px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
    }

    .notification-tab.active .tab-count {
      background: rgba(249, 203, 0, 0.3);
    }

    /* Notification List */
    .notification-list {
      max-height: 340px;
      overflow-y: auto;
      padding: 8px;
    }

    .notification-list::-webkit-scrollbar {
      width: 6px;
    }

    .notification-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 3px;
    }

    .notification-item {
      display: flex;
      gap: 12px;
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      margin-bottom: 4px;
      position: relative;
    }

    .notification-item:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .notification-item.unread {
      background: rgba(99, 102, 241, 0.08);
    }

    .notification-item.unread::before {
      content: '';
      position: absolute;
      left: 4px;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      background: var(--primary);
      border-radius: 50%;
    }

    .notif-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .notif-icon.chat { background: rgba(139, 92, 246, 0.2); }
    .notif-icon.team { background: rgba(16, 185, 129, 0.2); }
    .notif-icon.alert { background: rgba(249, 115, 22, 0.2); }
    .notif-icon.system { background: rgba(99, 102, 241, 0.2); }

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

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

    .notif-source {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 180px;
    }

    .notif-time {
      font-size: 10px;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .notif-message {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .notif-context {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .notif-context .design-link {
      color: var(--gold);
      font-weight: 500;
    }

    /* Empty State */
    .notification-empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-muted);
    }

    .notification-empty-icon {
      font-size: 40px;
      margin-bottom: 12px;
      opacity: 0.4;
    }

    .notification-empty-text {
      font-size: 13px;
    }

    .notification-empty-subtext {
      font-size: 11px;
      opacity: 0.7;
      margin-top: 4px;
    }

    /* Quick Actions Footer */
    .notification-prefs {
      padding: 8px 12px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .notif-pref-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      color: #888;
      font-size: 11px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .notif-pref-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #aaa;
    }

    .notif-pref-btn.active {
      background: rgba(99, 102, 241, 0.2);
      border-color: var(--primary);
      color: var(--primary);
    }

    .notif-pref-btn svg {
      opacity: 0.7;
    }

    .notif-pref-btn.active svg {
      opacity: 1;
    }

    .notification-footer {
      padding: 10px 12px;
      border-top: 1px solid var(--border);
      background: rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: center;
    }

    .view-all-btn {
      font-size: 12px;
      color: var(--primary);
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 6px;
      transition: background 0.2s;
    }

    .view-all-btn:hover {
      background: rgba(99, 102, 241, 0.15);
    }

    /* Hide old sections - replaced by hub */
    #designNotificationsSection {
      display: none !important;
    }

    /* Messages Section Styles */
    #messagesSection {
      background: rgba(139, 92, 246, 0.08);
      border: 1px solid rgba(139, 92, 246, 0.3);
      border-radius: 8px;
      margin: 8px;
    }

    #messagesSection .panel-title {
      color: #a78bfa;
      margin-bottom: 0;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    }

    .messages-panel-content {
      padding: 10px 12px;
    }

    .message-badge.has-messages {
      display: inline-block !important;
      animation: badgePulse 2s infinite;
    }

    @keyframes badgePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    .customer-message {
      padding: 8px 10px;
      margin: 6px 0;
      border-radius: 6px;
      font-size: 11px;
      line-height: 1.4;
    }

    .customer-message.inbound {
      background: rgba(139, 92, 246, 0.15);
      border-left: 3px solid #8b5cf6;
      margin-right: 15px;
    }

    .customer-message.outbound {
      background: rgba(16, 185, 129, 0.15);
      border-left: 3px solid #10b981;
      margin-left: 15px;
    }

    .customer-message-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
      font-size: 9px;
      color: var(--text-muted);
    }

    .customer-message-author {
      font-weight: 600;
      color: #a78bfa;
    }

    .customer-message-text {
      color: var(--text-primary);
    }

    .customer-message-input {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }

    .customer-message-input input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid rgba(139, 92, 246, 0.3);
      border-radius: 6px;
      background: var(--dark-elevated);
      color: var(--text);
      font-size: 11px;
    }

    .customer-message-input input:focus {
      outline: none;
      border-color: #8b5cf6;
    }

    .customer-message-input .btn {
      padding: 8px 14px;
      font-size: 9px;
    }

    /* ========================================
       MESSAGES PANEL - Simple & Visible
       ======================================== */
    #teamChatSection {
      background: rgba(99, 102, 241, 0.05);
      border: 1px solid rgba(99, 102, 241, 0.2);
      border-radius: 8px;
      margin: 8px;
    }

    #teamChatSection .panel-title {
      background: rgba(99, 102, 241, 0.1);
      color: #a5b4fc;
      padding: 10px 12px;
      font-weight: 600;
      font-size: 11px;
      text-transform: none;
    }

    #teamChatSection .panel-content {
      padding: 0;
    }

    /* Message tabs */
    .message-tabs {
      display: flex;
      background: rgba(0, 0, 0, 0.15);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .message-tab {
      flex: 1;
      padding: 8px 6px;
      font-size: 10px;
      font-weight: 500;
      color: var(--text-muted);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
    }

    .message-tab:hover {
      color: var(--text);
    }

    .message-tab.active {
      color: var(--gold);
      border-bottom-color: var(--gold);
    }

    .message-tab .tab-badge {
      font-size: 9px;
      padding: 1px 5px;
      border-radius: 6px;
      background: #ef4444;
      color: white;
      margin-left: 4px;
    }

    .message-tab .tab-badge.hidden {
      display: none;
    }

    #teamChatMessages {
      background: rgba(0, 0, 0, 0.1);
      min-height: 120px;
      max-height: 200px;
      overflow-y: auto;
      padding: 10px;
    }

    /* Chat message bubbles */
    .chat-message {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
      animation: messageSlide 0.2s ease-out;
    }

    .chat-message.own-message {
      flex-direction: row-reverse;
    }

    .chat-message .avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      flex-shrink: 0;
    }

    .chat-message .bubble {
      max-width: 80%;
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 12px;
      line-height: 1.5;
    }

    .chat-message.own-message .bubble {
      background: linear-gradient(135deg, rgba(249, 203, 0, 0.2), rgba(234, 179, 8, 0.15));
      border-bottom-right-radius: 4px;
    }

    .chat-message:not(.own-message) .bubble {
      background: rgba(99, 102, 241, 0.15);
      border-bottom-left-radius: 4px;
    }

    .chat-message .meta {
      font-size: 10px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    .chat-message.own-message .meta {
      text-align: right;
    }

    @keyframes messageSlide {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* System messages */
    .chat-system-message {
      text-align: center;
      padding: 6px 12px;
      font-size: 10px;
      color: var(--text-muted);
      font-style: italic;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 12px;
      margin: 8px 0;
    }

    /* Chat input area */
    .chat-input-wrapper {
      display: flex;
      gap: 6px;
      padding: 8px;
      background: rgba(0, 0, 0, 0.15);
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    #teamChatInput {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid rgba(99, 102, 241, 0.3);
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.2);
      color: var(--text);
      font-size: 11px;
    }

    #teamChatInput::placeholder {
      color: rgba(255, 255, 255, 0.3);
    }

    #teamChatInput:focus {
      border-color: var(--primary);
      outline: none;
    }

    #teamChatSection .btn-primary {
      background: var(--primary);
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      min-width: 32px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

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

    #teamChatSection .btn-primary svg {
      width: 14px;
      height: 14px;
      color: white;
    }

    /* Online indicator */
    .online-indicator {
      animation: onlinePulse 2s infinite;
      font-weight: 500;
    }

    @keyframes onlinePulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }

    /* Active collaborators */
    #activeCollaborators {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 8px;
      background: rgba(0, 0, 0, 0.15);
      border-radius: 8px;
      margin-bottom: 10px;
    }

    .collaborator-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.08);
      padding: 4px 10px 4px 4px;
      border-radius: 16px;
      font-size: 11px;
      color: var(--text-secondary);
    }

    .collaborator-chip .avatar-small {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 600;
      color: white;
    }

    .collaborator-chip.is-you {
      border: 1px solid rgba(249, 203, 0, 0.4);
    }

    /* Team chat notification badge */
    .team-chat-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      border-radius: 9px;
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      animation: badgePulse 2s infinite;
    }

    /* =============================================
       v7.0 - Cabinet Library Modal
       ============================================= */
    .cabinet-library-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 20px;
      overflow-y: auto;
    }

    .cabinet-library-content {
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 800px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .cabinet-library-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      background: var(--dark-elevated);
      flex-wrap: wrap;
      gap: 12px;
    }

    .cabinet-library-header h3 {
      margin: 0;
      font-size: 18px;
    }

    .cabinet-library-header .cabinet-library-tabs {
      display: flex;
      gap: 6px;
      flex: 1;
      justify-content: center;
    }

    .cabinet-library-header > button {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 24px;
      cursor: pointer;
      padding: 4px 8px;
      line-height: 1;
    }

    .cabinet-library-header > button:hover {
      color: var(--text);
    }

    .cab-tab {
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid transparent;
      border-radius: 6px;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      transition: all 0.2s;
    }

    .cab-tab:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text);
    }

    .cab-tab.active {
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      color: white;
      border-color: var(--primary);
      font-weight: 600;
    }

    .cabinet-library-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    .cabinet-search {
      margin-bottom: 16px;
    }

    .cabinet-search input {
      width: 100%;
      padding: 12px 16px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
    }

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

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

    .cabinet-library-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 12px;
    }

    .cabinet-lib-item {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px 12px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }

    .cabinet-lib-item:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(99, 102, 241, 0.2);
    }

    .cab-lib-icon {
      font-size: 32px;
      margin-bottom: 8px;
      opacity: 0.8;
    }

    .cab-lib-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
    }

    .cab-lib-dims {
      font-size: 11px;
      color: var(--text-muted);
    }

    .cabinet-library-footer {
      padding: 16px 20px;
      border-top: 1px solid var(--border);
      background: var(--dark-elevated);
    }

    .custom-cabinet-form h4 {
      margin: 0 0 12px;
      font-size: 13px;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    .custom-cab-inputs {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .custom-cab-inputs input {
      width: 70px;
      padding: 10px 12px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 14px;
      text-align: center;
    }

    .custom-cab-inputs input:focus {
      outline: none;
      border-color: var(--primary);
    }

    .custom-cab-inputs input::placeholder {
      color: var(--text-muted);
    }

    .custom-cab-inputs button {
      padding: 10px 20px;
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      border: none;
      border-radius: 6px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s;
      margin-left: auto;
    }

    .custom-cab-inputs button:hover {
      transform: scale(1.02);
    }

    /* =============================================
       v7.0 - Commercial Project Modal
       ============================================= */
    .commercial-project-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 20px;
    }

    .commercial-project-content {
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 650px;
      max-height: 85vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .commercial-project-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      background: var(--dark-elevated);
    }

    .commercial-project-header h3 {
      margin: 0;
      font-size: 18px;
    }

    .commercial-project-header > button {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 24px;
      cursor: pointer;
      padding: 4px 8px;
      line-height: 1;
    }

    .commercial-project-header > button:hover {
      color: var(--text);
    }

    .commercial-project-body {
      padding: 20px;
      overflow-y: auto;
      flex: 1;
    }

    /* New Project Form */
    .new-project-form {
      max-width: 400px;
      margin: 0 auto;
    }

    .new-project-form h4 {
      margin: 0 0 20px;
      font-size: 16px;
      text-align: center;
      color: var(--text);
    }

    .new-project-form .form-group {
      margin-bottom: 16px;
    }

    .new-project-form .form-group label {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .new-project-form .form-group input {
      width: 100%;
      padding: 12px 14px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 14px;
    }

    .new-project-form .form-group input:focus {
      outline: none;
      border-color: var(--primary);
    }

    .new-project-form .form-group input::placeholder {
      color: var(--text-muted);
    }

    .new-project-form .btn-primary {
      width: 100%;
      margin-top: 8px;
    }

    /* Project Info */
    .project-info {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }

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

    .project-header-info h4 {
      margin: 0;
      font-size: 16px;
      color: var(--primary);
    }

    .project-status {
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .project-status.draft {
      background: rgba(251, 191, 36, 0.2);
      color: #fbbf24;
    }

    .project-status.active {
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
    }

    .project-status.completed {
      background: rgba(99, 102, 241, 0.2);
      color: #6366f1;
    }

    .project-info p {
      margin: 6px 0;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .project-info p strong {
      color: var(--text);
    }

    /* Rooms Section */
    .rooms-section {
      margin-bottom: 20px;
    }

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

    .rooms-header h4 {
      margin: 0;
      font-size: 13px;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    .rooms-header button {
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .rooms-header button:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: var(--dark-deep);
    }

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

    .no-rooms {
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
      padding: 20px;
      font-style: italic;
    }

    .room-item {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: all 0.2s;
    }

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

    .room-item.active {
      border-color: var(--primary);
      background: rgba(99, 102, 241, 0.1);
    }

    .room-item-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .room-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

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

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

    .room-item-actions button {
      width: 28px;
      height: 28px;
      background: rgba(255, 255, 255, 0.05);
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .room-item-actions button:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* Project Actions */
    .project-actions {
      display: flex;
      gap: 10px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }

    .project-actions .btn-secondary {
      flex: 1;
      padding: 10px 16px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .project-actions .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text);
    }

    .project-actions .btn-primary {
      flex: 1.2;
      padding: 10px 16px;
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .project-actions .btn-primary:hover {
      transform: scale(1.02);
    }

    /* =============================================
       v7.0 - PDF Import Modal
       ============================================= */
    .pdf-importer-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 20px;
    }

    .pdf-importer-content {
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 550px;
      max-height: 85vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .pdf-importer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      background: var(--dark-elevated);
    }

    .pdf-importer-header h3 {
      margin: 0;
      font-size: 18px;
    }

    .pdf-importer-header > button {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 24px;
      cursor: pointer;
      padding: 4px 8px;
      line-height: 1;
    }

    .pdf-importer-header > button:hover {
      color: var(--text);
    }

    .pdf-importer-body {
      padding: 20px;
      overflow-y: auto;
      flex: 1;
    }

    .import-dropzone {
      border: 2px dashed var(--border);
      border-radius: 12px;
      padding: 40px 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      margin-bottom: 20px;
    }

    .import-dropzone:hover,
    .import-dropzone.dragover {
      border-color: var(--primary);
      background: rgba(99, 102, 241, 0.05);
    }

    .import-dropzone svg {
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .import-dropzone p {
      margin: 0 0 16px;
      font-size: 14px;
      color: var(--text-muted);
    }

    .import-dropzone button {
      padding: 10px 24px;
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      border: none;
      border-radius: 8px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s;
    }

    .import-dropzone button:hover {
      transform: scale(1.02);
    }

    .pdf-parse-results {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }

    .pdf-parse-results h4 {
      margin: 0 0 12px;
      font-size: 14px;
      color: var(--text);
    }

    .pdf-parse-results p {
      margin: 8px 0;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .pdf-parse-results .btn-primary {
      margin-top: 12px;
      width: 100%;
      padding: 12px;
      background: linear-gradient(135deg, #8b5cf6, #6366f1);
      border: none;
      border-radius: 8px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      font-size: 14px;
    }

    .pdf-parse-results .btn-primary:hover {
      transform: scale(1.01);
    }

    .manual-entry-section {
      border-top: 1px solid var(--border);
      padding-top: 20px;
    }

    .manual-entry-section h4 {
      margin: 0 0 8px;
      font-size: 14px;
      color: var(--text);
    }

    .manual-entry-section .help-text {
      margin: 0 0 12px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .manual-entry-section textarea {
      width: 100%;
      padding: 12px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-family: monospace;
      resize: vertical;
      margin-bottom: 12px;
    }

    .manual-entry-section textarea:focus {
      outline: none;
      border-color: var(--primary);
    }

    .manual-entry-section textarea::placeholder {
      color: var(--text-muted);
    }

    .manual-entry-section button {
      width: 100%;
      padding: 12px;
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      border: none;
      border-radius: 8px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      font-size: 13px;
    }

    .manual-entry-section button:hover {
      transform: scale(1.01);
    }

    /* =============================================
       v8.0 - Enhanced AI Analysis UI
       ============================================= */

    /* Animated spinner with pulse */
    .ai-spinner {
      width: 48px;
      height: 48px;
      border: 3px solid rgba(99, 102, 241, 0.2);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 16px;
    }

    .ai-spinner.success {
      border-color: rgba(34, 197, 94, 0.2);
      border-top-color: #22c55e;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Pulse effect for processing */
    .ai-pulse {
      animation: pulse 2s ease-in-out infinite;
    }

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

    /* Progress bar */
    .ai-progress-bar {
      width: 100%;
      height: 6px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
      overflow: hidden;
      margin: 16px 0;
    }

    .ai-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--primary), #8b5cf6, #22c55e);
      background-size: 200% 100%;
      animation: progressShimmer 2s ease-in-out infinite;
      transition: width 0.3s ease;
    }

    @keyframes progressShimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Enhanced cabinet cards */
    .cabinet-card {
      background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 8px;
      transition: all 0.2s ease;
    }

    .cabinet-card:hover {
      border-color: rgba(99, 102, 241, 0.4);
      transform: translateX(4px);
      background: linear-gradient(145deg, rgba(99,102,241,0.1), rgba(99,102,241,0.05));
    }

    .cabinet-card .cab-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .cabinet-card .cab-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 28px;
      background: linear-gradient(135deg, var(--primary), #8b5cf6);
      border-radius: 6px;
      font-weight: 700;
      font-size: 12px;
      padding: 0 8px;
    }

    .cabinet-card .cab-type {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
    }

    .cabinet-card .cab-dims {
      font-size: 12px;
      color: var(--text-muted);
      font-family: 'SF Mono', Monaco, monospace;
    }

    .cabinet-card .cab-wall {
      font-size: 10px;
      padding: 2px 8px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      color: var(--text-secondary);
    }

    /* Room preview card */
    .room-preview-card {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 12px;
      transition: all 0.2s ease;
    }

    .room-preview-card:hover {
      border-color: var(--primary);
      box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);
    }

    .room-preview-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 16px;
      background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
      border-bottom: 1px solid var(--border);
    }

    .room-preview-header h4 {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .room-preview-header .room-badge {
      font-size: 11px;
      padding: 3px 8px;
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
      border-radius: 4px;
      font-weight: 500;
    }

    .room-preview-body {
      padding: 12px 16px;
      max-height: 200px;
      overflow-y: auto;
    }

    .room-preview-footer {
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 8px;
    }

    /* Enhanced buttons */
    .btn-ai-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      background: linear-gradient(135deg, #22c55e, #16a34a);
      border: none;
      border-radius: 10px;
      color: white;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
    }

    .btn-ai-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
    }

    .btn-ai-primary:active {
      transform: translateY(0);
    }

    .btn-ai-primary:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .btn-ai-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 20px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-secondary);
      font-weight: 500;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s ease;
      flex: 1;
    }

    .btn-ai-secondary:hover {
      border-color: var(--primary);
      color: var(--text);
      background: rgba(99, 102, 241, 0.1);
    }

    /* Confidence badge */
    .confidence-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .confidence-badge.high {
      background: rgba(34, 197, 94, 0.15);
      color: #22c55e;
      border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .confidence-badge.medium {
      background: rgba(249, 203, 0, 0.15);
      color: #f9cb00;
      border: 1px solid rgba(249, 203, 0, 0.3);
    }

    .confidence-badge.low {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, 0.3);
    }

    /* Stats grid */
    .ai-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 16px 0;
    }

    .ai-stat-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 14px;
      text-align: center;
    }

    .ai-stat-value {
      font-size: 24px;
      font-weight: 700;
      background: linear-gradient(135deg, var(--primary), #22c55e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .ai-stat-label {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* Page result list */
    .page-results-list {
      max-height: 120px;
      overflow-y: auto;
      margin-top: 12px;
      padding: 8px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      font-family: 'SF Mono', Monaco, monospace;
      font-size: 11px;
    }

    .page-result {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 0;
    }

    .page-result.success { color: #22c55e; }
    .page-result.warning { color: #f59e0b; }
    .page-result.error { color: #ef4444; }

    .page-result-icon {
      width: 16px;
      text-align: center;
    }

    /* Widen modal for better display */
    .pdf-importer-content {
      max-width: 650px;
    }

    /* =============================================
       v8.0 - Loading Skeletons & Utilities
       ============================================= */

    /* Skeleton loading animation */
    .skeleton {
      background: linear-gradient(90deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.05) 100%);
      background-size: 200% 100%;
      animation: skeletonShimmer 1.5s ease-in-out infinite;
      border-radius: 6px;
    }

    @keyframes skeletonShimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .skeleton-text {
      height: 14px;
      margin-bottom: 8px;
    }

    .skeleton-text.short {
      width: 60%;
    }

    .skeleton-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .skeleton-card {
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 10px;
    }

    /* Empty state styling */
    .empty-state {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-muted);
    }

    .empty-state-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .empty-state-icon svg {
      width: 32px;
      height: 32px;
      opacity: 0.5;
    }

    .empty-state-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 8px;
    }

    .empty-state-text {
      font-size: 13px;
      line-height: 1.5;
      max-width: 280px;
      margin: 0 auto;
    }

    /* Tooltip styles */
    [data-tooltip] {
      position: relative;
    }

    [data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(-4px);
      padding: 6px 10px;
      background: var(--dark-bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s ease;
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    [data-tooltip]:hover::after {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(-8px);
    }

    /* Status indicators */
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }

    .status-dot.online { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); }
    .status-dot.offline { background: #6b7280; }
    .status-dot.busy { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
    .status-dot.away { background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }

    /* Badge component */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
    }

    .badge.primary { background: rgba(99, 102, 241, 0.2); color: var(--primary); }
    .badge.success { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
    .badge.warning { background: rgba(249, 203, 0, 0.2); color: #f9cb00; }
    .badge.danger { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
    .badge.neutral { background: rgba(255, 255, 255, 0.1); color: var(--text-muted); }

    /* =============================================
       v7.0 - Approval Workflow Modal
       ============================================= */
    .approval-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      padding: 20px;
    }

    .approval-content {
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      width: 100%;
      max-width: 550px;
    }

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

    .approval-header h3 {
      margin: 0;
      font-size: 18px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .approval-body {
      padding: 24px;
    }

    .approval-preview {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      text-align: center;
    }

    .approval-preview h4 {
      margin: 0 0 12px;
      font-size: 16px;
    }

    .approval-preview-stats {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-top: 16px;
    }

    .approval-stat {
      text-align: center;
    }

    .approval-stat-value {
      font-size: 20px;
      font-weight: 700;
      color: var(--primary);
      display: block;
    }

    .approval-stat-label {
      font-size: 11px;
      color: var(--text-muted);
    }

    .recipient-input {
      margin-bottom: 20px;
    }

    .recipient-input label {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .recipient-input input {
      width: 100%;
      padding: 14px 16px;
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text);
      font-size: 15px;
    }

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

    .approval-link-section {
      background: rgba(34, 197, 94, 0.1);
      border: 1px solid rgba(34, 197, 94, 0.3);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
      display: none;
    }

    .approval-link-section.show {
      display: block;
    }

    .approval-link-section h5 {
      margin: 0 0 12px;
      font-size: 13px;
      color: #22c55e;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .approval-link-box {
      display: flex;
      gap: 8px;
    }

    .approval-link-box input {
      flex: 1;
      padding: 10px 12px;
      background: var(--dark-surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 12px;
      font-family: monospace;
    }

    .copy-link-btn {
      padding: 10px 16px;
      background: #22c55e;
      border: none;
      border-radius: 8px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      font-size: 12px;
    }

    .approval-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .approval-actions button {
      padding: 14px 20px;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
    }

    .send-approval-btn {
      background: linear-gradient(135deg, var(--primary), #b8860b);
      border: none;
      color: var(--dark-deep);
    }

    .send-approval-btn:hover {
      transform: scale(1.02);
    }

    .cancel-approval-btn {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
    }

    .cancel-approval-btn:hover {
      border-color: var(--text);
      color: var(--text);
    }

    /* Approval Status Badge */
    .approval-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
    }

    .approval-status-badge.pending {
      background: rgba(251, 191, 36, 0.2);
      color: #fbbf24;
    }

    .approval-status-badge.approved {
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
    }

    .approval-status-badge.rejected {
      background: rgba(239, 68, 68, 0.2);
      color: #ef4444;
    }

    /* Commercial Project Approval Extras */
    .approval-summary {
      background: var(--dark-elevated);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
    }

    .approval-summary h4 {
      margin: 0 0 12px;
      font-size: 18px;
      color: var(--primary);
    }

    .approval-summary p {
      margin: 6px 0;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .approval-summary p strong {
      color: var(--text);
    }

    .approval-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 16px;
    }

    .approval-options label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-secondary);
      cursor: pointer;
    }

    .approval-options input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--primary);
    }

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

    .approval-footer button {
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
    }

    .approval-footer .btn-primary {
      background: linear-gradient(135deg, var(--primary), #b8860b);
      border: none;
      color: var(--dark-deep);
    }

    .approval-footer .btn-secondary {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
    }

    .approval-footer .btn-primary:hover {
      transform: scale(1.02);
    }

    .approval-footer .btn-secondary:hover {
      border-color: var(--text);
      color: var(--text);
    }

    /* Demo Mode Banner */
    .demo-banner {
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      z-index: 1000;
    }

    .demo-banner-content {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .demo-banner-badge {
      background: rgba(255,255,255,0.2);
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .demo-banner-text {
      font-size: 14px;
      font-weight: 500;
    }

    .demo-banner-cta {
      background: #fff;
      color: #6366f1;
      padding: 8px 20px;
      border-radius: 20px;
      text-decoration: none;
      font-weight: 600;
      font-size: 13px;
      transition: all 0.2s;
    }

    .demo-banner-cta:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .demo-banner-link {
      color: rgba(255,255,255,0.9);
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
    }

    .demo-banner-link:hover {
      color: #fff;
      text-decoration: underline;
    }

    /* Demo mode upgrade modal */
    .demo-upgrade-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.8);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10000;
    }

    .demo-upgrade-modal.show {
      display: flex;
    }

    .demo-upgrade-content {
      background: var(--dark-surface);
      border-radius: 16px;
      padding: 40px;
      max-width: 480px;
      text-align: center;
      border: 1px solid var(--border);
      position: relative;
    }

    .demo-upgrade-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 24px;
      cursor: pointer;
    }

    .demo-upgrade-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }

    .demo-upgrade-content h2 {
      font-size: 24px;
      margin-bottom: 12px;
    }

    .demo-upgrade-content p {
      color: var(--text-secondary);
      margin-bottom: 24px;
      line-height: 1.6;
    }

    .demo-upgrade-features {
      text-align: left;
      margin-bottom: 24px;
    }

    .demo-upgrade-feature {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
    }

    .demo-upgrade-feature:last-child {
      border-bottom: none;
    }

    .demo-upgrade-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
    }

    @media (max-width: 768px) {
      .demo-banner {
        padding: 8px 12px;
      }
      .demo-banner-text {
        display: none;
      }
    }

    /* Demo mode layout adjustments - when banner is visible */
    .demo-banner:not([style*="display: none"]) ~ .header ~ .main {
      max-height: calc(100vh - 56px - 48px); /* Account for demo banner (~48px) */
    }

    /* Right panel sections - all flex-shrink:0 so panel scrolls instead of overlapping */
    .right-panel .panel-section#itemPickerSection {
      flex-shrink: 0;
    }

    .right-panel .panel-section#propertiesPanel {
      flex-shrink: 0;
      overflow-y: auto;
      max-height: 350px;
    }

    /* Collapsible message section shouldn't break layout */
    .right-panel .panel-section#teamChatSection {
      flex-shrink: 0;
      max-height: 300px;
      overflow: hidden;
    }

    .right-panel .panel-section#teamChatSection:not(.collapsed) {
      overflow-y: auto;
    }

    .right-panel .panel-section#teamChatSection #teamChatMessages {
      max-height: 150px;
      overflow-y: auto;
    }

/* ===== Mobile-app chat — Remodely Design Pro on phones =====
   Turns the floating desktop panel into a real full-screen messaging app
   (solid bg, notch/home safe-areas, app bar, scrollable chip row, pinned
   composer). Scoped to phones; desktop untouched. !important beats the
   chat panel's later-injected inline <style>. */
@media (max-width: 640px) {
  /* Full-screen, SOLID (kills the canvas watermark bleeding through the
     old translucent panel) */
  #aiChatPanel {
    top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: 100% !important;
    height: 100% !important; height: 100dvh !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: #0e0e1a !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  /* App bar — sticky, padded under the notch */
  #aiChatPanel .chat-header {
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px !important;
    background: #15152a !important; position: sticky; top: 0; z-index: 2;
  }
  #aiChatPanel .chat-header h3 { font-size: 17px !important; }
  /* Message list — comfortable, readable bubbles */
  #aiChatPanel .chat-messages { padding: 14px 14px 8px !important; gap: 10px !important; }
  #aiChatPanel .chat-message {
    max-width: 85% !important; display: block !important;
    font-size: 15px !important; line-height: 1.45 !important;
  }
  /* Composer — pinned, padded above the home indicator */
  #aiChatPanel .chat-input-area {
    padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    background: #15152a !important;
  }
  #aiChatPanel .chat-input { font-size: 16px !important; padding: 11px 16px !important; } /* 16px = no iOS zoom */
  #aiChatPanel .chat-send-btn { width: 44px !important; height: 44px !important; flex: 0 0 auto; }
  /* Quick actions — one horizontal-scrolling row instead of wrapping */
  #aiChatPanel .quick-actions {
    flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 8px !important; margin-bottom: 10px !important; padding-bottom: 2px; scrollbar-width: none;
  }
  #aiChatPanel .quick-actions::-webkit-scrollbar { display: none; }
  #aiChatPanel .quick-action {
    flex: 0 0 auto; min-height: 38px; padding: 8px 14px !important;
    font-size: 13px !important; display: inline-flex; align-items: center;
  }
  /* Underlying builder: thumb-friendly toolbar + no clipping */
  #view2D, #view3D, #userMenuBtn, #saveDesignBtn, #undoBtn, #redoBtn,
  #lockViewBtn, .help-btn { min-height: 40px; min-width: 40px; }
  .toolbar-group { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* ===== Header (the jumble) ===== The header is locked to height:56px, so
     its ~10 action buttons wrapped OUTSIDE the box and overlapped the canvas
     (transparent bg let everything bleed through). Let it grow, wrap into
     clean rows, and go solid. */
  .header {
    height: auto !important; min-height: 52px !important; max-height: none !important;
    flex-wrap: wrap !important; align-items: center; row-gap: 6px;
    padding: 8px 10px !important;
    background: #15152a !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .header-left { flex: 1 1 auto; min-width: 0; }
  .header-left .project-input { max-width: 100%; }
  /* stack the 2D/3D + zoom row and the action-button row full-width below */
  .header-center { order: 3; width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  .header-right  { order: 4; width: 100%; flex-wrap: wrap !important; gap: 6px !important; justify-content: flex-start; }
  /* solid pills so the canvas no longer shows through (Save/AI Scan keep their
     own inline gradient/colour — inline styles win over this) */
  .header-right .btn {
    flex: 0 0 auto; min-height: 38px; padding: 7px 12px !important; font-size: 13px !important;
    background: #1e1e36; border: 1px solid rgba(255,255,255,.12);
  }
}