/* =========================================================
   IMAGE ANYTHING — NEON DARK UI v13
   UI-only stylesheet. Generation logic is unchanged.
========================================================= */

:root {
    --bg: #050816;
    --bg-2: #090d1f;
    --panel: rgba(10, 15, 35, 0.86);
    --panel-2: rgba(13, 19, 43, 0.92);
    --line: rgba(91, 231, 255, 0.18);
    --line-strong: rgba(91, 231, 255, 0.55);
    --cyan: #00d9ff;
    --blue: #2477ff;
    --purple: #9b3dff;
    --pink: #ff20c8;
    --text: #f5f7ff;
    --muted: #8f9ab7;
    --input: #0b1025;
    --shadow: 0 24px 70px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

html { background: var(--bg); }

body {
    min-height: 100vh;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: var(--text);
    background:
        radial-gradient(circle at 12% 8%, rgba(0,217,255,.13), transparent 27%),
        radial-gradient(circle at 88% 14%, rgba(155,61,255,.16), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(255,32,200,.09), transparent 35%),
        linear-gradient(135deg, #040713 0%, #080c20 50%, #050817 100%);
}

body::before,
body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
}

body::before {
    width: 420px;
    height: 420px;
    left: -180px;
    top: 18%;
    background: rgba(0,217,255,.18);
    animation: neonOrbA 14s ease-in-out infinite alternate;
}

body::after {
    width: 480px;
    height: 480px;
    right: -220px;
    top: 45%;
    background: rgba(155,61,255,.18);
    animation: neonOrbB 18s ease-in-out infinite alternate;
}

@keyframes neonOrbA { to { transform: translate(130px,-80px) scale(1.15); } }
@keyframes neonOrbB { to { transform: translate(-110px,70px) scale(1.18); } }
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 rgba(0,217,255,0); } 50% { box-shadow: 0 0 28px rgba(0,217,255,.13); } }
@keyframes buttonSweep { from { background-position: 180% 0; } to { background-position: -180% 0; } }
@keyframes borderPulse { 0%,100% { border-color: rgba(0,217,255,.28); } 50% { border-color: rgba(155,61,255,.55); } }

.header,
.container,
.footer { animation: rise .65s ease both; }

.header-inner {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

.header-donation {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 4px;
}

.header-donation iframe,
.header-donation > div {
    max-width: 100%;
}


.header-brand {
    min-width: 0;
    flex: 1 1 auto;
}

.header {
    position: relative;
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 30px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
    opacity: .65;
}

.header h1 {
    margin: 0 0 7px;
    font-size: 31px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    background: linear-gradient(105deg, #38bdf8 0%, #2563eb 30%, #8b5cf6 48%, #60a5fa 62%, #1d4ed8 78%, #38bdf8 100%);
    background-size: 240% 100%;
    background-position: 120% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 28px rgba(0,217,255,.18);
    animation: headingShimmer 4.8s ease-in-out infinite;
    transition: filter .25s ease, text-shadow .25s ease;
}

.header h1:hover {
    filter: brightness(1.18);
    text-shadow: 0 0 32px rgba(0,217,255,.30), 0 0 48px rgba(99,102,241,.16);
}

@keyframes headingShimmer {
    0%, 100% {
        background-position: 120% 0;
        filter: brightness(.96);
    }
    50% {
        background-position: -20% 0;
        filter: brightness(1.12);
    }
}


/* Animated tagline: subtle moving light across the text. */
.header-tagline {
    margin: 0;
    display: inline-block;
    color: #b8c9e8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08px;
    background: linear-gradient(105deg, #8fa8cc 0%, #d9f7ff 22%, #6fdcff 42%, #a9bfe3 62%, #f2fbff 78%, #8fa8cc 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: taglineShimmer 4.5s ease-in-out infinite;
    text-shadow: 0 0 14px rgba(92, 210, 255, .12);
    white-space: nowrap;
}

@keyframes taglineShimmer {
    0%, 100% {
        background-position: 120% 0;
        filter: brightness(.95);
    }
    50% {
        background-position: -20% 0;
        filter: brightness(1.18);
    }
}


.header-benefits {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.header-benefits span {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 6px 12px;
    border: 1px solid rgba(76, 160, 255, .36);
    border-radius: 999px;
    background: linear-gradient(105deg, rgba(16, 77, 170, .30), rgba(41, 132, 255, .18), rgba(82, 180, 255, .12));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2px;
    white-space: nowrap;
    box-shadow: 0 0 16px rgba(30, 130, 255, .12), inset 0 0 12px rgba(90, 190, 255, .05);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.header-benefits span:hover {
    transform: translateY(-2px);
    border-color: rgba(110, 190, 255, .65);
    box-shadow: 0 0 22px rgba(30, 145, 255, .22), inset 0 0 14px rgba(100, 200, 255, .07);
}

.status {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid rgba(0,217,255,.28);
    border-radius: 999px;
    background: rgba(5,12,29,.72);
    color: #a9f3ff;
    font-size: 11px;
    box-shadow: 0 0 22px rgba(0,217,255,.08), inset 0 0 18px rgba(0,217,255,.03);
}

.container {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0 38px;
}

.panel {
    position: relative;
    background: linear-gradient(145deg, rgba(13,20,46,.93), rgba(7,11,28,.90));
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 16px;
    box-shadow: var(--shadow), inset 0 0 35px rgba(0,217,255,.025);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(0,217,255,.035), transparent 35%, rgba(155,61,255,.04));
}

.panel:hover {
    transform: translateY(-2px);
    border-color: rgba(0,217,255,.34);
    box-shadow: 0 28px 80px rgba(0,0,0,.52), 0 0 28px rgba(0,217,255,.06);
}

.panel h2 {
    position: relative;
    margin: 0 0 13px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #eafcff;
}

.panel h2::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 8px 2px 0;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
}

.controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.control-group label {
    color: #b9c4df;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .25px;
}

.value { color: var(--cyan); font-weight: 700; }

input[type="file"],
select,
input[type="text"],
input[type="number"],
textarea {
    width: 100%;
    min-height: 35px;
    padding: 7px 10px;
    border: 1px solid rgba(105,126,177,.28);
    border-radius: 8px;
    background: var(--input);
    color: #eef4ff;
    font-size: 12px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

input[type="file"] { padding: 5px; color: #aeb9d4; }

input[type="file"]::file-selector-button {
    border: 0;
    border-radius: 6px;
    padding: 6px 9px;
    margin-right: 8px;
    background: linear-gradient(135deg, #1269ff, #7b32ff);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

select { cursor: pointer; }

select:focus,
input[type="file"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0,217,255,.09), 0 0 18px rgba(0,217,255,.08);
}

input[type="range"] {
    width: 100%;
    height: 5px;
    accent-color: var(--cyan);
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--blue), var(--purple));
}

input[type="range"]::-webkit-slider-thumb { margin-top: -5px; }


.primary-button,
button {
    position: relative;
    min-height: 37px;
    padding: 0 17px;
    border: 1px solid rgba(0,217,255,.5);
    border-radius: 9px;
    background: linear-gradient(100deg, #076cff 0%, #7733ff 48%, #ec19c7 100%);
    background-size: 220% 100%;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(71,41,255,.22), 0 0 20px rgba(0,217,255,.06);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.primary-button:hover,
button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    background-position: 100% 0;
    box-shadow: 0 12px 34px rgba(71,41,255,.32), 0 0 26px rgba(0,217,255,.12);
}

.primary-button:active,
button:active { transform: scale(.98); }

button::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.24) 50%, transparent 70%);
    background-size: 220% 100%;
    opacity: 0;
}

button:hover::after { opacity: 1; animation: buttonSweep .75s ease; }

.workspace {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 14px;
    margin-top: 14px;
}

.preview-box {
    position: relative;
    width: 100%;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #050817;
    border: 1px solid rgba(0,217,255,.18);
    border-radius: 11px;
    box-shadow: inset 0 0 45px rgba(0,0,0,.45), 0 12px 35px rgba(0,0,0,.30);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.preview-box::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0,217,255,.045), transparent 35%, rgba(155,61,255,.055));
}

