.morfion-container { position: relative; width: 100%; height: 100%; background: #f8f9fa; overflow: hidden; border-radius: inherit; font-family: system-ui, -apple-system, sans-serif; margin: 0; display: flex; flex-direction: column; border: none; }
.morfion-container.fullscreen { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: 100vw !important; max-height: 100dvh !important; z-index: 99999 !important; border-radius: 0 !important; aspect-ratio: auto !important; margin: 0 !important; border: none; }

/* Header Bar */
.morfion-header { display: none; height: 48px; min-height: 48px; background: #ffffff; border-bottom: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 16px; box-sizing: border-box; }
.morfion-interactive .morfion-header { display: flex; }
.morfion-header-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #374151; }
.morfion-header-title svg { color: #6b7280; }
.morfion-header-actions { display: flex; align-items: center; gap: 8px; }
.morfion-header-divider { width: 1px; height: 16px; background: #e5e7eb; margin: 0 4px; }

/* Content Area */
.morfion-content { position: relative; width: 100%; flex: 1; background: #000; overflow: hidden; }

.morfion-iframe { width: 100%; height: 100%; border: none; transition: opacity 0.3s; mix-blend-mode: normal; }

/* Loader */
.morfion-loader { position: absolute; inset: 0; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; z-index: 15; transition: opacity 0.5s ease-out; pointer-events: none; }

.morfion-spinner { width: 32px; height: 32px; border: 3px solid #f3f4f6; border-top: 3px solid #374151; border-radius: 50%; animation: morfion-spin 1s linear infinite; }
.morfion-loader-text { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #9ca3af; animation: morfion-text-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes morfion-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes morfion-text-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.morfion-loaded .morfion-loader { opacity: 0; }

.morfion-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.1); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; transition: opacity 0.3s; }
.morfion-badge { background: rgba(255,255,255,0.15); backdrop-filter: blur(12px); padding: 10px 20px; border-radius: 999px; display: flex; align-items: center; gap: 10px; color: white; font-weight: 600; font-size: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2); transition: transform 0.2s; }
.morfion-overlay:hover .morfion-badge { transform: scale(1.05); }

/* Powered By */
.morfion-powered-by { position: absolute; bottom: 8px; right: 12px; font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.5); z-index: 10; pointer-events: none; letter-spacing: 0.05em; transition: opacity 0.3s; }
.morfion-non-interactive .morfion-powered-by { opacity: 0; }

/* Header Buttons */
.morfion-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: none; border-radius: 6px; color: #4b5563; cursor: pointer; transition: background 0.2s, color 0.2s; padding: 0; }
.morfion-close:hover { background: #f3f4f6; color: #111827; }

.morfion-fullscreen-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: none; border-radius: 6px; color: #4b5563; cursor: pointer; transition: background 0.2s, color 0.2s; padding: 0; }
.morfion-fullscreen-btn:hover { background: #f3f4f6; color: #111827; }

/* Hide external links inside the iframe overlay container */
.morfion-container a { display: none !important; }

/* State modifiers */
.morfion-interactive .morfion-overlay { display: none; }
.morfion-interactive .morfion-iframe { pointer-events: auto; }
.morfion-non-interactive .morfion-iframe { pointer-events: none; opacity: 0.8; }