#memecraft-app-container { --mc-bg: #0b0b10; --mc-surface: #12121a; --mc-card: #1a1a24; --mc-border: #30303d; --mc-text: #f7f7fb; --mc-muted: #a7a7b5; --mc-accent: #8b5cf6; --mc-accent-soft: #2a1f45; --mc-accent-strong: #a78bfa; --mc-on-accent: #ffffff; --mc-shadow: rgba(0,0,0,0.22); --mc-hover: #242431; --mc-danger: #f87171; --mc-warning: #fbbf24; } #memecraft-app-container.mc-app-wrapper { width: min(100%, 80rem) !important; max-width: 80rem !important; margin: 0 auto !important; padding: clamp(0.5rem, 1.5%, 1rem) !important; display: flex !important; flex-direction: column !important; gap: 1rem !important; box-sizing: border-box !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 16px !important; line-height: 1.4 !important; background: transparent !important; scroll-margin-top: 2rem; isolation: isolate; container-type: inline-size; container-name: memecraft; overflow-x: clip !important; min-width: 0 !important; } #memecraft-app-container .bento-card { background-color: var(--mc-card) !important; color: var(--mc-text) !important; border: 1px solid var(--mc-border) !important; border-radius: clamp(1rem, 2.5vw, 2rem) !important; box-shadow: 0 10px 30px -12px var(--mc-shadow) !important; transition: transform 0.3s ease, border-color 0.3s ease !important; } #memecraft-app-container .bento-card:hover { border-color: var(--mc-accent) !important; } #memecraft-app-container .mc-app-stack { display: flex !important; flex-direction: column !important; gap: clamp(1rem, 2vw, 1.5rem) !important; min-width: 0 !important; } #memecraft-app-container .mc-control-deck { padding: clamp(0.75rem, 2vw, 1.5rem) !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #memecraft-app-container .mc-toolbar-grid { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: clamp(0.4rem, 1vw, 0.8rem) !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; } /* --- MEMECRAFT CSS SHIELD --- */ #memecraft-app-container button, #memecraft-app-container [role="button"], #mc_appModal button { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; outline: none !important; text-shadow: none !important; text-indent: 0 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; line-height: 1.2 !important; } #memecraft-app-container .bento-btn { background-color: var(--mc-bg) !important; background-image: none !important; border: 1px solid var(--mc-border) !important; border-radius: clamp(0.65rem, 1.6vw, 1.1rem) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; padding: clamp(0.45rem, 1vw, 0.75rem) !important; margin: 0 !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; color: var(--mc-muted) !important; box-shadow: none !important; width: 100% !important; min-width: 0 !important; min-height: clamp(3.5rem, 5.5vw, 4.75rem) !important; height: auto !important; position: relative !important; overflow: visible !important; } #memecraft-app-container .bento-btn[data-tooltip]::after { content: attr(data-tooltip); position: absolute !important; left: 50% !important; top: calc(100% + 8px) !important; transform: translate(-50%, -4px) !important; z-index: 120 !important; width: max-content !important; max-width: min(220px, calc(100vw - 24px)) !important; padding: 0.45rem 0.65rem !important; border-radius: 0.55rem !important; background: var(--mc-text) !important; color: var(--mc-bg) !important; border: 1px solid var(--mc-border) !important; box-shadow: 0 10px 25px -10px var(--mc-shadow) !important; font-family: 'Inter', sans-serif !important; font-size: 0.72rem !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; text-align: center !important; white-space: normal !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease !important; } #memecraft-app-container .bento-btn[data-tooltip]:hover::after, #memecraft-app-container .bento-btn[data-tooltip]:focus-visible::after, #memecraft-app-container .bento-btn[data-tooltip]:focus-within::after { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) !important; } #memecraft-app-container .bento-btn:disabled { opacity: 0.48 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } #memecraft-app-container .bento-btn i { font-size: clamp(1.05rem, 2vw, 1.5rem) !important; color: var(--mc-text) !important; transition: 0.2s !important; margin: 0 !important; } #memecraft-app-container .bento-btn:hover { border-color: var(--mc-accent) !important; color: var(--mc-accent) !important; transform: translateY(-2px) !important; box-shadow: 0 10px 20px -10px var(--mc-shadow) !important; background-color: var(--mc-bg) !important;} #memecraft-app-container .bento-btn:hover i { color: var(--mc-accent) !important; transform: scale(1.1) !important; } #memecraft-app-container .bento-btn.active { background-color: var(--mc-accent-soft) !important; border-color: var(--mc-accent) !important; color: var(--mc-accent) !important; } #memecraft-app-container .bento-btn.active i { color: var(--mc-accent) !important; } #memecraft-app-container .mc-generator-nav { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; flex-wrap: wrap !important; margin-top: clamp(0.75rem, 2vw, 1rem) !important; padding-top: clamp(0.75rem, 2vw, 1rem) !important; border-top: 1px solid var(--mc-border) !important; } #memecraft-app-container .mc-generator-nav-copy { color: var(--mc-muted) !important; font-size: clamp(0.78rem, 1.5vw, 0.9rem) !important; font-weight: 600 !important; margin: 0 !important; flex: 1 1 220px !important; } #memecraft-app-container a.mc-gallery-nav-link { -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.55rem !important; min-height: 42px !important; min-width: min(100%, 150px) !important; padding: 0.7rem 1rem !important; margin: 0 !important; border: 1px solid var(--mc-accent) !important; border-radius: 999px !important; background: var(--mc-accent-soft) !important; color: var(--mc-accent) !important; font-family: inherit !important; font-size: clamp(0.78rem, 1.5vw, 0.9rem) !important; font-weight: 800 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; text-decoration: none !important; box-shadow: none !important; white-space: nowrap !important; transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease !important; } #memecraft-app-container a.mc-gallery-nav-link:hover, #memecraft-app-container a.mc-gallery-nav-link:focus-visible { background: var(--mc-accent) !important; color: var(--mc-on-accent) !important; transform: translateY(-1px) !important; outline: 2px solid var(--mc-accent) !important; outline-offset: 2px !important; } .mc-props-panel { display: none; flex-direction: column; gap: 1.5rem; border-top: 1px solid var(--mc-border); padding-top: 1.5rem; margin-top: 1.5rem; align-items: stretch; } @media (min-width: 1024px) { .mc-props-panel { flex-direction: row; flex-wrap: wrap; } } .mc-props-panel.is-active { display: flex; } #memecraft-app-container .mc-props-box { background: var(--mc-surface) !important; border: 1px solid var(--mc-border) !important; border-radius: 1.25rem !important; padding: clamp(0.65rem, 2vw, 1rem) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: clamp(0.6rem, 2vw, 1rem) !important; flex-wrap: wrap !important; min-width: 0 !important; max-width: 100% !important; } #memecraft-app-container .mc-props-box.col { flex-direction: column !important; min-width: min(100%, 200px) !important; } #memecraft-app-container .mc-prop-item { display: flex !important; align-items: center !important; gap: 0.75rem !important; min-width: 0 !important; max-width: 100% !important; } .mc-divider { width: 1px; height: 2rem; background: var(--mc-border); display: none; } @media (min-width: 640px) { .mc-divider { display: block; } } .mc-tool-label { font-size: 0.85rem !important; font-weight: 800 !important; color: var(--mc-muted) !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin: 0 !important; display: flex; align-items: center; gap: 0.5rem;} .mc-flex-1 { flex: 1; } .mc-x-brand { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 1.05em !important; font-weight: 900 !important; line-height: 1 !important; color: currentColor !important; text-decoration: none !important; } .mc-tool-btn { background-color: var(--mc-bg) !important; border: 1px solid var(--mc-border) !important; padding: 0 !important; margin: 0 !important; border-radius: 0.75rem !important; color: var(--mc-muted) !important; cursor: pointer !important; transition: color 0.2s !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; } .mc-tool-btn i { margin: 0 !important; font-size: 1.2rem !important; } .mc-tool-btn:hover { color: var(--mc-accent) !important; background-color: var(--mc-hover) !important; } .mc-tool-btn.mc-danger:hover { color: var(--mc-danger) !important; } .mc-tool-btn.mc-warning:hover { color: var(--mc-accent) !important; } .mc-font-select { background: var(--mc-card) !important; color: var(--mc-text) !important; border: 1px solid var(--mc-border) !important; border-radius: 0.75rem !important; padding: 8px 12px !important; font-family: 'Inter', sans-serif !important; font-size: 0.9rem !important; font-weight: 600 !important; cursor: pointer !important; outline: none !important; } .mc-font-select:hover, .mc-font-select:focus { border-color: var(--mc-accent) !important; } #memecraft-app-container .mc-workspace { padding: clamp(0.75rem, 2vw, 1.5rem) !important; min-height: clamp(340px, 58vw, 620px) !important; display: flex !important; flex-direction: column !important; position: relative !important; min-width: 0 !important; } #memecraft-app-container .mc-workspace-header { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 0.75rem !important; flex-wrap: wrap !important; margin-bottom: clamp(0.75rem, 2vw, 1.5rem) !important; } .mc-workspace-actions { display: flex; gap: 0.75rem; } .mc-canvas-bg { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--mc-bg); border-radius: 1.5rem; padding: 0.5rem; position: relative; overflow: hidden; border: 1px solid var(--mc-border); } @media (min-width: 640px) { .mc-canvas-bg { padding: 1rem; } } .mc-pattern-overlay { position: absolute; inset: 0; opacity: 0.03; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; z-index: 0; } #memecraft-app-container .canvas-container { margin: 0 auto; touch-action: none !important; } #mc-canvas-wrapper { border-radius: 1rem; overflow: hidden; box-shadow: 0 0 0 1px var(--mc-border); touch-action: none !important; } #memecraft-app-container .mc-bottom-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; gap: clamp(0.75rem, 2vw, 1.5rem) !important; } #memecraft-app-container .mc-action-card { padding: clamp(0.9rem, 2vw, 1.5rem) !important; min-height: 76px !important; display: flex !important; justify-content: center !important; align-items: center !important; cursor: pointer !important; transition: background-color 0.2s, transform 0.2s !important; } #memecraft-app-container .mc-action-card:hover { background-color: var(--mc-hover) !important; } #memecraft-app-container .mc-action-card.bg-dark { background-color: var(--mc-surface) !important; } #memecraft-app-container .mc-action-card.bg-dark:hover { background-color: var(--mc-hover) !important; } #memecraft-app-container .mc-action-card.bg-green { background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-strong)) !important; color: var(--mc-on-accent) !important; box-shadow: 0 10px 18px -8px var(--mc-shadow) !important; border: 1px solid transparent !important; } #memecraft-app-container .mc-action-card.bg-green:hover { filter: brightness(1.04) !important; transform: translateY(-1px) !important; } .mc-bottom-action { background: transparent !important; background-image: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; font-family: 'Inter', sans-serif !important; font-size: 1.05rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; display: flex !important; align-items: center !important; gap: 0.75rem !important; cursor: pointer !important; transition: transform 0.2s !important; color: inherit !important; } .mc-action-card:hover .mc-bottom-action { transform: scale(1.05); } #memecraft-app-container input[type="color"] { -webkit-appearance: none; appearance: none; border: none; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; padding: 0; background: transparent; } #memecraft-app-container input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } #memecraft-app-container input[type="color"]::-webkit-color-swatch { border: 2px solid var(--mc-border); border-radius: 10px; } #memecraft-app-container input[type="range"] { accent-color: var(--mc-accent); cursor: pointer; height: 6px; border-radius: 3px; background: var(--mc-border); outline: none; } .mc-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(4px); z-index: 99999; display: none; justify-content: center; align-items: center; padding: 1rem; opacity: 0; transition: opacity 0.3s; } .mc-modal-overlay.is-active { display: flex; opacity: 1; } .mc-modal-content-wrap { width: 100%; max-width: 56rem; max-height: 85vh; display: flex; flex-direction: column; background: var(--mc-bg); transform: scale(0.95); transition: transform 0.3s; border: 1px solid var(--mc-border); border-radius: 2rem; } .mc-modal-overlay.is-active .mc-modal-content-wrap { transform: scale(1); } .mc-modal-header { padding: 1.5rem; border-bottom: 1px solid var(--mc-border); display: flex; justify-content: space-between; align-items: center; background: var(--mc-card); border-top-left-radius: 2rem; border-top-right-radius: 2rem; } .mc-modal-title { font-family: 'Anton', sans-serif; font-size: 1.875rem; letter-spacing: 0.025em; color: white; margin: 0; } #mc_appModalContentInner button#mc_modalClose { background-color: var(--mc-border) !important; border: none !important; color: var(--mc-muted) !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; cursor: pointer !important; border-radius: 9999px !important; width: 3rem !important; height: 3rem !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.5rem !important; transition: 0.2s !important; } #mc_appModalContentInner button#mc_modalClose:hover { background-color: var(--mc-danger) !important; color: #ffffff !important; } #mc_appModalContentInner button[data-mc-action="add-shape"] { background-color: var(--mc-card) !important; border: 1px solid var(--mc-border) !important; border-radius: 1rem !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; transition: border-color 0.2s !important; cursor: pointer !important; } #mc_appModalContentInner button[data-mc-action="add-shape"]:hover { border-color: var(--mc-accent) !important; } #mc_appModalContentInner button[data-mc-action="add-sticker"] { background-color: transparent !important; border: 1px solid transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 1rem !important; transition: all 0.2s !important; cursor: pointer !important; } #mc_appModalContentInner button[data-mc-action="add-sticker"]:hover { background-color: var(--mc-border) !important; border-color: var(--mc-border) !important; transform: scale(1.1) !important; } /* Tab Styles */ .mc-tabs { display: flex; width: 100%; gap: 1rem; border-bottom: 1px solid var(--mc-border); padding-bottom: 1rem; margin-bottom: 1rem; } .mc-tab-btn { background: transparent !important; border: none !important; color: var(--mc-muted) !important; font-family: 'Inter', sans-serif !important; font-weight: 800 !important; font-size: 1rem !important; text-transform: uppercase !important; letter-spacing: 1px !important; padding: 0.5rem 1rem !important; cursor: pointer !important; border-bottom: 2px solid transparent !important; transition: all 0.2s !important; border-radius: 0 !important; width: auto !important; height: auto !important; box-shadow: none !important; } .mc-tab-btn.active { color: var(--mc-accent) !important; border-bottom-color: var(--mc-accent) !important; background: transparent !important; } .mc-tab-btn:hover:not(.active) { color: var(--mc-text) !important; border-bottom-color: transparent !important; transform: none !important; } .mc-tab-content { display: none; width: 100%; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: flex-start; } .mc-tab-content.active { display: flex; } #memecraft-app-container, #memecraft-app-container *, .mc-gallery-wrapper, .mc-gallery-wrapper * { box-sizing: border-box; } #memecraft-app-container, .mc-gallery-wrapper { color: var(--mc-text); } #memecraft-app-container button, #memecraft-app-container input, #memecraft-app-container select, #memecraft-app-container textarea, .mc-gallery-wrapper button, .mc-gallery-wrapper input, .mc-gallery-wrapper select, .mc-gallery-wrapper textarea { font-family: inherit !important; line-height: 1.4; } #memecraft-app-container a, .mc-gallery-wrapper a { text-decoration: none; } /* Final isolation layer: keep host themes from resizing or recoloring MemeCraft controls. */ #memecraft-app-container :where(button, input, select, textarea, label, a) { max-width: 100%; } #memecraft-app-container input:not([type="color"]):not([type="range"]):not([type="file"]), #memecraft-app-container select, #memecraft-app-container textarea { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; border-color: var(--mc-border) !important; color: var(--mc-text) !important; background-color: var(--mc-surface) !important; box-shadow: none !important; text-shadow: none !important; min-height: 40px !important; } #memecraft-app-container input::placeholder, #memecraft-app-container textarea::placeholder { color: var(--mc-muted) !important; opacity: 0.8 !important; } #memecraft-app-container input:focus, #memecraft-app-container select:focus, #memecraft-app-container textarea:focus, #memecraft-app-container button:focus-visible { outline: 2px solid var(--mc-accent) !important; outline-offset: 2px !important; } #memecraft-app-container #mc_meme_title { background: transparent !important; border: 0 !important; min-width: 0 !important; font-size: clamp(1rem, 2.5vw, 1.2rem) !important; } #memecraft-app-container .mc-bottom-action { color: inherit !important; min-width: 0 !important; text-align: center !important; justify-content: center !important; white-space: normal !important; } #memecraft-app-container .bg-green .mc-bottom-action, #memecraft-app-container .bg-green .mc-bottom-action i { color: var(--mc-on-accent) !important; } #memecraft-app-container .mc-pattern-overlay { background-image: radial-gradient(var(--mc-muted) 1px, transparent 1px) !important; } #memecraft-app-container .mc-modal-title { color: var(--mc-text) !important; font-size: clamp(1.35rem, 4vw, 1.875rem) !important; } @media (max-width: 480px) { #memecraft-app-container .mc-generator-nav { align-items: stretch !important; } #memecraft-app-container a.mc-gallery-nav-link { width: 100% !important; } #memecraft-app-container .mc-workspace-actions { margin-left: auto !important; } #memecraft-app-container .mc-props-panel { gap: 0.75rem !important; } #memecraft-app-container .mc-props-box { width: 100% !important; } } /* True host-width responsive layer. These rules are driven by ResizeObserver classes, so they work even when CSS container queries are unavailable or a theme/widget wrapper changes size without changing the browser viewport. */ #memecraft-app-container.mc-app-wrapper { inline-size: 100% !important; width: 100% !important; max-inline-size: 100% !important; max-width: 100% !important; min-inline-size: 0 !important; min-width: 0 !important; } #memecraft-app-container .mc-props-title { min-width: 0 !important; flex: 1 1 100% !important; } #memecraft-app-container .mc-title-card { min-width: 0 !important; max-width: 100% !important; } #memecraft-app-container #mc-canvas-wrapper, #memecraft-app-container .canvas-container, #memecraft-app-container .lower-canvas, #memecraft-app-container .upper-canvas { box-sizing: border-box !important; } #memecraft-app-container .canvas-container { max-inline-size: 100% !important; max-width: 100% !important; } #memecraft-app-container.mc-container-compact .mc-app-stack { gap: 0.75rem !important; } #memecraft-app-container.mc-container-compact .mc-control-deck, #memecraft-app-container.mc-container-compact .mc-workspace { padding: 0.75rem !important; border-radius: 1rem !important; } #memecraft-app-container.mc-container-compact .mc-props-panel { flex-direction: column !important; gap: 0.75rem !important; padding-top: 0.75rem !important; margin-top: 0.75rem !important; } #memecraft-app-container.mc-container-compact .mc-props-box { width: 100% !important; min-width: 0 !important; justify-content: flex-start !important; padding: 0.7rem !important; gap: 0.7rem !important; } #memecraft-app-container.mc-container-compact .mc-props-box.col { min-width: 0 !important; } #memecraft-app-container.mc-container-compact .mc-divider { display: none !important; } #memecraft-app-container.mc-container-compact .mc-bottom-grid { grid-template-columns: 1fr !important; gap: 0.65rem !important; } #memecraft-app-container.mc-container-compact .mc-action-card { min-height: 58px !important; padding: 0.8rem !important; border-radius: 1rem !important; } #memecraft-app-container.mc-container-compact .mc-bottom-action { font-size: 0.9rem !important; letter-spacing: 0.04em !important; } #memecraft-app-container.mc-container-compact .mc-generator-nav { align-items: stretch !important; } #memecraft-app-container.mc-container-compact .mc-generator-nav-copy { flex-basis: 100% !important; font-size: 0.82rem !important; } #memecraft-app-container.mc-container-compact a.mc-gallery-nav-link { width: 100% !important; min-width: 0 !important; } #memecraft-app-container.mc-container-compact .mc-canvas-bg { padding: 0.4rem !important; border-radius: 0.9rem !important; } #memecraft-app-container.mc-container-compact .mc-title-card { padding: 0.8rem !important; gap: 0.6rem !important; } #memecraft-app-container.mc-container-narrow.mc-app-wrapper { padding: 0 !important; } #memecraft-app-container.mc-container-narrow .mc-toolbar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 0.3rem !important; } #memecraft-app-container.mc-container-narrow .bento-btn { min-height: 50px !important; padding: 0.4rem 0.12rem !important; gap: 0.2rem !important; border-radius: 0.65rem !important; font-size: 0.58rem !important; letter-spacing: 0 !important; line-height: 1.05 !important; } #memecraft-app-container.mc-container-narrow .bento-btn > span { white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; } #memecraft-app-container.mc-container-narrow .bento-btn i { font-size: 0.95rem !important; } #memecraft-app-container.mc-container-narrow .mc-prop-item { width: 100% !important; min-width: 0 !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 0.4rem !important; } #memecraft-app-container.mc-container-narrow .mc-prop-item > div { max-width: 100% !important; flex-wrap: wrap !important; } #memecraft-app-container.mc-container-narrow .mc-prop-item input[type="range"] { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; } #memecraft-app-container.mc-container-narrow .mc-font-select { width: 100% !important; min-width: 0 !important; } #memecraft-app-container.mc-container-narrow .mc-workspace-header { gap: 0.4rem !important; } #memecraft-app-container.mc-container-narrow .mc-workspace-actions { margin-left: auto !important; gap: 0.35rem !important; } #memecraft-app-container.mc-container-narrow .mc-tool-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; min-height: 36px !important; max-height: 36px !important; flex-basis: 36px !important; } #memecraft-app-container.mc-container-narrow #mc_meme_title { width: 100% !important; min-width: 0 !important; font-size: 0.95rem !important; } #memecraft-app-container.mc-container-narrow .mc-title-card > i { font-size: 1.1rem !important; } #memecraft-app-container.mc-container-narrow .mc-modal-overlay { padding: 0.35rem !important; } #memecraft-app-container.mc-container-narrow .mc-modal-header { padding: 0.75rem !important; } #memecraft-app-container.mc-container-sidebar .mc-toolbar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 0.2rem !important; } #memecraft-app-container.mc-container-sidebar .bento-btn { min-height: 44px !important; padding: 0.35rem 0.08rem !important; font-size: 0.5rem !important; border-radius: 0.55rem !important; } #memecraft-app-container.mc-container-sidebar .mc-tool-label { font-size: 0.72rem !important; letter-spacing: 0.04em !important; } #memecraft-app-container.mc-container-sidebar .mc-generator-nav-copy { display: none !important; } #memecraft-app-container.mc-container-sidebar .mc-workspace { padding: 0.5rem !important; } #memecraft-app-container.mc-container-sidebar .mc-canvas-bg { padding: 0.25rem !important; } #memecraft-app-container.mc-container-micro .mc-toolbar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 2px !important; } #memecraft-app-container.mc-container-micro .bento-btn { min-height: 36px !important; padding: 0.25rem 0 !important; gap: 0 !important; border-radius: 0.45rem !important; } #memecraft-app-container.mc-container-micro .bento-btn > span { display: none !important; } #memecraft-app-container.mc-container-micro .bento-btn i { font-size: 0.82rem !important; } #memecraft-app-container.mc-container-micro .mc-props-box { padding: 0.5rem !important; } /* Container-responsive layout: reacts to the width MemeCraft actually receives, so a desktop sidebar behaves like a narrow layout instead of a desktop layout. */ #memecraft-app-container .mc-app-stack, #memecraft-app-container .mc-control-deck, #memecraft-app-container .mc-workspace, #memecraft-app-container .mc-canvas-bg, #memecraft-app-container .mc-bottom-grid, #memecraft-app-container .mc-props-panel { min-width: 0 !important; max-width: 100% !important; } #memecraft-app-container .mc-toolbar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: clamp(0.2rem, 0.8vw, 0.65rem) !important; } #memecraft-app-container .bento-btn { min-inline-size: 0 !important; max-inline-size: none !important; overflow: visible !important; } #memecraft-app-container .bento-btn > span { max-width: 100% !important; overflow-wrap: anywhere !important; text-align: center !important; } #memecraft-app-container .mc-tool-btn { min-width: 40px !important; max-width: 40px !important; min-height: 40px !important; max-height: 40px !important; flex: 0 0 40px !important; } #memecraft-app-container .mc-bottom-action { width: auto !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; } #memecraft-app-container button::before, #memecraft-app-container button::after { box-shadow: none !important; } #memecraft-app-container .mc-tabs { flex-wrap: wrap !important; min-width: 0 !important; } #memecraft-app-container .mc-tab-btn { flex: 1 1 auto !important; min-width: 0 !important; } #memecraft-app-container .mc-workspace { min-height: 0 !important; } #memecraft-app-container .mc-canvas-bg { min-width: 0 !important; min-height: 0 !important; width: 100% !important; } #memecraft-app-container .canvas-container, #memecraft-app-container #mc-canvas-wrapper { max-width: 100% !important; } #memecraft-app-container input[type="range"] { max-width: 100% !important; } #memecraft-app-container.mc-container-narrow.mc-app-wrapper { padding: 0.25rem !important; } @container memecraft (max-width: 700px) { #memecraft-app-container .mc-app-stack { gap: 0.75rem !important; } #memecraft-app-container .mc-control-deck, #memecraft-app-container .mc-workspace { padding: 0.75rem !important; border-radius: 1rem !important; } #memecraft-app-container .mc-props-panel { flex-direction: column !important; gap: 0.75rem !important; padding-top: 0.75rem !important; margin-top: 0.75rem !important; } #memecraft-app-container .mc-props-box { width: 100% !important; justify-content: flex-start !important; padding: 0.7rem !important; gap: 0.7rem !important; } #memecraft-app-container .mc-props-box.col { min-width: 0 !important; } #memecraft-app-container .mc-divider { display: none !important; } #memecraft-app-container .mc-bottom-grid { grid-template-columns: 1fr !important; gap: 0.65rem !important; } #memecraft-app-container .mc-action-card { min-height: 58px !important; padding: 0.8rem !important; border-radius: 1rem !important; } #memecraft-app-container .mc-bottom-action { font-size: 0.9rem !important; letter-spacing: 0.04em !important; } #memecraft-app-container .mc-generator-nav { align-items: stretch !important; } #memecraft-app-container .mc-generator-nav-copy { flex-basis: 100% !important; font-size: 0.82rem !important; } #memecraft-app-container a.mc-gallery-nav-link { width: 100% !important; min-width: 0 !important; } #memecraft-app-container .mc-workspace-header { margin-bottom: 0.75rem !important; } #memecraft-app-container .mc-canvas-bg { padding: 0.5rem !important; border-radius: 0.9rem !important; } } @container memecraft (max-width: 480px) { #memecraft-app-container.mc-app-wrapper { padding: 0.25rem !important; } #memecraft-app-container .mc-toolbar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 0.2rem !important; } #memecraft-app-container .bento-btn { min-height: 48px !important; padding: 0.35rem 0.1rem !important; gap: 0.18rem !important; border-radius: 0.6rem !important; font-size: 0.56rem !important; letter-spacing: 0 !important; line-height: 1.05 !important; } #memecraft-app-container .bento-btn i { font-size: 0.95rem !important; } #memecraft-app-container .mc-prop-item { width: 100% !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 0.45rem !important; } #memecraft-app-container .mc-prop-item input[type="range"] { width: 100% !important; flex: 1 1 100% !important; } #memecraft-app-container .mc-font-select { width: 100% !important; min-width: 0 !important; } #memecraft-app-container .mc-workspace-actions { margin-left: auto !important; gap: 0.45rem !important; } #memecraft-app-container .mc-tool-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important; min-height: 38px !important; max-height: 38px !important; flex-basis: 38px !important; } #memecraft-app-container #mc_meme_title { width: 100% !important; font-size: 1rem !important; } #memecraft-app-container .mc-modal-overlay { padding: 0.4rem !important; } #memecraft-app-container .mc-modal-header { padding: 0.85rem !important; } } @container memecraft (max-width: 340px) { #memecraft-app-container .mc-toolbar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 2px !important; } #memecraft-app-container .bento-btn { min-height: 38px !important; padding: 0.25rem 0 !important; gap: 0 !important; border-radius: 0.45rem !important; } #memecraft-app-container .bento-btn > span { display: none !important; } #memecraft-app-container .bento-btn i { font-size: 0.86rem !important; } } @container memecraft (max-width: 280px) { #memecraft-app-container .mc-toolbar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 2px !important; } #memecraft-app-container .bento-btn { min-height: 34px !important; padding: 0.2rem 0 !important; gap: 0 !important; border-radius: 0.4rem !important; } #memecraft-app-container .bento-btn > span { display: none !important; } #memecraft-app-container .bento-btn i { font-size: 0.8rem !important; } #memecraft-app-container .mc-generator-nav-copy { display: none !important; } } /* Palette values are rendered server-side; no first-paint visibility gate is needed. */ /* MemeCraft 10.5.3: full-width Chaos Lab with larger, readable controls. */ #memecraft-app-container #mc-chaos-bar.mc-chaos-bar { all: initial !important; isolation: isolate !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin: 1rem 0 0 !important; padding: 1rem 1.25rem 1.15rem !important; border: 1px solid var(--mc-border) !important; border-radius: 1rem !important; background: var(--mc-card) !important; box-shadow: 0 8px 24px -22px rgba(0,0,0,.7) !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; gap: .85rem !important; font-family: 'Inter', sans-serif !important; color: var(--mc-text) !important; text-align: center !important; } #memecraft-app-container #mc-chaos-bar.mc-chaos-bar *, #memecraft-app-container #mc-chaos-bar.mc-chaos-bar *::before, #memecraft-app-container #mc-chaos-bar.mc-chaos-bar *::after { box-sizing:border-box !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-copy { all: initial !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:.7rem !important; width:100% !important; min-width:0 !important; font-family:'Inter',sans-serif !important; color:var(--mc-text) !important; text-align:center !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-kicker { all:initial !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:.4rem !important; margin:0 !important; padding:.42rem .72rem !important; border:1px solid var(--mc-border) !important; border-radius:999px !important; background:var(--mc-bg) !important; color:var(--mc-muted) !important; font-family:'Inter',sans-serif !important; font-size:.78rem !important; line-height:1 !important; font-weight:900 !important; letter-spacing:.08em !important; text-transform:uppercase !important; white-space:nowrap !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-kicker i { color:#f97316 !important; font-size:.92rem !important; line-height:1 !important; } #memecraft-app-container #mc-chaos-status { all:initial !important; display:inline-block !important; min-width:0 !important; max-width:100% !important; margin:0 !important; color:var(--mc-text) !important; font-family:'Inter',sans-serif !important; font-size:1.08rem !important; line-height:1.25 !important; font-weight:900 !important; text-align:center !important; white-space:normal !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-actions { all:initial !important; display:grid !important; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) !important; align-items:stretch !important; justify-content:stretch !important; gap:.75rem !important; width:100% !important; margin:0 !important; padding:0 !important; font-family:'Inter',sans-serif !important; text-align:center !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_make_worse.mc-chaos-primary, html body #memecraft-app-container #mc-chaos-bar button#mc_btn_undo_chaos.mc-chaos-secondary, html body #memecraft-app-container #mc-chaos-bar button#mc_btn_restore_dignity.mc-chaos-secondary { all: unset !important; box-sizing: border-box !important; position: relative !important; float: none !important; clear: none !important; overflow: hidden !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 56px !important; min-height: 56px !important; margin: 0 !important; padding: 0 1.2rem !important; border: 1px solid var(--mc-border) !important; border-radius: .9rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .55rem !important; cursor: pointer !important; font-family: 'Inter', sans-serif !important; font-size: .98rem !important; line-height: 1.1 !important; font-weight: 900 !important; text-transform: none !important; letter-spacing: .01em !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; appearance: none !important; -webkit-appearance: none !important; background-image: none !important; text-shadow: none !important; outline: none !important; transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_make_worse.mc-chaos-primary { background: var(--mc-accent) !important; color: var(--mc-accent-text) !important; border-color: var(--mc-accent) !important; box-shadow: 0 10px 22px -15px var(--mc-accent) !important; font-size: 1.04rem !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_make_worse.mc-chaos-primary i { color:#f97316 !important; font-size:1.05rem !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_undo_chaos.mc-chaos-secondary, html body #memecraft-app-container #mc-chaos-bar button#mc_btn_restore_dignity.mc-chaos-secondary { background: var(--mc-bg) !important; color: var(--mc-text) !important; border-color: var(--mc-border) !important; box-shadow: none !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_make_worse.mc-chaos-primary:hover:not(:disabled) { transform: translateY(-2px) !important; filter: brightness(1.08) !important; box-shadow: 0 13px 26px -16px var(--mc-accent) !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_undo_chaos.mc-chaos-secondary:hover:not(:disabled), html body #memecraft-app-container #mc-chaos-bar button#mc_btn_restore_dignity.mc-chaos-secondary:hover:not(:disabled) { color: var(--mc-accent) !important; border-color: var(--mc-accent) !important; background: var(--mc-accent-soft) !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_make_worse:disabled, html body #memecraft-app-container #mc-chaos-bar button#mc_btn_undo_chaos:disabled, html body #memecraft-app-container #mc-chaos-bar button#mc_btn_restore_dignity:disabled { opacity: .42 !important; cursor: not-allowed !important; transform: none !important; filter: none !important; box-shadow: none !important; } #memecraft-app-container #mc-chaos-bar[data-mc-chaos-level="5"] { border-color:#ef4444 !important; box-shadow:0 0 0 1px rgba(239,68,68,.13),0 10px 26px -22px #ef4444 !important; } @media (max-width:700px) { #memecraft-app-container #mc-chaos-bar.mc-chaos-bar { padding:.9rem !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-copy { flex-wrap:wrap !important; gap:.5rem !important; } #memecraft-app-container #mc-chaos-status { width:100% !important; font-size:1rem !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-actions { grid-template-columns:1fr 1fr !important; gap:.55rem !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_make_worse { grid-column:1 / -1 !important; } } @media (max-width:430px) { #memecraft-app-container #mc-chaos-bar .mc-chaos-actions { grid-template-columns:1fr !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_make_worse, html body #memecraft-app-container #mc-chaos-bar button#mc_btn_undo_chaos, html body #memecraft-app-container #mc-chaos-bar button#mc_btn_restore_dignity { grid-column:auto !important; height:52px !important; min-height:52px !important; font-size:.92rem !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-kicker { font-size:.72rem !important; } #memecraft-app-container #mc-chaos-status { font-size:.94rem !important; } } /* MemeCraft inline canvas text editor is anchored inside the canvas wrapper. */ textarea.mc-canvas-text-editor { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; z-index: 2147483000 !important; margin: 0 !important; box-sizing: border-box !important; resize: none !important; overflow: hidden !important; pointer-events: auto !important; text-indent: 0 !important; text-shadow: none !important; text-transform: none !important; -webkit-appearance: none !important; appearance: none !important; } /* 11.0.1 modal and tab fixes */ #mc_modalContent { overflow-y: auto; overflow-x: hidden; min-height: 0; } #mc_appModalContentInner { overflow: hidden; } #memecraft-app-container .mc-tab-content { width: 100% !important; } #memecraft-app-container .mc-tab-content.active { display: block !important; } /* 11.0.2 shape picker + text stroke state */ #memecraft-app-container #mc_toggleStroke.is-active { color: var(--mc-accent) !important; border-color: var(--mc-accent) !important; background: var(--mc-accent-soft) !important; } #memecraft-app-container .mc-shape-picker { width: 100% !important; padding: 1rem !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important; gap: .75rem !important; } html body #memecraft-app-container #mc_appModal .mc-shape-choice { appearance: none !important; -webkit-appearance: none !important; width: 100% !important; aspect-ratio: 1 / 1 !important; min-width: 0 !important; min-height: 76px !important; padding: .9rem !important; margin: 0 !important; border: 1px solid var(--mc-border) !important; border-radius: 1rem !important; background: var(--mc-card) !important; color: var(--mc-text) !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: transform .15s ease, border-color .15s ease, background .15s ease !important; } html body #memecraft-app-container #mc_appModal .mc-shape-choice:hover { transform: translateY(-2px) !important; border-color: var(--mc-accent) !important; background: var(--mc-hover) !important; } #memecraft-app-container .mc-shape-choice svg { width: 54px !important; height: 54px !important; display: block !important; overflow: visible !important; } @media (max-width: 560px) { #memecraft-app-container .mc-shape-picker { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .55rem !important; padding: .75rem !important; } html body #memecraft-app-container #mc_appModal .mc-shape-choice { min-height: 64px !important; padding: .65rem !important; } #memecraft-app-container .mc-shape-choice svg { width: 44px !important; height: 44px !important; } } /* 11.0.4 compact text formatting */ #memecraft-app-container .mc-text-format-group { display:flex !important; align-items:center !important; gap:.35rem !important; margin-left:.35rem !important; padding-left:.55rem !important; border-left:1px solid var(--mc-border) !important; } #memecraft-app-container .mc-format-btn { width:36px !important; min-width:36px !important; height:36px !important; min-height:36px !important; padding:0 !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:.65rem !important; border:1px solid var(--mc-border) !important; background:var(--mc-card) !important; color:var(--mc-text) !important; font-family:Inter,sans-serif !important; font-size:.85rem !important; font-weight:800 !important; line-height:1 !important; box-shadow:none !important; cursor:pointer !important; } #memecraft-app-container .mc-format-btn:hover, #memecraft-app-container .mc-format-btn.is-active { border-color:var(--mc-accent) !important; color:var(--mc-accent) !important; background:var(--mc-hover) !important; transform:none !important; } @media (max-width:640px) { #memecraft-app-container .mc-text-format-group { width:100% !important; margin-left:0 !important; padding-left:0 !important; padding-top:.45rem !important; border-left:0 !important; border-top:1px solid var(--mc-border) !important; justify-content:flex-start !important; } } /* MemeCraft 11.1.0 - full-screen mobile app mode */ .mc-mobile-appbar { display:none; } html.mc-mobile-app-open, body.mc-mobile-app-open { overflow:hidden !important; overscroll-behavior:none !important; } @media (max-width: 782px) { #memecraft-app-container.mc-mobile-app-mode { position: fixed !important; inset: 0 !important; z-index: 2147482000 !important; width: 100vw !important; max-width: none !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; margin: 0 !important; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important; border: 0 !important; border-radius: 0 !important; background: var(--mc-bg) !important; box-shadow: none !important; container-type: normal !important; } #memecraft-app-container.mc-mobile-app-mode .mc-mobile-appbar { position: sticky !important; top: 0 !important; z-index: 2147482500 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: calc(58px + env(safe-area-inset-top)) !important; padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important; background: color-mix(in srgb, var(--mc-card) 94%, transparent) !important; border-bottom: 1px solid var(--mc-border) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } #memecraft-app-container.mc-mobile-app-mode .mc-mobile-appbar-brand { display:flex !important; align-items:center !important; gap:10px !important; color:var(--mc-text) !important; font-family:'Inter',sans-serif !important; font-size:1rem !important; letter-spacing:.01em !important; } #memecraft-app-container.mc-mobile-app-mode .mc-mobile-appbar-logo { width:34px !important; height:34px !important; border-radius:10px !important; display:grid !important; place-items:center !important; background:var(--mc-accent) !important; color:var(--mc-on-accent) !important; font-family:'Anton',sans-serif !important; font-size:.95rem !important; line-height:1 !important; } html body #memecraft-app-container.mc-mobile-app-mode button.mc-mobile-appbar-close { width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; border-radius:12px !important; border:1px solid var(--mc-border) !important; background:var(--mc-surface) !important; color:var(--mc-text) !important; padding:0 !important; margin:0 !important; display:grid !important; place-items:center !important; box-shadow:none !important; } #memecraft-app-container.mc-mobile-app-mode .mc-app-stack { width:100% !important; max-width:900px !important; margin:0 auto !important; padding:10px !important; gap:10px !important; } #memecraft-app-container.mc-mobile-app-mode .mc-control-deck, #memecraft-app-container.mc-mobile-app-mode .mc-workspace { border-radius:16px !important; padding:10px !important; } #memecraft-app-container.mc-mobile-app-mode .mc-toolbar-grid { grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:6px !important; } #memecraft-app-container.mc-mobile-app-mode .bento-btn { min-height:52px !important; border-radius:12px !important; font-size:.7rem !important; } #memecraft-app-container.mc-mobile-app-mode .bento-btn i { font-size:1.1rem !important; } #memecraft-app-container.mc-mobile-app-mode .mc-workspace { min-height:0 !important; } #memecraft-app-container.mc-mobile-app-mode .mc-workspace-header { margin-bottom:8px !important; } #memecraft-app-container.mc-mobile-app-mode .mc-canvas-bg { padding:6px !important; border-radius:14px !important; } #memecraft-app-container.mc-mobile-app-mode .mc-bottom-grid { grid-template-columns:1fr 1fr !important; gap:8px !important; } #memecraft-app-container.mc-mobile-app-mode .mc-action-card { min-height:62px !important; padding:9px !important; } #memecraft-app-container.mc-mobile-app-mode .mc-bottom-grid .mc-action-card:first-child { grid-column:1 / -1 !important; } #memecraft-app-container.mc-mobile-app-mode .mc-title-card { padding:12px !important; border-radius:16px !important; } #memecraft-app-container.mc-mobile-app-mode .mc-generator-nav-copy { display:none !important; } #memecraft-app-container.mc-mobile-app-mode .mc-modal-overlay { z-index:2147483000 !important; padding:8px !important; padding-top:calc(8px + env(safe-area-inset-top)) !important; padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important; } #memecraft-app-container.mc-mobile-app-mode .mc-modal-content-wrap { max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; border-radius:18px !important; } } /* 11.2.0 precision text editor */ textarea.mc-canvas-text-editor { box-sizing: content-box !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; scrollbar-width: none !important; } textarea.mc-canvas-text-editor::-webkit-scrollbar { display:none !important; } /* 11.2.6: make the editing surface predictable on touch devices. */ @media (pointer: coarse), (max-width: 782px) { #memecraft-app-container .canvas-container, #memecraft-app-container .upper-canvas { touch-action: none !important; overscroll-behavior: contain !important; -webkit-user-select: none !important; user-select: none !important; } #memecraft-app-container .mc-canvas-text-editor { touch-action: manipulation !important; -webkit-user-select: text !important; user-select: text !important; } } /* MemeCraft 11.5.0 — compact text effects */ #memecraft-app-container #mc-text-effects-box { display:none !important; flex-direction:column !important; align-items:stretch !important; gap:.65rem !important; min-width:min(100%,360px) !important; } #memecraft-app-container #mc-text-effects-box.is-visible { display:flex !important; } #memecraft-app-container .mc-fx-head { display:flex !important; align-items:center !important; gap:.65rem !important; min-width:0 !important; } #memecraft-app-container .mc-fx-head > .mc-tool-label { display:inline-flex !important; align-items:center !important; gap:.4rem !important; white-space:nowrap !important; } #memecraft-app-container .mc-fx-presets { display:flex !important; align-items:center !important; gap:.35rem !important; flex-wrap:wrap !important; min-width:0 !important; } #memecraft-app-container .mc-fx-btn { width:34px !important; min-width:34px !important; height:34px !important; min-height:34px !important; font-size:.8rem !important; } #memecraft-app-container .mc-fx-options { display:none !important; align-items:center !important; gap:.65rem !important; padding-top:.62rem !important; border-top:1px solid var(--mc-border) !important; flex-wrap:wrap !important; } #memecraft-app-container .mc-fx-options.is-visible { display:flex !important; } #memecraft-app-container .mc-fx-control { display:flex !important; align-items:center !important; gap:.45rem !important; min-width:0 !important; } #memecraft-app-container .mc-fx-control input[type="color"] { width:34px !important; height:34px !important; min-width:34px !important; padding:2px !important; border-radius:.6rem !important; border:1px solid var(--mc-border) !important; background:var(--mc-card) !important; cursor:pointer !important; } #memecraft-app-container .mc-fx-slider input[type="range"] { width:88px !important; max-width:24vw !important; } #memecraft-app-container #mc-fx-depth-control.is-hidden { display:none !important; } @media (max-width:600px) { #memecraft-app-container .mc-fx-head { align-items:flex-start !important; flex-direction:column !important; gap:.5rem !important; } #memecraft-app-container .mc-fx-presets { width:100% !important; display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:.35rem !important; } #memecraft-app-container .mc-fx-btn { width:100% !important; min-width:0 !important; } #memecraft-app-container .mc-fx-options { display:none !important; grid-template-columns:auto 1fr 1fr !important; gap:.55rem !important; } #memecraft-app-container .mc-fx-options.is-visible { display:grid !important; } #memecraft-app-container .mc-fx-control { min-width:0 !important; } #memecraft-app-container .mc-fx-slider { flex-direction:column !important; align-items:stretch !important; gap:.25rem !important; } #memecraft-app-container .mc-fx-slider input[type="range"] { width:100% !important; max-width:none !important; } } /* MemeCraft 11.5.1 — compact collapsible Chaos Lab */ #memecraft-app-container details#mc-chaos-bar.mc-chaos-bar.mc-chaos-collapsible { all: initial !important; isolation: isolate !important; box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: none !important; margin: .8rem 0 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--mc-border) !important; border-radius: .9rem !important; background: var(--mc-card) !important; box-shadow: 0 8px 22px -22px rgba(0,0,0,.7) !important; color: var(--mc-text) !important; font-family: 'Inter', sans-serif !important; } #memecraft-app-container details#mc-chaos-bar.mc-chaos-bar.mc-chaos-collapsible * { box-sizing: border-box !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary { all: unset !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: .7rem !important; width: 100% !important; min-height: 52px !important; padding: .65rem .78rem !important; cursor: pointer !important; color: var(--mc-text) !important; font-family: 'Inter', sans-serif !important; user-select: none !important; -webkit-user-select: none !important; list-style: none !important; -webkit-tap-highlight-color: transparent !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary::-webkit-details-marker { display: none !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary::marker { display: none !important; content: '' !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary:hover { background: color-mix(in srgb, var(--mc-bg) 58%, transparent) !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary:focus-visible { outline: 2px solid var(--mc-accent) !important; outline-offset: -2px !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary-title { all: unset !important; display: inline-flex !important; align-items: center !important; gap: .58rem !important; min-width: 0 !important; color: var(--mc-text) !important; font-family: 'Inter', sans-serif !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary-title strong { all: unset !important; color: var(--mc-text) !important; font-family: 'Inter', sans-serif !important; font-size: .9rem !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: -.01em !important; white-space: nowrap !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary-icon { all: unset !important; display: inline-grid !important; place-items: center !important; width: 32px !important; height: 32px !important; flex: 0 0 32px !important; border-radius: 10px !important; background: color-mix(in srgb, #f97316 14%, var(--mc-card)) !important; color: #f97316 !important; font-family: 'Inter', sans-serif !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary-icon i { color: #f97316 !important; font-size: .88rem !important; line-height: 1 !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary-meta { all: unset !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: .55rem !important; min-width: 0 !important; color: var(--mc-muted) !important; font-family: 'Inter', sans-serif !important; } #memecraft-app-container #mc-chaos-bar #mc-chaos-status { all: unset !important; display: inline-flex !important; align-items: center !important; min-height: 26px !important; max-width: 190px !important; padding: .34rem .55rem !important; overflow: hidden !important; border: 1px solid var(--mc-border) !important; border-radius: 999px !important; background: var(--mc-bg) !important; color: var(--mc-muted) !important; font-family: 'Inter', sans-serif !important; font-size: .68rem !important; line-height: 1 !important; font-weight: 800 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-chevron { color: var(--mc-muted) !important; font-size: .72rem !important; line-height: 1 !important; transition: transform .18s ease !important; } #memecraft-app-container #mc-chaos-bar[open] .mc-chaos-chevron { transform: rotate(180deg) !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-panel { padding: .15rem .72rem .72rem !important; border-top: 1px solid color-mix(in srgb, var(--mc-border) 74%, transparent) !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-actions { all: initial !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) !important; align-items: stretch !important; gap: .5rem !important; width: 100% !important; padding-top: .65rem !important; font-family: 'Inter', sans-serif !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_make_worse.mc-chaos-primary, html body #memecraft-app-container #mc-chaos-bar button#mc_btn_undo_chaos.mc-chaos-secondary, html body #memecraft-app-container #mc-chaos-bar button#mc_btn_restore_dignity.mc-chaos-secondary { height: 44px !important; min-height: 44px !important; padding: 0 .72rem !important; border-radius: .7rem !important; font-size: .76rem !important; } #memecraft-app-container #mc-chaos-bar[data-mc-chaos-level="1"] #mc-chaos-status, #memecraft-app-container #mc-chaos-bar[data-mc-chaos-level="2"] #mc-chaos-status, #memecraft-app-container #mc-chaos-bar[data-mc-chaos-level="3"] #mc-chaos-status { color: #f97316 !important; border-color: color-mix(in srgb, #f97316 30%, var(--mc-border)) !important; background: color-mix(in srgb, #f97316 8%, var(--mc-card)) !important; } #memecraft-app-container #mc-chaos-bar[data-mc-chaos-level="4"] #mc-chaos-status, #memecraft-app-container #mc-chaos-bar[data-mc-chaos-level="5"] #mc-chaos-status { color: #ef4444 !important; border-color: color-mix(in srgb, #ef4444 34%, var(--mc-border)) !important; background: color-mix(in srgb, #ef4444 9%, var(--mc-card)) !important; } @media (max-width: 700px) { #memecraft-app-container #mc-chaos-bar .mc-chaos-summary { min-height: 48px !important; padding: .55rem .62rem !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary-icon { width: 30px !important; height: 30px !important; flex-basis: 30px !important; border-radius: 9px !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-summary-title strong { font-size: .84rem !important; } #memecraft-app-container #mc-chaos-bar #mc-chaos-status { max-width: 150px !important; font-size: .64rem !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-panel { padding: .1rem .58rem .58rem !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-actions { grid-template-columns: 1fr 1fr !important; gap: .45rem !important; padding-top: .55rem !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_make_worse { grid-column: 1 / -1 !important; } } @media (max-width: 430px) { #memecraft-app-container #mc-chaos-bar #mc-chaos-status { max-width: 128px !important; } #memecraft-app-container #mc-chaos-bar .mc-chaos-actions { grid-template-columns: 1fr !important; } html body #memecraft-app-container #mc-chaos-bar button#mc_btn_make_worse, html body #memecraft-app-container #mc-chaos-bar button#mc_btn_undo_chaos, html body #memecraft-app-container #mc-chaos-bar button#mc_btn_restore_dignity { grid-column: auto !important; height: 42px !important; min-height: 42px !important; font-size: .74rem !important; } } /* MemeCraft 11.5.3 — full-width, clearer text effects panel */ #memecraft-app-container #mc-text-effects-box { display:none !important; flex-direction:column !important; align-items:stretch !important; gap:.85rem !important; width:100% !important; min-width:100% !important; flex:1 1 100% !important; order:99 !important; justify-content:flex-start !important; padding:1rem !important; } #memecraft-app-container #mc-text-effects-box.is-visible { display:flex !important; } #memecraft-app-container .mc-fx-head { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:.75rem !important; min-width:0 !important; flex-wrap:wrap !important; } #memecraft-app-container .mc-fx-heading { display:inline-flex !important; align-items:center !important; gap:.5rem !important; font-size:.78rem !important; letter-spacing:.08em !important; } #memecraft-app-container .mc-fx-help { color:var(--mc-muted) !important; font-size:.78rem !important; font-weight:700 !important; line-height:1.2 !important; } #memecraft-app-container .mc-fx-presets { width:100% !important; display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:.6rem !important; align-items:stretch !important; } #memecraft-app-container .mc-fx-btn { width:100% !important; min-width:0 !important; min-height:54px !important; height:auto !important; border-radius:14px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:.5rem !important; padding:.72rem .7rem !important; font-size:.86rem !important; font-weight:800 !important; line-height:1.1 !important; } #memecraft-app-container .mc-fx-btn i { font-size:1rem !important; line-height:1 !important; } #memecraft-app-container .mc-fx-btn span { display:inline-block !important; white-space:nowrap !important; } #memecraft-app-container .mc-fx-options { display:none !important; align-items:end !important; gap:.9rem !important; padding-top:.82rem !important; border-top:1px solid var(--mc-border) !important; flex-wrap:wrap !important; } #memecraft-app-container .mc-fx-options.is-visible { display:flex !important; } #memecraft-app-container .mc-fx-control { display:flex !important; align-items:center !important; gap:.55rem !important; min-width:0 !important; } #memecraft-app-container .mc-fx-control input[type="color"] { width:40px !important; height:40px !important; min-width:40px !important; padding:3px !important; border-radius:.8rem !important; } #memecraft-app-container .mc-fx-slider { flex:1 1 190px !important; min-width:180px !important; } #memecraft-app-container .mc-fx-slider input[type="range"] { width:100% !important; max-width:none !important; } #memecraft-app-container #mc-fx-depth-control.is-hidden { display:none !important; } @media (max-width: 1024px) { #memecraft-app-container .mc-fx-presets { grid-template-columns:repeat(4,minmax(0,1fr)) !important; } } @media (max-width: 782px) { #memecraft-app-container #mc-text-effects-box { padding:.9rem !important; } #memecraft-app-container .mc-fx-presets { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:.5rem !important; } #memecraft-app-container .mc-fx-btn { min-height:50px !important; justify-content:flex-start !important; padding:.7rem .8rem !important; } #memecraft-app-container .mc-fx-options { display:none !important; flex-direction:column !important; align-items:stretch !important; gap:.7rem !important; } #memecraft-app-container .mc-fx-options.is-visible { display:flex !important; } #memecraft-app-container .mc-fx-control, #memecraft-app-container .mc-fx-slider { width:100% !important; min-width:0 !important; } } /* MemeCraft 11.5.7 — structural spacing fallback. The actual 0.8rem separators are also emitted inline in the generator markup so optimizer/theme CSS cannot collapse the requested breathing room. */ #memecraft-app-container .mc-section-spacer { display:block !important; width:100% !important; height:.8rem !important; min-height:.8rem !important; flex:0 0 .8rem !important; padding:0 !important; margin:0 !important; border:0 !important; background:transparent !important; pointer-events:none !important; } /* 11.5.15 — Headline controls without changing the proven modal DOM hierarchy. */ #memecraft-app-container #mc-properties-panel.is-caption-active { display: flex; } #memecraft-app-container #mc-properties-panel.is-caption-active:not(.is-active) { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; } #memecraft-app-container #mc-properties-panel.is-caption-active:not(.is-active) > :not(#mc-caption-controls) { display: none !important; } #memecraft-app-container #mc-properties-panel.is-caption-active:not(.is-active) > #mc-caption-controls { width: 100% !important; max-width: 100% !important; }