.preview-box:hover {
    border-color: rgba(0,217,255,.38);
    box-shadow: inset 0 0 50px rgba(0,0,0,.45), 0 18px 45px rgba(0,0,0,.38), 0 0 24px rgba(0,217,255,.07);
}

#originalImage,
#generatedImage,
#canvas {
    display: none;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity .35s ease, transform .35s ease;
}

#originalImage:hover,
#generatedImage:hover { transform: scale(1.008); }

#canvas { image-rendering: pixelated; }

.preview-box.generated,
.preview-box.generated-box { background: #03050d; }

#emojiOutput {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    padding: 0;
    width: max-content;
    height: max-content;
    overflow: visible;
    white-space: pre;
    color: #fff;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", monospace;
    font-size: 16px;
    line-height: 1;
    transform-origin: center center;
    user-select: none;
    flex: none;
}

.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #56627f;
    font-size: 13px;
    text-align: center;
    animation: pulseGlow 3.5s ease-in-out infinite;
}

.generation-progress {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: min(260px, 82%);
    padding: 12px;
    border: 1px solid rgba(0,217,255,.30);
    border-radius: 12px;
    background: rgba(7,12,29,.92);
    box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 25px rgba(0,217,255,.08);
    backdrop-filter: blur(12px);
}

.generation-progress.hidden { display: none !important; }

.progress-info,
.generation-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: #cbd5ef;
    font-size: 11px;
    font-weight: 700;
}

#generationPercent { color: var(--cyan); font-variant-numeric: tabular-nums; }

.progress-track {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #171e38;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.6);
}

.progress-bar {
    position: relative;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00cfff, #6c42ff, #ff20c8);
    box-shadow: 0 0 14px rgba(0,217,255,.55);
    transition: width .08s linear;
}

.progress-bar::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -40%;
    width: 35%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
    animation: buttonSweep 1.5s linear infinite;
}

.download-buttons,
.download-group {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.secondary-button,
.download-buttons button {
    flex: 0 0 auto;
    min-height: 34px;
    border-color: rgba(0,217,255,.34);
    background: linear-gradient(135deg, #101a38, #11102c);
    box-shadow: 0 7px 18px rgba(0,0,0,.24), inset 0 0 15px rgba(0,217,255,.025);
}

.secondary-button:hover,
.download-buttons button:hover {
    border-color: var(--cyan);
    box-shadow: 0 10px 25px rgba(0,0,0,.32), 0 0 18px rgba(0,217,255,.10);
}

.info-panel { margin-top: 14px; }

.info-panel p {
    margin: 8px 0;
    color: #8995b2;
    font-size: 12px;
    line-height: 1.7;
}

footer {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 4px 0 24px;
    text-align: center;
    color: #65718e;
    font-size: 10px;
}

footer p { margin: 4px 0; }
footer strong { color: #8f9cc0; }

@media (max-width: 900px) {
    .controls { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 800px) {
    .header { width: min(calc(100% - 20px), 700px); flex-direction: column; align-items: flex-start; }
    .container { width: min(calc(100% - 20px), 700px); padding-top: 18px; }
    .workspace { grid-template-columns: 1fr; }
    .preview-box { width: 100%; height: 420px; }
    .controls { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .header, .container, footer { width: calc(100% - 16px); }
    .header h1 { font-size: 24px; }
    .panel { padding: 13px; }
    .preview-box { height: 420px; }
    .download-buttons { flex-wrap: wrap; }
    .download-buttons button { flex: 1 1 140px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}


/* Utility visibility class */
.hidden {
    display: none !important;
}

/* =========================================================
   IMAGE → ANYTHING TABS + SVG TOOL
========================================================= */

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(7,12,29,.72);
    box-shadow: inset 0 0 25px rgba(0,217,255,.025), 0 10px 30px rgba(0,0,0,.22);
}

.tab-button {
    flex: 1;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #8e9ab8;
    box-shadow: none;
}

.tab-button::after { display: none; }

.tab-button:hover {
    color: #eafcff;
    background: rgba(0,217,255,.055);
    border-color: rgba(0,217,255,.18);
    box-shadow: none;
    transform: none;
}

.tab-button.active {
    color: #fff;
    border-color: rgba(0,217,255,.42);
    background: linear-gradient(100deg, rgba(0,108,255,.34), rgba(119,51,255,.30), rgba(236,25,199,.24));
    box-shadow: 0 0 24px rgba(0,217,255,.08), inset 0 0 20px rgba(255,255,255,.025);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: rise .35s ease both; }

.feature-description {
    position: relative;
    margin: -4px 0 14px;
    color: #8995b2;
    font-size: 12px;
    line-height: 1.7;
}

.svg-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.svg-preview-box {
    background:
        linear-gradient(45deg, #101522 25%, transparent 25%) 0 0/20px 20px,
        linear-gradient(-45deg, #101522 25%, transparent 25%) 0 10px/20px 20px,
        linear-gradient(45deg, transparent 75%, #101522 75%) 10px -10px/20px 20px,
        linear-gradient(-45deg, transparent 75%, #101522 75%) -10px 0/20px 20px,
        #080b15;
}

#svgPreview {
    display: none;
    max-width: 96%;
    max-height: 96%;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: auto;
    border-radius: 4px;
    box-shadow: 0 10px 35px rgba(0,0,0,.38);
}

.roadmap-panel {
    overflow: hidden;
}

.roadmap-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.roadmap-heading h2 {
    margin: 0;
}

.roadmap-subtitle {
    margin: 4px 0 0;
    color: #65718e;
    font-size: 10px;
}

.roadmap-complete {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid rgba(76, 255, 176, .28);
    border-radius: 999px;
    color: #9fffc9;
    background: rgba(76,255,176,.07);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .7px;
}

.roadmap-section-title {
    margin: 15px 0 7px;
    color: #56627e;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.roadmap-card {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid rgba(105,126,177,.20);
    border-radius: 9px;
    background: rgba(7,12,29,.68);
    color: #8995b2;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: .18s ease;
}

.roadmap-card:hover {
    transform: translateY(-1px);
    border-color: rgba(0,217,255,.35);
    background: rgba(0,217,255,.06);
}

.roadmap-card.done {
    color: #b8c6df;
}

.roadmap-card.done span {
    color: #9fffc9;
    background: rgba(76,255,176,.08);
}

.roadmap-card.next {
    color: #eafcff;
    border-color: rgba(0,217,255,.48);
    background: rgba(0,217,255,.09);
    box-shadow: 0 0 20px rgba(0,217,255,.08);
}

.roadmap-card.next span {
    color: #9df5ff;
    background: rgba(0,217,255,.12);
}

.roadmap-card.future {
    cursor: default;
    opacity: .72;
}

.roadmap-card.future:hover {
    transform: none;
    border-color: rgba(105,126,177,.20);
    background: rgba(7,12,29,.68);
}

.roadmap-card span {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 999px;
    color: #7f8ba8;
    background: rgba(105,126,177,.09);
    font-size: 8px;
    letter-spacing: .6px;
}

.roadmap-future-box {
    margin-top: 14px;
    padding: 12px;
    border: 1px dashed rgba(139,151,181,.22);
    border-radius: 10px;
    background: rgba(7,12,29,.42);
    color: #74809c;
    font-size: 10px;
    line-height: 1.55;
}

.roadmap-future-box strong {
    color: #9aa7c2;
    font-size: 9px;
    letter-spacing: .8px;
}

.ai-roadmap-list {
    margin-top: 5px;
}

@media (max-width: 800px) {
    .svg-controls { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .tabs { flex-direction: column; }
    .tab-button { flex: none; }
}


/* ========================================
   UNICODE PREVIEW
======================================== */

.unicode-preview-box {
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

#unicodeImagePreview {
    display: none;
    max-width: 96%;
    max-height: 96%;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: auto;
    border-radius: 4px;
    box-shadow: 0 10px 35px rgba(0,0,0,.38);
}

.unicode-preview {
    margin: 0;
    padding: 18px;
    min-width: max-content;
    font-family: "Noto Sans Mono", "DejaVu Sans Mono", "Segoe UI Symbol", monospace;
    font-size: 10px;
    line-height: 0.9;
    letter-spacing: 0;
    white-space: pre;
    background: transparent;
}

/* Symbols canvas preview */
.symbols-canvas {
    display: none;
    max-width: 96%;
    max-height: 96%;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: auto;
    border-radius: 4px;
    box-shadow: 0 10px 35px rgba(0,0,0,.38);
}


/* Mosaic canvas preview */
.mosaic-canvas {
    display: none;
    max-width: 96%;
    max-height: 96%;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: auto;
    border-radius: 4px;
    box-shadow: 0 10px 35px rgba(0,0,0,.38);
}




/* Minecraft block-art preview */
.minecraft-canvas {
    display: none;
    max-width: 96%;
    max-height: 96%;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border-radius: 4px;
    box-shadow: 0 10px 35px rgba(0,0,0,.38);
}

.eight-bit-canvas {
    display: none;
    max-width: 96%;
    max-height: 96%;
    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border-radius: 4px;
    box-shadow: 0 10px 35px rgba(0,0,0,.38);
}


/* Grid preview */
.grid-canvas { display:none; max-width:96%; max-height:96%; width:auto; height:auto; object-fit:contain; image-rendering:auto; border-radius:4px; box-shadow:0 10px 35px rgba(0,0,0,.38); }



/* Image → Anything uses a single switching workspace. */
#anythingTab {
    min-height: 0;
}

#anythingTab > .anything-feature-panel {
    margin-top: 0;
}


/* ========================================
   IMAGE → ANYTHING SUB-TABS
======================================== */
.sub-tabs {
    position: sticky;
    top: 8px;
    z-index: 20;
    display: flex;
    gap: 6px;
    margin: 0 0 14px;
    padding: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid rgba(105,126,177,.20);
    border-radius: 12px;
    background: rgba(5,9,22,.88);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tab-button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #74809c;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .25px;
    cursor: pointer;
    transition: .18s ease;
}
.sub-tab-button:hover {
    color: #d9e7ff;
    border-color: rgba(0,217,255,.25);
    background: rgba(0,217,255,.06);
    transform: translateY(-1px);
}
.sub-tab-button.active {
    color: #fff;
    border-color: rgba(0,217,255,.42);
    background: linear-gradient(100deg, rgba(0,108,255,.34), rgba(119,51,255,.30), rgba(236,25,199,.24));
    box-shadow: 0 0 20px rgba(0,217,255,.08), inset 0 0 16px rgba(255,255,255,.025);
}
.anything-feature-panel {
    display: none !important;
    width: 100%;
    box-sizing: border-box;
}
.anything-feature-panel[hidden] {
    display: none !important;
}
.anything-feature-panel:not([hidden]) {
    display: block !important;
    animation: rise .28s ease both;
}
.anything-feature-panel.anything-feature-active {
    display: block !important;
}
.anything-workspace-hidden { display: none !important; }

/* Give the selected Image → Anything tool the full desktop workspace width. */
#anythingTab {
    width: min(100%, 1100px);
    margin: 0 auto;
}
#anythingTab .workspace,
#anythingTab .panel {
    width: 100%;
    box-sizing: border-box;
}

/* ========================================
   EMOJI WINDOW — FEATURE BADGES
======================================== */
.emoji-window-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.emoji-window-heading h2 {
    margin: 0;
}

.emoji-benefits {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.emoji-benefits span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 209, 102, .30);
    border-radius: 999px;
    background: linear-gradient(100deg, rgba(255, 159, 67, .16), rgba(255, 209, 102, .12));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15px;
    white-space: nowrap;
    box-shadow: 0 0 12px rgba(255, 177, 75, .08);
}

.emoji-benefits span:first-child {
    border-color: rgba(255, 209, 102, .48);
    background: linear-gradient(100deg, rgba(255, 145, 45, .24), rgba(255, 215, 92, .18));
    box-shadow: 0 0 16px rgba(255, 183, 55, .14);
}

@media (max-width: 700px) {
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .header-benefits {
        justify-content: flex-start;
        margin-left: 0;
    }

    .emoji-window-heading {
        align-items: flex-start;
    }

    .emoji-benefits {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .sub-tabs { top: 4px; margin-bottom: 10px; }
    .sub-tab-button { min-height: 32px; padding: 0 10px; font-size: 9px; }
}

/* ========================================
   IMAGE → ANYTHING CLEAN TOOL WORKSPACE
======================================== */
#anythingTab {
    width: min(100%, 860px) !important;
    margin: 0 auto !important;
}

#anythingTab .anything-feature-panel {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

#anythingTab .workspace {
    width: 100%;
    max-width: 860px;
    margin: 14px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

#anythingTab .workspace > .panel {
    min-width: 0;
}

#anythingTab .preview-box {
    height: 360px;
    aspect-ratio: 1 / 1;
}

#anythingTab .source-preview-box {
    background: #050817;
}

.anything-source-image {
    display: none;
    max-width: 94%;
    max-height: 94%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
}

@media (max-width: 700px) {
    #anythingTab .workspace {
        grid-template-columns: 1fr;
    }

    #anythingTab .preview-box {
        height: 320px;
    }
}


