.section-focus {
      outline: 1px solid #22a699;
      outline-offset: 2px;
    }

    .group-folder-row {
      min-height: 34px;
      border: 0;
      border-radius: 0;
      border-bottom: 1px solid #474747;
      background: #4f4f4f;
      padding: 5px 8px;
    }
    .eye-btn {
      width: 22px;
      min-width: 22px;
      height: 22px;
      min-height: 22px;
      border: 0;
      background: transparent;
      color: #f0f0f0;
      font-size: 14px;
      line-height: 1;
      padding: 0;
    }
    .layer-main { gap: 2px; }
    .layer-name { gap: 6px; }
    .layer-title { font-size: 12px; line-height: 1.15; }
    .layer-name button {
      min-height: 18px;
      padding: 1px 5px;
      background: #575757;
      border-color: #666;
      color: #ddd;
      font-size: 10px;
      line-height: 1.1;
    }
    .layer-meta { color: #d5d5d5; font-size: 10px; line-height: 1.25; }

    .channel-list,
    .path-list {
      flex: 1;
      min-height: 0;
      overflow: auto;
      background: #4f4f4f;
    }

    .channel-row,
    .path-row {
      display: grid;
      grid-template-columns: 32px 48px minmax(0, 1fr) 36px;
      align-items: center;
      gap: 8px;
      min-height: 58px;
      border-bottom: 1px solid #424242;
      background: #6b6b6b;
      padding: 5px 9px;
      color: #f2f2f2;
      cursor: pointer;
    }

    .channel-row.active,
    .path-row.active { background: #747474; }

    .channel-eye {
      color: #f2f2f2;
      font-size: 18px;
      text-align: center;
    }

    .channel-thumb,
    .path-thumb {
      width: 42px;
      height: 42px;
      border: 2px solid #333;
      background: #fff;
      overflow: hidden;
    }

    .channel-thumb canvas,
    .path-thumb canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    .channel-name,
    .path-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 800;
    }

    .channel-shortcut {
      color: #f2f2f2;
      font-size: 13px;
      font-weight: 800;
      text-align: right;
    }

    .panel-empty-note {
      padding: 16px;
      color: #dfdfdf;
      font-size: 13px;
      line-height: 1.45;
    }

    .channel-footer {
      display: flex;
      justify-content: flex-end;
      gap: 18px;
      min-height: 40px;
      padding: 6px 12px;
      border-top: 1px solid #3f3f3f;
      background: #555;
    }

    .channel-footer button {
      min-width: 28px;
      border: 0;
      background: transparent;
      color: #f2f2f2;
      font-size: 18px;
    }

    .history-head {
      display: grid;
      grid-template-columns: 32px 56px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-height: 72px;
      padding: 8px 12px;
      border-bottom: 1px solid #444;
      background: #555;
    }

    .history-brush-icon {
      color: #ededed;
      font-size: 22px;
    }

    .history-thumb {
      width: 48px;
      height: 48px;
      border: 2px solid #2b2b2b;
      background: #fff;
    }

    .history-title {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #f1f1f1;
      font-size: 14px;
      font-weight: 700;
    }

    .history-list {
      flex: 1;
      min-height: 0;
      overflow: auto;
      gap: 0;
      padding: 4px;
      margin: 0;
      background: var(--surface);
    }

    .history-list li,
    .history-item {
      display: grid;
      grid-template-columns: 28px 32px minmax(0, 1fr);
      align-items: center;
      min-height: 36px;
      border: 1px solid transparent;
      border-radius: 7px;
      margin: 1px 0;
      background: rgba(255, 255, 255, 0.02);
      color: var(--ink);
      padding: 0 8px;
      font-size: 12px;
      cursor: pointer;
      transition: background 0.15s var(--spring), border-color 0.15s ease;
    }

    .history-item:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.08);
    }

    .history-item.active {
      background: rgba(94, 106, 210, 0.16);
      border-color: rgba(94, 106, 210, 0.4);
      color: #9AA2F2;
      box-shadow: inset 3px 0 0 var(--primary);
    }

    .history-check {
      width: 16px;
      height: 16px;
      border: 1px solid var(--line-2);
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.05);
    }

    .history-icon {
      color: var(--ink-2);
      font-size: 14px;
      text-align: center;
    }

    .history-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .history-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 18px;
      min-height: 40px;
      padding: 6px 12px;
      border-top: 1px solid #3f3f3f;
      background: #555;
    }

    .history-footer button {
      min-width: 28px;
      border: 0;
      background: transparent;
      color: #f0f0f0;
      font-size: 18px;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: none;
      place-items: center;
      background: rgba(0, 0, 0, .58);
    }

    .modal-backdrop.open { display: grid; }

    .export-dialog {
      width: min(1040px, calc(100vw - 48px));
      max-height: calc(100vh - 48px);
      display: grid;
      grid-template-columns: minmax(320px, 1fr) 360px;
      border: 1px solid #222;
      border-radius: 6px;
      background: #4f4f4f;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
      color: #f2f2f2;
      overflow: hidden;
    }

    .export-preview {
      display: grid;
      grid-template-rows: 42px minmax(260px, 1fr) 34px;
      min-width: 0;
      border-right: 1px solid #383838;
      background: #333;
    }

    .export-title,
    .export-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 12px;
      background: #444;
      border-bottom: 1px solid #383838;
      font-size: 13px;
      font-weight: 800;
    }

    .export-foot {
      border-top: 1px solid #383838;
      border-bottom: 0;
      color: #ddd;
      font-weight: 600;
    }

    .export-canvas-wrap {
      display: grid;
      place-items: center;
      padding: 18px;
      overflow: auto;
      background:
        linear-gradient(45deg, #cfcfcf 25%, transparent 25%),
        linear-gradient(-45deg, #cfcfcf 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #cfcfcf 75%),
        linear-gradient(-45deg, transparent 75%, #cfcfcf 75%);
      background-color: #efefef;
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    }

    #exportPreviewCanvas {
      display: block;
      max-width: 100%;
      max-height: 62vh;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
      background: transparent;
    }

    .export-settings {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 14px;
      overflow: auto;
      background: #555;
    }

    .export-settings h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: 0;
    }

    .export-profile-options {
      padding: 9px;
      border: 1px solid #444;
      border-radius: 4px;
      background: rgba(0, 0, 0, .08);
    }

    .export-profile-toggle {
      min-height: 30px;
      justify-content: flex-start;
      font-weight: 600;
    }

    .export-actions {
      display: flex;
      gap: 8px;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid #444;
    }

    .export-actions button { flex: 1; }

    .select-mask-dialog {
      width: min(980px, calc(100vw - 48px));
      grid-template-columns: minmax(360px, 1fr) 320px;
    }

    .select-mask-preview {
      grid-template-rows: 42px minmax(320px, 1fr) 34px;
    }

    #selectMaskPreviewCanvas {
      display: block;
      max-width: 100%;
      max-height: 66vh;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
      background: transparent;
    }

    .select-mask-settings .field input[type="range"] {
      width: 100%;
    }

    .select-mask-value {
      color: #eaeaea;
      font-size: 12px;
      font-weight: 800;
      text-align: right;
    }

    @media (max-width: 760px) {
      .export-dialog {
        grid-template-columns: 1fr;
      }
    }

    .statusbar {
      border-top: 1px solid var(--line);
      background: var(--surface);
      color: var(--ink-2);
      font-size: 11.5px;
      letter-spacing: 0;
    }

    /* ========================================================
       ACCORDION SECTIONS FOR RIGHTBAR (.rightbar)
       ======================================================== */
    .rightbar {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      overflow: hidden !important;
      background: var(--surface);
      border-left: 1px solid var(--line);
    }

    /* Hide horizontal dock resize handles in single-expand accordion mode */
    .dock-resize-handle {
      display: none !important;
    }

    /* Collapsed section: sleek 36px header strip */
    .rightbar > .dock-group.is-collapsed {
      flex: 0 0 36px !important;
      min-height: 36px !important;
      max-height: 36px !important;
      height: 36px !important;
      overflow: hidden !important;
      cursor: pointer;
      background: var(--surface-2) !important;
      border-bottom: 1px solid var(--line) !important;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .rightbar > .dock-group.is-collapsed:hover {
      background: rgba(255, 255, 255, 0.06) !important;
    }

    .rightbar > .dock-group.is-collapsed > :not(.dock-tabs) {
      display: none !important;
    }

    /* Expanded section: takes 100% remaining vertical space */
    .rightbar > .dock-group:not(.is-collapsed) {
      flex: 1 1 0% !important;
      min-height: 0 !important;
      height: auto !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      background: var(--surface) !important;
      border-bottom: 1px solid var(--line) !important;
      box-shadow: inset 2px 0 0 var(--primary);
    }

    .rightbar > .dock-group:not(.is-collapsed) > .dock-tabs {
      background: var(--surface-2);
      border-bottom: 1px solid var(--line);
    }

    /* Dock tabs header styling */
    .dock-tabs {
      display: flex !important;
      align-items: center !important;
      height: 36px !important;
      min-height: 36px !important;
      background: var(--surface-2);
      border-bottom: 1px solid var(--line);
      user-select: none;
      padding-right: 4px;
    }

    .dock-tab {
      width: auto !important;
      min-width: 52px !important;
      height: 36px !important;
      padding: 0 10px !important;
      font-size: 11px !important;
      border: 0 !important;
      border-right: 1px solid var(--line) !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: var(--ink-2) !important;
      font-weight: 600 !important;
      cursor: pointer;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px;
      transition: all 0.15s ease;
    }

    .dock-tab:hover {
      background: rgba(255, 255, 255, 0.05) !important;
      color: var(--ink) !important;
    }

    .dock-tab.active {
      background: var(--surface) !important;
      color: var(--ink) !important;
      box-shadow: inset 0 2px 0 var(--primary) !important;
      font-weight: 700 !important;
    }

    .dock-collapse-btn {
      width: 28px !important;
      height: 36px !important;
      border: 0 !important;
      background: transparent !important;
      color: var(--ink-2) !important;
      cursor: pointer;
      display: grid !important;
      place-items: center !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      transition: color 0.15s ease, background 0.15s ease;
      margin-left: auto;
    }

    .dock-collapse-btn:hover {
      color: #ffffff !important;
      background: rgba(255, 255, 255, 0.08) !important;
    }

    .collapse-marker {
      display: inline-block;
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .dock-group:not(.is-collapsed) .collapse-marker {
      transform: rotate(0deg);
    }

    .dock-group.is-collapsed .collapse-marker {
      transform: rotate(-90deg);
    }

    /* Content scrolling within expanded section */
    .color-panel-body,
    .properties-body,
    .prop-panel-view.active,
    .history-body,
    .layer-panel-view.active,
    .layers-body {
      overflow-y: auto !important;
      flex: 1 1 0% !important;
    }

    /* ========================================================
       TOP ACTION BARS & CLEAR BOTTOM WORKSPACE (COMPACT & EXPANDED)
       ======================================================== */
    /* Canvas transform-origin: center center so it scales symmetrically */
    .canvas-viewport {
      transform-origin: center center !important;
    }

    /* Stage layout: Exactly 2 rows (Stage Top Bar 32px + Canvas Shell 1fr) */
    .stage {
      grid-template-rows: 32px minmax(0, 1fr) !important;
      position: relative !important;
      overflow: hidden !important;
    }

    /* Stage top bar: flex row containing Document Tabs and Quick Actions */
    .stage-top-bar {
      grid-row: 1 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
      background: var(--surface) !important;
      border-bottom: 1px solid var(--line) !important;
      padding: 0 6px 0 0 !important;
      overflow: visible !important;
      z-index: 40 !important;
    }

    .stage-top-bar .document-tabs {
      display: flex !important;
      align-items: center !important;
      height: 100% !important;
      border-bottom: none !important;
      background: transparent !important;
      flex-shrink: 0 !important;
    }

    .stage-top-bar .document-tabs .doc-tab {
      height: 32px !important;
      line-height: 32px !important;
      border-radius: 0 !important;
      border-right: 1px solid var(--line) !important;
      background: rgba(255, 255, 255, 0.04) !important;
      padding: 0 10px !important;
      font-size: 11.5px !important;
      font-weight: 600 !important;
    }

    .stage-top-bar .quick-actions {
      display: flex !important;
      align-items: center !important;
      gap: 5px !important;
      height: 100% !important;
      min-height: 28px !important;
      padding: 0 4px !important;
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .quick-actions::before {
      display: none !important;
    }

    .quick-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 1px 6px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 700;
      color: var(--primary);
      background: rgba(94, 106, 210, 0.15);
      border: 1px solid rgba(94, 106, 210, 0.3);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .quick-group {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      flex-shrink: 0;
    }

    .quick-sep {
      width: 1px;
      height: 14px;
      background: rgba(255, 255, 255, 0.1);
      margin: 0 2px;
      flex-shrink: 0;
    }

    .quick-actions button {
      min-height: 22px !important;
      padding: 1px 7px !important;
      border-radius: 4px !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      border: 1px solid var(--line) !important;
      background: var(--surface-2) !important;
      color: var(--ink-1) !important;
      transition: all 0.15s ease !important;
      white-space: nowrap !important;
    }

    .quick-actions button:hover {
      background: rgba(255, 255, 255, 0.08) !important;
      color: #fff !important;
      border-color: rgba(255, 255, 255, 0.2) !important;
    }

    .quick-actions button.active {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: #fff !important;
    }

    .quick-actions select,
    .quick-actions input {
      min-height: 22px !important;
      padding: 1px 5px !important;
      font-size: 11px !important;
      border-radius: 4px !important;
      border: 1px solid var(--line) !important;
      background: var(--surface-2) !important;
      color: var(--ink-1) !important;
    }

    .quick-collapse-btn {
      margin-left: auto !important;
      width: 22px !important;
      height: 22px !important;
      min-height: 22px !important;
      padding: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 4px !important;
      color: var(--ink-2) !important;
      cursor: pointer;
    }

    .quick-actions.is-collapsed > *:not(.quick-badge):not(.quick-collapse-btn) {
      display: none !important;
    }

    /* Canvas expands to 100% of row 2 */
    .canvas-shell {
      grid-row: 2 !important;
      background: #141416 !important;
      position: relative !important;
      overflow: hidden !important;
    }

    /* Top Contextbar Document Actions - compact sticky right */
    :root {
      --context: 32px !important;
    }

    .contextbar {
      min-height: 32px !important;
      height: 32px !important;
      padding: 0 8px !important;
      position: relative !important;
      overflow: visible !important;
      z-index: 50 !important;
    }

    .contextbar-actions {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      position: sticky !important;
      right: 0 !important;
      margin-left: auto;
      padding: 0 4px 0 8px;
      border-left: 1px solid var(--line);
      background: var(--surface) !important;
      box-shadow: -8px 0 12px var(--surface);
      z-index: 15;
      flex-shrink: 0;
    }

    .contextbar-actions .menu-actions,
    .contextbar-actions .doc-actions {
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }

    .contextbar-actions button {
      min-height: 20px !important;
      padding: 1px 5px !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      border-radius: 3px !important;
      border: 1px solid var(--line) !important;
      background: var(--surface-2) !important;
      color: var(--ink-1) !important;
      transition: all 0.15s ease !important;
      cursor: pointer;
    }

    .contextbar-actions button:hover {
      background: rgba(255, 255, 255, 0.08) !important;
      color: #fff !important;
      border-color: rgba(255, 255, 255, 0.2) !important;
    }

    .contextbar-actions button.primary {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: #fff !important;
    }

    /* Left toolbar vector icons */
    .tool-btn.has-svg-icon::before {
      display: none !important;
    }
    .tool-btn .tool-icon-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      margin: auto;
      pointer-events: none;
    }
    .tool-btn .tool-icon-wrap svg {
      width: 17px;
      height: 17px;
      display: block;
      color: #dddddd;
      fill: currentColor;
      transition: transform 0.12s ease, color 0.12s ease;
    }
    .tool-btn:hover .tool-icon-wrap svg {
      color: #ffffff;
      transform: scale(1.1);
    }
    .tool-btn.active .tool-icon-wrap svg {
      color: #58a6ff;
      filter: drop-shadow(0 0 2px rgba(88, 166, 255, 0.6));
    }

    .context-taskbar {
      gap: 3px !important;
      padding-inline: 4px !important;
    }
    .context-taskbar button {
      min-height: 20px !important;
      padding: 1px 5px !important;
      font-size: 10.5px !important;
      border-radius: 3px !important;
    }
    .context-taskbar input[type="range"] {
      width: 60px !important;
    }
    .context-taskbar select {
      width: 76px !important;
      font-size: 10.5px !important;
    }

    /* Clean bottom statusbar */
    .statusbar {
      height: 22px !important;
      min-height: 22px !important;
      padding: 0 10px !important;
      background: var(--bg) !important;
      border-top: 1px solid var(--line) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }

    .statusbar .status-left,
    .statusbar .status-right {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .statusbar .status-pill {
      font-size: 10.5px;
      color: var(--ink-2);
      padding: 1px 5px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* ========================================================
       MCP INTEGRATION TAB STYLES
       ======================================================== */
    .mcp-endpoint-card {
      background: #1e1e1e;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 12px;
    }
    .mcp-endpoint-url-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: #141414;
      padding: 6px 10px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .mcp-endpoint-url-row code {
      font-size: 11px;
      color: #38bdf8;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      word-break: break-all;
    }
    .mcp-endpoint-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    .mcp-badge {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--muted);
      border: 1px solid rgba(255, 255, 255, 0.06);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .mcp-badge.active {
      background: rgba(34, 197, 94, 0.15);
      color: #4ade80;
      border-color: rgba(34, 197, 94, 0.3);
    }
    .mcp-badge.revoked {
      background: rgba(239, 68, 68, 0.15);
      color: #f87171;
      border-color: rgba(239, 68, 68, 0.3);
    }
    .mcp-card {
      background: #1e1e1e;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 12px;
    }
    .mcp-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .mcp-summary-text {
      font-size: 11px;
      color: var(--muted);
    }
    .mcp-hint {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4;
    }
    .mcp-mini-btn {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 4px;
      background: #2a2a2a;
      border: 1px solid var(--border);
      color: var(--ink);
      cursor: pointer;
    }
    .mcp-mini-btn:hover {
      background: #333;
      border-color: #555;
    }
    .mcp-mini-btn.primary {
      background: var(--primary, #0265dc);
      color: #fff;
      border-color: transparent;
    }
    .mcp-mini-btn.warn {
      color: #f87171;
      border-color: rgba(239, 68, 68, 0.3);
      background: rgba(239, 68, 68, 0.1);
    }
    .mcp-mini-btn.warn:hover {
      background: rgba(239, 68, 68, 0.2);
    }
    .mcp-secret-box {
      margin-top: 10px;
      padding: 10px;
      background: rgba(234, 179, 8, 0.1);
      border: 1px solid rgba(234, 179, 8, 0.3);
      border-radius: 5px;
    }
    .mcp-secret-title {
      font-size: 11px;
      font-weight: 700;
      color: #facc15;
      margin-bottom: 4px;
    }
    .mcp-secret-desc {
      font-size: 10.5px;
      color: #eab308;
      margin-bottom: 8px;
      line-height: 1.35;
    }
    .mcp-secret-token-row {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .mcp-secret-token-row input {
      flex: 1;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      background: #111;
      border: 1px solid #444;
      color: #facc15;
      padding: 5px 8px;
      border-radius: 4px;
    }
    .mcp-key-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 240px;
      overflow-y: auto;
    }
    .mcp-key-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px;
      background: #141414;
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 5px;
    }
    .mcp-key-item.is-selected {
      border-color: var(--primary, #0265dc);
      background: rgba(2, 101, 220, 0.08);
    }
    .mcp-key-item.is-revoked {
      opacity: 0.6;
    }
    .mcp-key-main {
      flex: 1;
      min-width: 0;
    }
    .mcp-key-title-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 3px;
    }
    .mcp-key-name {
      font-size: 12px;
      color: #eee;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mcp-key-meta-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 10.5px;
    }
    .mcp-key-prefix {
      color: #94a3b8;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10px;
    }
    .mcp-key-date {
      color: var(--muted);
      font-size: 10px;
    }
    .mcp-key-actions {
      display: flex;
      gap: 5px;
    }
    .mcp-client-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .mcp-client-tab {
      font-size: 10.5px;
      padding: 3px 8px;
      background: #242424;
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--muted);
      cursor: pointer;
    }
    .mcp-client-tab.active {
      background: var(--surface, #2d2d2d);
      border-color: var(--primary, #0265dc);
      color: #fff;
    }
    .mcp-setup-title {
      font-size: 12px;
      font-weight: 600;
      color: #f1f5f9;
      margin-bottom: 3px;
    }
    .mcp-setup-desc {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 8px;
      line-height: 1.35;
    }
    .mcp-snippet-container {
      background: #111;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      overflow: hidden;
    }
    .mcp-snippet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 8px;
      background: #181818;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 9.5px;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 0.5px;
    }
    .mcp-snippet-container pre,
    .mcp-result-box pre {
      margin: 0;
      padding: 8px;
      overflow-x: auto;
      max-height: 180px;
    }
    .mcp-snippet-container code,
    .mcp-result-box code {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10.5px;
      color: #e2e8f0;
      white-space: pre;
    }
    .mcp-result-box {
      margin-top: 10px;
      background: #111;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      overflow: hidden;
    }
    .mcp-dashboard-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .mcp-period-tabs {
      display: flex;
      gap: 4px;
    }
    .mcp-period-tab {
      font-size: 10px;
      padding: 2px 7px;
      border-radius: 3px;
      border: 1px solid var(--border);
      background: #181818;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .mcp-period-tab:hover {
      color: #fff;
      border-color: #555;
    }
    .mcp-period-tab.active {
      background: var(--surface, #2d2d2d);
      border-color: var(--primary, #0265dc);
      color: #fff;
      font-weight: 600;
    }
    .mcp-kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin-bottom: 10px;
    }
    .mcp-kpi-card {
      background: #141414;
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 4px;
      padding: 6px 4px;
      text-align: center;
    }
    .mcp-kpi-val {
      font-size: 15px;
      font-weight: 700;
      color: #f1f5f9;
      line-height: 1.2;
    }
    .mcp-kpi-val.highlight-blue {
      color: #38bdf8;
    }
    .mcp-kpi-val.highlight-green {
      color: #4ade80;
    }
    .mcp-kpi-val.highlight-red {
      color: #f87171;
    }
    .mcp-kpi-lbl {
      font-size: 8.5px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.2px;
      margin-top: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mcp-quota-row {
      margin-bottom: 10px;
      padding: 8px 10px;
      background: #141414;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .mcp-quota-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }
    .mcp-quota-badge {
      font-size: 9.5px;
      font-weight: 600;
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.12);
      padding: 1px 6px;
      border-radius: 3px;
      border: 1px solid rgba(56, 189, 248, 0.25);
    }
    .mcp-quota-info {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      color: var(--ink);
      margin-bottom: 6px;
    }
    .mcp-quota-reset {
      font-size: 9.5px;
      color: var(--muted);
      margin-left: auto;
    }
    .mcp-quota-bar {
      height: 5px;
      background: #262626;
      border-radius: 3px;
      overflow: hidden;
    }
    .mcp-quota-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #38bdf8, #22c55e);
      transition: width 0.3s ease;
    }
    .mcp-quota-details-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 12px;
      margin-top: 8px;
      padding-top: 6px;
      border-top: 1px dashed rgba(255, 255, 255, 0.08);
    }
    .mcp-quota-detail-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 10.5px;
      color: var(--muted);
    }
    .mcp-quota-detail-item span:last-child {
      font-weight: 600;
      color: #f1f5f9;
    }
    .mcp-tool-breakdown {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 10px;
      max-height: 120px;
      overflow-y: auto;
    }
    .mcp-tool-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 10.5px;
      padding: 4px 6px;
      background: #141414;
      border-radius: 3px;
      border: 1px solid rgba(255, 255, 255, 0.04);
    }
    .mcp-tool-name {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10px;
      color: #cbd5e1;
    }
    .mcp-tool-stats {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
    }
    .mcp-tool-pill {
      padding: 1px 4px;
      border-radius: 2px;
      font-size: 9px;
      font-weight: 600;
    }
    .mcp-tool-pill.success {
      background: rgba(34, 197, 94, 0.15);
      color: #4ade80;
    }
    .mcp-tool-pill.fail {
      background: rgba(239, 68, 68, 0.15);
      color: #f87171;
    }
    .mcp-section-mini-title {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .mcp-recent-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 120px;
      overflow-y: auto;
    }
    .mcp-event-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10.5px;
      padding: 3px 6px;
      background: #141414;
      border-radius: 3px;
      border: 1px solid rgba(255, 255, 255, 0.04);
    }
    .mcp-event-tool {
      color: #e2e8f0;
      font-size: 10.5px;
    }
    .mcp-event-lat {
      color: #94a3b8;
      font-size: 9.5px;
      margin-left: auto;
    }
    .mcp-event-time {
      color: var(--muted);
      font-size: 9.5px;
    }

    /* ========================================================
       COMPACT OPTION DROPDOWNS & CANVA AREA MAXIMIZER
       ======================================================== */
    .option-dropdown {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
    }

    .option-dropdown.is-hidden {
      display: none !important;
    }

    .option-dropdown-trigger {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 24px;
      height: 24px;
      padding: 0 8px;
      border-radius: 4px;
      background: var(--surface-2, #1c1c21);
      border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
      color: var(--ink, #f3f3f3);
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      user-select: none;
      transition: all 0.15s ease;
    }

    .option-dropdown-trigger:hover,
    .option-dropdown.is-open > .option-dropdown-trigger {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.25);
      color: #fff;
    }

    .option-dropdown.is-open > .option-dropdown-trigger {
      border-color: var(--primary, #5e6ad2);
      box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.35);
    }

    .dropdown-chevron {
      font-size: 9px;
      opacity: 0.7;
      transition: transform 0.15s ease;
      display: inline-block;
    }

    .option-dropdown.is-open .dropdown-chevron {
      transform: rotate(180deg);
    }

    .brush-dot-glyph {
      font-size: 12px;
      display: inline-block;
    }

    .option-dropdown-panel {
      display: none;
      position: absolute;
      top: calc(100% + 5px);
      left: 0;
      min-width: 250px;
      background: #18181c;
      background: rgba(24, 24, 28, 0.98);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 6px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.5);
      padding: 10px 12px;
      z-index: 200;
      flex-direction: column;
      gap: 8px;
      animation: studio-pop-in 0.15s ease-out;
    }

    .option-dropdown.is-open > .option-dropdown-panel {
      display: flex !important;
    }

    .brush-dropdown-panel {
      width: 310px;
      max-width: 320px;
    }

    .precision-dropdown-panel {
      width: 300px;
      right: 0;
      left: auto;
    }

    .precision-dropdown-panel .option-group,
    .export-target-dropdown-panel .option-group {
      display: flex !important;
      flex-direction: column !important;
      min-width: 0 !important;
      width: 100% !important;
      gap: 6px !important;
      align-items: stretch !important;
    }

    .precision-dropdown-panel .dropdown-panel-row input[type="number"] {
      width: 54px !important;
    }

    .export-target-dropdown-panel {
      width: 270px;
      right: 0;
      left: auto;
    }

    .export-target-dropdown-panel select {
      width: 100% !important;
    }

    .quick-dropdown-panel {
      min-width: 230px;
      width: auto;
      max-width: 340px;
    }

    .dropdown-panel-title {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--muted, #8a8f98);
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      margin-bottom: 3px;
    }

    .dropdown-panel-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .dropdown-actions-row {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      margin-top: 4px;
      padding-top: 6px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .dropdown-actions-row button {
      min-height: 22px;
      padding: 2px 8px;
      font-size: 11px;
      font-weight: 600;
      border-radius: 3px;
      background: var(--surface-2, #26262c);
      border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
      color: var(--ink, #f3f3f3);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .dropdown-actions-row button:hover {
      background: var(--primary, #5e6ad2);
      color: #fff;
      border-color: var(--primary, #5e6ad2);
    }

    /* Quick Actions dropdowns */
    .quick-dropdown-trigger {
      min-height: 22px !important;
      height: 22px !important;
      font-size: 11px !important;
      padding: 0 7px !important;
      background: rgba(255, 255, 255, 0.04) !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .quick-dropdown-trigger:hover,
    .quick-dropdown.is-open > .quick-dropdown-trigger {
      background: rgba(255, 255, 255, 0.09) !important;
      border-color: rgba(255, 255, 255, 0.2) !important;
    }

    .quick-dropdown-panel .quick-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 100%;
    }

    .quick-dropdown-panel .quick-group.quick-grid-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
    }

    .quick-dropdown-panel .quick-group button {
      width: 100%;
      text-align: left;
      padding: 5px 8px;
      font-size: 11.5px;
      font-weight: 500;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--ink, #f3f3f3);
      cursor: pointer;
      transition: all 0.12s ease;
    }

    .quick-dropdown-panel .quick-group button:hover {
      background: var(--primary, #5e6ad2);
      border-color: var(--primary, #5e6ad2);
      color: #fff;
      transform: translateX(2px);
    }

    .quick-dropdown-panel .ai-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }

    .quick-dropdown-panel .ai-group select,
    .quick-dropdown-panel .ai-group input {
      width: 100%;
      box-sizing: border-box;
      min-height: 24px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 3px;
      padding: 2px 6px;
      color: #fff;
      font-size: 11px;
    }

    .quick-dropdown-panel .ai-group button {
      width: 100%;
      background: var(--primary, #5e6ad2);
      border: 1px solid var(--primary, #5e6ad2);
      color: #fff;
      font-weight: 600;
      text-align: center;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
    }

    .quick-dropdown-panel .ai-group button:hover {
      background: var(--primary-hover, #6b76e5);
    }