.drag-over {
      border-color: #3b82f6 !important;
    }
    .font-sans {
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    }
    .file-input-hidden {
      display: none;
    }
    select {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
      background-position: right 0.5rem center;
      background-repeat: no-repeat;
      background-size: 1.5em 1.5em;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    .cursor-zoom-in { cursor: zoom-in; }
    .cursor-zoom-out { cursor: zoom-out; }
    
    .history-item {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid #4b5563; /* gray-600 */
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .history-item:hover {
      background-color: #374151; /* gray-700 */
    }
    .history-item:last-child {
      border-bottom: none;
    }
    
    .btn-sendto {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.6rem;
      font-size: 0.75rem; /* 12px */
      font-weight: 500;
      border-radius: 0.375rem; /* rounded-md */
      background-color: #4b5563; /* bg-gray-600 */
      color: #d1d5db; /* text-gray-300 */
      transition: background-color 0.2s;
    }
    .btn-sendto:hover {
      background-color: #374151; /* bg-gray-700 */
    }
    .btn-sendto svg {
      width: 0.875rem; /* w-3.5 */
      height: 0.875rem; /* h-3.5 */
      margin-right: 0.25rem; /* mr-1 */
    }

    /* --- SMART STATUS BADGE STYLES --- */
    .status-badge {
      display: inline-flex;
      align-items: center;
      padding: 6px 16px; /* Pill shape padding */
      border-radius: 9999px; /* Fully rounded */
      background-color: rgba(17, 24, 39, 0.8); /* Dark bg (gray-900) */
      border: 1px solid #374151; /* gray-700 border */
      font-size: 0.875rem;
      font-weight: 600;
      font-family: monospace;
      letter-spacing: 0.05em;
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    }

    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 10px;
      transition: all 0.3s ease;
    }

    /* STATUS: OFFLINE (Initial) - Gray */
    .status-offline .status-dot {
      background-color: #9ca3af; /* gray-400 */
      box-shadow: 0 0 5px #9ca3af;
    }
    .status-offline .status-text {
      color: #9ca3af;
    }

    /* STATUS: SUCCESS (Online) - Apple Green */
    .status-success .status-dot {
      background-color: #4ade80; /* green-400 */
      box-shadow: 0 0 8px #4ade80, 0 0 15px rgba(74, 222, 128, 0.4);
    }
    .status-success .status-text {
      color: #4ade80;
    }

    /* STATUS: PROCESSING (Loading/Info) - Yellow/Amber */
    .status-processing .status-dot {
      background-color: #facc15; /* yellow-400 */
      box-shadow: 0 0 10px #facc15;
      animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    .status-processing .status-text {
      color: #facc15;
    }

    /* STATUS: ERROR (Disconnected) - Red */
    .status-error .status-dot {
      background-color: #ef4444; /* red-500 */
      box-shadow: 0 0 8px #ef4444;
    }
    .status-error {
      border-color: #7f1d1d; /* Dark red border */
    }
    .status-error .status-text {
      color: #ef4444;
    }

    @keyframes pulse-ring {
      0% { transform: scale(0.95); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.7; }
      100% { transform: scale(0.95); opacity: 1; }
    }
    /* ------------------------------------ */
    
    /* API Modal Connection Animation */
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    .spinner-sm {
        width: 1rem;
        height: 1rem;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 0.8s linear infinite;
        display: inline-block;
    }

    /* --- CANVAS MASKING STYLES --- */
    /* Fix: Ensure the canvas container fills the space of the uploader */
    .canvas-container {
        position: absolute; /* Change to absolute to overlay/replace uploader content */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
        display: flex; /* Use flex to center the canvases */
        justify-content: center;
        align-items: center;
        border-radius: 0.5rem; /* rounded-lg */
        overflow: hidden;
        border: 2px solid #374151; /* gray-700 */
    }
    /* Set canvases to be inline-block or similar so they respect their calculated size */
    #edit-canvas-base, #edit-canvas-mask {
        display: block; 
        position: absolute; /* Important for layering */
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* Ensure the mask layer is on top and interactive */
    #edit-canvas-mask {
        z-index: 10;
        cursor: crosshair;
    }
    /* ------------------------------ */