/* ========================================
   IMAGE → ANYTHING — PER-TOOL COLOR THEMES
   Keeps the existing effects and animations;
   only the accent colors change per tool.
======================================== */
#anythingTab[data-anything-theme="svg"] {
    --tool-rgb: 0, 217, 255;
    --tool-rgb-2: 36, 119, 255;
    --tool-accent: #00d9ff;
    --tool-accent-2: #2477ff;
}
#anythingTab[data-anything-theme="unicode"] {
    --tool-rgb: 255, 209, 102;
    --tool-rgb-2: 255, 159, 67;
    --tool-accent: #ffd166;
    --tool-accent-2: #ff9f43;
}
#anythingTab[data-anything-theme="symbols"] {
    --tool-rgb: 255, 79, 216;
    --tool-rgb-2: 190, 70, 255;
    --tool-accent: #ff4fd8;
    --tool-accent-2: #be46ff;
}
#anythingTab[data-anything-theme="mosaic"] {
    --tool-rgb: 52, 211, 153;
    --tool-rgb-2: 16, 185, 129;
    --tool-accent: #34d399;
    --tool-accent-2: #10b981;
}
#anythingTab[data-anything-theme="pattern"] {
    --tool-rgb: 255, 159, 67;
    --tool-rgb-2: 245, 120, 48;
    --tool-accent: #ff9f43;
    --tool-accent-2: #f57830;
}
#anythingTab[data-anything-theme="eightbit"] {
    --tool-rgb: 255, 92, 92;
    --tool-rgb-2: 235, 59, 59;
    --tool-accent: #ff5c5c;
    --tool-accent-2: #eb3b3b;
}
#anythingTab[data-anything-theme="minecraft"] {
    --tool-rgb: 123, 220, 101;
    --tool-rgb-2: 72, 170, 76;
    --tool-accent: #7bdc65;
    --tool-accent-2: #48aa4c;
}
#anythingTab[data-anything-theme="grid"] {
    --tool-rgb: 122, 162, 255;
    --tool-rgb-2: 78, 115, 255;
    --tool-accent: #7aa2ff;
    --tool-accent-2: #4e73ff;
}

#anythingTab .anything-feature-panel,
#anythingTab .workspace > .panel {
    border-color: rgba(var(--tool-rgb), .30);
    box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 0 35px rgba(var(--tool-rgb), .025);
}

#anythingTab .anything-feature-panel:hover,
#anythingTab .workspace > .panel:hover {
    border-color: rgba(var(--tool-rgb), .55);
    box-shadow: 0 28px 80px rgba(0,0,0,.52), 0 0 28px rgba(var(--tool-rgb), .10);
}

#anythingTab .anything-feature-panel h2,
#anythingTab .workspace > .panel h2 {
    color: color-mix(in srgb, var(--tool-accent) 72%, white);
    text-shadow: 0 0 16px rgba(var(--tool-rgb), .12);
}

#anythingTab .anything-feature-panel h2::before,
#anythingTab .workspace > .panel h2::before {
    background: var(--tool-accent);
    box-shadow: 0 0 10px rgba(var(--tool-rgb), .65);
}

#anythingTab .value {
    color: var(--tool-accent);
}

