@layer components {

    :root {
      --ui-bg: rgba(255, 255, 255, 0.94);
      --ui-border: rgba(226, 232, 240, 0.95);
      --ui-text: #0f172a;
      --ui-muted: #64748b;
      --ui-accent: #4f46e5;
    }
    html.dark {
      --ui-bg: rgba(15, 23, 42, 0.94);
      --ui-border: rgba(51, 65, 85, 0.9);
      --ui-text: #f8fafc;
      --ui-muted: #94a3b8;
      --ui-accent: #6366f1;
    }
    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      background-color: #f8fafc;
      color: #0f172a;
    }
    html.dark body {
      background-color: #090d16;
      color: #f8fafc;
    }
    .glass-panel {
      background: var(--ui-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--ui-border);
    }
    .tool-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 10px;
      transition: all 0.14s ease;
      color: var(--ui-text);
      cursor: pointer;
      user-select: none;
    }
    .tool-btn:hover {
      background: rgba(99, 102, 241, 0.1);
      color: #4f46e5;
    }
    html.dark .tool-btn:hover {
      background: rgba(99, 102, 241, 0.22);
      color: #818cf8;
    }
    .tool-btn.active {
      background: #4f46e5;
      color: #ffffff !important;
      box-shadow: 0 4px 12px rgba(79, 70, 229, 0.32);
    }
    .sub-btn {
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      transition: all 0.14s ease;
      cursor: pointer;
    }
    .sub-btn.active {
      background: #4f46e5;
      color: #ffffff;
    }
    #whiteboardViewport {
      position: relative;
      width: 100%;
      height: calc(100vh - 48px);
      overflow: hidden;
      touch-action: none;
      user-select: none;
    }
    body.focus-mode #topAppHeader,
    body.focus-mode #pageBottomBar,
    body.focus-mode #minimapContainer,
    body.focus-mode #seoScrollPill {
      display: none !important;
    }
    body.focus-mode #whiteboardViewport {
      height: 100vh !important;
    }
    body.presentation-mode #topAppHeader,
    body.presentation-mode #leftMainToolbar,
    body.presentation-mode #subToolPanel,
    body.presentation-mode #pageBottomBar,
    body.presentation-mode #minimapContainer,
    body.presentation-mode #seoScrollPill {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    body.presentation-mode #presentationFloatingBar {
      display: flex !important;
    }
    body.presentation-mode #whiteboardViewport {
      height: 100vh !important;
    }
    /* Custom scrollbars */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.45);
      border-radius: 9999px;
    }
    @media print {
      #topAppHeader, #leftMainToolbar, #subToolPanel, #pageBottomBar,
      #minimapContainer, #seoContentSection, #seoScrollPill,
      #presentationFloatingBar, .no-print {
        display: none !important;
      }
      #whiteboardViewport {
        height: 100vh !important;
        width: 100vw !important;
      }
    }
  
}