* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body {
      display: flex;
      flex-direction: column; /* stack topnav on top, app below */
      height: 100vh;
      overflow: hidden;
      background: #f3f4f6;
      color: #111827;
    }

    /* Top navigation */
            .topnav {
              overflow: hidden;
              background-color: #ffffff;
            }

            .topnav a {
              float: left;
              color: #1a1a1a;
              text-align: center;
              text-decoration: none;
              font-size: 17px;
            }

            .topnav a:hover {
              background-color: #ddd;
              color: black;
            }

            .topnav a.active {
              background-color: #ffffff;
              color: black;
            }
								   
            .topnav-right {
              float: right;
            }

    /* App layout: sidebar + main */
    #app {
      flex: 1;
      display: flex;
      overflow: hidden;
    }

    /* Sidebar */
    #sidebar {
      width: 230px;
      background: #111827;
      color: #e5e7eb;
      display: flex;
      flex-direction: column;
      padding: 12px;
      gap: 12px;
    }

    #sidebar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #sidebar-header h2 {
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #9ca3af;
    }

    #add-slide-btn {
      background: #10b981;
      border: none;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
    }

    #add-slide-btn:hover {
      background: #059669;
    }

    #slides-list {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .slide-thumb {
      background: #1f2937;
      border-radius: 6px;
      padding: 6px;
      cursor: pointer;
      border: 2px solid transparent;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .slide-thumb.active {
      border-color: #3b82f6;
      background: #111827;
    }

    .slide-thumb-number {
      font-size: 11px;
      color: #9ca3af;
    }

    .slide-thumb-preview {
      background: white;
      border-radius: 4px;
      height: 80px;
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
    }

    .slide-thumb-actions {
      display: flex;
      justify-content: flex-end;
      gap: 4px;
    }

    .slide-thumb-actions button {
      border: none;
      background: #374151;
      color: #e5e7eb;
      font-size: 10px;
      padding: 2px 4px;
      border-radius: 3px;
      cursor: pointer;
    }

    .slide-thumb-actions button:hover {
      background: #4b5563;
    }

    /* Main */
    #main {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* Toolbar */
    #toolbar {
      min-height: 66px;
      background: white;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 14px;
      flex-wrap: wrap;
    }

    #toolbar-section-title {
      font-weight: 600;
      font-size: 14px;
      margin-right: 10px;
    }

    .toolbar-group {
      display: flex;
      align-items: center;
      gap: 6px;
      padding-right: 12px;
      border-right: 1px solid #e5e7eb;
    }

    .toolbar-group:last-child {
      border-right: none;
    }

    .toolbar-button {
      border: 1px solid #d1d5db;
      background: #f9fafb;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
    }

    .toolbar-button:hover {
      background: #e5e7eb;
    }

    .toolbar-button.active {
      background: #3b82f6;
      color: white;
      border-color: #2563eb;
    }

    select,
    input[type="color"],
    input[type="number"],
    input[type="file"],
    input[type="text"] {
      font-size: 12px;
      padding: 2px 4px;
      border-radius: 4px;
      border: 1px solid #d1d5db;
      background: #f9fafb;
    }

    input[type="file"] {
      max-width: 150px;
    }

    /* Canvas */
    #canvas-wrapper {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 4px;
      background: #e5e7eb;
    }

    #slide-canvas {
      width: 960px;
      height: 440px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
    }

    #annotation-canvas {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    #annotation-canvas.drawing {
      pointer-events: auto;
      cursor: crosshair;
    }

    /* Elements */
    .slide-element {
      position: absolute;
      border: 1px solid transparent;
      cursor: move;
    }

    .slide-element.selected {
      border: 1px dashed #3b82f6;
      box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4);
    }

    .text-element {
      padding: 4px 6px;
      min-width: 60px;
      min-height: 24px;
      outline: none;
      white-space: pre-wrap;
      word-break: break-word;
      background: transparent;
    }

    .shape-rect {
      border-radius: 4px;
    }

    .shape-circle {
      border-radius: 999px;
    }

    .image-element img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
    }

    .video-element {
      background: #000;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .video-header {
      height: 18px;
      background: #111827;
      color: #e5e7eb;
      font-size: 10px;
      display: flex;
      align-items: center;
      padding: 0 4px;
      cursor: move;
      flex-shrink: 0;
    }

    .video-body iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    .resize-handle {
      width: 8px;
      height: 8px;
      background: white;
      border: 1px solid #3b82f6;
      border-radius: 50%;
      position: absolute;
    }

    .resize-handle.br {
      right: -4px;
      bottom: -4px;
      cursor: se-resize;
    }

    /* Status bar */
    #status-bar {
      height: 26px;
      background: #111827;
      color: #9ca3af;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
    }

    .hidden {
      display: none !important;
    }