#anythingTab input[type="file"],
#anythingTab select,
#anythingTab input[type="text"],
#anythingTab input[type="number"],
#anythingTab textarea {
    border-color: rgba(var(--tool-rgb), .24);
}

#anythingTab select:focus,
#anythingTab input[type="file"]:focus,
#anythingTab input[type="text"]:focus,
#anythingTab input[type="number"]:focus,
#anythingTab textarea:focus {
    border-color: var(--tool-accent);
    box-shadow: 0 0 0 3px rgba(var(--tool-rgb), .09), 0 0 18px rgba(var(--tool-rgb), .10);
}

#anythingTab input[type="range"] {
    accent-color: var(--tool-accent);
}

#anythingTab input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--tool-accent-2), var(--tool-accent));
}

#anythingTab input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, var(--tool-accent-2), var(--tool-accent));
}

#anythingTab .primary-button,
#anythingTab .generate-button {
    border-color: rgba(var(--tool-rgb), .60);
    background: linear-gradient(100deg, var(--tool-accent-2), var(--tool-accent));
    box-shadow: 0 8px 26px rgba(var(--tool-rgb), .18), 0 0 20px rgba(var(--tool-rgb), .07);
}

#anythingTab .primary-button:hover,
#anythingTab .generate-button:hover {
    box-shadow: 0 12px 34px rgba(var(--tool-rgb), .26), 0 0 26px rgba(var(--tool-rgb), .13);
}

#anythingTab .secondary-button,
#anythingTab .download-buttons button {
    border-color: rgba(var(--tool-rgb), .34);
    box-shadow: 0 7px 18px rgba(0,0,0,.24), inset 0 0 15px rgba(var(--tool-rgb), .035);
}

#anythingTab .secondary-button:hover,
#anythingTab .download-buttons button:hover {
    border-color: var(--tool-accent);
    box-shadow: 0 10px 25px rgba(0,0,0,.32), 0 0 18px rgba(var(--tool-rgb), .14);
}

#anythingTab .preview-box {
    border-color: rgba(var(--tool-rgb), .28);
    box-shadow: inset 0 0 45px rgba(0,0,0,.45), 0 12px 35px rgba(0,0,0,.30), 0 0 18px rgba(var(--tool-rgb), .035);
}

#anythingTab .preview-box::after {
    background: linear-gradient(135deg, rgba(var(--tool-rgb), .055), transparent 35%, rgba(var(--tool-rgb-2), .065));
}

#anythingTab .preview-box:hover {
    border-color: rgba(var(--tool-rgb), .52);
    box-shadow: inset 0 0 50px rgba(0,0,0,.45), 0 18px 45px rgba(0,0,0,.38), 0 0 24px rgba(var(--tool-rgb), .11);
}

#anythingTab .generation-progress {
    border-color: rgba(var(--tool-rgb), .38);
    box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 25px rgba(var(--tool-rgb), .10);
}

#anythingTab .generation-progress .progress-bar {
    background: linear-gradient(90deg, var(--tool-accent-2), var(--tool-accent));
    box-shadow: 0 0 14px rgba(var(--tool-rgb), .55);
}

/* The sub-tab keeps the same shape, hover animation and glow behavior.
   Only its active/hover colors follow the selected tool. */
#anythingTab .sub-tabs {
    border-color: rgba(var(--tool-rgb), .22);
}

#anythingTab .sub-tab-button:hover {
    color: var(--tool-accent);
    border-color: rgba(var(--tool-rgb), .32);
    background: rgba(var(--tool-rgb), .07);
}

#anythingTab .sub-tab-button.active {
    color: #fff;
    border-color: rgba(var(--tool-rgb), .62);
    background: linear-gradient(100deg, rgba(var(--tool-rgb-2), .38), rgba(var(--tool-rgb), .24));
    box-shadow: 0 0 20px rgba(var(--tool-rgb), .13), inset 0 0 16px rgba(255,255,255,.025);
}


/* =========================================================
   V54 UNIFIED CATEGORY + TOOL NAVIGATION
========================================================= */
.tool-navigation {
    margin: 0 0 16px;
    position: sticky;
    top: 8px;
    z-index: 50;
    padding: 7px;
    border: 1px solid rgba(105,126,177,.22);
    border-radius: 15px;
    background: rgba(5,9,22,.90);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 14px 38px rgba(0,0,0,.28), inset 0 0 25px rgba(0,217,255,.025);
}
.main-tool-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}
.main-tool-tab,
.sub-tool-tab {
    border: 1px solid rgba(105,126,177,.28);
    background: rgba(7,12,28,.48);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    transition: .2s ease;
}
.main-tool-tab {
    min-height: 40px;
    border-radius: 10px;
    font-size: 11px;
    letter-spacing: .7px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* V65: delayed attention cue for unselected main tabs.
   A short glowing "current bubble" travels continuously around the tab border.
   It starts 5 seconds after page load, runs once for 5 seconds, then stops. */
@property --tab-current-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.main-tool-tab.tab-attention {
    border-color: rgba(105,126,177,.48);
}

.main-tool-tab.tab-attention::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
        from var(--tab-current-angle),
        transparent 0deg,
        transparent 332deg,
        rgba(0,217,255,.08) 340deg,
        rgba(255,255,255,.98) 347deg,
        rgba(0,217,255,1) 352deg,
        rgba(255,255,255,.92) 356deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 5px rgba(0,217,255,.95))
            drop-shadow(0 0 12px rgba(0,217,255,.55));
    animation: mainTabCurrent 5s linear 5s 1 forwards;
}

/* V66: one-time white gradient attention sweep for unselected main tabs */
.main-tool-tab.tab-hover-attention::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%);
    background-size: 220% 100%;
    background-position: 180% 0;
    opacity: 0;
    animation: mainTabWhiteSweep .85s ease 0s 1 forwards;
}

@keyframes mainTabWhiteSweep {
    0% { background-position: 180% 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { background-position: -180% 0; opacity: 0; }
}

@keyframes mainTabCurrent {
    from {
        --tab-current-angle: 0deg;
        opacity: 1;
    }
    to {
        --tab-current-angle: 360deg;
        opacity: 0;
    }
}

.main-tool-tab:hover {
    color: #eafcff;
    border-color: rgba(0,217,255,.42);
    background: rgba(0,217,255,.075);
    transform: translateY(-1px);
}
.main-tool-tab.active {
    color: #fff;
    border-color: rgba(0,217,255,.62);
    background: linear-gradient(100deg, rgba(0,108,255,.30), rgba(0,217,255,.18));
    box-shadow: 0 0 22px rgba(0,217,255,.12), inset 0 0 16px rgba(255,255,255,.025);
}

.sub-tool-groups { margin-top: 7px; }
.sub-tool-group[hidden] { display: none !important; }
.sub-tool-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 5px 7px;
    border-top: 1px solid rgba(105,126,177,.12);
}
.sub-tool-label {
    flex: 0 0 auto;
    color: #626f8d;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .9px;
    padding-right: 3px;
}
.sub-tool-tabs {
    display: flex;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.sub-tool-tabs::-webkit-scrollbar { display: none; }
.sub-tool-tab {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 8px;
    color: #ffffff;
    border-color: rgba(105,126,177,.28);
    background: rgba(7,12,28,.42);
    font-size: 10px;
}

/* V66: one-time attention cues for unselected sub tabs.
   White sweep begins when the cue is added at 4s; glowing current
   travels around the full rectangular border once. */
.sub-tool-tab {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.sub-tool-tab.tab-sub-hover-attention::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%);
    background-size: 220% 100%;
    background-position: 180% 0;
    opacity: 0;
    animation: subTabWhiteSweep .85s ease 0s 1 forwards;
}

.sub-tool-tab.tab-sub-attention {
    border-color: rgba(105,126,177,.48);
}

.sub-tool-tab.tab-sub-attention::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
        from var(--sub-tab-current-angle),
        transparent 0deg,
        transparent 332deg,
        rgba(0,217,255,.08) 340deg,
        rgba(255,255,255,.98) 347deg,
        rgba(0,217,255,1) 352deg,
        rgba(255,255,255,.92) 356deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 5px rgba(0,217,255,.95))
            drop-shadow(0 0 12px rgba(0,217,255,.55));
    animation: subTabCurrent 5s linear 0s 1 forwards;
}

