/* ── Embed code modal ────────────────────────────────── */
    #embed-code-modal .modal { max-width: 640px; }
    #embed-code-modal textarea {
      width: 100%;
      height: 200px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: .78rem;
      line-height: 1.45;
      padding: 10px;
      border: 1px solid #dfe6e9;
      border-radius: 4px;
      resize: vertical;
      box-sizing: border-box;
      background: #f8f9fa;
      color: #2c3e50;
    }
    #embed-code-modal .embed-copy-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
    }
    #embed-code-modal .embed-copy-note {
      font-size: .82rem;
      color: #7f8c8d;
      flex: 1;
    }

    /* ── Notification modal ───────────────────────────────── */
    #notification-modal .modal { max-width: 400px; }
    #notification-modal .modal-body {
      padding: 20px 24px;
      font-size: .95rem;
      line-height: 1.6;
    }

    /* ── Project Settings / Export choice buttons ────────── */
    .project-settings-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 14px 18px;
      border: 1.5px solid #dfe6e9;
      border-radius: var(--radius);
      background: var(--clr-white);
      font-size: .92rem;
      font-weight: 600;
      color: var(--clr-dark);
      cursor: pointer;
      transition: border-color .15s, background .15s, box-shadow .15s;
      text-align: left;
    }
    .project-settings-btn:hover {
      border-color: var(--clr-primary);
      background: rgba(52,152,219,.04);
      box-shadow: var(--shadow);
    }
    .project-settings-btn svg { color: var(--clr-primary); }

    /* ── Responsive: sidebar becomes an off-canvas drawer ── */
    @media (max-width: 900px) {
      #app {
        grid-template-columns: 1fr;
        grid-template-areas:
          "header"
          "main";
        grid-template-rows: var(--header-h) 1fr;
      }
      #sidebar {
        position: fixed;
        top: var(--header-h);
        left: 0;
        bottom: 0;
        width: min(var(--sidebar-w), 85vw);
        transform: translateX(-100%);
        transition: transform .2s ease-out;
        z-index: 200;
        box-shadow: 4px 0 16px rgba(0,0,0,.25);
      }
      body.sidebar-open #sidebar { transform: translateX(0); }
      .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: var(--header-h) 0 0 0;
        background: rgba(0,0,0,.4);
        z-index: 150;
      }
      body.sidebar-open .sidebar-backdrop { display: block; }
      #btn-sidebar-toggle { display: inline-flex; }
      /* Icon-only header buttons; dropdown items keep their labels */
      .toolbar > button span,
      .toolbar .toolbar-menu > button > span { display: none; }
      .toolbar button { padding: 7px 9px; }
      .modal-overlay .modal { max-width: 96vw; }
    }