@keyframes subTabWhiteSweep {
    0% { background-position: 180% 0; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { background-position: -180% 0; opacity: 0; }
}

@property --sub-tab-current-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes subTabCurrent {
    from {
        --sub-tab-current-angle: 0deg;
        opacity: 1;
    }
    to {
        --sub-tab-current-angle: 360deg;
        opacity: 0;
    }
}
.sub-tool-tab:hover {
    color: var(--tool-accent, #55e6ff);
    border-color: rgba(var(--tool-rgb,0,217,255),.30);
    background: rgba(var(--tool-rgb,0,217,255),.065);
    transform: translateY(-1px);
}
.sub-tool-tab.active {
    color: #fff;
    border-color: rgba(var(--tool-rgb,0,217,255),.62);
    background: linear-gradient(100deg, rgba(var(--tool-rgb-2,0,108,255),.36), rgba(var(--tool-rgb,0,217,255),.22));
    box-shadow: 0 0 18px rgba(var(--tool-rgb,0,217,255),.12), inset 0 0 14px rgba(255,255,255,.025);
}

/* Hide the legacy Image → Anything sub-navigation. */
#anythingTab > .sub-tabs { display: none !important; }

/* Individual tool themes for the original Emoji & Art engine. */
#emojiArtTab[data-tool-theme] .panel { border-color: rgba(var(--tool-rgb),.25); }
#emojiArtTab[data-tool-theme] .panel:hover { border-color: rgba(var(--tool-rgb),.52); box-shadow: 0 28px 80px rgba(0,0,0,.52), 0 0 26px rgba(var(--tool-rgb),.09); }
#emojiArtTab[data-tool-theme] .panel h2::before { background: var(--tool-accent); box-shadow: 0 0 10px var(--tool-accent); }
#emojiArtTab[data-tool-theme] .value { color: var(--tool-accent); }
#emojiArtTab[data-tool-theme] input[type="range"] { accent-color: var(--tool-accent); }
#emojiArtTab[data-tool-theme] input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--tool-accent-2), var(--tool-accent)); }
#emojiArtTab[data-tool-theme] select:focus,
#emojiArtTab[data-tool-theme] input[type="file"]:focus { border-color: var(--tool-accent); box-shadow: 0 0 0 3px rgba(var(--tool-rgb),.09), 0 0 18px rgba(var(--tool-rgb),.08); }
#emojiArtTab[data-tool-theme] input[type="file"]::file-selector-button { background: linear-gradient(135deg, var(--tool-accent-2), var(--tool-accent)); }
#emojiArtTab[data-tool-theme] .primary-button { background: linear-gradient(135deg, var(--tool-accent-2), var(--tool-accent)); box-shadow: 0 10px 30px rgba(var(--tool-rgb),.16), 0 0 20px rgba(var(--tool-rgb),.08); }
#emojiArtTab[data-tool-theme] .secondary-button:hover { border-color: rgba(var(--tool-rgb),.55); color: var(--tool-accent); box-shadow: 0 0 18px rgba(var(--tool-rgb),.09); }
#emojiArtTab[data-tool-theme] .preview-box { border-color: rgba(var(--tool-rgb),.28); box-shadow: inset 0 0 45px rgba(0,0,0,.45), 0 12px 35px rgba(0,0,0,.30), 0 0 18px rgba(var(--tool-rgb),.035); }
#emojiArtTab[data-tool-theme] .preview-box:hover { border-color: rgba(var(--tool-rgb),.52); box-shadow: inset 0 0 50px rgba(0,0,0,.45), 0 18px 45px rgba(0,0,0,.38), 0 0 24px rgba(var(--tool-rgb),.11); }
#emojiArtTab[data-tool-theme] .generation-progress { border-color: rgba(var(--tool-rgb),.38); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 25px rgba(var(--tool-rgb),.10); }
#emojiArtTab[data-tool-theme] .generation-progress .progress-bar { background: linear-gradient(90deg, var(--tool-accent-2), var(--tool-accent)); box-shadow: 0 0 14px rgba(var(--tool-rgb),.55); }

@media (max-width: 700px) {
    .main-tool-tabs { grid-template-columns: repeat(2, 1fr); }
    .sub-tool-group { align-items: flex-start; flex-direction: column; gap: 4px; padding: 7px; }
    .sub-tool-label { padding: 0; }
    .tool-navigation { top: 4px; }
}


/* V54: mode dropdown is now controlled by the unified sub-tabs. */
#legacyModeControl { display: none !important; }


/* =========================================================
   V56 — UNIFIED TOOL WINDOW SIZE
   Every tool uses the same workspace width/spacing as the
   Unicode reference layout. No tool-specific wider window.
========================================================= */
#emojiArtTab,
#anythingTab {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

#emojiArtTab > .panel,
#anythingTab > .anything-feature-panel,
#emojiArtTab > .workspace,
#anythingTab > .workspace {
    width: 100% !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

#emojiArtTab > .workspace,
#anythingTab > .workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    margin-top: 14px !important;
    align-items: stretch !important;
}

#emojiArtTab > .workspace > .panel,
#anythingTab > .workspace > .panel {
    min-width: 0;
    width: 100% !important;
    box-sizing: border-box;
}

#emojiArtTab > .workspace .preview-box,
#anythingTab > .workspace .preview-box {
    width: 100% !important;
    height: 360px !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}

/* There is no category-name label beside the tool sub-tabs. */
.sub-tool-label { display: none !important; }

/* The old Mode selector is internal only; sub-tabs are its UI. */
#legacyModeControl { display: none !important; }

@media (max-width: 700px) {
    #emojiArtTab,
    #anythingTab,
    #emojiArtTab > .panel,
    #anythingTab > .anything-feature-panel,
    #emojiArtTab > .workspace,
    #anythingTab > .workspace {
        width: 100% !important;
        max-width: 100% !important;
    }

    #emojiArtTab > .workspace,
    #anythingTab > .workspace {
        grid-template-columns: 1fr !important;
    }

    #emojiArtTab > .workspace .preview-box,
    #anythingTab > .workspace .preview-box {
        height: 320px !important;
    }
}

/* V62 — force hidden tool workspaces to stay hidden.
   The shared workspace grid rule uses !important, so the
   normal [hidden] browser rule must be explicitly restored. */
#anythingTab > .workspace[hidden],
#anythingTab > .workspace[aria-hidden="true"] {
    display: none !important;
}

#anythingTab > .anything-feature-panel[hidden] {
    display: none !important;
}


/* =========================================================
   POLISH — UPLOAD, OUTPUT ACTIONS & RESPONSIVE DETAILS
========================================================= */

.upload-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px dashed rgba(91, 231, 255, .30);
    border-radius: 10px;
    background: linear-gradient(105deg, rgba(0,217,255,.035), rgba(36,119,255,.05), rgba(155,61,255,.035));
    color: #8494b8;
    font-size: 11px;
    cursor: pointer;
    outline: none;
    transition: border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.upload-dropzone strong { color: #dcecff; }

.dropzone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #8deaff;
    border: 1px solid rgba(0,217,255,.35);
    background: rgba(0,217,255,.08);
    font-size: 16px;
    font-weight: 800;
    transition: transform .25s ease, box-shadow .25s ease;
}

.upload-dropzone:hover,
.upload-dropzone:focus-visible,
.upload-dropzone.drag-active {
    border-color: rgba(0,217,255,.72);
    color: #c9e7ff;
    background: linear-gradient(105deg, rgba(0,217,255,.10), rgba(36,119,255,.11), rgba(155,61,255,.07));
    box-shadow: 0 0 24px rgba(0,217,255,.10), inset 0 0 20px rgba(0,217,255,.04);
    transform: translateY(-1px);
}

.upload-dropzone.drag-active .dropzone-icon,
.upload-dropzone:hover .dropzone-icon {
    transform: translateY(-2px);
    box-shadow: 0 0 14px rgba(0,217,255,.25);
}

.upload-dropzone.has-file {
    border-style: solid;
    border-color: rgba(102,224,138,.32);
}

.download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.download-buttons .secondary-button {
    flex: 1 1 120px;
}

.reset-button {
    border-color: rgba(255,120,160,.30) !important;
}

.reset-button:hover {
    border-color: rgba(255,120,160,.60) !important;
}

.success-flash {
    border-color: rgba(102,224,138,.65) !important;
    box-shadow: 0 0 22px rgba(102,224,138,.16) !important;
}

@media (max-width: 900px) {
    .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .preview-box { height: 360px; }
}

@media (max-width: 700px) {
    .header {
        padding-top: 22px;
    }

    .header-inner {
        flex-direction: column;
        gap: 13px;
    }

    .header-donation {
        position: static;
        transform: none;
        align-self: center;
        order: 2;
        min-height: 34px;
        margin: 0 auto;
    }

    .header-benefits {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .header-benefits::-webkit-scrollbar {
        display: none;
    }

    .container {
        width: min(100% - 20px, 1100px);
        padding-top: 18px;
    }

    .main-tool-tabs,
    .sub-tool-tabs {
        overflow-x: auto;
        scrollbar-width: thin;
        justify-content: flex-start;
    }

    .main-tool-tab,
    .sub-tool-tab {
        flex: 0 0 auto;
    }

    .controls {
        grid-template-columns: 1fr;
    }

    .workspace {
        grid-template-columns: 1fr;
    }

    .preview-box {
        height: min(72vw, 360px);
        min-height: 260px;
    }

    .download-buttons .secondary-button {
        flex-basis: calc(50% - 4px);
    }
}

@media (max-width: 430px) {
    .header h1 { font-size: 27px; }
    .header-tagline { font-size: 11px; line-height: 1.3; }
    .header-benefits span { font-size: 10px; padding: 6px 9px; }
    .panel { padding: 13px; }
    .download-buttons .secondary-button { flex-basis: 100%; }
    .upload-dropzone { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .upload-dropzone,
    .dropzone-icon,
    .header-tagline,
    .panel,
    button { animation: none !important; transition: none !important; }
}


/* =========================================================
   V78 — POLISHED IMAGE → ANYTHING WORKSPACES
========================================================= */

/* Consistent descriptions: quiet, readable and never bold. */
#anythingTab .anything-feature-panel > .feature-description {
    display: block;
    margin: -2px 0 16px;
    color: #8f9bb7;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: .08px;
    max-width: 760px;
}

#anythingTab .anything-feature-panel > .feature-description::first-letter {
    color: inherit;
}

/* The SVG tool had plain text instead of the shared description element. */
#anythingTab .anything-feature-panel > .feature-description + .controls {
    margin-top: 0;
}

/* Better control grid: 3 tools = 3 columns, 4 tools = 4 columns,
   5 tools naturally wrap without awkward oversized empty space. */
#anythingTab .svg-controls {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 11px;
    margin-bottom: 13px;
}

#anythingTab .control-group {
    gap: 6px;
}

#anythingTab .control-group label {
    font-size: 10px;
    color: #aebbd6;
    letter-spacing: .3px;
}

#anythingTab .value {
    font-variant-numeric: tabular-nums;
}

/* Replace the browser-default file input with the same polished upload card
   used by the rest of the application. The actual input remains accessible. */
#anythingTab input.polished-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.anything-upload-zone {
    position: relative;
    min-height: 48px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px dashed rgba(var(--tool-rgb, 0,217,255), .30);
    border-radius: 9px;
    background: linear-gradient(110deg, rgba(var(--tool-rgb, 0,217,255), .045), rgba(7,12,29,.72));
    color: #8c99b7;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}

.anything-upload-zone::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.055) 50%, transparent 80%);
    transform: translateX(-100%);
    transition: transform .5s ease;
}

.anything-upload-zone:hover::after,
.anything-upload-zone.drag-active::after {
    transform: translateX(100%);
}

.anything-upload-zone:hover,
.anything-upload-zone:focus-visible,
.anything-upload-zone.drag-active {
    border-color: rgba(var(--tool-rgb, 0,217,255), .70);
    background: linear-gradient(110deg, rgba(var(--tool-rgb, 0,217,255), .10), rgba(7,12,29,.86));
    box-shadow: 0 0 20px rgba(var(--tool-rgb, 0,217,255), .10), inset 0 0 16px rgba(var(--tool-rgb, 0,217,255), .035);
    transform: translateY(-1px);
    outline: none;
}

.anything-upload-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--tool-rgb, 0,217,255), .35);
    border-radius: 8px;
    color: var(--tool-accent, #55e6ff);
    background: rgba(var(--tool-rgb, 0,217,255), .08);
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 0 12px rgba(var(--tool-rgb, 0,217,255), .08);
}

.anything-upload-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.anything-upload-copy strong {
    color: #dce8fb;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 800;
}

.anything-upload-copy small {
    color: #71809f;
    font-size: 9px;
    line-height: 1.15;
}

.anything-upload-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #677592;
    font-size: 9px;
}

.anything-upload-zone.has-file .anything-upload-name {
    color: #a9eec0;
}


/* Consistent upload text hierarchy across every Image → Anything mode. */
.anything-upload-copy strong,
#emojiArtTab .emoji-upload-copy strong {
    font-size: 12px !important;
    line-height: 1.15;
    font-weight: 800;
    color: #dce8fb;
}

.anything-upload-copy small,
#emojiArtTab .emoji-upload-copy small {
    font-size: 9px !important;
    line-height: 1.15;
    font-weight: 500;
    color: #71809f;
}

#emojiArtTab .emoji-upload-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}

/* Make the shared workspaces feel like a deliberate source → result pair. */
#anythingTab .workspace {
    position: relative;
    gap: 12px !important;
    margin-top: 12px !important;
}

#anythingTab .workspace > .panel {
    padding: 13px;
    border-radius: 14px;
}

#anythingTab .workspace > .panel h2 {
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: .65px;
}

#anythingTab .workspace > .panel > p {
    margin: 8px 0;
    color: #7886a3;
    font-size: 10px;
    line-height: 1.65;
}

#anythingTab .workspace .preview-box {
    height: 330px !important;
    border-radius: 11px;
    background: radial-gradient(circle at 50% 45%, rgba(var(--tool-rgb,0,217,255), .025), transparent 55%), #03050d;
}

#anythingTab .workspace .source-preview-box {
    background: radial-gradient(circle at 50% 45%, rgba(var(--tool-rgb,0,217,255), .03), transparent 55%), #050817;
}

#anythingTab .anything-source-image {
    max-width: 92%;
    max-height: 92%;
}

#anythingTab .placeholder {
    padding: 22px;
    color: #596782;
    font-size: 11px;
    line-height: 1.55;
}

#anythingTab .download-buttons {
    margin-top: 9px;
    gap: 7px;
}

#anythingTab .download-buttons .secondary-button {
    min-height: 32px;
    padding: 0 12px;
    font-size: 10px;
}

/* SVG preview uses transparency, but still gets the same polished frame. */
#anythingTab .svg-preview-box {
    background:
        linear-gradient(45deg, #0e1320 25%, transparent 25%) 0 0/18px 18px,
        linear-gradient(-45deg, #0e1320 25%, transparent 25%) 0 9px/18px 18px,
        linear-gradient(45deg, transparent 75%, #0e1320 75%) 9px -9px/18px 18px,
        linear-gradient(-45deg, transparent 75%, #0e1320 75%) -9px 0/18px 18px,
        #070a13;
}

/* The emoji uploader gets the same single polished upload surface. */
#emojiArtTab input#imageInput {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#emojiArtTab .upload-dropzone {
    min-height: 48px;
    margin-top: 0;
    display: grid;
    grid-template-columns: 30px 1fr auto;
    text-align: left;
    justify-content: initial;
    padding: 7px 10px;
    border-color: rgba(var(--tool-rgb,255,159,67), .30);
    background: linear-gradient(110deg, rgba(var(--tool-rgb,255,159,67), .055), rgba(7,12,29,.72));
}

#emojiArtTab .upload-dropzone::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.055) 50%, transparent 80%);
    transform: translateX(-100%);
    transition: transform .5s ease;
}

#emojiArtTab .upload-dropzone:hover::after,
#emojiArtTab .upload-dropzone.drag-active::after {
    transform: translateX(100%);
}

#emojiArtTab .dropzone-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--tool-accent, #ff9f43);
    border-color: rgba(var(--tool-rgb,255,159,67), .35);
    background: rgba(var(--tool-rgb,255,159,67), .08);
}

#emojiArtTab .upload-dropzone::before {
    display: none;
}

#emojiArtTab .upload-dropzone > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}

#emojiArtTab .upload-dropzone > span:nth-child(2) strong {
    color: #dce8fb;
    font-size: 12px !important;
    line-height: 1.15;
    font-weight: 800;
}

#emojiArtTab .upload-dropzone > span:nth-child(2) small {
    color: #71809f;
    font-size: 9px !important;
    line-height: 1.15;
}

.emoji-database-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    #anythingTab .svg-controls {
        grid-template-columns: 1fr;
    }

    #anythingTab .workspace .preview-box {
        height: min(76vw, 330px) !important;
        min-height: 250px;
    }

    .anything-upload-zone {
        grid-template-columns: 28px minmax(0,1fr);
    }

    .anything-upload-name {
        grid-column: 2;
        max-width: none;
    }
}


/* Consistent description for the original Emoji/Art tool family. */
.tool-feature-description {
    margin: -2px 0 15px;
    color: #8f9bb7;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: .08px;
    max-width: 760px;
}

@media (max-width: 520px) {
    .tool-feature-description {
        font-size: 10px;
        line-height: 1.6;
    }
}

/* V82: keep the upload headline on one line in every mode. */
.anything-upload-copy,
#emojiArtTab .emoji-upload-copy,
#emojiArtTab .upload-dropzone > span:nth-child(2) {
    min-width: 0;
    white-space: nowrap;
    text-align: left;
}

.anything-upload-copy strong,
#emojiArtTab .emoji-upload-copy strong,
#emojiArtTab .upload-dropzone > span:nth-child(2) strong {
    display: block;
    white-space: nowrap;
}

.anything-upload-copy small,
#emojiArtTab .emoji-upload-copy small,
#emojiArtTab .upload-dropzone > span:nth-child(2) small {
    display: block;
    white-space: nowrap;
}

.anything-upload-name {
    max-width: 105px;
}


/* V88: sub-tab attention uses the exact same white-gradient sweep
   technique and animation as the main-tab hover attention effect. */
.sub-tool-tab.tab-sub-hover-attention::before,
.sub-tool-tab:not(.active):hover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%);
    background-size: 220% 100%;
    background-position: 180% 0;
    opacity: 0;
    animation: mainTabWhiteSweep .85s ease 0s 1 forwards;
}


.footer a { color: #8f9cc0; text-decoration: none; transition: color .2s ease, text-shadow .2s ease; }
.footer a:hover { color: #fff; text-shadow: 0 0 10px rgba(80,190,255,.55); }

/* ========================================
   FEATURE RESET / ACTION BUTTONS
   ======================================== */
.feature-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.feature-action-buttons .primary-button,
.feature-action-buttons .reset-button {
    min-width: 120px;
}

.feature-action-buttons .reset-button {
    margin: 0;
}

@media (max-width: 520px) {
    .feature-action-buttons {
        width: 100%;
    }

    .feature-action-buttons .primary-button,
    .feature-action-buttons .reset-button {
        flex: 1 1 140px;
    }
}


/* Upload-image toast */
.image-anything-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 99999;
    max-width: min(90vw, 360px);
    padding: 11px 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    background: rgba(7,17,31,.94);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 10px 32px rgba(0,0,0,.38), 0 0 20px rgba(0,210,255,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    pointer-events: none;
}
.image-anything-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
@media (max-width: 700px) {
    .image-anything-toast { bottom: 18px; max-width: calc(100vw - 32px); }
}


/* ========================================
   SUPPORT / DONATE MODAL
   ======================================== */
.donate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    height: 34px;
    padding: 0 18px;
    border: 1px solid rgba(0, 0, 255, .65);
    border-radius: 7px;
    background: #0000ff;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(0, 0, 255, .2);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.donate-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(0, 0, 255, .28);
}
.donate-button:active { transform: translateY(0) scale(.98); }

.support-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    overscroll-behavior: none;
}
.support-modal[hidden] { display: none; }
.support-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 7, 15, .72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: supportFadeIn .2s ease both;
}
.support-dialog {
    position: relative;
    width: min(420px, 100%);
    box-sizing: border-box;
    padding: 28px;
    border: 1px solid rgba(92, 174, 255, .28);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(10, 25, 44, .98), rgba(6, 14, 27, .98));
    color: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 45px rgba(51,164,255,.12);
    animation: supportPopIn .25s cubic-bezier(.2,.8,.2,1) both;
}
.support-close-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #9eacc4;
    font-size: 26px;
    cursor: pointer;
}
.support-close-icon:hover { background: rgba(255,255,255,.1); color: #fff; }
.support-header {
    padding-right: 38px;
    margin-bottom: 22px;
}
.support-header h2 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.25;
}
.support-header p {
    margin: 0;
    color: #aebbd0;
    font-size: 14px;
    line-height: 1.55;
}
.support-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.support-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    box-sizing: border-box;
    padding: 0 16px;
    border: 1px solid rgba(130,160,200,.25);
    border-radius: 13px;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    background: rgba(4,12,24,.72);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.support-option:hover {
    transform: translateY(-1px);
    border-color: rgba(130,190,255,.55);
    background: rgba(12,30,52,.9);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.support-option-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: 19px;
}
@keyframes supportFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes supportPopIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
    .support-modal { padding: 12px; align-items: center; }
    .support-dialog { padding: 24px 18px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .donate-button, .support-backdrop, .support-dialog { animation: none !important; transition: none !important; }
}
body.support-modal-open { overflow: hidden; }

/* ========================================
   FEEDBACK WIDGET / MODAL
   ======================================== */
/* Dedicated viewport layer: no transformed ancestor, so the FAB is anchored
   directly to the browser viewport and cannot scroll with page content. */
.feedback-viewport-layer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 2147483000 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    overflow: visible !important;
}

.feedback-fab {
    position: fixed !important;
    inset: auto 6px 14px auto;
    right: 6px !important;
    bottom: 14px !important;
    z-index: 2147483001 !important;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 52px;
    padding: 0 18px 0 15px;
    border: 1px solid rgba(91, 184, 255, .5);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(18, 45, 78, .96), rgba(8, 21, 40, .96));
    color: #fff;
    font: inherit;
    font-weight: 800;
    letter-spacing: .2px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(71, 190, 255, .38);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateX(22px);
    animation: feedbackFabEnter .55s cubic-bezier(.2,.8,.2,1) .08s forwards, feedbackFabFloat 3s ease-in-out .7s infinite, feedbackFabPulse 2.8s ease-out .7s infinite;
    will-change: transform, opacity, box-shadow;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feedback-fab::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.22) 48%, transparent 78%);
    transform: translateX(-130%);
    pointer-events: none;
    animation: feedbackFabShine 4.2s ease-in-out infinite;
}
.feedback-fab:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: rgba(110, 210, 255, .9);
    box-shadow: 0 14px 36px rgba(0,0,0,.42), 0 0 24px rgba(55, 180, 255, .28);
    animation-play-state: paused;
}
.feedback-fab:active { transform: translateY(-1px) scale(.98); }
.feedback-fab-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(83, 190, 255, .16);
    font-size: 16px;
    box-shadow: inset 0 0 12px rgba(83,190,255,.14);
}
.feedback-fab-label { position: relative; }
@keyframes feedbackFabEnter {
    from { opacity: 0; transform: translateX(22px) scale(.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes feedbackFabFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes feedbackFabPulse {
    0%, 62%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(71,190,255,.34); }
    74% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 9px rgba(71,190,255,0); }
}
@keyframes feedbackFabShine {
    0%, 55% { transform: translateX(-130%); }
    75%, 100% { transform: translateX(130%); }
}
.feedback-modal {
    position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center; padding:20px;
    overflow:hidden; overscroll-behavior:none;
}
.feedback-modal[hidden] { display:none; }
.feedback-backdrop {
    position:absolute; inset:0; background:rgba(2,7,15,.72); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
    animation:feedbackFadeIn .2s ease both;
}
.feedback-dialog {
    position:relative; width:min(520px,100%); max-height:calc(100dvh - 40px); overflow:hidden; padding:28px; overscroll-behavior:none; border:1px solid rgba(92,174,255,.28);
    border-radius:22px; background:linear-gradient(145deg,rgba(10,25,44,.98),rgba(6,14,27,.98));
    box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 45px rgba(51,164,255,.12); color:#fff; animation:feedbackPopIn .25s cubic-bezier(.2,.8,.2,1) both;
}
.feedback-close {
    position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; border-radius:10px; background:transparent; color:#9eacc4; font-size:26px; cursor:pointer;
}
.feedback-close:hover { background:rgba(255,255,255,.1); color:#fff; }
.feedback-header { display:flex; gap:12px; align-items:center; padding-right:40px; margin-bottom:22px; }
.feedback-icon { font-size:28px; }
.feedback-header h2 { margin:0 0 3px; font-size:22px; }
.feedback-header p { margin:0; color:#9eacc4; font-size:13px; }
.feedback-form { display:flex; flex-direction:column; gap:15px; }
.feedback-form label { display:flex; flex-direction:column; gap:7px; }
.feedback-form label > span { color:#dce7f7; font-size:13px; font-weight:700; }
.feedback-form label small { color:#8998b0; font-weight:500; }
.feedback-form select, .feedback-form input, .feedback-form textarea { width:100%; box-sizing:border-box; border:1px solid rgba(130,160,200,.25); border-radius:12px; background:rgba(4,12,24,.8); color:#fff; padding:12px 13px; outline:none; }
.feedback-form select:focus, .feedback-form input:focus, .feedback-form textarea:focus { border-color:rgba(78,190,255,.75); box-shadow:0 0 0 3px rgba(78,190,255,.1); }
.feedback-form textarea { resize:vertical; min-height:120px; }
.feedback-form select option { background:#0a1728; color:#fff; }
.feedback-submit { width:100%; border:0; border-radius:12px; padding:13px 16px; background:linear-gradient(135deg,#36a9ff,#6476ff); color:#fff; font-weight:800; cursor:pointer; transition:.2s; }
.feedback-submit:hover { filter:brightness(1.08); transform:translateY(-1px); }
.feedback-submit:disabled { opacity:.65; cursor:wait; transform:none; }
.feedback-status { min-height:18px; margin:0; text-align:center; font-size:13px; color:#9eacc4; }
.feedback-status.success { color:#7ff0c0; }
.feedback-status.error { color:#ff9e9e; }
.feedback-submit-frame { position:absolute; width:1px; height:1px; border:0; opacity:0; pointer-events:none; }
@keyframes feedbackFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes feedbackPopIn { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
@media (max-width:600px) {
    .feedback-fab { right:4px !important; bottom:10px !important; height:48px; padding:0 15px 0 12px; }
    .feedback-modal { padding:12px; align-items:end; }
    .feedback-dialog { max-height:92vh; border-radius:18px; padding:22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .feedback-fab, .feedback-fab::before, .feedback-backdrop, .feedback-dialog { animation:none !important; opacity:1; transform:none; }
}
body.feedback-modal-open { overflow: hidden; }

@media (max-height: 700px) {
    .feedback-modal { padding:12px; }
    .feedback-dialog { padding:20px; max-height:calc(100dvh - 24px); }
    .feedback-header { margin-bottom:14px; }
    .feedback-form { gap:10px; }
    .feedback-form textarea { min-height:82px; height:82px; }
    .feedback-form select, .feedback-form input, .feedback-form textarea { padding:9px 11px; }
}


/* SEO conversion guide: visible, useful content; no hidden keyword text. */
.conversion-links-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.conversion-links-grid article { border:1px solid var(--border-color,rgba(255,255,255,.12)); border-radius:12px; padding:14px; background:rgba(255,255,255,.025); }
.conversion-links-grid h3 { margin:0 0 7px; font-size:1rem; }
.conversion-links-grid p { margin:0; line-height:1.55; }
@media (max-width:900px) { .conversion-links-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .conversion-links-grid { grid-template-columns:1fr; } }

/* ========================================
   IMAGE CONVERTER
   ======================================== */
.image-converter-panel {
    --tool-rgb: 90, 160, 255;
    --tool-rgb-2: 40, 100, 220;
    --tool-accent: #5aa0ff;
    --tool-accent-2: #2864dc;
}
.image-converter-panel .control-group:focus-within {
    border-color: var(--tool-accent);
    box-shadow: 0 0 0 1px rgba(var(--tool-rgb), .18);
}
.converter-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.converter-color-row input[type="color"] {
    width: 52px;
    height: 38px;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.16);
    background: transparent;
    cursor: pointer;
}
#converterBackgroundValue {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
    opacity: .82;
}
/* Converter upload uses the exact same drag-and-drop surface as the other tools. */
.image-converter-panel .converter-upload-group {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.image-converter-panel .converter-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.image-converter-panel .converter-upload-zone {
    width: 100%;
    box-sizing: border-box;
}

.converter-workspace {
    margin-top: 18px;
}
.converter-workspace .preview-box img {
    display: block;
    width: auto;
    height: auto;
    max-width: 96%;
    max-height: 96%;
    object-fit: contain;
    object-position: center;
    flex: 0 1 auto;
}
@media (max-width: 760px) {
    .converter-workspace {
        grid-template-columns: 1fr;
    }
}

/* V124 — converter option groups must disappear completely when the active mode is JPG → PNG. */
.image-converter-panel .control-group[hidden] {
    display: none !important;
}

.image-converter-panel .control-group[hidden] { display: none !important; }



/* V132 — converter upload copy matches the other Image Anything upload boxes: two stacked rows. */
.image-converter-panel .converter-upload-zone {
    min-height: 58px;
}
.image-converter-panel .converter-upload-zone .emoji-upload-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    text-align: left;
    white-space: normal;
}
.image-converter-panel .converter-upload-zone .emoji-upload-copy strong,
.image-converter-panel .converter-upload-zone .emoji-upload-copy small {
    display: block;
    white-space: nowrap;
}

/* V128 — converter preview images and progress indicator */
.image-converter-panel .converter-workspace .preview-box {
    min-width: 0;
}
.image-converter-panel .converter-workspace .preview-box img {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    height: auto;
    max-width: 94%;
    max-height: 94%;
    object-fit: contain;
    object-position: center;
}
.image-converter-panel .converter-workspace .generation-progress {
    z-index: 5;
}


/* SEO FAQ: accessible, crawlable content that matches the site's existing panels. */
.seo-faq .faq-list {
    display: grid;
    gap: 10px;
}
.seo-faq details {
    border: 1px solid rgba(98, 217, 255, 0.18);
    border-radius: 10px;
    background: rgba(7, 17, 31, 0.45);
    padding: 0 14px;
}
.seo-faq summary {
    cursor: pointer;
    font-weight: 700;
    padding: 14px 2px;
    color: inherit;
}
.seo-faq details p {
    margin: 0 2px 14px;
}

/* V138 — Image Converter workspace matches the exact width of the other model workspaces. */
.image-converter-panel .converter-workspace {
    width: 100% !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    .image-converter-panel .converter-workspace {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* V140 — Converter preview placeholders are always centered in the preview boxes. */
.image-converter-panel .converter-workspace .preview-box > .placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 20px;
    margin: 0;
    text-align: center;
    z-index: 2;
}

/* V139 — Image Converter matches the same 860px content width as every other model. */
#imageConverterTab {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

#imageConverterTab > .image-converter-panel,
#imageConverterTab > .converter-workspace {
    width: 100% !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

#imageConverterTab > .converter-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
}

@media (max-width: 700px) {
    #imageConverterTab,
    #imageConverterTab > .image-converter-panel,
    #imageConverterTab > .converter-workspace {
        width: 100% !important;
        max-width: 100% !important;
    }
    #imageConverterTab > .converter-workspace {
        grid-template-columns: 1fr !important;
    }
}


/* Keep the emoji database badge exclusive to the Emoji tool. */
.emoji-database-benefit {
    display: none !important;
}

#emojiArtTab .emoji-database-benefit {
    display: flex !important;
}