/* style.css - CRXZYBOY - UpScale — โหมดเพิ่มความคมชัดภาพ */

/* Prompt is loaded by the document when online; local() avoids broken
   ../assets/fonts requests on installations that do not bundle font files. */
@font-face { font-family:'Prompt'; src:local('Prompt'); font-weight:400; font-display:swap; }
@font-face { font-family:'Prompt'; src:local('Prompt'); font-weight:500 600; font-display:swap; }
@font-face { font-family:'Prompt'; src:local('Prompt'); font-weight:700 800; font-display:swap; }

:root {
    --red-primary: #E11D2A;
    --red-gradient: linear-gradient(135deg, #FF3B44 0%, #E11D2A 55%, #A8121C 100%);
    --red-glow: rgba(225, 29, 42, 0.32);

    --silver-light: #F8FAFC;
    --silver-mid: #CBD5E1;
    --silver-dark: #94A3B8;

    --bg-dark: #0B0B0E;
    --bg-card: #131318;
    --border-card: #23232B;
    --border-hover: rgba(225, 29, 42, 0.65);

    --font-main: 'Prompt', sans-serif;
    --radius: 14px;
    --transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Scrollbar (เข้าชุดกับหน้าต่างหลัก) ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(10, 10, 16, 0.8); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #FF2A2E 0%, #A80003 100%); border-radius: 10px; box-shadow: 0 0 10px rgba(235, 0, 4, 0.7); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #FF334B 0%, #E6001C 100%); }

/* ---------- License gate ---------- */
body.license-locked #app-shell {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

.license-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(2, 2, 6, 0.75);
    padding: 20px;
}

.license-gate-overlay.active { display: flex; }

.license-gate-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-card);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    padding: 32px;
    max-width: 380px;
    width: 100%;
    text-align: center;
}

.license-gate-icon { font-size: 2.4rem; margin-bottom: 10px; }

.license-gate-card h2 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.license-gate-desc {
    font-size: 0.8rem;
    color: var(--silver-mid);
    margin-bottom: 18px;
    line-height: 1.5;
}

.license-gate-form {
    display: flex;
    gap: 8px;
}

#license-gate-input {
    flex: 1;
    font-family: var(--font-main);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--silver-light);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
}

#license-gate-input:focus { outline: 1.5px solid var(--red-primary); }

#license-gate-verify {
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 0.85rem;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    color: #FFFFFF;
    background: var(--red-gradient);
    white-space: nowrap;
    transition: var(--transition);
}

#license-gate-verify:hover:not(:disabled) { transform: translateY(-2px); }
#license-gate-verify:disabled { opacity: 0.6; cursor: not-allowed; }

.license-gate-message {
    font-size: 0.78rem;
    margin-top: 12px;
    min-height: 1.2em;
    color: #6EE7B7;
}

.license-gate-message.is-error { color: #FF6B6B; }

.license-gate-hint {
    font-size: 0.7rem;
    color: var(--silver-dark);
    margin-top: 14px;
    line-height: 1.5;
}

html, body {
    width: 100%;
    min-height: 100vh;
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    background-image: radial-gradient(ellipse at 15% 0%, rgba(225, 29, 42, 0.12), transparent 520px);
    background-attachment: fixed;
    color: var(--silver-light);
}

#app-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 28px 30px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 700px) {
    #app-shell {
        padding: 12px;
    }
}

/* Force the same Prompt family across every native control and injected panel. */
html, body, button, input, textarea, select, option, optgroup, table, th, td {
    font-family: var(--font-main) !important;
}

/* Prompt is the single UI typeface across the entire product. The universal
   rule also covers dynamically injected modals, Toasts, queue cards and
   controls created by JavaScript. Emoji still use the platform fallback when
   Prompt does not contain a glyph. */
html, body, body * {
    font-family: var(--font-main) !important;
}

/* ---------- Header ---------- */
#app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(110deg,#101015 0%,#19181d 48%,#111116 100%);
    border: 0;
    border-bottom: 1px solid #ffffff0c;
    border-radius: 0;
    padding: 14px 18px;
    box-shadow: none;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 42px; width: auto; object-fit: contain; border-radius: 10px; }
.brand-text { display: flex; flex-direction: column; }
.brand-title { font-size: 1.06rem; font-weight: 800; letter-spacing: -.3px; }
.brand-sub { font-size: 0.62rem; color: #5C5C68; letter-spacing: 1px; margin-top: 3px; }
/* ---------- Help panel (วิธีใช้งาน + คำเตือน รวมเป็นแถบเดียว ปิดไว้เป็นค่าเริ่มต้น ลดความรก) ---------- */
#help-panel {
    background: var(--bg-card);
    border: 1.5px solid var(--border-card);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

#help-panel > summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--silver-mid);
    display: flex;
    align-items: center;
    gap: 6px;
}

#help-panel > summary::-webkit-details-marker { display: none; }
#help-panel > summary::before { content: '▸'; color: var(--silver-dark); }
#help-panel[open] > summary::before { content: '▾'; }

.help-panel-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 0 18px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
}

@media (max-width: 700px) {
    .help-panel-body { grid-template-columns: 1fr; }
}

.help-col-title {
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.info-title { color: var(--silver-light); }
.warning-title { color: #FFD666; }

.info-steps, .warning-list {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-steps li, .warning-list li {
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--silver-mid);
}

.warning-list li strong { color: #FFD666; }

.help-dialog {
    width: min(980px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 30px;
}
.help-dialog .help-panel-body {
    grid-template-columns: 1fr;
    border-top: 0;
    padding: 4px 0 0;
}
.help-dialog .help-col {
    padding: 16px;
    border: 1px solid rgba(190, 24, 93, .12);
    border-radius: 14px;
    background: rgba(255, 247, 251, .72);
}
.help-dialog .info-title { color: #b31359; }
.help-dialog .warning-title { color: #b45309; }
.help-dialog .info-steps li,
.help-dialog .warning-list li { color: #6f3852; }
.help-dialog .warning-list li strong { color: #b45309; }
@media (min-width: 900px) {
    .help-dialog .help-panel-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .help-dialog { padding: 22px 16px 18px; }
}

/* ---------- Main layout ---------- */
#app-main {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: stretch;
    flex: 1;
}

@media (max-width: 860px) {
    #app-main { grid-template-columns: 1fr; }
}

/* ---------- Canvas panel ---------- */
#canvas-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ตอนกำลังประมวลผลอยู่ ให้กรอบทั้งหมดเรืองแสงเบาๆ เป็นจังหวะ ให้รู้สึกว่ากำลังทำงานอยู่จริง */
#canvas-panel.is-processing {
    border-color: var(--red-primary);
    animation: canvasPulse 1.8s ease-in-out infinite;
}

@keyframes canvasPulse {
    0%, 100% { box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 0 rgba(235, 0, 4, 0); }
    50% { box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 28px rgba(235, 0, 4, 0.55); }
}

/* ไฮไลต์ตอนลากไฟล์มาวางเหนือหน้าเว็บ */
#dropzone.drag-over #src-box {
    border-color: var(--silver-light);
    border-style: solid;
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.015);
}

/* เด้ง flash เขียวรอบรูปผลลัพธ์ตอนประมวลผลเสร็จ ให้รู้สึกว่า "เสร็จแล้วนะ" ชัดเจน */
#dest-box.flash-done {
    animation: flashDone 0.9s ease-out;
}

@keyframes flashDone {
    0% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); border-color: rgba(255, 255, 255, 0.18); }
    30% { box-shadow: 0 0 30px rgba(16, 185, 129, 0.75); border-color: #10B981; }
    100% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); border-color: rgba(255, 255, 255, 0.18); }
}

#dest.result-ready {
    animation: fadeInResult 0.5s ease-out;
}

@keyframes fadeInResult {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

/* ---------- Step indicator ---------- */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
    transition: var(--transition);
}

.step-item.active { opacity: 1; }

.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.72rem;
    font-weight: 800;
}

.step-item.active .step-num {
    background: var(--red-gradient);
    border-color: transparent;
    color: #FFFFFF;
}

.step-item.done .step-num { background: #10B981; border-color: transparent; color: #FFFFFF; }

.step-label { font-size: 0.7rem; font-weight: 700; color: var(--silver-mid); white-space: nowrap; }

.step-line { width: 30px; height: 1px; background: rgba(255, 255, 255, 0.15); }

/* ---------- Progress bar ---------- */
#progress-bar-wrap {
    display: none;
    align-items: center;
    gap: 10px;
}

#progress-bar-wrap.is-active { display: flex; }

#progress-bar-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

#progress-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--red-gradient);
    transition: width 0.3s ease;
}

#progress-bar-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--silver-mid);
    min-width: 3.2em;
    text-align: right;
}

#dropzone {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 28px minmax(220px, 1fr);
    align-items: stretch;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.frame-block {
    position: relative;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.frame-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--silver-dark);
    text-align: center;
}

#src-box, #dest-box {
    position: relative;
    flex: 1;
    min-width: 220px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px dashed rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
}

#src-box, #dest-box {
    min-height: min(62vh, 680px);
}

#src-box:hover { border-color: var(--border-hover); }

#src, #dest {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    cursor: zoom-in;
}

#dest { background: repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%, transparent 0% 50%) 50% / 16px 16px; }

.arrow-sep {
    align-self: center;
    font-size: 1.4rem;
    color: var(--silver-dark);
}

#dest-box:fullscreen {
    width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
    background: #030305;
}

#dest-box:fullscreen #dest {
    max-width: 100vw;
    max-height: 100vh;
}

@media (max-width: 760px) {
    #dropzone {
        grid-template-columns: 1fr;
    }

    .arrow-sep {
        display: none;
    }

    #dest-box {
        min-height: 48vh;
    }
}

#dropzone-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 12px;
    cursor: pointer;
    color: var(--silver-mid);
    background: rgba(5, 5, 8, 0.35);
}

.dropzone-icon { font-size: 2.2rem; }
#dropzone-hint p { font-size: 0.8rem; line-height: 1.5; max-width: 220px; }

#src-box.has-image #dropzone-hint { display: none; }

#change-image-btn {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    z-index: 2;
}

#src-box.has-image #change-image-btn { display: flex; }

#remove-image-btn {
    display: none;
    position: absolute;
    top: 8px;
    right: 44px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    z-index: 2;
    color: inherit;
}

#src-box.has-image #remove-image-btn { display: flex; }
#remove-image-btn:hover { background: rgba(235, 0, 4, 0.55); }

#file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

#paste-button a {
    text-decoration: none;
    margin-left: 4px;
}

#message {
    text-align: center;
    font-size: 0.85rem;
    color: var(--silver-mid);
    min-height: 1.4em;
}

#button-box {
    display: flex;
    gap: 10px;
    justify-content: center;
}

#start, #stop {
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 0.9rem;
    border: none;
    border-radius: 12px;
    padding: 12px 22px;
    cursor: pointer;
    color: #FFFFFF;
    transition: var(--transition);
}

#start {
    background: var(--red-gradient);
    box-shadow: 0 6px 22px rgba(235, 0, 4, 0.5);
}

#start:hover:not(:disabled) { transform: translateY(-2px); }

#start:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

#stop {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.7;
}

#stop:hover { background: rgba(255, 255, 255, 0.15); opacity: 1; }

/* ตอนกำลังประมวลผลอยู่ ปุ่มหยุดสำคัญกว่า ให้เด่นขึ้นมา */
#canvas-panel.is-processing #stop {
    opacity: 1;
    border-color: rgba(255, 100, 100, 0.5);
    background: rgba(235, 0, 4, 0.15);
}

.btn-icon { margin-right: 2px; }

#cancel {
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 100, 100, 0.5);
    border-radius: 12px;
    padding: 12px 22px;
    cursor: pointer;
    color: #FFFFFF;
    background: rgba(235, 0, 4, 0.12);
    transition: var(--transition);
}

#cancel:hover { background: rgba(235, 0, 4, 0.28); }
#cancel[hidden] { display: none; }

#compare-btn {
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 0.9rem;
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 12px 22px;
    cursor: pointer;
    color: var(--silver-light);
    background: rgba(235, 0, 4, 0.1);
    transition: var(--transition);
}

#compare-btn:hover { background: rgba(235, 0, 4, 0.2); }
#compare-btn[hidden] { display: none; }

/* ---------- Settings panel ---------- */
#settings-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-title { font-size: 0.95rem; font-weight: 800; }

.field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.field-group:last-of-type,
.advanced-settings .field-group:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.field-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--silver-mid);
}

.field-group > label:first-child:not(.checkbox-line)::after {
    content: ' ⓘ';
    font-size: 0.65rem;
    color: var(--silver-dark);
    font-weight: 400;
}

.field-group select {
    font-family: var(--font-main);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--silver-light);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    color-scheme: dark;
}

.field-group select:focus { outline: 1.5px solid var(--red-primary); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ---------- Segmented control (แทน <select> ที่มองยาก เช่น "ขยายภาพ") ---------- */
.segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 4px;
}

.segmented-btn {
    flex: 1;
    min-width: 44px;
    font-family: var(--font-main);
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 8px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--silver-mid);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.segmented-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: var(--silver-light); }

.segmented-btn.active {
    background: var(--red-gradient);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(235, 0, 4, 0.5);
}

.segmented-btn[hidden] { display: none; }

.segmented-btn:disabled { cursor: not-allowed; }

.segmented.is-disabled { opacity: 0.5; }

/* เบราว์เซอร์สมัยใหม่ (Chromium) รองรับสไตล์สีพื้นหลัง/ตัวอักษรของ <option> ในลิสต์ dropdown ได้
   ถ้าไม่ใส่ตรงนี้ ตัวลิสต์ dropdown จะใช้สีขาวของระบบ (มองข้อความบนพื้นเข้มไม่เห็น) */
.field-group select option {
    background-color: #14141F;
    color: var(--silver-light);
}

/* คำอธิบายยาวๆ ซ่อนไว้ก่อนเพื่อลดความรก โผล่มาเฉพาะตอน hover/focus แถวนั้น
   (#scale-comment / #tile-comment เป็นข้อความสถานะที่ script.js สลับ show/hide เอง ให้โชว์ตลอดตามปกติ) */
.field-hint {
    font-size: 0.68rem;
    color: #6EE7B7;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: var(--transition);
}

.field-group:hover .field-hint,
.field-group:focus-within .field-hint,
#scale-comment,
#tile-comment {
    max-height: 6em;
    opacity: 1;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--silver-mid);
    cursor: pointer;
    margin-top: 4px;
}

.save-mode-group {
    background: rgba(16, 185, 129, 0.08);
    border: 1.5px solid rgba(16, 185, 129, 0.35);
    border-radius: 10px;
    padding: 10px 12px;
}

.save-mode-group .checkbox-line {
    font-size: 0.85rem;
    color: var(--silver-light);
    margin-top: 0;
}

.save-mode-group .field-hint {
    color: #6EE7B7;
    max-height: 6em;
    opacity: 1;
}

.advanced-settings {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.advanced-settings summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--silver-mid);
    list-style: none;
}

.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings summary::before { content: '▸ '; }
.advanced-settings[open] summary::before { content: '▾ '; }

.advanced-settings > .field-group { margin-top: 4px; }

.settings-footer {
    font-size: 0.68rem;
    color: var(--silver-dark);
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-footer a { color: var(--red-primary); }

/* ---------- Queue panel (ประมวลผลหลายรูปต่อกัน) ---------- */
#queue-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
}

#queue-panel[hidden] { display: none; }

.queue-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.queue-row-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--silver-mid);
}

.queue-mini-btn {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.68rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--silver-mid);
    cursor: pointer;
    transition: var(--transition);
}

.queue-mini-btn:hover { background: rgba(235, 0, 4, 0.18); color: var(--silver-light); }
.queue-mini-btn[hidden] { display: none; }

.queue-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    min-height: 54px;
}

.queue-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.queue-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.queue-thumb-badge {
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: 0.6rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    padding: 1px 4px;
}

.queue-thumb.is-active { border-color: var(--red-primary); box-shadow: 0 0 10px rgba(235, 0, 4, 0.6); }

.queue-thumb-action {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    color: var(--silver-light);
    font-size: 0.6rem;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}

.queue-thumb-action:hover { background: rgba(235, 0, 4, 0.75); }

/* ---------- Compare (before/after slider) overlay ---------- */
.image-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 998;
    align-items: center;
    justify-content: center;
    background: rgba(2, 2, 6, 0.9);
    padding: 30px;
}

.image-lightbox.active { display: flex; }

.image-lightbox-close {
    position: absolute;
    top: 18px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: var(--silver-light);
    font-size: 1rem;
    cursor: pointer;
    z-index: 1;
}

.image-lightbox-close:hover { background: rgba(235, 0, 4, 0.4); }

.compare-box {
    position: relative;
    max-width: 92vw;
    max-height: 88vh;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1.5px solid var(--border-card);
    user-select: none;
    cursor: ew-resize;
}

#compare-before, #compare-after {
    display: block;
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

#compare-after {
    position: absolute;
    top: 0;
    left: 0;
    clip-path: inset(0 50% 0 0);
}

.compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--silver-light);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.compare-handle-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--red-gradient);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.compare-label {
    position: absolute;
    bottom: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.55);
    padding: 4px 10px;
    border-radius: 999px;
}

.compare-label-before { left: 10px; }
.compare-label-after { right: 10px; }

/* ---------- Neon black / orange visual refresh ---------- */
:root {
    --pink: #FF7A18;
    --pink-bright: #FFB04A;
    --pink-deep: #B54708;
    --ink: #07070B;
    --panel: rgba(18, 17, 25, 0.92);
    --panel-strong: rgba(25, 22, 32, 0.96);
    --line: rgba(255, 141, 50, 0.18);
    --line-strong: rgba(255, 140, 45, 0.62);
    --red-primary: var(--pink);
    --red-gradient: linear-gradient(135deg, #FFD05C 0%, #FF8A1E 48%, #C94A09 100%);
    --red-glow: rgba(255, 125, 24, 0.38);
    --bg-dark: var(--ink);
    --bg-card: var(--panel);
    --border-card: rgba(255, 255, 255, 0.09);
    --border-hover: var(--line-strong);
    --radius: 10px;
}

html, body {
    background-color: var(--ink);
    background-image:
        linear-gradient(rgba(255, 138, 30, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 138, 30, 0.025) 1px, transparent 1px),
        linear-gradient(115deg, #07070B 0%, #110B06 47%, #07070B 100%);
    background-size: 42px 42px, 42px 42px, auto;
    background-attachment: fixed;
}

#app-shell {
    position: relative;
    isolation: isolate;
    padding-top: 24px;
}

#app-shell::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 4%;
    left: 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pink), transparent);
    box-shadow: 0 0 22px rgba(255, 122, 24, 0.75);
}

#app-header {
    position: relative;
    overflow: hidden;
    padding: 17px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--pink);
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(255, 122, 24, 0.13), transparent 27%),
        linear-gradient(115deg, rgba(31, 23, 16, 0.98), rgba(14, 11, 8, 0.98));
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
}

#app-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        -55deg,
        transparent 0 52px,
        rgba(255, 169, 73, 0.05) 52px 53px,
        transparent 53px 105px
    );
}

.brand { position: relative; z-index: 1; }
.brand-title { color: #FFFFFF; letter-spacing: 0; text-shadow: 0 0 16px rgba(255, 154, 51, 0.48); }
.brand-sub { color: #B1A494; letter-spacing: 0; }

#app-main {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 18px;
}

#canvas-panel,
#settings-panel,
#help-panel,
#queue-panel {
    background: linear-gradient(145deg, rgba(26, 23, 33, 0.94), rgba(13, 12, 19, 0.96));
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.025);
}

#canvas-panel {
    position: relative;
    overflow: hidden;
    border-top-color: rgba(255, 154, 51, 0.38);
}

#canvas-panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 22px;
    width: 110px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pink), transparent);
    box-shadow: 0 0 14px rgba(255, 122, 24, 0.76);
}

#settings-panel {
    position: sticky;
    top: 18px;
    align-self: start;
    border-top-color: rgba(255, 154, 51, 0.38);
}

.settings-title {
    color: #FFFFFF;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--line);
}

.step-indicator {
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(4, 4, 7, 0.34);
}

.step-num {
    width: 28px;
    height: 28px;
    border-color: rgba(255, 255, 255, 0.14);
    background: #17151E;
}

.step-item.active .step-num {
    box-shadow: 0 0 0 4px rgba(255, 122, 24, 0.12), 0 0 20px rgba(255, 122, 24, 0.62);
}

.step-item.done .step-num {
    background: #23C58A;
    box-shadow: 0 0 16px rgba(35, 197, 138, 0.4);
}

.step-line { background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 137, 31, 0.42), rgba(255, 255, 255, 0.08)); }

#dropzone {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 9px;
    background:
        linear-gradient(rgba(255, 122, 24, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 122, 24, 0.018) 1px, transparent 1px),
        rgba(7, 7, 11, 0.44);
    background-size: 28px 28px, 28px 28px, auto;
}

.frame-label {
    color: #FFE2BD;
    letter-spacing: 0;
}

#src-box, #dest-box {
    border-color: rgba(255, 255, 255, 0.12);
    border-style: solid;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 122, 24, 0.055), transparent 32%),
        rgba(6, 6, 10, 0.8);
    box-shadow: inset 0 0 0 1px rgba(255, 122, 24, 0.025), inset 0 0 34px rgba(0, 0, 0, 0.4);
}

#src-box::before, #dest-box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 173, 82, 0.1);
    border-radius: inherit;
}

#src-box:hover, #dest-box:hover {
    border-color: rgba(255, 151, 47, 0.7);
    box-shadow: 0 0 0 1px rgba(255, 122, 24, 0.18), 0 0 26px rgba(255, 122, 24, 0.16), inset 0 0 34px rgba(0, 0, 0, 0.4);
}

#dest {
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%) 0 0 / 18px 18px,
        #0C0B10;
}

.arrow-sep {
    color: var(--pink-bright);
    text-shadow: 0 0 14px rgba(255, 122, 24, 0.78);
    animation: arrowPulse 1.8s ease-in-out infinite;
}

@keyframes arrowPulse {
    50% { transform: translateX(4px); opacity: 0.72; }
}

#dropzone-hint {
    color: #FFE1BA;
    background: linear-gradient(180deg, rgba(11, 9, 14, 0.7), rgba(11, 9, 14, 0.9));
}

.dropzone-icon {
    filter: drop-shadow(0 0 14px rgba(255, 122, 24, 0.55));
}

#progress-bar-track {
    height: 10px;
    background: #0A090E;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#progress-bar-fill {
    background: linear-gradient(90deg, #C94A09, var(--pink), #FFD05C);
    box-shadow: 0 0 16px rgba(255, 122, 24, 0.72);
}

#message {
    color: #FFE3BF;
    padding: 9px 12px;
    border: 1px solid rgba(255, 122, 24, 0.13);
    border-radius: 8px;
    background: rgba(255, 122, 24, 0.045);
}

#start, #stop, #cancel, #compare-btn, #fullscreen-btn {
    border-radius: 8px;
    letter-spacing: 0;
}

#start {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 216, 145, 0.3);
    box-shadow: 0 9px 26px rgba(255, 111, 17, 0.32), inset 0 1px rgba(255, 255, 255, 0.24);
}

#start:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 111, 17, 0.48), inset 0 1px rgba(255, 255, 255, 0.3);
}

#stop, #cancel, #compare-btn, #fullscreen-btn {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.16);
}

#stop:hover, #cancel:hover, #compare-btn:hover, #fullscreen-btn:hover {
    border-color: rgba(255, 160, 60, 0.58);
    background: rgba(255, 122, 24, 0.13);
    box-shadow: 0 0 18px rgba(255, 122, 24, 0.16);
}

#fullscreen-btn {
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 0.9rem;
    padding: 12px 18px;
    cursor: pointer;
    color: var(--silver-light);
    transition: var(--transition);
}

#fullscreen-btn[hidden] { display: none; }

.field-group {
    border-bottom-color: rgba(255, 255, 255, 0.065);
}

.field-group label, .advanced-settings summary {
    color: #FFE0B5;
}

.segmented {
    border-color: rgba(255, 255, 255, 0.1);
    background: #0C0B11;
}

.segmented-btn:hover:not(:disabled) {
    background: rgba(255, 122, 24, 0.1);
}

.segmented-btn.active {
    border: 1px solid rgba(255, 216, 145, 0.22);
    box-shadow: 0 5px 16px rgba(255, 111, 17, 0.36);
}

input[type="checkbox"] { accent-color: var(--pink); }

.save-mode-group {
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.1), rgba(35, 197, 138, 0.06));
    border-color: rgba(255, 160, 60, 0.32);
}

#help-panel > summary,
.settings-footer,
.queue-row-label {
    color: #D8C8B6;
}

.queue-mini-btn {
    border-color: rgba(255, 175, 85, 0.2);
    background: rgba(255, 122, 24, 0.05);
}

.image-lightbox {
    background:
        linear-gradient(rgba(255, 122, 24, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 122, 24, 0.035) 1px, transparent 1px),
        rgba(3, 3, 6, 0.96);
    background-size: 32px 32px, 32px 32px, auto;
}

.compare-box {
    border-color: rgba(255, 170, 73, 0.35);
    box-shadow: 0 0 48px rgba(255, 122, 24, 0.16);
}

.compare-handle-grip {
    box-shadow: 0 0 22px rgba(255, 122, 24, 0.62);
}

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

/* Final rollback: keep the pre-redesign pink/black CRXZYBOY appearance. */
body[data-theme="dark"] {
    background-color: #08080d;
    background-image:
        radial-gradient(circle at 12% 0%, rgba(236,72,153,.18), transparent 28rem),
        radial-gradient(circle at 95% 20%, rgba(124,58,237,.12), transparent 24rem),
        linear-gradient(135deg, #08080d, #140b15 52%, #08080d);
    background-size: auto;
}
body[data-theme="dark"] #app-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(236,72,153,.15), transparent 34rem),
        radial-gradient(circle at 100% 12%, rgba(124,58,237,.1), transparent 30rem),
        #08080d;
}
body[data-theme="dark"] #app-shell::before {
    right: 4%;
    left: 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pink), transparent);
    box-shadow: 0 0 20px rgba(236,72,153,.42);
}
body[data-theme="dark"] #app-sidebar {
    flex-basis: 246px;
    padding: 22px 14px 16px;
    border-right-color: rgba(190,24,93,.13);
    background: rgba(16,13,22,.86);
    box-shadow: 12px 0 35px rgba(0,0,0,.22);
}
body[data-theme="dark"] .sidebar-brand { padding: 0 11px 22px; }
body[data-theme="dark"] .sidebar-mark { height: 110px; border: 0; background: transparent; box-shadow: none; }
body[data-theme="dark"] .sidebar-logo { height: 110px !important; filter: none; }
body[data-theme="dark"] .sidebar-section-label { margin: 14px 10px 4px; color: #bd8da7; letter-spacing: .15em; }
body[data-theme="dark"] .sidebar-link {
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    color: #e3b8ca;
    background: transparent;
    letter-spacing: normal;
}
body[data-theme="dark"] .sidebar-link:hover,
body[data-theme="dark"] .sidebar-link.is-active {
    color: #fff4fa;
    background: linear-gradient(100deg, rgba(236,72,153,.22), rgba(124,58,237,.16));
    box-shadow: none;
    transform: translateX(2px);
}
body[data-theme="dark"] .sidebar-icon { color: inherit; }
body[data-theme="dark"] .sidebar-bottom-card {
    border-color: rgba(74,222,128,.22);
    border-radius: 13px;
    background: rgba(20,83,45,.22);
}
body[data-theme="dark"] .sidebar-bottom-card strong { color: #bbf7d0; }
body[data-theme="dark"] .sidebar-bottom-card small { color: #9bd8b0; }
body[data-theme="dark"] .sidebar-collapse {
    top: 82px;
    right: -13px;
    width: 26px;
    height: 26px;
    border-color: rgba(244,114,182,.22);
    color: #a41456;
    background: #211629;
}
body[data-theme="dark"] .app-main-shell { padding: 18px 28px 30px; }
body[data-theme="dark"] .app-main-shell #app-header {
    margin-bottom: 16px;
    border: 1px solid rgba(190,24,93,.15);
    border-left: 3px solid var(--pink);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(236,72,153,.15), transparent 30%),
        linear-gradient(115deg, rgba(29,20,35,.98), rgba(14,11,20,.98));
    box-shadow: 0 14px 36px rgba(0,0,0,.22);
}
body[data-theme="dark"] .brand-logo { width: 42px; height: 42px; border-radius: 12px; }
body[data-theme="dark"] .brand-title {
    margin-top: 0;
    color: #fff4fa;
    font-size: 1.06rem;
    letter-spacing: 0;
    text-shadow: 0 0 14px rgba(236,72,153,.2);
}
body[data-theme="dark"] .brand-sub { color: #c89bb2; font-size: .62rem; }
body[data-theme="dark"] .theme-toggle,
body[data-theme="dark"] .mobile-sidebar-toggle,
body[data-theme="dark"] .account-user-button,
body[data-theme="dark"] .header-credit-card,
body[data-theme="dark"] .admin-quick-link,
body[data-theme="dark"] .header-logout-button,
body[data-theme="dark"] .notification-button {
    min-height: 46px;
    border-radius: 15px;
    border-color: rgba(244,114,182,.22);
    background: rgba(31,24,39,.9);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
body[data-theme="dark"] #app-main { grid-template-columns: minmax(0,1fr) minmax(300px,340px); gap: 18px; }
body[data-theme="dark"] #canvas-panel,
body[data-theme="dark"] #settings-panel {
    border: 1px solid rgba(244,114,182,.16);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(29,25,38,.96), rgba(14,13,21,.97));
    box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.025);
}
body[data-theme="dark"] #canvas-panel::before {
    right: 22px;
    width: 110px;
    background: linear-gradient(90deg, transparent, var(--pink), transparent);
    box-shadow: 0 0 14px rgba(236,72,153,.48);
}
body[data-theme="dark"] #settings-panel { top: 18px; padding: 18px; }
body[data-theme="dark"] .settings-title { color: #fff4fa; border-bottom-color: rgba(244,114,182,.2); }
body[data-theme="dark"] .step-indicator {
    border-color: rgba(244,114,182,.12);
    border-radius: 8px;
    background: rgba(17,13,25,.7);
}
body[data-theme="dark"] .step-item.active .step-num {
    background: var(--red-gradient);
    box-shadow: 0 0 0 4px rgba(236,72,153,.1), 0 0 18px rgba(236,72,153,.35);
}
body[data-theme="dark"] #dropzone {
    padding: 14px;
    gap: 14px;
    border-radius: 9px;
    border-color: rgba(190,24,93,.1);
    background:
        linear-gradient(rgba(236,72,153,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236,72,153,.035) 1px, transparent 1px),
        rgba(12,10,18,.62);
    background-size: 28px 28px, 28px 28px, auto;
}
body[data-theme="dark"] .frame-label { color: #f7a6ca; font-size: .68rem; letter-spacing: 0; }
body[data-theme="dark"] #src-box,
body[data-theme="dark"] #dest-box {
    min-height: min(62vh,680px);
    border-radius: 8px;
    border-color: rgba(244,114,182,.22);
    background:
        linear-gradient(145deg, rgba(236,72,153,.08), transparent 32%),
        rgba(12,11,18,.94);
    box-shadow: inset 0 0 0 1px rgba(244,114,182,.04), inset 0 0 34px rgba(0,0,0,.4);
}
body[data-theme="dark"] #src-box:hover,
body[data-theme="dark"] #dest-box:hover {
    border-color: rgba(244,114,182,.7);
    box-shadow: 0 0 0 1px rgba(236,72,153,.18), 0 0 26px rgba(236,72,153,.2), inset 0 0 34px rgba(0,0,0,.4);
}
body[data-theme="dark"] #dropzone-hint {
    color: #edbfd3;
    background: linear-gradient(180deg, rgba(12,11,18,.58), rgba(12,11,18,.9));
}
body[data-theme="dark"] .dropzone-icon { filter: drop-shadow(0 0 12px rgba(236,72,153,.34)); }
body[data-theme="dark"] .arrow-sep { color: var(--pink); text-shadow: 0 0 13px rgba(236,72,153,.35); }
body[data-theme="dark"] #message {
    border-color: rgba(236,72,153,.24);
    color: #f4c6da;
    background: rgba(236,72,153,.09);
}
body[data-theme="dark"] #start { border-radius: 8px; background: var(--red-gradient); color: #fff; }
body[data-theme="dark"] #stop,
body[data-theme="dark"] #cancel,
body[data-theme="dark"] #compare-btn,
body[data-theme="dark"] #fullscreen-btn {
    border-radius: 8px;
    border-color: rgba(255,255,255,.16);
    color: #f7d7e6;
    background: rgba(255,255,255,.06);
}
body[data-theme="dark"] .field-group label,
body[data-theme="dark"] .advanced-settings summary { color: #ffe0b5; }
body[data-theme="dark"] .preset-card {
    border-radius: 13px;
    border-color: rgba(244,114,182,.2);
    background: linear-gradient(145deg, #2c1d35, #17111f);
}
body[data-theme="dark"] .preset-card.is-active {
    border-color: rgba(244,114,182,.78);
    background: linear-gradient(145deg, #4b1e42, #28152f);
}
body[data-theme="dark"] .segmented {
    border-radius: 12px;
    border-color: rgba(244,114,182,.2);
    background: #120e18;
}
body[data-theme="dark"] .segmented-btn.active { background: var(--red-gradient); }
body[data-theme="dark"] .quick-help {
    border-radius: 12px;
    border-color: rgba(244,114,182,.2);
    background: rgba(37,29,45,.72);
}
body[data-theme="dark"] #queue-panel,
body[data-theme="dark"] #result-summary,
body[data-theme="dark"] .upload-meta {
    border-radius: 10px;
    border-color: rgba(244,114,182,.2);
    background: rgba(19,14,27,.78);
}
body:not([data-theme="dark"]) #app-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(236,72,153,.1), transparent 34rem),
        radial-gradient(circle at 100% 12%, rgba(124,58,237,.07), transparent 30rem),
        #fff8fc;
}
body:not([data-theme="dark"]) .sidebar-link.is-active {
    color: #a41456;
    background: linear-gradient(100deg, rgba(236,72,153,.13), rgba(124,58,237,.07));
    box-shadow: none;
}
body:not([data-theme="dark"]) #start { background: var(--red-gradient); color: #fff; }

/* ---------- Restore the previous CRXZYBOY visual theme ---------- */
body[data-theme="dark"] {
    background-color: #08080d;
    background-image:
        radial-gradient(circle at 12% 0%, rgba(236,72,153,.18), transparent 28rem),
        radial-gradient(circle at 95% 20%, rgba(124,58,237,.12), transparent 24rem),
        linear-gradient(135deg, #08080d, #140b15 52%, #08080d);
    background-size: auto;
}
body[data-theme="dark"] #app-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(236,72,153,.15), transparent 34rem),
        radial-gradient(circle at 100% 12%, rgba(124,58,237,.1), transparent 30rem),
        #08080d;
}
body[data-theme="dark"] #app-shell::before {
    right: 4%;
    left: 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pink), transparent);
    box-shadow: 0 0 20px rgba(236,72,153,.42);
}
body[data-theme="dark"] .app-layout { gap: initial; }
body[data-theme="dark"] #app-sidebar {
    flex-basis: 246px;
    padding: 22px 14px 16px;
    border-right-color: rgba(190,24,93,.13);
    background: rgba(16,13,22,.86);
    box-shadow: 12px 0 35px rgba(0,0,0,.22);
}
body[data-theme="dark"] .sidebar-brand { padding: 0 11px 22px; }
body[data-theme="dark"] .sidebar-mark {
    height: 110px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    box-shadow: none;
}
body[data-theme="dark"] .sidebar-logo {
    height: 110px !important;
    filter: none;
}
body[data-theme="dark"] .sidebar-section-label {
    margin: 14px 10px 4px;
    color: #bd8da7;
    letter-spacing: .15em;
}
body[data-theme="dark"] .sidebar-link {
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    color: #e3b8ca;
    background: transparent;
    letter-spacing: normal;
}
body[data-theme="dark"] .sidebar-link:hover,
body[data-theme="dark"] .sidebar-link.is-active {
    color: #fff4fa;
    border-color: transparent;
    background: linear-gradient(100deg, rgba(236,72,153,.22), rgba(124,58,237,.16));
    box-shadow: none;
    transform: translateX(2px);
}
body[data-theme="dark"] .sidebar-link::after {
    display: block;
}
body[data-theme="dark"] .sidebar-icon { color: inherit; }
body[data-theme="dark"] .sidebar-bottom-card {
    border-color: rgba(74,222,128,.22);
    border-radius: 13px;
    background: rgba(20,83,45,.22);
}
body[data-theme="dark"] .sidebar-bottom-card strong { color: #bbf7d0; }
body[data-theme="dark"] .sidebar-bottom-card small { color: #9bd8b0; }
body[data-theme="dark"] .sidebar-collapse {
    top: 82px;
    right: -13px;
    width: 26px;
    height: 26px;
    border-color: rgba(244,114,182,.22);
    color: #a41456;
    background: #211629;
}
body[data-theme="dark"] .app-main-shell {
    padding: 18px 28px 30px;
}
body[data-theme="dark"] .app-main-shell #app-header {
    margin-bottom: 16px;
    border: 1px solid rgba(190,24,93,.15);
    border-left: 3px solid var(--pink);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(236,72,153,.15), transparent 30%),
        linear-gradient(115deg, rgba(29,20,35,.98), rgba(14,11,20,.98));
    box-shadow: 0 14px 36px rgba(0,0,0,.22);
}
body[data-theme="dark"] .brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}
body[data-theme="dark"] .brand-title {
    margin-top: 0;
    color: #fff4fa;
    font-size: 1.06rem;
    letter-spacing: 0;
    text-shadow: 0 0 14px rgba(236,72,153,.2);
}
body[data-theme="dark"] .brand-sub {
    color: #c89bb2;
    font-size: .62rem;
}
body[data-theme="dark"] .theme-toggle,
body[data-theme="dark"] .mobile-sidebar-toggle,
body[data-theme="dark"] .account-user-button,
body[data-theme="dark"] .header-credit-card,
body[data-theme="dark"] .admin-quick-link,
body[data-theme="dark"] .header-logout-button,
body[data-theme="dark"] .notification-button {
    min-height: 46px;
    border-radius: 15px;
    border-color: rgba(244,114,182,.22);
    background: rgba(31,24,39,.9);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
body[data-theme="dark"] #app-main {
    grid-template-columns: minmax(0,1fr) minmax(300px,340px);
    gap: 18px;
}
body[data-theme="dark"] #canvas-panel,
body[data-theme="dark"] #settings-panel {
    border: 1px solid rgba(244,114,182,.16);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(29,25,38,.96), rgba(14,13,21,.97));
    box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.025);
}
body[data-theme="dark"] #canvas-panel::before {
    right: 22px;
    width: 110px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pink), transparent);
    box-shadow: 0 0 14px rgba(236,72,153,.48);
}
body[data-theme="dark"] #settings-panel {
    top: 18px;
    padding: 18px;
}
body[data-theme="dark"] .settings-title {
    color: #fff4fa;
    border-bottom-color: rgba(244,114,182,.2);
    letter-spacing: normal;
}
body[data-theme="dark"] .step-indicator {
    border-color: rgba(244,114,182,.12);
    border-radius: 8px;
    background: rgba(17,13,25,.7);
}
body[data-theme="dark"] .step-item.active .step-num {
    background: var(--red-gradient);
    box-shadow: 0 0 0 4px rgba(236,72,153,.1), 0 0 18px rgba(236,72,153,.35);
}
body[data-theme="dark"] .step-line {
    background: linear-gradient(90deg, rgba(190,24,93,.12), rgba(236,72,153,.58), rgba(190,24,93,.12));
}
body[data-theme="dark"] #dropzone {
    padding: 14px;
    gap: 14px;
    border-radius: 9px;
    border-color: rgba(190,24,93,.1);
    background:
        linear-gradient(rgba(236,72,153,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236,72,153,.035) 1px, transparent 1px),
        rgba(12,10,18,.62);
    background-size: 28px 28px, 28px 28px, auto;
}
body[data-theme="dark"] .frame-label { color: #f7a6ca; font-size: .68rem; letter-spacing: 0; }
body[data-theme="dark"] #src-box,
body[data-theme="dark"] #dest-box {
    min-height: min(62vh,680px);
    border-radius: 8px;
    border-color: rgba(244,114,182,.22);
    background:
        linear-gradient(145deg, rgba(236,72,153,.08), transparent 32%),
        rgba(12,11,18,.94);
    box-shadow: inset 0 0 0 1px rgba(244,114,182,.04), inset 0 0 34px rgba(0,0,0,.4);
}
body[data-theme="dark"] #src-box:hover,
body[data-theme="dark"] #dest-box:hover {
    border-color: rgba(244,114,182,.7);
    box-shadow: 0 0 0 1px rgba(236,72,153,.18), 0 0 26px rgba(236,72,153,.2), inset 0 0 34px rgba(0,0,0,.4);
}
body[data-theme="dark"] #dropzone-hint {
    color: #edbfd3;
    background: linear-gradient(180deg, rgba(12,11,18,.58), rgba(12,11,18,.9));
}
body[data-theme="dark"] .dropzone-icon { filter: drop-shadow(0 0 12px rgba(236,72,153,.34)); }
body[data-theme="dark"] .arrow-sep {
    color: var(--pink);
    text-shadow: 0 0 13px rgba(236,72,153,.35);
}
body[data-theme="dark"] #message {
    border-color: rgba(236,72,153,.24);
    border-radius: 8px;
    color: #f4c6da;
    background: rgba(236,72,153,.09);
}
body[data-theme="dark"] #start {
    border-radius: 8px;
    background: var(--red-gradient);
    color: #fff;
    box-shadow: 0 9px 26px rgba(255,111,17,.32), inset 0 1px rgba(255,255,255,.24);
}
body[data-theme="dark"] #stop,
body[data-theme="dark"] #cancel,
body[data-theme="dark"] #compare-btn,
body[data-theme="dark"] #fullscreen-btn {
    border-radius: 8px;
    border-color: rgba(255,255,255,.16);
    color: #f7d7e6;
    background: rgba(255,255,255,.06);
}
body[data-theme="dark"] .field-group label,
body[data-theme="dark"] .advanced-settings summary {
    color: #ffe0b5;
}
body[data-theme="dark"] .preset-card {
    border-radius: 13px;
    border-color: rgba(244,114,182,.2);
    background: linear-gradient(145deg, #2c1d35, #17111f);
}
body[data-theme="dark"] .preset-card.is-active {
    border-color: rgba(244,114,182,.78);
    background: linear-gradient(145deg, #4b1e42, #28152f);
    box-shadow: 0 0 0 2px rgba(236,72,153,.16), 0 8px 22px rgba(236,72,153,.2);
}
body[data-theme="dark"] .segmented {
    border-radius: 12px;
    border-color: rgba(244,114,182,.2);
    background: #120e18;
}
body[data-theme="dark"] .segmented-btn.active {
    background: var(--red-gradient);
    border-color: rgba(255,255,255,.25);
    box-shadow: 0 5px 16px rgba(255,111,17,.36);
}
body[data-theme="dark"] .quick-help {
    border-radius: 12px;
    border-color: rgba(244,114,182,.2);
    background: rgba(37,29,45,.72);
}
body[data-theme="dark"] #queue-panel,
body[data-theme="dark"] #result-summary,
body[data-theme="dark"] .upload-meta {
    border-radius: 10px;
    border-color: rgba(244,114,182,.2);
    background: rgba(19,14,27,.78);
}

body:not([data-theme="dark"]) {
    background-color: #fff9fc;
    background-image:
        linear-gradient(rgba(236,72,153,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236,72,153,.05) 1px, transparent 1px),
        linear-gradient(115deg, #fff 0%, #fff1f7 48%, #fff 100%);
    background-size: 42px 42px, 42px 42px, auto;
}
body:not([data-theme="dark"]) #app-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(236,72,153,.1), transparent 34rem),
        radial-gradient(circle at 100% 12%, rgba(124,58,237,.07), transparent 30rem),
        #fff8fc;
}
body:not([data-theme="dark"]) .sidebar-link.is-active {
    color: #a41456;
    background: linear-gradient(100deg, rgba(236,72,153,.13), rgba(124,58,237,.07));
    box-shadow: none;
}
body:not([data-theme="dark"]) #start {
    background: var(--red-gradient);
    color: #fff;
}

/* ---------- CRXZYBOY signature redesign ----------
   A distinct studio-console identity: graphite navy, electric cyan and violet,
   sharper geometry and editorial labels. This layer intentionally comes last
   so the previous theme experiments cannot make the page look generic. */
:root {
    --crx-bg: #070b15;
    --crx-bg-deep: #050812;
    --crx-panel: rgba(12, 18, 34, .94);
    --crx-panel-2: rgba(16, 23, 43, .94);
    --crx-line: rgba(125, 151, 205, .2);
    --crx-line-strong: rgba(92, 224, 255, .55);
    --crx-text: #eef4ff;
    --crx-muted: #91a0bf;
    --crx-cyan: #62e7ff;
    --crx-violet: #9c7bff;
    --crx-pink: #f26bbd;
    --crx-radius: 12px;
}

body[data-theme="dark"] {
    background-color: var(--crx-bg-deep);
    background-image:
        linear-gradient(rgba(98,231,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(98,231,255,.028) 1px, transparent 1px),
        radial-gradient(circle at 78% -14%, rgba(156,123,255,.18), transparent 32rem),
        radial-gradient(circle at 6% 88%, rgba(242,107,189,.11), transparent 28rem),
        linear-gradient(135deg, #050812 0%, #0a1020 52%, #060914 100%);
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
}
body[data-theme="dark"] #app-shell {
    background: transparent;
}
body[data-theme="dark"] #app-shell::before {
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 2%, var(--crx-cyan) 38%, var(--crx-violet) 64%, transparent 98%);
    box-shadow: 0 0 24px rgba(98,231,255,.65);
}
body[data-theme="dark"] .app-layout {
    gap: 0;
}
body[data-theme="dark"] #app-sidebar {
    flex-basis: 224px;
    padding: 18px 12px 14px;
    border-right: 1px solid rgba(125,151,205,.18);
    background:
        linear-gradient(180deg, rgba(13,20,37,.96), rgba(6,10,20,.96)),
        repeating-linear-gradient(135deg, transparent 0 35px, rgba(98,231,255,.025) 35px 36px);
    box-shadow: 16px 0 40px rgba(0,0,0,.22);
}
body[data-theme="dark"] .sidebar-brand {
    padding: 0 8px 22px;
}
body[data-theme="dark"] .sidebar-mark {
    height: 102px;
    border: 1px solid rgba(98,231,255,.2);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(98,231,255,.09), transparent 48%),
        rgba(4,8,18,.64);
    box-shadow: inset 0 0 24px rgba(98,231,255,.04);
}
body[data-theme="dark"] .sidebar-logo {
    height: 88px !important;
    filter: drop-shadow(0 8px 18px rgba(242,107,189,.24));
}
body[data-theme="dark"] .sidebar-section-label {
    margin: 16px 9px 6px;
    color: #6e82aa;
    letter-spacing: .2em;
}
body[data-theme="dark"] .sidebar-link {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #aab8d5;
    background: transparent;
    letter-spacing: .01em;
}
body[data-theme="dark"] .sidebar-link:hover,
body[data-theme="dark"] .sidebar-link.is-active {
    color: #f4f8ff;
    border-color: rgba(98,231,255,.2);
    background:
        linear-gradient(90deg, rgba(98,231,255,.14), rgba(156,123,255,.08)),
        rgba(11,18,34,.9);
    box-shadow: inset 3px 0 0 var(--crx-cyan), 0 8px 20px rgba(0,0,0,.18);
    transform: none;
}
body[data-theme="dark"] .sidebar-link::after {
    display: none;
}
body[data-theme="dark"] .sidebar-icon {
    color: var(--crx-cyan);
}
body[data-theme="dark"] .sidebar-bottom-card {
    border-color: rgba(98,231,255,.2);
    border-radius: 9px;
    background: rgba(8,28,39,.58);
}
body[data-theme="dark"] .sidebar-bottom-card strong { color: #a6f3ff; }
body[data-theme="dark"] .sidebar-bottom-card small { color: #7699ae; }
body[data-theme="dark"] .sidebar-collapse {
    top: 76px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-color: rgba(98,231,255,.35);
    color: var(--crx-cyan);
    background: #0b1324;
}
body[data-theme="dark"] .app-main-shell {
    padding: 20px 24px 28px;
}
body[data-theme="dark"] .app-main-shell #app-header {
    margin-bottom: 18px;
    border: 1px solid rgba(125,151,205,.22);
    border-radius: 12px;
    background:
        linear-gradient(115deg, rgba(98,231,255,.09), transparent 28%),
        linear-gradient(135deg, rgba(19,29,53,.96), rgba(9,14,28,.96));
    box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.06);
}
body[data-theme="dark"] .brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}
body[data-theme="dark"] .brand-kicker {
    display: block;
    color: var(--crx-cyan);
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .22em;
}
body[data-theme="dark"] .brand-title {
    margin-top: 2px;
    color: #f5f8ff;
    font-size: 1.12rem;
    letter-spacing: .03em;
    text-shadow: none;
}
body[data-theme="dark"] .brand-title i {
    color: var(--crx-pink);
    font-style: normal;
}
body[data-theme="dark"] .brand-sub {
    color: #8594b4;
    font-size: .6rem;
}
body[data-theme="dark"] .theme-toggle,
body[data-theme="dark"] .mobile-sidebar-toggle,
body[data-theme="dark"] .account-user-button,
body[data-theme="dark"] .header-credit-card,
body[data-theme="dark"] .admin-quick-link,
body[data-theme="dark"] .header-logout-button,
body[data-theme="dark"] .notification-button {
    min-height: 42px;
    border-radius: 9px;
    border-color: rgba(125,151,205,.24);
    background: rgba(9,15,29,.7);
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}
body[data-theme="dark"] .account-user-copy small { color: #7181a1; }
body[data-theme="dark"] .account-user-copy strong { color: #edf3ff; }
body[data-theme="dark"] .header-credit-card { color: #a7efff; }
body[data-theme="dark"] .header-credit-card strong { color: #f0fbff; }
body[data-theme="dark"] #app-main {
    grid-template-columns: minmax(0, 1fr) minmax(294px, 326px);
    gap: 18px;
}
body[data-theme="dark"] #canvas-panel,
body[data-theme="dark"] #settings-panel {
    border: 1px solid rgba(125,151,205,.22);
    border-radius: var(--crx-radius);
    background:
        linear-gradient(145deg, rgba(16,24,45,.95), rgba(7,12,25,.97)),
        repeating-linear-gradient(135deg, transparent 0 40px, rgba(98,231,255,.02) 40px 41px);
    box-shadow: 0 22px 50px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.04);
}
body[data-theme="dark"] #canvas-panel::before {
    right: 18px;
    width: 180px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--crx-cyan), var(--crx-violet), transparent);
    box-shadow: 0 0 18px rgba(98,231,255,.55);
}
body[data-theme="dark"] #settings-panel {
    top: 20px;
    padding: 18px 16px;
}
body[data-theme="dark"] .settings-title {
    color: #f2f6ff;
    border-bottom-color: rgba(125,151,205,.18);
    letter-spacing: .02em;
}
body[data-theme="dark"] .step-indicator {
    border-color: rgba(125,151,205,.18);
    border-radius: 9px;
    background: rgba(5,10,21,.66);
}
body[data-theme="dark"] .step-item.active .step-num {
    background: linear-gradient(135deg, var(--crx-cyan), var(--crx-violet));
    box-shadow: 0 0 0 4px rgba(98,231,255,.08), 0 0 22px rgba(98,231,255,.42);
}
body[data-theme="dark"] .step-line {
    background: linear-gradient(90deg, rgba(125,151,205,.1), rgba(98,231,255,.58), rgba(156,123,255,.4));
}
body[data-theme="dark"] #dropzone {
    padding: 12px;
    gap: 12px;
    border-radius: 10px;
    border-color: rgba(125,151,205,.16);
    background:
        linear-gradient(rgba(98,231,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(98,231,255,.022) 1px, transparent 1px),
        rgba(4,9,19,.56);
    background-size: 30px 30px, 30px 30px, auto;
}
body[data-theme="dark"] .frame-label {
    color: #79dff2;
    font-size: .59rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}
body[data-theme="dark"] #src-box,
body[data-theme="dark"] #dest-box {
    min-height: min(58vh, 640px);
    border-radius: 9px;
    border-color: rgba(125,151,205,.25);
    background: rgba(5,10,20,.84);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 0 38px rgba(0,0,0,.38);
}
body[data-theme="dark"] #src-box:hover,
body[data-theme="dark"] #dest-box:hover {
    border-color: rgba(98,231,255,.58);
    box-shadow: 0 0 0 1px rgba(98,231,255,.14), 0 0 26px rgba(98,231,255,.12), inset 0 0 38px rgba(0,0,0,.38);
}
body[data-theme="dark"] #dropzone-hint {
    color: #a8b8d5;
    background: linear-gradient(180deg, rgba(5,10,20,.48), rgba(5,10,20,.88));
}
body[data-theme="dark"] .dropzone-icon {
    filter: drop-shadow(0 0 14px rgba(98,231,255,.5));
}
body[data-theme="dark"] .arrow-sep {
    color: var(--crx-cyan);
    text-shadow: 0 0 15px rgba(98,231,255,.75);
}
body[data-theme="dark"] #message {
    border-color: rgba(98,231,255,.18);
    border-radius: 8px;
    color: #b9d3e8;
    background: rgba(98,231,255,.045);
}
body[data-theme="dark"] #start {
    border-radius: 9px;
    background: linear-gradient(110deg, #35d6ed, #6a8dff 58%, #9b6cff);
    color: #07101f;
    box-shadow: 0 12px 30px rgba(73,157,255,.25), inset 0 1px rgba(255,255,255,.46);
}
body[data-theme="dark"] #start:hover:not(:disabled) {
    box-shadow: 0 16px 34px rgba(73,157,255,.38), 0 0 0 3px rgba(98,231,255,.08);
}
body[data-theme="dark"] #stop,
body[data-theme="dark"] #cancel,
body[data-theme="dark"] #compare-btn,
body[data-theme="dark"] #fullscreen-btn {
    border-radius: 9px;
    border-color: rgba(125,151,205,.24);
    color: #b4c2dd;
    background: rgba(8,14,28,.75);
}
body[data-theme="dark"] .field-group {
    border-bottom-color: rgba(125,151,205,.14);
}
body[data-theme="dark"] .field-group label,
body[data-theme="dark"] .advanced-settings summary {
    color: #d9e4f8;
}
body[data-theme="dark"] .preset-card {
    border-radius: 9px;
    border-color: rgba(125,151,205,.2);
    background: linear-gradient(145deg, #141f38, #0b1326);
}
body[data-theme="dark"] .preset-card.is-active {
    border-color: rgba(98,231,255,.66);
    background: linear-gradient(145deg, rgba(24,72,89,.82), rgba(32,28,70,.86));
    box-shadow: 0 0 0 2px rgba(98,231,255,.08), 0 10px 24px rgba(0,0,0,.2);
}
body[data-theme="dark"] .segmented {
    border-radius: 9px;
    border-color: rgba(125,151,205,.22);
    background: rgba(4,9,19,.82);
}
body[data-theme="dark"] .segmented-btn.active {
    border-color: rgba(98,231,255,.4);
    background: linear-gradient(110deg, #2ebed5, #657eff);
    box-shadow: 0 6px 16px rgba(73,157,255,.22);
}
body[data-theme="dark"] .advanced-settings summary {
    border-radius: 9px;
    background: rgba(98,231,255,.055);
}
body[data-theme="dark"] .quick-help {
    border-radius: 9px;
    border-color: rgba(98,231,255,.18);
    background: linear-gradient(110deg, rgba(19,61,74,.38), rgba(31,25,63,.32));
}
body[data-theme="dark"] .quick-help-icon {
    background: rgba(98,231,255,.15);
}
body[data-theme="dark"] #queue-panel,
body[data-theme="dark"] #result-summary,
body[data-theme="dark"] .upload-meta {
    border-radius: 9px;
    border-color: rgba(125,151,205,.18);
    background: rgba(7,13,27,.76);
}
body[data-theme="dark"] .upload-meta-status {
    color: #a8f4ff;
    background: rgba(18,93,109,.42);
}

/* Give the light theme the same signature geometry without forcing dark mode. */
body:not([data-theme="dark"]) {
    background:
        linear-gradient(rgba(64,92,145,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(64,92,145,.035) 1px, transparent 1px),
        linear-gradient(135deg, #f5f8ff, #fff7fb 55%, #f7f4ff);
    background-size: 42px 42px, 42px 42px, auto;
}
body:not([data-theme="dark"]) #app-shell {
    background: transparent;
}
body:not([data-theme="dark"]) .sidebar-link.is-active {
    color: #31245e;
    background: linear-gradient(90deg, rgba(98,180,255,.16), rgba(156,123,255,.12));
    box-shadow: inset 3px 0 #5d7cff;
}
body:not([data-theme="dark"]) .brand-kicker {
    display: block;
    color: #5d6ed2;
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .2em;
}
body:not([data-theme="dark"]) .brand-title i {
    color: #d43f9d;
    font-style: normal;
}
body:not([data-theme="dark"]) #start {
    background: linear-gradient(110deg, #40cbe0, #687ef2 58%, #a36ce7);
    color: #fff;
}

/* ---------- Light white / pink theme ---------- */
:root {
    --pink: #EC4899;
    --pink-bright: #F472B6;
    --pink-deep: #BE185D;
    --ink: #FFF9FC;
    --panel: rgba(255, 255, 255, 0.9);
    --panel-strong: rgba(255, 255, 255, 0.98);
    --line: rgba(236, 72, 153, 0.2);
    --line-strong: rgba(236, 72, 153, 0.62);
    --red-primary: var(--pink);
    --red-gradient: linear-gradient(135deg, #F9A8D4 0%, #EC4899 48%, #BE185D 100%);
    --red-glow: rgba(236, 72, 153, 0.28);
    --bg-dark: var(--ink);
    --bg-card: var(--panel);
    --border-card: rgba(190, 24, 93, 0.15);
    --border-hover: var(--line-strong);
    --silver-light: #3D2434;
    --silver-mid: #765266;
    --silver-dark: #A0788E;
}

html, body {
    color: var(--silver-light);
    background-color: #FFF9FC;
    background-image:
        linear-gradient(rgba(236, 72, 153, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 72, 153, 0.05) 1px, transparent 1px),
        linear-gradient(115deg, #FFFFFF 0%, #FFF1F7 48%, #FFFFFF 100%);
}

#app-shell::before {
    background: linear-gradient(90deg, transparent, var(--pink), transparent);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.42);
}

#app-header {
    border-color: rgba(190, 24, 93, 0.15);
    border-left-color: var(--pink);
    background:
        linear-gradient(90deg, rgba(236, 72, 153, 0.15), transparent 30%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.98), rgba(255, 245, 250, 0.98));
    box-shadow: 0 14px 36px rgba(139, 50, 95, 0.1);
}

#app-header::after {
    background: repeating-linear-gradient(
        -55deg,
        transparent 0 52px,
        rgba(236, 72, 153, 0.06) 52px 53px,
        transparent 53px 105px
    );
}

.brand-title {
    color: #5A1738;
    text-shadow: 0 0 14px rgba(236, 72, 153, 0.2);
}

.brand-sub { color: #A0788E; }

#canvas-panel,
#settings-panel,
#help-panel,
#queue-panel {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 251, 0.94));
    border-color: rgba(190, 24, 93, 0.13);
    box-shadow: 0 16px 36px rgba(139, 50, 95, 0.1), inset 0 1px rgba(255, 255, 255, 0.9);
}

#canvas-panel,
#settings-panel {
    border-top-color: rgba(236, 72, 153, 0.46);
}

#canvas-panel::before {
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.48);
}

.settings-title,
.field-group label,
.advanced-settings summary {
    color: #5A1738;
}

.step-indicator {
    border-color: rgba(190, 24, 93, 0.1);
    background: rgba(255, 240, 247, 0.7);
}

.step-num {
    color: #86536D;
    border-color: rgba(190, 24, 93, 0.16);
    background: #FFFFFF;
}

.step-item.active .step-num {
    color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.1), 0 0 18px rgba(236, 72, 153, 0.35);
}

.step-line {
    background: linear-gradient(90deg, rgba(190, 24, 93, 0.12), rgba(236, 72, 153, 0.58), rgba(190, 24, 93, 0.12));
}

#dropzone {
    border-color: rgba(190, 24, 93, 0.1);
    background:
        linear-gradient(rgba(236, 72, 153, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 72, 153, 0.035) 1px, transparent 1px),
        rgba(255, 250, 253, 0.76);
}

.frame-label { color: #9D174D; }

#src-box, #dest-box {
    border-color: rgba(190, 24, 93, 0.2);
    background:
        linear-gradient(145deg, rgba(236, 72, 153, 0.09), transparent 34%),
        rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.035), inset 0 0 30px rgba(236, 72, 153, 0.035);
}

#src-box::before, #dest-box::before {
    border-color: rgba(236, 72, 153, 0.12);
}

#src-box:hover, #dest-box:hover {
    border-color: rgba(236, 72, 153, 0.66);
    box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.13), 0 0 24px rgba(236, 72, 153, 0.15), inset 0 0 30px rgba(236, 72, 153, 0.035);
}

#dest {
    background:
        linear-gradient(45deg, rgba(236, 72, 153, 0.07) 25%, transparent 25% 75%, rgba(236, 72, 153, 0.07) 75%) 0 0 / 18px 18px,
        #FFF8FC;
}

.arrow-sep {
    color: var(--pink);
    text-shadow: 0 0 13px rgba(236, 72, 153, 0.35);
}

#dropzone-hint {
    color: #6C314E;
    background: linear-gradient(180deg, rgba(255, 250, 253, 0.76), rgba(255, 244, 250, 0.9));
}

.dropzone-icon {
    filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.34));
}

#progress-bar-track {
    background: #FCE7F3;
    box-shadow: inset 0 0 0 1px rgba(190, 24, 93, 0.1);
}

#progress-bar-fill {
    background: linear-gradient(90deg, #BE185D, var(--pink), #F9A8D4);
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.42);
}

#message {
    color: #7A284E;
    border-color: rgba(236, 72, 153, 0.18);
    background: rgba(236, 72, 153, 0.055);
}

#start {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 9px 24px rgba(236, 72, 153, 0.25), inset 0 1px rgba(255, 255, 255, 0.36);
}

#start:hover:not(:disabled) {
    box-shadow: 0 12px 28px rgba(236, 72, 153, 0.36), inset 0 1px rgba(255, 255, 255, 0.4);
}

#stop, #cancel, #compare-btn, #fullscreen-btn {
    color: #6D2648;
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(190, 24, 93, 0.18);
}

#stop:hover, #cancel:hover, #compare-btn:hover, #fullscreen-btn:hover {
    border-color: rgba(236, 72, 153, 0.54);
    background: rgba(236, 72, 153, 0.09);
    box-shadow: 0 0 18px rgba(236, 72, 153, 0.14);
}

.segmented {
    border-color: rgba(190, 24, 93, 0.15);
    background: #FFF5FA;
}

.segmented-btn { color: #7E5268; }
.segmented-btn:hover:not(:disabled) { color: #9D174D; background: rgba(236, 72, 153, 0.08); }
.segmented-btn.active { border-color: rgba(255, 255, 255, 0.44); }

.field-group select,
.field-group select option {
    color: #5A1738;
    background-color: #FFF7FB;
    border-color: rgba(190, 24, 93, 0.18);
    color-scheme: light;
}

.field-hint { color: #A23B68; }

.save-mode-group {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(35, 197, 138, 0.06));
    border-color: rgba(236, 72, 153, 0.25);
}

.save-mode-group .checkbox-line { color: #6A2345; }

#help-panel > summary,
.settings-footer,
.queue-row-label {
    color: #7B4F66;
}

.queue-mini-btn {
    color: #8D3159;
    border-color: rgba(236, 72, 153, 0.2);
    background: rgba(236, 72, 153, 0.05);
}

.queue-thumb {
    border-color: rgba(190, 24, 93, 0.18);
    background: #FFF7FB;
}

.image-lightbox {
    background:
        linear-gradient(rgba(236, 72, 153, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 72, 153, 0.06) 1px, transparent 1px),
        rgba(255, 249, 252, 0.97);
}

.image-lightbox-close {
    color: #7A284E;
    border-color: rgba(190, 24, 93, 0.18);
    background: rgba(255, 255, 255, 0.86);
}

.compare-box {
    border-color: rgba(236, 72, 153, 0.35);
    box-shadow: 0 0 48px rgba(236, 72, 153, 0.18);
}

@media (max-width: 860px) {
    #settings-panel {
        position: static;
    }
}

/* ---------- Settings readability ---------- */
#settings-panel {
    gap: 18px;
    padding: 20px;
}

.settings-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 1px;
    font-size: 1.05rem;
}

#form-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#form-box > .field-group,
.advanced-settings > .field-group {
    gap: 9px;
    margin: 0;
    padding: 0 0 16px;
    border-bottom-color: rgba(190, 24, 93, 0.12);
}

#form-box > .field-group:last-of-type,
.advanced-settings > .field-group:last-of-type {
    padding-bottom: 0;
}

.field-group label {
    font-size: 0.8rem;
    line-height: 1.35;
}

.field-group > label:first-child:not(.checkbox-line) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #861B4D;
}

.checkbox-line {
    min-height: 22px;
    line-height: 1.45;
}

#form-box > .field-group:first-child {
    padding: 10px 12px;
    border: 1px solid rgba(236, 72, 153, 0.14);
    border-radius: 8px;
    background: rgba(236, 72, 153, 0.045);
}

#form-box > .field-group:first-child .field-hint {
    margin-top: 1px;
}

.save-mode-group {
    gap: 10px !important;
    padding: 14px !important;
    border-bottom: 1px solid rgba(236, 72, 153, 0.25) !important;
}

.save-mode-group .checkbox-line {
    font-size: 0.88rem;
}

.save-mode-group .field-hint {
    font-size: 0.72rem;
    line-height: 1.65;
}

.segmented {
    min-height: 44px;
    padding: 5px;
}

.segmented-btn {
    min-height: 32px;
    padding: 8px 5px;
}

.field-group select {
    min-height: 42px;
    padding: 9px 11px;
}

.advanced-settings {
    gap: 14px;
    margin-top: 2px;
    padding: 12px 0 0;
    border-top-color: rgba(190, 24, 93, 0.14);
}

.advanced-settings summary {
    padding: 10px 12px;
    border: 1px solid rgba(236, 72, 153, 0.14);
    border-radius: 8px;
    background: rgba(236, 72, 153, 0.04);
    color: #861B4D;
}

.advanced-settings[open] summary {
    background: rgba(236, 72, 153, 0.08);
    border-color: rgba(236, 72, 153, 0.28);
}

.field-hint {
    line-height: 1.55;
}

.settings-footer {
    margin-top: 3px;
    padding-top: 14px;
    line-height: 1.55;
    border-top-color: rgba(190, 24, 93, 0.12);
}

@media (max-width: 860px) {
    #settings-panel {
        padding: 18px;
    }
}

/* ---------- Toggle controls and text contrast ---------- */
.checkbox-line input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 24px;
    margin: 0;
    border: 1px solid rgba(190, 24, 93, 0.25);
    border-radius: 999px;
    background: #F1DCE7;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkbox-line input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 2px 5px rgba(100, 32, 65, 0.22);
    transition: transform 0.2s ease;
}

.checkbox-line input[type="checkbox"]:checked {
    border-color: #D92778;
    background: var(--pink);
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.12);
}

.checkbox-line input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}

.checkbox-line input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(190, 24, 93, 0.45);
    outline-offset: 2px;
}

.switch-state {
    flex: 0 0 25px;
    color: #956178;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0;
}

.switch-state::before { content: "OFF"; }

.checkbox-line input[type="checkbox"]:checked + .switch-state {
    color: #B3145B;
}

.checkbox-line input[type="checkbox"]:checked + .switch-state::before {
    content: "ON";
}

.field-hint,
.save-mode-group .field-hint {
    color: #7A284E;
    font-weight: 500;
}

.save-mode-group .field-hint {
    opacity: 1;
    max-height: none;
    overflow: visible;
    text-shadow: none;
}

/* ---------- Help panel readability ---------- */
#help-panel {
    overflow: hidden;
    border-color: rgba(190, 24, 93, 0.16);
}

#help-panel > summary {
    min-height: 48px;
    padding: 14px 18px;
    color: #7D1C4C;
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.09), rgba(255, 255, 255, 0));
}

#help-panel > summary::before {
    color: var(--pink);
    font-size: 0.9rem;
}

#help-panel[open] > summary {
    border-bottom: 1px solid rgba(190, 24, 93, 0.12);
}

.help-panel-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    padding: 22px 24px 24px;
    border-top: none;
    background: rgba(255, 255, 255, 0.56);
}

.help-col {
    min-width: 0;
    max-width: 780px;
    padding-left: 16px;
    border-left: 3px solid rgba(236, 72, 153, 0.55);
}

.help-col + .help-col {
    border-left-color: #F59E0B;
}

.help-col-title {
    margin-bottom: 13px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.info-title { color: #9D174D; }
.warning-title { color: #B45309; }

.info-steps, .warning-list {
    gap: 10px;
    padding-left: 21px;
}

.info-steps li, .warning-list li {
    color: #5E4051;
    font-size: 0.82rem;
    line-height: 1.72;
}

.info-steps li::marker { color: var(--pink); font-weight: 800; }
.warning-list li::marker { color: #D97706; }
.warning-list li strong { color: #9D174D; }

@media (max-width: 980px) {
    .help-panel-body {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 18px;
    }

    .help-col {
        max-width: none;
    }
}

/* ---------- Workflow helpers ---------- */
#image-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 2px 0;
}

#image-info span {
    padding: 6px 10px;
    border: 1px solid rgba(190, 24, 93, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: #7A284E;
    font-size: 0.72rem;
    font-weight: 600;
}

#image-info-load {
    color: #9D174D !important;
    background: rgba(236, 72, 153, 0.08) !important;
}

#zoom-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

#zoom-controls[hidden] { display: none; }

#zoom-controls button {
    width: 34px;
    height: 30px;
    border: 1px solid rgba(190, 24, 93, 0.18);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.82);
    color: #7D1C4C;
    font: 700 0.78rem var(--font-main);
    cursor: pointer;
}

#zoom-controls button:hover {
    border-color: rgba(236, 72, 153, 0.48);
    background: rgba(236, 72, 153, 0.08);
}

#zoom-reset-btn { width: 52px !important; }

#zoom-controls span {
    margin-left: 4px;
    color: #8D6478;
    font-size: 0.7rem;
}

#dest {
    transform-origin: center center;
    transition: transform 0.16s ease;
    cursor: zoom-in;
    touch-action: none;
}

#dest.is-panning {
    cursor: grabbing;
    transition: none;
}

#history-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid rgba(190, 24, 93, 0.15);
    background: rgba(255, 248, 252, 0.7);
}

#history-panel[hidden] { display: none; }

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #7D1C4C;
    font-size: 0.78rem;
    font-weight: 800;
}

#history-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
}

.history-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(190, 24, 93, 0.13);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.history-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 5px;
    background: #FCE7F3;
}

.history-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.history-meta strong {
    overflow: hidden;
    color: #6C2145;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-meta span {
    color: #906579;
    font-size: 0.66rem;
}

.history-download {
    color: #B3145B;
    font-size: 0.68rem;
    font-weight: 800;
    text-decoration: none;
}

.history-download:hover { text-decoration: underline; }

@media (max-width: 650px) {
    #history-list { grid-template-columns: 1fr; }
    #zoom-controls span { width: 100%; margin-left: 0; text-align: center; }
}

/* ===== Account / credit system ===== */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.account-button {
    min-height: 36px;
    border: 1px solid rgba(190, 24, 93, 0.26);
    border-radius: 999px;
    padding: 7px 13px;
    background: rgba(255, 255, 255, 0.84);
    color: #861b4d;
    font: 700 0.76rem var(--font-main);
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(190, 24, 93, 0.08);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.account-button:hover {
    transform: translateY(-1px);
    background: #fff;
    box-shadow: 0 8px 22px rgba(190, 24, 93, 0.15);
}

.notification-button {
    position: relative;
    display: grid;
    width: 46px;
    min-width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(190,24,93,.2);
    border-radius: 15px;
    color: #8b2252;
    background: linear-gradient(135deg,#fff5fa,#fff);
    font-size: 1rem;
    cursor: pointer;
    overflow: visible;
    box-shadow: 0 6px 18px rgba(190,24,93,.07);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.notification-button:hover { box-shadow: 0 8px 20px rgba(190,24,93,.13); transform: translateY(-1px); }
.notification-button[hidden] { display: none !important; }
#notification-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 999px;
    color: #fff;
    background: #db2777;
    border: 2px solid #fff;
    font: 700 .58rem/18px var(--font-main);
    text-align: center;
    white-space: nowrap;
    z-index: 4;
}
#notification-badge[hidden] { display:none; }
.package-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.package-card {
    display:flex; flex-direction:column; gap:3px; min-height:62px; padding:8px;
    border:1px solid rgba(190,24,93,.14); border-radius:10px; color:#6e1742;
    background:linear-gradient(145deg,#fff,#fff4fa); font: .68rem var(--font-main);
    cursor:pointer; text-align:left; transition:.2s ease;
}
.package-card:hover { transform:translateY(-2px); border-color:rgba(236,72,153,.44); box-shadow:0 8px 18px rgba(190,24,93,.11); }
.package-card strong { font-size:.72rem; }
.package-card span { color:#9a6b82; font-size:.62rem; }
.notification-dialog { width:min(620px,100%); }
.notification-list { display:flex; flex-direction:column; gap:7px; max-height:58vh; overflow:auto; }
.notification-row { display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; align-items:center; padding:10px; border:1px solid rgba(190,24,93,.1); border-radius:11px; background:#fff; }
.notification-row.is-unread { border-color:rgba(236,72,153,.3); background:#fff8fc; }
.notification-type { display:grid; width:28px; height:28px; place-items:center; border-radius:9px; color:#fff; background:#94a3b8; font-weight:800; }
.notification-type.success { background:#22c55e; }
.notification-type.error { background:#ef4444; }
.notification-row strong, .notification-row small, .notification-row time { display:block; }
.notification-row strong { color:#6e1742; font-size:.74rem; }
.notification-row small { margin-top:2px; color:#8e6177; font-size:.65rem; }
.notification-row time { margin-top:3px; color:#b08a9e; font-size:.58rem; }
@media (max-width:620px) {
    .package-list { grid-template-columns:1fr; }
    .notification-button { width:42px; min-width:42px; height:42px; border-radius:13px; }
    #notification-badge { top:-6px; right:-6px; }
}

.account-button.is-signed-in {
    border-color: rgba(190, 24, 93, 0.44);
    background: linear-gradient(135deg, #fff 0%, #fff0f7 100%);
}

.admin-quick-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.admin-quick-link[hidden] { display: none; }

.account-modal[hidden] { display: none; }

.account-modal {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.account-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(49, 11, 31, 0.45);
    backdrop-filter: blur(5px);
}

.account-dialog {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    max-height: min(760px, calc(100vh - 40px));
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid rgba(190, 24, 93, 0.25);
    border-radius: 19px;
    padding: 28px;
    background: linear-gradient(150deg, #fff 0%, #fff8fb 100%);
    box-shadow: 0 25px 75px rgba(65, 10, 37, 0.32);
    color: #591735;
}

.wallet-dialog { width: min(850px, 100%); }

.modal-close {
    position: absolute;
    top: 11px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #fff0f6;
    color: #9e245a;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.account-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0 42px 20px 0;
    padding: 4px;
    border-radius: 11px;
    background: #fff0f6;
}

.account-tab {
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8d3b61;
    font: 700 .8rem var(--font-main);
    cursor: pointer;
}

.account-tab.is-active {
    background: #fff;
    color: #b31359;
    box-shadow: 0 3px 9px rgba(190, 24, 93, .12);
}

.account-form {
    display: grid;
    gap: 12px;
}

.account-form h2 {
    margin: 0;
    color: #6e1742;
    font-size: 1.16rem;
}

.account-form p {
    margin: -4px 0 2px;
    color: #89506a;
    font-size: .8rem;
    line-height: 1.65;
}

.account-form label {
    display: grid;
    gap: 6px;
    color: #762444;
    font-size: .77rem;
    font-weight: 700;
}

.account-form input {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(190, 24, 93, .24);
    border-radius: 8px;
    padding: 9px 11px;
    outline: 0;
    background: #fff;
    color: #54142f;
    font: .86rem var(--font-main);
}

.account-form input:focus {
    border-color: #d92a74;
    box-shadow: 0 0 0 3px rgba(217, 42, 116, .13);
}

.account-primary,
.account-secondary {
    min-height: 42px;
    border-radius: 9px;
    padding: 9px 13px;
    font: 700 .81rem var(--font-main);
    cursor: pointer;
}

.account-primary {
    border: 0;
    background: linear-gradient(130deg, #bd1258, #ed4a8e);
    color: #fff;
    box-shadow: 0 9px 20px rgba(190, 24, 93, .22);
}

.account-primary:disabled,
.account-secondary:disabled { cursor: not-allowed; opacity: .58; }

.account-secondary {
    border: 1px solid rgba(190, 24, 93, .26);
    background: #fff;
    color: #8b2252;
}

.account-message {
    margin: 0 0 15px;
    border-radius: 9px;
    padding: 10px 12px;
    background: #effbf4;
    color: #167142;
    font-size: .78rem;
    line-height: 1.5;
}

.account-message.is-error {
    background: #fff0f4;
    color: #ae194e;
}

.wallet-head {
    display: grid;
    gap: 2px;
    margin: 0 36px 20px 0;
}

.wallet-head > span {
    color: #8e4266;
    font-size: .77rem;
    font-weight: 700;
}

.wallet-head strong {
    color: #b31359;
    font-size: 1.55rem;
    line-height: 1.25;
}

.wallet-head small {
    color: #8b5870;
    font-size: .73rem;
}

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

.compact-form {
    align-content: start;
    box-sizing: border-box;
    min-height: 260px;
    border: 1px solid rgba(190, 24, 93, .16);
    border-radius: 13px;
    padding: 17px;
    background: rgba(255, 255, 255, .72);
}

#payment-instructions {
    min-height: 62px;
    white-space: pre-line;
}

.wallet-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 17px;
}

.wallet-footer a {
    color: #b31359;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

body.account-modal-open { overflow: hidden; }

@media (max-width: 820px) {
    .header-actions { gap: 7px; }
}

@media (max-width: 620px) {
    #app-header { align-items: flex-start; gap: 10px; }
    .header-actions { width: 100%; justify-content: space-between; }
    .account-button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .account-dialog { padding: 23px 18px 18px; }
    .wallet-grid { grid-template-columns: 1fr; }
    .compact-form { min-height: 0; }
}

/* ===== Studio navigation / sidebar ===== */
#app-shell {
    padding: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 0%, rgba(236, 72, 153, .1), transparent 34rem),
        radial-gradient(circle at 100% 12%, rgba(124, 58, 237, .07), transparent 30rem),
        #fff8fc;
}

.app-layout {
    display: flex;
    min-height: 100vh;
}

#app-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex: 0 0 246px;
    flex-direction: column;
    min-height: 100vh;
    padding: 22px 14px 16px;
    border-right: 1px solid rgba(190, 24, 93, .13);
    background: rgba(255, 251, 253, .78);
    box-shadow: 12px 0 35px rgba(110, 20, 66, .05);
    backdrop-filter: blur(18px);
    transition: flex-basis .28s ease, width .28s ease;
}

.sidebar-brand {
    display: block;
    padding: 0 11px 22px;
    color: #4a1630;
}

.sidebar-mark {
    display: grid;
    width: 100%;
    height: 110px;
    min-height: 110px;
    place-items: center;
    border-radius: 13px;
    overflow: visible;
    position: relative;
}
.sidebar-logo { width: auto; max-width: 100%; height: 110px !important; max-height: 100%; padding: 0; object-fit: contain !important; display: block; }
.brand-logo { width:42px; height:42px; padding: 3px; object-fit:contain; border-radius:12px; border:1px solid rgba(190,24,93,.16); box-shadow:0 8px 18px rgba(190,24,93,.12); background:#fff; }

.sidebar-brand strong, .sidebar-brand span { display: block; }
.sidebar-brand strong { font-size: .86rem; letter-spacing: .04em; }
.sidebar-brand span { margin-top: 3px; color: #a26b87; font-size: .54rem; letter-spacing: .16em; }
.sidebar-nav { display: flex; flex-direction: column; gap: 5px; }
.sidebar-section-label { margin: 14px 10px 4px; color: #bd8da7; font-size: .58rem; font-weight: 800; letter-spacing: .15em; }
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 0;
    border-radius: 12px;
    color: #87516f;
    background: transparent;
    font: 700 .75rem var(--font-main);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: .2s ease;
}
.sidebar-link:hover, .sidebar-link.is-active {
    color: #a41456;
    background: linear-gradient(100deg, rgba(236,72,153,.13), rgba(124,58,237,.07));
    transform: translateX(2px);
}
.sidebar-icon { display: grid; width: 22px; place-items: center; font-size: .95rem; }
.sidebar-bottom-card {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 11px 9px;
    border: 1px solid rgba(34,197,94,.16);
    border-radius: 13px;
    background: rgba(240,253,244,.72);
}
.sidebar-orb { color: #16a34a; font-size: 1.2rem; }
.sidebar-bottom-card strong, .sidebar-bottom-card small { display: block; }
.sidebar-bottom-card strong { color: #21633b; font-size: .66rem; }
.sidebar-bottom-card small { margin-top: 2px; color: #5e8b70; font-size: .56rem; }
.sidebar-collapse {
    position: absolute;
    top: 82px;
    right: -13px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(190,24,93,.18);
    border-radius: 50%;
    color: #a41456;
    background: #fff;
    box-shadow: 0 5px 14px rgba(104,24,68,.1);
    cursor: pointer;
}
.app-main-shell { flex: 1; min-width: 0; padding: 18px 28px 30px; }
.app-main-shell #app-header { margin-bottom: 16px; border: 1px solid rgba(190,24,93,.1); border-radius: 18px; box-shadow: 0 12px 32px rgba(104,24,68,.06); }
.app-main-shell #app-main { min-height: calc(100vh - 122px); }
.sidebar-collapsed #app-sidebar { flex-basis: 76px; }
.sidebar-collapsed .sidebar-brand > div:not(.sidebar-mark),
.sidebar-collapsed .sidebar-link-text,
.sidebar-collapsed .sidebar-section-label,
.sidebar-collapsed .sidebar-bottom-card > div { display: none; }
.sidebar-collapsed .sidebar-brand { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .sidebar-link { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .sidebar-bottom-card { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .sidebar-collapse { transform: rotate(180deg); }

.credit-history-dialog {
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: min(760px, calc(100vh - 40px));
    overflow: hidden;
}
.history-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin:0 36px 18px 0; }
.history-modal-head h2 { margin:4px 0 0; color:#5e1737; font-size:1.2rem; }
.history-modal-head > strong { color:#b31359; font-size:1.25rem; }
.eyebrow { color:#c02670; font-size:.58rem; font-weight:800; letter-spacing:.16em; }
.credit-history-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
    min-height: 0;
    overflow: auto;
    padding-right: 8px;
    scrollbar-gutter: stable;
}
.credit-history-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px; border:1px solid rgba(190,24,93,.12); border-radius:11px; background:rgba(255,255,255,.76); }
.credit-history-icon { display:grid; width:30px; height:30px; place-items:center; border-radius:10px; font-weight:800; }
.credit-history-icon.is-credit { color:#16804a; background:#e9f9ef; }
.credit-history-icon.is-debit { color:#b4235b; background:#fff0f5; }
.credit-history-body, .credit-history-meta { display:flex; flex-direction:column; gap:2px; }
.credit-history-body strong { color:#6e1742; font-size:.76rem; }
.credit-history-body small, .credit-history-meta small { color:#95677d; font-size:.64rem; }
.credit-history-meta { align-items:flex-end; }
.credit-history-meta strong { font-size:.75rem; }
.credit-history-meta strong.is-credit { color:#16804a; }
.credit-history-meta strong.is-debit { color:#b4235b; }
.empty-history { padding:24px 10px; border:1px dashed rgba(190,24,93,.18); border-radius:12px; color:#95677d; font-size:.75rem; text-align:center; }

@media (max-width: 900px) {
    #app-sidebar { flex-basis: 210px; }
    .app-main-shell { padding-inline: 16px; }
}
@media (max-width: 700px) {
    .app-layout { display:block; }
    #app-sidebar { position:fixed; inset:0 auto 0 0; width:246px; min-height:100vh; transform:translateX(-102%); transition:transform .25s ease; }
    .app-layout:has(#app-sidebar:hover) #app-sidebar, #app-sidebar:focus-within { transform:translateX(0); }
    .app-main-shell { padding:12px; }
    .sidebar-collapse { right:-38px; }
    .sidebar-collapsed #app-sidebar { flex-basis:auto; width:246px; transform:translateX(-102%); }
}

/* Keep the help popup wide even after the shared account-dialog rules. */
.account-dialog.help-dialog {
    width: min(1180px, calc(100vw - 32px));
    max-width: none;
}
@media (max-width: 560px) {
    .account-dialog.help-dialog {
        width: calc(100vw - 20px);
    }
}

/* Header account tools: separated identity, credit, admin, notification, and logout controls. */
.header-account-tools {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.account-user-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 5px 13px 5px 8px;
    border: 1px solid rgba(190,24,93,.24);
    border-radius: 15px;
    background: rgba(255,255,255,.9);
    color: #6e1742;
    text-align: left;
    cursor: default;
}
.account-avatar {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg,#fce7f3,#ede9fe);
    font-size: .95rem;
}
.account-user-copy {
    display: grid;
    gap: 1px;
    min-width: 90px;
}
.account-user-copy small {
    color: #b07a93;
    font-size: .58rem;
    font-weight: 700;
}
.account-user-copy strong {
    max-width: 145px;
    overflow: hidden;
    color: #6e1742;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-credit-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid rgba(236,72,153,.23);
    border-radius: 15px;
    background: linear-gradient(135deg,#fff5fa,#fff);
    color: #a41456;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(190,24,93,.07);
}
.header-credit-card span { font-size: .65rem; font-weight: 700; }
.header-credit-card strong { color: #b31359; font-size: .84rem; }
.header-credit-card[hidden],
.sidebar-link[hidden] { display: none !important; }
.admin-quick-link,
.header-logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid rgba(124,58,237,.19);
    border-radius: 15px;
    background: rgba(255,255,255,.9);
    color: #6930a7;
    font: 700 .68rem var(--font-main);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.admin-quick-link:hover,
.header-logout-button:hover,
.header-credit-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(190,24,93,.12);
}
.account-user-button:hover {
    transform: none;
    box-shadow: 0 5px 18px rgba(190,24,93,.08);
}
.account-user-button.is-login-action {
    cursor: pointer;
}
.account-user-button.is-login-action:hover {
    transform: translateY(-1px);
    background: #fff;
    box-shadow: 0 8px 22px rgba(190,24,93,.15);
}
.header-logout-button {
    border-color: rgba(239,68,68,.2);
    color: #b4233f;
    background: #fff7f8;
}
.header-logout-button[hidden],
.admin-quick-link[hidden] { display: none; }

@media (max-width: 960px) {
    .header-account-tools { gap: 6px; }
    .account-user-copy strong { max-width: 110px; }
    .admin-quick-link,
    .header-logout-button,
    .header-credit-card { padding-inline: 9px; }
}
@media (max-width: 620px) {
    .header-account-tools {
        width: 100%;
        justify-content: flex-start;
    }
    .account-user-button { flex: 1 1 170px; }
    .header-credit-card { flex: 0 0 auto; }
    .admin-quick-link,
    .header-logout-button { flex: 1 1 auto; }
}

/* Wallet / credit center visual refresh. */
.account-dialog.wallet-dialog {
    width: min(980px, calc(100vw - 32px));
    max-width: none;
    padding: 30px;
}
.wallet-dialog .wallet-head {
    margin: 0 0 20px;
    padding: 19px 22px;
    border: 1px solid rgba(236,72,153,.2);
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 15%, rgba(236,72,153,.18), transparent 10rem),
        linear-gradient(135deg,#fff3f9,#fff);
    box-shadow: 0 10px 25px rgba(190,24,93,.08);
}
.wallet-dialog .wallet-head > span {
    color: #a41456;
    font-size: .78rem;
    letter-spacing: .02em;
}
.wallet-dialog .wallet-head strong {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #bd1258;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
}
.wallet-dialog .wallet-head strong::before {
    content: "✨";
    font-size: .9em;
}
.wallet-dialog .wallet-head small {
    color: #8b5870;
    font-size: .72rem;
}
.wallet-dialog .compact-form {
    min-height: 310px;
    padding: 20px;
    border-color: rgba(236,72,153,.18);
    border-radius: 17px;
    background: linear-gradient(145deg,#fff,#fff8fc);
    box-shadow: 0 10px 25px rgba(104,24,68,.055);
}
.wallet-dialog .compact-form h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #741a45;
    font-size: 1.05rem;
}
.wallet-dialog .compact-form p {
    min-height: 30px;
    color: #956178;
}
.wallet-dialog .compact-form label {
    color: #7d2a50;
}
.wallet-dialog .compact-form label small {
    color: #a4778c;
    font-size: .66rem;
    font-weight: 500;
}
.wallet-dialog .package-list {
    gap: 9px;
}
.wallet-dialog .package-card {
    min-height: 70px;
    padding: 10px;
    border-radius: 13px;
    border-color: rgba(236,72,153,.2);
}
.wallet-dialog .package-card strong { color: #7d1f49; }
.wallet-dialog .package-card span { line-height: 1.45; }
.wallet-dialog .account-primary {
    min-height: 46px;
    border-radius: 11px;
    font-size: .83rem;
}
.wallet-dialog .wallet-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed rgba(190,24,93,.18);
}
.wallet-membership-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 6px;
    padding: 4px 9px;
    border: 1px solid rgba(236, 72, 153, .18);
    border-radius: 999px;
    background: #fff0f7;
    color: #a41456;
    font-size: .66rem;
    font-weight: 700;
}
.wallet-dialog .wallet-footer a,
.wallet-dialog .wallet-footer button {
    min-height: 40px;
    padding-inline: 13px;
    border-radius: 10px;
}
@media (max-width: 620px) {
    .account-dialog.wallet-dialog {
        width: calc(100vw - 20px);
        padding: 21px 16px 17px;
    }
    .wallet-dialog .compact-form { min-height: 0; padding: 16px; }
}

/* Authentication modal: show one form at a time and keep the brand centered. */
.account-form[hidden] { display: none !important; }
.account-dialog.auth-dialog {
    width: min(500px, calc(100vw - 32px));
    max-width: none;
    padding: 30px;
}
.auth-brand {
    display: grid;
    justify-items: center;
    gap: 4px;
    margin: 4px 0 20px;
    text-align: center;
}
.auth-logo {
    width: 132px;
    height: 94px;
    object-fit: contain;
    border-radius: 16px;
}
.auth-brand span {
    color: #741a45;
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.auth-brand small {
    color: #a4778c;
    font-size: .66rem;
}
.auth-dialog .account-tabs { margin-bottom: 22px; }
@media (max-width: 560px) {
    .account-dialog.auth-dialog { width: calc(100vw - 20px); padding: 24px 18px 20px; }
    .auth-logo { width: 112px; height: 82px; }
}

/* Lightweight account feedback shown after login/logout without opening the wallet. */
.account-toast[hidden] { display: none !important; }
.account-toast {
    position: fixed;
    z-index: 3200;
    top: 22px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 11px;
    width: min(430px, calc(100vw - 28px));
    box-sizing: border-box;
    padding: 13px 13px 13px 14px;
    border: 1px solid rgba(236, 72, 153, .25);
    border-radius: 16px;
    background: linear-gradient(135deg, #fff 0%, #fff5fa 100%);
    color: #63163b;
    box-shadow: 0 18px 45px rgba(109, 21, 65, .2);
    transform: translate(-50%, -14px);
    opacity: 0;
    animation: account-toast-in .24s ease forwards;
}
.account-toast.is-error {
    border-color: rgba(220, 38, 38, .25);
    background: linear-gradient(135deg, #fff 0%, #fff3f3 100%);
}
.account-toast-icon {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: #d92a74;
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
}
.account-toast.is-error .account-toast-icon { background: #dc2626; }
.account-toast-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}
.account-toast-copy strong {
    color: #8c174d;
    font-size: .8rem;
}
.account-toast-copy span {
    overflow: hidden;
    color: #8a6176;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-toast-close {
    display: grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin-left: auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(236, 72, 153, .08);
    color: #a62b60;
    cursor: pointer;
    font: 700 .9rem/1 var(--font-main);
}
.account-toast-close:hover { background: rgba(236, 72, 153, .16); }
@keyframes account-toast-in {
    from { opacity: 0; transform: translate(-50%, -14px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 560px) {
    .account-toast { top: 12px; }
}

/* Preset cards keep the common workflows visible without hiding advanced controls. */
.preset-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}
.preset-card {
    display: grid;
    min-width: 0;
    min-height: 72px;
    gap: 2px;
    place-items: center;
    padding: 7px 5px;
    border: 1px solid rgba(190, 24, 93, .14);
    border-radius: 12px;
    background: linear-gradient(145deg, #fff, #fff7fb);
    color: #7d2a51;
    cursor: pointer;
    font-family: var(--font-main);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.preset-card > span { font-size: 1.15rem; line-height: 1; }
.preset-card strong { font-size: .66rem; }
.preset-card small { color: #a4778c; font-size: .55rem; white-space: nowrap; }
.preset-card:hover { transform: translateY(-2px); border-color: rgba(236, 72, 153, .4); box-shadow: 0 8px 18px rgba(190, 24, 93, .1); }
.preset-card.is-active {
    border-color: rgba(219, 39, 119, .62);
    background: linear-gradient(145deg, #fff0f7, #ffe1ef);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, .1), 0 8px 20px rgba(190, 24, 93, .12);
}
.preset-card.is-active strong { color: #b31359; }
.model-preload-button {
    justify-self: start;
    min-height: 32px;
    margin-top: 3px;
    padding: 6px 10px;
    border: 1px solid rgba(236, 72, 153, .24);
    border-radius: 9px;
    background: #fff;
    color: #a91655;
    font: 700 .66rem var(--font-main);
    cursor: pointer;
    transition: .18s ease;
}
.model-preload-button:hover:not(:disabled) { border-color: rgba(236, 72, 153, .5); background: #fff3f8; transform: translateY(-1px); }
.model-preload-button:disabled { cursor: wait; opacity: .62; }
@media (max-width: 920px) {
    .preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#result-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}
#result-summary[hidden] { display: none !important; }
#result-summary span {
    padding: 6px 10px;
    border: 1px solid rgba(236, 72, 153, .18);
    border-radius: 999px;
    background: linear-gradient(135deg, #fff, #fff2f8);
    color: #7d2a51;
    font-size: .68rem;
    font-weight: 700;
}
#result-summary-status {
    color: #a91655 !important;
    border-color: rgba(236, 72, 153, .34) !important;
}

#dest-box.has-result {
    border-style: solid;
    border-color: rgba(236, 72, 153, .34);
    box-shadow: 0 12px 30px rgba(190, 24, 93, .08);
}
#canvas-panel.is-processing #dest-box::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .18) 48%, transparent 76%);
    transform: translateX(-100%);
    animation: result-scan 1.8s ease-in-out infinite;
}
@keyframes result-scan {
    to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    #canvas-panel.is-processing #dest-box::after,
    #dest.result-ready,
    #dest-box.flash-done,
    .preset-card { animation: none !important; transition: none !important; }
}

/* ---------- Result download action ---------- */
#message {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
}

.result-message-label {
    color: #7a284e;
    font-size: .8rem;
    font-weight: 700;
}

.result-download-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px 8px 11px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 12px;
    background: linear-gradient(135deg, #ec4899 0%, #d62978 52%, #be185d 100%);
    box-shadow: 0 8px 18px rgba(190, 24, 93, .24), inset 0 1px 0 rgba(255, 255, 255, .34);
    color: #fff;
    font: 700 .76rem/1 var(--font-main);
    text-decoration: none;
    transform: translateZ(0);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.result-download-btn::after {
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 38%;
    content: "";
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
}

.result-download-btn:hover {
    box-shadow: 0 12px 24px rgba(190, 24, 93, .33), inset 0 1px 0 rgba(255, 255, 255, .42);
    filter: saturate(1.08);
    transform: translateY(-2px);
}

.result-download-btn:hover::after { left: 125%; }

.result-download-btn:active { transform: translateY(0) scale(.98); }

.result-download-btn:focus-visible {
    outline: 3px solid rgba(236, 72, 153, .3);
    outline-offset: 2px;
}

.result-download-icon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .2);
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 520px) {
    #message { align-items: stretch; }
    .result-message-label { width: 100%; }
    .result-download-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .result-download-btn,
    .result-download-btn::after { transition: none; }
}

/* ---------- Settings panel: calm, compact and easier to scan ---------- */
@media (min-width: 861px) {
    #app-main {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 22px;
    }
}

@media (min-width: 1180px) {
    #app-main { grid-template-columns: minmax(0, 1fr) 380px; }
}

#settings-panel {
    gap: 14px;
    padding: 22px 20px 18px;
    border-radius: 18px;
    border-top-width: 3px;
    box-shadow: 0 18px 42px rgba(139, 50, 95, .11), inset 0 1px rgba(255, 255, 255, .92);
}

.settings-title {
    position: relative;
    gap: 9px;
    margin: 0 0 2px;
    padding: 0 0 15px;
    color: #5A1738;
    font-size: 1.02rem;
    letter-spacing: -.01em;
    border-bottom: 1px solid rgba(190, 24, 93, .11);
}

.settings-title::after {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 52px;
    height: 3px;
    content: "";
    border-radius: 999px;
    background: var(--red-gradient);
}

#form-box {
    gap: 0;
}

#form-box > .field-group,
.advanced-settings > .field-group {
    gap: 8px;
    margin: 0;
    padding: 15px 0;
    border-bottom: 1px solid rgba(190, 24, 93, .1);
}

#form-box > .field-group:last-of-type,
.advanced-settings > .field-group:last-of-type {
    padding-bottom: 5px;
}

.field-group > label:first-child:not(.checkbox-line)::after {
    display: none;
}

.field-group > label:first-child:not(.checkbox-line) {
    color: #741A45;
    font-size: .79rem;
    font-weight: 800;
}

.field-hint {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    color: #98627B;
    font-size: .66rem;
    line-height: 1.5;
    transition: opacity .18s ease, max-height .18s ease, margin .18s ease;
}

.field-group:hover .field-hint,
.field-group:focus-within .field-hint {
    max-height: 5em;
    margin-top: 1px;
    opacity: 1;
}

#scale-comment,
#tile-comment {
    max-height: 2.2em;
    margin-top: 1px;
    opacity: 1;
}

.save-mode-group {
    gap: 9px !important;
    margin: 10px 0 !important;
    padding: 13px 14px !important;
    border: 1px solid rgba(236, 72, 153, .2) !important;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(236, 72, 153, .07), rgba(35, 197, 138, .045));
}

.save-mode-group .checkbox-line {
    font-size: .82rem;
}

.save-mode-group .field-hint {
    display: -webkit-box;
    max-height: 3em;
    overflow: hidden;
    opacity: 1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.save-mode-group:hover .field-hint,
.save-mode-group:focus-within .field-hint {
    max-height: 12em;
    -webkit-line-clamp: unset;
}

.checkbox-line {
    gap: 8px;
    color: #65223F;
    font-size: .78rem;
}

.preset-group {
    padding-top: 16px !important;
}

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

.preset-card {
    min-height: 78px;
    padding: 9px 6px;
    border-radius: 13px;
}

.preset-card > span { font-size: 1.2rem; }
.preset-card strong { font-size: .68rem; }
.preset-card small {
    overflow: hidden;
    max-width: 100%;
    font-size: .57rem;
    text-overflow: ellipsis;
}

.segmented {
    gap: 3px;
    padding: 4px;
    border-radius: 12px;
}

.segmented-btn {
    min-width: 0;
    min-height: 34px;
    padding: 7px 3px;
    font-size: .7rem;
}

.field-group select {
    min-height: 42px;
    border-radius: 11px;
}

.model-preload-button {
    width: 100%;
    min-height: 38px;
    margin-top: 2px;
    border-radius: 11px;
    background: linear-gradient(135deg, #fff, #fff5fa);
    font-size: .7rem;
}

.advanced-settings {
    gap: 10px;
    margin-top: 10px;
    padding: 0;
    border-top: 0;
}

.advanced-settings summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 13px;
    border-radius: 11px;
    background: rgba(236, 72, 153, .045);
    color: #741A45;
    font-size: .76rem;
}

.advanced-settings[open] summary,
.settings-footer {
    margin-top: 10px;
    padding-top: 13px;
    color: #98627B;
    font-size: .64rem;
}

@media (max-width: 520px) {
    #settings-panel { padding: 18px 14px 16px; }
    .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- UX polish: theme, micro-interactions, upload and result states ---------- */
.theme-toggle,
.mobile-sidebar-toggle {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(190, 24, 93, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .78);
    color: #741A45;
    cursor: pointer;
    font-size: 1rem;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.theme-toggle:hover,
.mobile-sidebar-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(190, 24, 93, .16);
}
.mobile-sidebar-toggle { display: none; }

body {
    transition: background-color .3s ease, color .3s ease;
}
#app-shell, #app-header, #canvas-panel, #settings-panel, #src-box, #dest-box,
.account-dialog, .account-toast, .header-credit-card, .account-button {
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}

#src-box::after,
#dest-box::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.46) 48%, transparent 76%);
    transform: translateX(-120%);
}
#src-box.has-image::after {
    animation: imageShimmer 1.2s ease-out .15s 1;
}
@keyframes imageShimmer {
    0% { opacity: 0; transform: translateX(-120%); }
    25% { opacity: .7; }
    100% { opacity: 0; transform: translateX(120%); }
}

.upload-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 13px;
    border: 1px solid rgba(236, 72, 153, .15);
    border-radius: 14px;
    background: linear-gradient(105deg, rgba(255,255,255,.96), rgba(255,240,248,.78));
    box-shadow: 0 9px 22px rgba(139, 50, 95, .06);
    animation: slideFadeIn .28s ease-out;
}
.upload-meta[hidden] { display: none; }
.upload-meta-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 11px;
    background: #fce7f3;
    font-size: 1rem;
}
.upload-meta-copy { min-width: 0; display: grid; gap: 1px; }
.upload-meta-copy strong,
.upload-meta-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-meta-copy strong { color: #5A1738; font-size: .74rem; }
.upload-meta-copy small { color: #98627B; font-size: .62rem; }
.upload-meta-status {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    color: #15803d;
    background: #dcfce7;
    font-size: .61rem;
    font-weight: 800;
}
@keyframes slideFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.result-empty-state {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 20px;
    text-align: center;
    color: #98627B;
    pointer-events: none;
}
.result-empty-state span { font-size: 2rem; filter: drop-shadow(0 8px 15px rgba(236,72,153,.2)); }
.result-empty-state strong { color: #741A45; font-size: .78rem; }
.result-empty-state small { max-width: 190px; font-size: .62rem; line-height: 1.5; }
#dest-box.has-result .result-empty-state { display: none; }
#result-ready-badge {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 10px;
    padding: 5px 9px;
    border: 1px solid rgba(34,197,94,.2);
    border-radius: 999px;
    color: #15803d;
    background: rgba(240,253,244,.9);
    box-shadow: 0 5px 16px rgba(21,128,61,.12);
    font-size: .6rem;
    font-weight: 800;
}
#result-ready-badge[hidden] { display: none; }
.result-empty-state[hidden] { display: none !important; }

.quick-help {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid rgba(236,72,153,.14);
    border-radius: 12px;
    background: linear-gradient(105deg, rgba(255,247,251,.95), rgba(255,255,255,.9));
}
.quick-help-icon {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    place-items: center;
    border-radius: 9px;
    background: #fef3c7;
}
.quick-help div { display: grid; gap: 1px; min-width: 0; }
.quick-help strong { color: #741A45; font-size: .68rem; }
.quick-help small { color: #98627B; font-size: .59rem; line-height: 1.45; }

#result-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(236,72,153,.14);
    border-radius: 12px;
    background: rgba(255,247,251,.9);
}
#result-summary span {
    padding: 4px 8px;
    border-radius: 999px;
    background: #fff;
    color: #87536d;
    font-size: .62rem;
    font-weight: 700;
}
#result-summary-status { color: #15803d !important; background: #f0fdf4 !important; }

.header-credit-card.is-updated {
    animation: creditBounce .55s ease-out;
}
@keyframes creditBounce {
    0% { transform: scale(1); }
    45% { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(236,72,153,.12), 0 11px 25px rgba(236,72,153,.2); }
    100% { transform: scale(1); }
}

.account-toast {
    border: 1px solid rgba(236,72,153,.22);
    box-shadow: 0 18px 50px rgba(100, 24, 68, .18);
    backdrop-filter: blur(16px);
}
.account-toast.is-error { border-color: rgba(239,68,68,.28); }

/* Dark theme is intentionally lightweight: no filters, so canvas/AI rendering is unaffected. */
body[data-theme="dark"] {
    --ink: #08080d;
    --panel: rgba(19, 18, 27, .94);
    --panel-strong: rgba(25, 23, 34, .98);
    --admin-ink: #fff4fa;
    color: #f9eaf2;
    background-color: #08080d;
    background-image:
        radial-gradient(circle at 12% 0%, rgba(236,72,153,.18), transparent 28rem),
        radial-gradient(circle at 95% 20%, rgba(124,58,237,.12), transparent 24rem),
        linear-gradient(135deg, #08080d, #140b15 52%, #08080d);
}
body[data-theme="dark"] #app-header,
body[data-theme="dark"] #canvas-panel,
body[data-theme="dark"] #settings-panel,
body[data-theme="dark"] #queue-panel,
body[data-theme="dark"] .upload-meta,
body[data-theme="dark"] #result-summary {
    background: linear-gradient(145deg, rgba(29,25,38,.96), rgba(14,13,21,.97));
    border-color: rgba(244,114,182,.2);
    color: #f9eaf2;
}
body[data-theme="dark"] #app-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(236,72,153,.15), transparent 34rem),
        radial-gradient(circle at 100% 12%, rgba(124,58,237,.1), transparent 30rem),
        #08080d;
}
body[data-theme="dark"] #app-sidebar {
    background: rgba(16, 13, 22, .86);
    border-right-color: rgba(244,114,182,.2);
    box-shadow: 12px 0 35px rgba(0,0,0,.22);
}
body[data-theme="dark"] .sidebar-brand,
body[data-theme="dark"] .sidebar-link,
body[data-theme="dark"] .sidebar-section-label {
    color: #e3b8ca;
}
body[data-theme="dark"] .sidebar-link:hover,
body[data-theme="dark"] .sidebar-link.is-active {
    color: #fff4fa;
    background: linear-gradient(100deg, rgba(236,72,153,.22), rgba(124,58,237,.16));
}
body[data-theme="dark"] .sidebar-bottom-card {
    background: rgba(20,83,45,.22);
    border-color: rgba(74,222,128,.22);
}
body[data-theme="dark"] .sidebar-bottom-card strong { color: #bbf7d0; }
body[data-theme="dark"] .sidebar-bottom-card small { color: #9bd8b0; }
body[data-theme="dark"] .sidebar-collapse,
body[data-theme="dark"] .account-user-button,
body[data-theme="dark"] .header-credit-card,
body[data-theme="dark"] .admin-quick-link,
body[data-theme="dark"] .header-logout-button {
    color: #fff4fa;
    background: rgba(31, 24, 39, .9);
    border-color: rgba(244,114,182,.22);
}
body[data-theme="dark"] .account-user-copy small { color: #c89bb2; }
body[data-theme="dark"] .account-user-copy strong,
body[data-theme="dark"] .header-credit-card strong { color: #ffd4e8; }
body[data-theme="dark"] .notification-button {
    color: #ffe0ee;
    background: linear-gradient(135deg, #2a1a31, #1d1425);
    border-color: rgba(244,114,182,.28);
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
body[data-theme="dark"] #notification-badge {
    border-color: #17111f;
}
body[data-theme="dark"] .brand-title,
body[data-theme="dark"] .settings-title,
body[data-theme="dark"] .field-group label,
body[data-theme="dark"] .advanced-settings summary,
body[data-theme="dark"] .result-empty-state strong,
body[data-theme="dark"] .upload-meta-copy strong {
    color: #fff4fa;
}
body[data-theme="dark"] .brand-sub,
body[data-theme="dark"] .field-hint,
body[data-theme="dark"] .result-empty-state,
body[data-theme="dark"] .upload-meta-copy small {
    color: #d2a9bd;
}
body[data-theme="dark"] #src-box,
body[data-theme="dark"] #dest-box,
body[data-theme="dark"] .step-indicator,
body[data-theme="dark"] .segmented {
    background-color: rgba(8,8,13,.72);
    border-color: rgba(255,255,255,.14);
}
body[data-theme="dark"] .theme-toggle,
body[data-theme="dark"] .mobile-sidebar-toggle {
    color: #fff4fa;
    background: rgba(39,29,45,.9);
    border-color: rgba(244,114,182,.28);
}
body[data-theme="dark"] .result-empty-state span { filter: drop-shadow(0 8px 18px rgba(236,72,153,.5)); }
body[data-theme="dark"] .upload-meta-status { color: #bbf7d0; background: rgba(22,101,52,.36); }
body[data-theme="dark"] .quick-help {
    background: rgba(37,29,45,.72);
    border-color: rgba(244,114,182,.2);
}
body[data-theme="dark"] .quick-help strong { color: #fff4fa; }
body[data-theme="dark"] .quick-help small { color: #d2a9bd; }

/* Complete dark-mode surface overrides. These come last intentionally so the
   legacy light-theme rules above cannot leak into dark mode. */
body[data-theme="dark"] #dropzone {
    border-color: rgba(244,114,182,.14);
    background:
        linear-gradient(rgba(236,72,153,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236,72,153,.035) 1px, transparent 1px),
        rgba(8,8,13,.78);
}
body[data-theme="dark"] .frame-label {
    color: #f7a6ca;
}
body[data-theme="dark"] #src-box,
body[data-theme="dark"] #dest-box {
    border-color: rgba(244,114,182,.22);
    background:
        linear-gradient(145deg, rgba(236,72,153,.08), transparent 34%),
        rgba(12,11,18,.94);
    box-shadow: inset 0 0 0 1px rgba(244,114,182,.04), inset 0 0 30px rgba(0,0,0,.45);
}
body[data-theme="dark"] #src-box::before,
body[data-theme="dark"] #dest-box::before {
    border-color: rgba(244,114,182,.12);
}
body[data-theme="dark"] #src-box:hover,
body[data-theme="dark"] #dest-box:hover {
    border-color: rgba(244,114,182,.7);
    box-shadow: 0 0 0 1px rgba(236,72,153,.18), 0 0 26px rgba(236,72,153,.2), inset 0 0 30px rgba(0,0,0,.45);
}
body[data-theme="dark"] #dest {
    background:
        linear-gradient(45deg, rgba(244,114,182,.07) 25%, transparent 25% 75%, rgba(244,114,182,.07) 75%) 0 0 / 18px 18px,
        #0c0b12;
}
body[data-theme="dark"] #dropzone-hint {
    color: #edbfd3;
    background: linear-gradient(180deg, rgba(12,11,18,.58), rgba(12,11,18,.9));
}
body[data-theme="dark"] #progress-bar-track {
    background: #17121d;
    box-shadow: inset 0 0 0 1px rgba(244,114,182,.12);
}
body[data-theme="dark"] #message {
    color: #f4c6da;
    border-color: rgba(236,72,153,.24);
    background: rgba(236,72,153,.09);
}
body[data-theme="dark"] #stop,
body[data-theme="dark"] #cancel,
body[data-theme="dark"] #compare-btn,
body[data-theme="dark"] #fullscreen-btn {
    color: #f7d7e6;
    background: rgba(255,255,255,.06);
    border-color: rgba(244,114,182,.22);
}
body[data-theme="dark"] #stop:hover,
body[data-theme="dark"] #cancel:hover,
body[data-theme="dark"] #compare-btn:hover,
body[data-theme="dark"] #fullscreen-btn:hover {
    background: rgba(236,72,153,.16);
}
body[data-theme="dark"] .preset-card {
    border-color: rgba(244,114,182,.2);
    background: linear-gradient(145deg, #241829, #17111f);
    color: #f4c6da;
}
body[data-theme="dark"] .preset-card small {
    color: #c99ab3;
}
body[data-theme="dark"] .preset-card:hover {
    border-color: rgba(244,114,182,.62);
    background: linear-gradient(145deg, #30203a, #1d1427);
    box-shadow: 0 8px 20px rgba(236,72,153,.18);
}
body[data-theme="dark"] .preset-card.is-active {
    border-color: rgba(244,114,182,.78);
    background: linear-gradient(145deg, #4b1e42, #28152f);
    box-shadow: 0 0 0 2px rgba(236,72,153,.16), 0 8px 22px rgba(236,72,153,.2);
}
body[data-theme="dark"] .preset-card.is-active strong {
    color: #ffd4e8;
}
body[data-theme="dark"] .model-preload-button {
    border-color: rgba(244,114,182,.25);
    background: #211629;
    color: #ffd0e5;
}
body[data-theme="dark"] .model-preload-button:hover:not(:disabled) {
    border-color: rgba(244,114,182,.65);
    background: #30203b;
}
body[data-theme="dark"] .field-group select,
body[data-theme="dark"] .field-group select option {
    color: #f6d9e7;
    background-color: #1a1322;
    border-color: rgba(244,114,182,.24);
    color-scheme: dark;
}
body[data-theme="dark"] .field-group select:focus {
    outline-color: #f472b6;
}
body[data-theme="dark"] .segmented {
    border-color: rgba(244,114,182,.2);
    background: #120e18;
}
body[data-theme="dark"] .segmented-btn {
    color: #d0a8bc;
}
body[data-theme="dark"] .segmented-btn:hover:not(:disabled) {
    color: #ffe4ef;
    background: rgba(236,72,153,.14);
}
body[data-theme="dark"] .segmented-btn.active {
    color: #fff;
    border-color: rgba(255,255,255,.25);
}
body[data-theme="dark"] .advanced-settings {
    border-color: rgba(244,114,182,.16);
}
body[data-theme="dark"] .advanced-settings summary {
    background: rgba(236,72,153,.09);
}
body[data-theme="dark"] .save-mode-group {
    background: linear-gradient(135deg, rgba(236,72,153,.12), rgba(35,197,138,.08));
    border-color: rgba(244,114,182,.28) !important;
}
body[data-theme="dark"] .save-mode-group .checkbox-line {
    color: #f8dce9;
}
body[data-theme="dark"] #result-summary span {
    border-color: rgba(244,114,182,.22);
    background: #211629;
    color: #f5c8dc;
}
body[data-theme="dark"] #result-summary-status {
    color: #bbf7d0 !important;
    background: rgba(22,101,52,.32) !important;
    border-color: rgba(74,222,128,.25) !important;
}
body[data-theme="dark"] .result-message-label {
    color: #f5c8dc;
}
body[data-theme="dark"] .brand-logo {
    background: #211629;
    border-color: rgba(244,114,182,.28);
    box-shadow: 0 8px 18px rgba(0,0,0,.3);
}
body[data-theme="dark"] .account-avatar {
    background: linear-gradient(135deg, #4b1e42, #2a1c4a);
}
body[data-theme="dark"] #change-image-btn,
body[data-theme="dark"] #remove-image-btn {
    background: rgba(8,8,13,.78);
    border: 1px solid rgba(244,114,182,.24);
}
body[data-theme="dark"] #change-image-btn:hover,
body[data-theme="dark"] #remove-image-btn:hover {
    background: rgba(236,72,153,.35);
}

@media (max-width: 860px) {
    .mobile-sidebar-toggle { display: inline-grid; }
    #app-sidebar {
        position: fixed;
        z-index: 100;
        top: 12px;
        bottom: 12px;
        left: 12px;
        width: min(290px, calc(100vw - 24px));
        transform: translateX(calc(-100% - 22px));
        transition: transform .24s ease, box-shadow .24s ease;
        box-shadow: 0 22px 60px rgba(53,19,38,.28);
    }
    #app-shell.mobile-sidebar-open #app-sidebar { transform: translateX(0); }
    #app-shell.mobile-sidebar-open::after {
        content: "";
        position: fixed;
        z-index: 90;
        inset: 0;
        background: rgba(53,19,38,.3);
        backdrop-filter: blur(3px);
    }
    #app-shell.mobile-sidebar-open .app-main-shell { position: relative; z-index: 1; }
}

@media (max-width: 520px) {
    .header-actions { width: 100%; justify-content: flex-end; }
    .upload-meta { align-items: flex-start; }
    .upload-meta-status { margin-top: 2px; }
    #result-summary { justify-content: flex-start; }
}

/* ---------- Premium motion layer ---------- */
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: 0;
    width: 32rem;
    height: 32rem;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .12;
    animation: ambientFloat 18s ease-in-out infinite alternate;
}
body::before {
    top: -15rem;
    left: -12rem;
    background: #ec4899;
}
body::after {
    right: -14rem;
    bottom: -18rem;
    background: #7c3aed;
    animation-delay: -7s;
}
@keyframes ambientFloat {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

#canvas-panel,
#settings-panel,
.admin-card,
.admin-chart-card,
.admin-health-card {
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
#canvas-panel:hover,
#settings-panel:hover,
.admin-card:hover,
.admin-chart-card:hover,
.admin-health-card:hover {
    transform: translateY(-2px);
}

.sidebar-link,
button,
.preset-card,
.package-card,
.model-preload-button {
    position: relative;
    overflow: hidden;
}
.sidebar-link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 4px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #ec4899, transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}
.sidebar-link:hover::after,
.sidebar-link.is-active::after {
    transform: scaleX(1);
}

.ui-ripple {
    position: absolute;
    z-index: 5;
    display: block;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, .42);
    transform: scale(0);
    animation: uiRipple .62s ease-out forwards;
}
@keyframes uiRipple {
    55% { opacity: .22; }
    100% { opacity: 0; transform: scale(1); }
}

#progress-bar-track {
    position: relative;
}
#progress-bar-fill {
    position: relative;
    overflow: hidden;
}
#progress-bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: translateX(-140%);
    animation: progressShine 1.25s linear infinite;
}
@keyframes progressShine {
    to { transform: translateX(320%); }
}

#src-box.drag-ready,
#dropzone.drag-over #src-box {
    animation: dropzoneGlow 1.1s ease-in-out infinite alternate;
}
@keyframes dropzoneGlow {
    from { box-shadow: 0 0 0 1px rgba(236,72,153,.22), 0 0 12px rgba(236,72,153,.1); }
    to { box-shadow: 0 0 0 3px rgba(236,72,153,.22), 0 0 34px rgba(236,72,153,.26); }
}

#result-ready-badge {
    animation: readyBadgeIn .5s cubic-bezier(.2,.8,.2,1), readyBadgePulse 2.4s ease-in-out 1 .6s;
}
@keyframes readyBadgeIn {
    from { opacity: 0; transform: translateY(-6px) scale(.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes readyBadgePulse {
    50% { box-shadow: 0 0 0 5px rgba(34,197,94,.08), 0 5px 16px rgba(21,128,61,.16); }
}

body[data-theme="dark"]::before,
body[data-theme="dark"]::after {
    opacity: .18;
}
@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    #progress-bar-fill::after,
    #src-box.drag-ready,
    #dropzone.drag-over #src-box,
    #result-ready-badge,
    .ui-ripple {
        animation: none !important;
    }
    #canvas-panel:hover,
    #settings-panel:hover,
    .admin-card:hover,
    .admin-chart-card:hover,
    .admin-health-card:hover {
        transform: none;
    }
}

/* Final visual rollback (must remain last in the cascade). */
body[data-theme="dark"] #app-shell { background: radial-gradient(circle at 8% 0%, rgba(236,72,153,.15), transparent 34rem), radial-gradient(circle at 100% 12%, rgba(124,58,237,.1), transparent 30rem), #08080d; }
body[data-theme="dark"] #app-shell::before { right:4%; left:4%; height:1px; background:linear-gradient(90deg,transparent,var(--pink),transparent); box-shadow:0 0 20px rgba(236,72,153,.42); }
body[data-theme="dark"] #app-sidebar { flex-basis:246px; padding:22px 14px 16px; border-right-color:rgba(190,24,93,.13); background:rgba(16,13,22,.86); box-shadow:12px 0 35px rgba(0,0,0,.22); }
body[data-theme="dark"] .sidebar-brand { padding:0 11px 22px; }
body[data-theme="dark"] .sidebar-mark { height:110px; border:0; background:transparent; box-shadow:none; }
body[data-theme="dark"] .sidebar-logo { height:110px !important; filter:none; }
body[data-theme="dark"] .sidebar-section-label { margin:14px 10px 4px; color:#bd8da7; letter-spacing:.15em; }
body[data-theme="dark"] .sidebar-link { min-height:42px; border:0; border-radius:12px; color:#e3b8ca; background:transparent; letter-spacing:normal; }
body[data-theme="dark"] .sidebar-link:hover,
body[data-theme="dark"] .sidebar-link.is-active { color:#fff4fa; background:linear-gradient(100deg,rgba(236,72,153,.22),rgba(124,58,237,.16)); box-shadow:none; transform:translateX(2px); }
body[data-theme="dark"] .sidebar-bottom-card { border-color:rgba(74,222,128,.22); border-radius:13px; background:rgba(20,83,45,.22); }
body[data-theme="dark"] .sidebar-bottom-card strong { color:#bbf7d0; }
body[data-theme="dark"] .sidebar-bottom-card small { color:#9bd8b0; }
body[data-theme="dark"] .sidebar-collapse { top:82px; right:-13px; width:26px; height:26px; border-color:rgba(244,114,182,.22); color:#a41456; background:#211629; }
body[data-theme="dark"] .app-main-shell { padding:18px 28px 30px; }
body[data-theme="dark"] .app-main-shell #app-header { margin-bottom:16px; border:1px solid rgba(190,24,93,.15); border-left:3px solid var(--pink); border-radius:18px; background:linear-gradient(90deg,rgba(236,72,153,.15),transparent 30%),linear-gradient(115deg,rgba(29,20,35,.98),rgba(14,11,20,.98)); box-shadow:0 14px 36px rgba(0,0,0,.22); }

/* ---------- Full user guide page ---------- */
.guide-page #app-shell {
    padding-bottom: 38px;
}

.guide-page .app-main-shell {
    min-width: 0;
}

.guide-page #app-header {
    position: sticky;
    top: 18px;
    z-index: 12;
    backdrop-filter: blur(18px);
}

.guide-back-button,
.guide-primary-link,
.guide-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 800;
    font-size: .86rem;
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}

.guide-back-button,
.guide-primary-link {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #ec4899, #e11d48 52%, #fb7185);
    box-shadow: 0 14px 34px rgba(225, 29, 72, .22);
}

.guide-secondary-link {
    color: #9f1239;
    border: 1px solid rgba(225, 29, 72, .16);
    background: rgba(255, 255, 255, .72);
}

.guide-back-button:hover,
.guide-primary-link:hover,
.guide-secondary-link:hover {
    transform: translateY(-2px);
}

#guide-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.guide-hero,
.guide-section,
.guide-final-cta {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(190, 24, 93, .12);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 0%, rgba(236, 72, 153, .13), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 245, 250, .86));
    box-shadow: 0 18px 46px rgba(104, 24, 68, .08);
}

.guide-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
    gap: 26px;
    align-items: center;
    padding: clamp(24px, 4vw, 42px);
}

.guide-hero::after,
.guide-section::after,
.guide-final-cta::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(236, 72, 153, .16), transparent 68%);
    pointer-events: none;
}

.guide-hero-copy,
.guide-preview-card,
.guide-section > *,
.guide-final-cta > * {
    position: relative;
    z-index: 1;
}

.guide-hero h1 {
    max-width: 860px;
    margin: 8px 0 14px;
    font-size: clamp(1.65rem, 4vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -.05em;
    color: #4c1028;
}

.guide-hero p,
.guide-section-head p,
.guide-final-cta p {
    max-width: 880px;
    color: #7a3d58;
    line-height: 1.75;
    font-size: .96rem;
}

.guide-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.guide-preview-card {
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(225, 29, 72, .12);
    background: rgba(255, 255, 255, .66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 16px 38px rgba(136, 19, 55, .1);
}

.guide-preview-window {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 280px;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(190, 24, 93, .12);
}

.guide-preview-before,
.guide-preview-after {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 18px;
    text-align: center;
}

.guide-preview-before {
    color: #7f1d1d;
    background:
        linear-gradient(90deg, rgba(127, 29, 29, .08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(127, 29, 29, .08) 1px, transparent 1px),
        linear-gradient(135deg, #fee2e2, #fff7ed);
    background-size: 12px 12px, 12px 12px, auto;
    filter: saturate(.76);
}

.guide-preview-before strong {
    font-size: clamp(1.35rem, 3vw, 2.35rem);
    letter-spacing: -.08em;
    text-shadow: 2px 0 rgba(127, 29, 29, .16), -2px 0 rgba(127, 29, 29, .13);
    filter: blur(.75px);
}

.guide-preview-after {
    color: #831843;
    background:
        radial-gradient(circle at 30% 20%, rgba(244, 114, 182, .22), transparent 35%),
        linear-gradient(135deg, #fff1f2, #fdf2f8 60%, #fff);
}

.guide-preview-after strong {
    font-size: clamp(1.35rem, 3vw, 2.35rem);
    letter-spacing: -.05em;
    text-shadow: 0 8px 22px rgba(190, 24, 93, .2);
}

.guide-preview-card p {
    margin-top: 12px;
    color: #8b4662;
    font-size: .82rem;
    line-height: 1.6;
}

.guide-section,
.guide-final-cta {
    padding: clamp(22px, 3.3vw, 34px);
}

.guide-section-head {
    margin-bottom: 18px;
}

.guide-section h2,
.guide-final-cta h2 {
    margin: 6px 0 8px;
    color: #4c1028;
    font-size: clamp(1.22rem, 2.2vw, 1.8rem);
    letter-spacing: -.035em;
}

.guide-recipe-grid,
.guide-example-grid,
.guide-setting-grid {
    display: grid;
    gap: 14px;
}

.guide-recipe-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guide-recipe-card,
.guide-example-card,
.guide-setting-grid article {
    border: 1px solid rgba(190, 24, 93, .12);
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    padding: 18px;
    box-shadow: 0 12px 30px rgba(104, 24, 68, .06);
}

.guide-recipe-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(244, 114, 182, .22), rgba(251, 113, 133, .16));
    font-size: 1.35rem;
}

.guide-recipe-card h3,
.guide-example-card h3,
.guide-setting-grid h3 {
    margin-bottom: 8px;
    color: #611333;
    font-size: .98rem;
}

.guide-recipe-card p,
.guide-example-card p,
.guide-setting-grid p,
.guide-recipe-card li {
    color: #7c405b;
    line-height: 1.65;
    font-size: .84rem;
}

.guide-recipe-card ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-left: 18px;
}

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

.guide-example-art {
    display: grid;
    place-items: center;
    min-height: 150px;
    margin-bottom: 14px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #fb7185, #ec4899);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    font-size: 3rem;
    overflow: hidden;
}

.example-photo .guide-example-art {
    background:
        radial-gradient(circle at 50% 38%, #fff7ed 0 16px, transparent 17px),
        radial-gradient(circle at 50% 73%, #fed7aa 0 46px, transparent 47px),
        linear-gradient(135deg, #fb7185, #f97316);
}

.example-print .guide-example-art {
    color: #881337;
    background:
        linear-gradient(90deg, rgba(136, 19, 55, .08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(136, 19, 55, .08) 1px, transparent 1px),
        linear-gradient(135deg, #fff1f2, #fce7f3);
    background-size: 16px 16px, 16px 16px, auto;
    font-size: 2.55rem;
    font-weight: 900;
}

.pixel-art {
    grid-template-columns: repeat(2, 42px);
    grid-template-rows: repeat(2, 42px);
    gap: 6px;
    background: linear-gradient(135deg, #581c87, #db2777);
}

.pixel-art span {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #fdf2f8;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .12);
}

.pixel-art span:nth-child(2),
.pixel-art span:nth-child(3) {
    background: #f9a8d4;
}

.guide-before-after-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.guide-before-after-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(190, 24, 93, .12);
    border-radius: 24px;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 14px 34px rgba(104, 24, 68, .07);
}

.guide-sample-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.guide-sample-head h3 {
    margin: 1px 0 6px;
    color: #611333;
    font-size: 1rem;
}

.guide-sample-head p {
    color: #7c405b;
    line-height: 1.65;
    font-size: .84rem;
}

.guide-image-compare-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.guide-image-compare-pair figure {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    border: 1px solid rgba(190, 24, 93, .13);
    border-radius: 18px;
    background:
        linear-gradient(45deg, rgba(190, 24, 93, .055) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(190, 24, 93, .055) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(190, 24, 93, .055) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(190, 24, 93, .055) 75%),
        #fff;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
}

.guide-image-compare-pair figure span {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 5px 10px;
    border-radius: 999px;
    color: #fff;
    background: rgba(95, 18, 51, .78);
    box-shadow: 0 8px 22px rgba(95, 18, 51, .18);
    font-size: .72rem;
    font-weight: 800;
}

.guide-image-compare-pair figure:nth-child(2) span {
    background: linear-gradient(135deg, #ec4899, #e11d48);
}

.guide-image-compare-pair img {
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: contain;
    display: block;
    padding: 10px;
}

.guide-sample-notes {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-left: 18px;
}

.guide-sample-notes li,
.guide-mini-note {
    color: #7c405b;
    line-height: 1.65;
    font-size: .84rem;
}

.guide-sample-notes strong,
.guide-mini-note strong {
    color: #611333;
}

.guide-mini-note {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(245, 158, 11, .22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 251, 235, .96), rgba(255, 241, 242, .78));
}

.guide-table-wrap {
    overflow-x: auto;
    border-radius: 20px;
    border: 1px solid rgba(190, 24, 93, .12);
    background: rgba(255, 255, 255, .76);
}

.guide-model-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.guide-model-table th,
.guide-model-table td {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(190, 24, 93, .1);
    text-align: left;
    vertical-align: top;
    color: #743853;
    font-size: .82rem;
    line-height: 1.58;
}

.guide-model-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #831843;
    background: #fff1f2;
    font-size: .78rem;
    letter-spacing: .02em;
}

.guide-model-table tr:last-child td {
    border-bottom: 0;
}

.guide-model-table td:first-child {
    min-width: 235px;
}

.guide-model-table strong {
    display: block;
    color: #5f1233;
    font-size: .9rem;
    margin-bottom: 5px;
}

.guide-model-table small {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 8px;
    color: #9f1239;
    background: rgba(244, 114, 182, .13);
    font-size: .68rem;
}

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

.guide-fix-list {
    display: grid;
    gap: 10px;
}

.guide-fix-list div {
    display: grid;
    grid-template-columns: minmax(190px, .38fr) 1fr;
    gap: 14px;
    align-items: start;
    padding: 15px 16px;
    border-radius: 18px;
    border: 1px solid rgba(190, 24, 93, .1);
    background: rgba(255, 255, 255, .68);
}

.guide-fix-list strong {
    color: #5f1233;
}

.guide-fix-list span {
    color: #7c405b;
    line-height: 1.65;
    font-size: .86rem;
}

.guide-faq-list {
    display: grid;
    gap: 10px;
}

.guide-faq-list details {
    overflow: hidden;
    border: 1px solid rgba(190, 24, 93, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 10px 26px rgba(104, 24, 68, .055);
}

.guide-faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    padding: 15px 16px;
    color: #5f1233;
    font-size: .9rem;
    font-weight: 800;
}

.guide-faq-list summary::-webkit-details-marker {
    display: none;
}

.guide-faq-list summary::after {
    content: "+";
    display: grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 999px;
    color: #be185d;
    background: rgba(244, 114, 182, .14);
    font-size: 1.1rem;
}

.guide-faq-list details[open] summary::after {
    content: "−";
}

.guide-faq-list p {
    padding: 0 16px 16px 16px;
    color: #7c405b;
    line-height: 1.7;
    font-size: .84rem;
}

.guide-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

body[data-theme="dark"].guide-page .guide-hero,
body[data-theme="dark"].guide-page .guide-section,
body[data-theme="dark"].guide-page .guide-final-cta {
    border-color: rgba(244, 114, 182, .16);
    background:
        radial-gradient(circle at 12% 0%, rgba(236, 72, 153, .13), transparent 36%),
        linear-gradient(135deg, rgba(24, 18, 31, .96), rgba(16, 12, 22, .92));
    box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

body[data-theme="dark"].guide-page .guide-hero h1,
body[data-theme="dark"].guide-page .guide-section h2,
body[data-theme="dark"].guide-page .guide-final-cta h2,
body[data-theme="dark"].guide-page .guide-recipe-card h3,
body[data-theme="dark"].guide-page .guide-example-card h3,
body[data-theme="dark"].guide-page .guide-sample-head h3,
body[data-theme="dark"].guide-page .guide-setting-grid h3,
body[data-theme="dark"].guide-page .guide-model-table strong,
body[data-theme="dark"].guide-page .guide-fix-list strong,
body[data-theme="dark"].guide-page .guide-sample-notes strong,
body[data-theme="dark"].guide-page .guide-mini-note strong,
body[data-theme="dark"].guide-page .guide-faq-list summary {
    color: #fff1f7;
}

body[data-theme="dark"].guide-page .guide-hero p,
body[data-theme="dark"].guide-page .guide-section-head p,
body[data-theme="dark"].guide-page .guide-final-cta p,
body[data-theme="dark"].guide-page .guide-recipe-card p,
body[data-theme="dark"].guide-page .guide-example-card p,
body[data-theme="dark"].guide-page .guide-setting-grid p,
body[data-theme="dark"].guide-page .guide-recipe-card li,
body[data-theme="dark"].guide-page .guide-sample-head p,
body[data-theme="dark"].guide-page .guide-sample-notes li,
body[data-theme="dark"].guide-page .guide-mini-note,
body[data-theme="dark"].guide-page .guide-faq-list p,
body[data-theme="dark"].guide-page .guide-preview-card p,
body[data-theme="dark"].guide-page .guide-fix-list span {
    color: #e7bfd0;
}

body[data-theme="dark"].guide-page .guide-preview-card,
body[data-theme="dark"].guide-page .guide-recipe-card,
body[data-theme="dark"].guide-page .guide-example-card,
body[data-theme="dark"].guide-page .guide-before-after-card,
body[data-theme="dark"].guide-page .guide-setting-grid article,
body[data-theme="dark"].guide-page .guide-table-wrap,
body[data-theme="dark"].guide-page .guide-faq-list details,
body[data-theme="dark"].guide-page .guide-fix-list div {
    border-color: rgba(244, 114, 182, .14);
    background: rgba(255, 255, 255, .055);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

body[data-theme="dark"].guide-page .guide-image-compare-pair figure {
    border-color: rgba(244, 114, 182, .16);
    background:
        linear-gradient(45deg, rgba(244, 114, 182, .08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(244, 114, 182, .08) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(244, 114, 182, .08) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(244, 114, 182, .08) 75%),
        rgba(12, 10, 18, .72);
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
}

body[data-theme="dark"].guide-page .guide-mini-note {
    border-color: rgba(245, 158, 11, .22);
    background: linear-gradient(135deg, rgba(69, 42, 13, .46), rgba(80, 24, 50, .36));
}

body[data-theme="dark"].guide-page .guide-faq-list summary::after {
    color: #ffd6e6;
    background: rgba(236, 72, 153, .18);
}

body[data-theme="dark"].guide-page .guide-model-table th {
    color: #ffe4f0;
    background: rgba(80, 24, 50, .96);
}

body[data-theme="dark"].guide-page .guide-model-table td {
    color: #e7bfd0;
    border-bottom-color: rgba(244, 114, 182, .12);
}

body[data-theme="dark"].guide-page .guide-model-table small,
body[data-theme="dark"].guide-page .guide-secondary-link {
    color: #ffd6e6;
    background: rgba(236, 72, 153, .16);
    border-color: rgba(244, 114, 182, .18);
}

@media (max-width: 1200px) {
    .guide-recipe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .guide-setting-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .guide-hero {
        grid-template-columns: 1fr;
    }
    .guide-page #app-header {
        top: 10px;
    }
}

@media (max-width: 680px) {
    .guide-recipe-grid,
    .guide-example-grid,
    .guide-before-after-grid,
    .guide-image-compare-pair,
    .guide-setting-grid {
        grid-template-columns: 1fr;
    }
    .guide-fix-list div {
        grid-template-columns: 1fr;
    }
    .guide-final-cta {
        align-items: stretch;
        flex-direction: column;
    }
    .guide-hero-actions,
    .guide-final-cta .guide-primary-link,
    .guide-back-button {
        width: 100%;
    }
    .guide-preview-window {
        min-height: 220px;
    }
}
body[data-theme="dark"] .brand-logo { width:42px; height:42px; border-radius:12px; }
body[data-theme="dark"] .brand-title { margin-top:0; color:#fff4fa; font-size:1.06rem; letter-spacing:0; text-shadow:0 0 14px rgba(236,72,153,.2); }
body[data-theme="dark"] .brand-sub { color:#c89bb2; font-size:.62rem; }
body[data-theme="dark"] .theme-toggle,
body[data-theme="dark"] .mobile-sidebar-toggle,
body[data-theme="dark"] .account-user-button,
body[data-theme="dark"] .header-credit-card,
body[data-theme="dark"] .admin-quick-link,
body[data-theme="dark"] .header-logout-button,
body[data-theme="dark"] .notification-button { min-height:46px; border-radius:15px; border-color:rgba(244,114,182,.22); background:rgba(31,24,39,.9); box-shadow:0 6px 18px rgba(0,0,0,.18); }
body[data-theme="dark"] #app-main { grid-template-columns:minmax(0,1fr) minmax(300px,340px); gap:18px; }
body[data-theme="dark"] #canvas-panel,
body[data-theme="dark"] #settings-panel { border:1px solid rgba(244,114,182,.16); border-radius:14px; background:linear-gradient(145deg,rgba(29,25,38,.96),rgba(14,13,21,.97)); box-shadow:0 18px 42px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.025); }
body[data-theme="dark"] #canvas-panel::before { right:22px; width:110px; background:linear-gradient(90deg,transparent,var(--pink),transparent); box-shadow:0 0 14px rgba(236,72,153,.48); }
body[data-theme="dark"] #settings-panel { top:18px; padding:18px; }
body[data-theme="dark"] .settings-title { color:#fff4fa; border-bottom-color:rgba(244,114,182,.2); }
body[data-theme="dark"] .step-indicator { border-color:rgba(244,114,182,.12); border-radius:8px; background:rgba(17,13,25,.7); }
body[data-theme="dark"] .step-item.active .step-num { background:var(--red-gradient); box-shadow:0 0 0 4px rgba(236,72,153,.1),0 0 18px rgba(236,72,153,.35); }
body[data-theme="dark"] #dropzone { padding:14px; gap:14px; border-radius:9px; border-color:rgba(190,24,93,.1); background:linear-gradient(rgba(236,72,153,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(236,72,153,.035) 1px,transparent 1px),rgba(12,10,18,.62); background-size:28px 28px,28px 28px,auto; }
body[data-theme="dark"] .frame-label { color:#f7a6ca; font-size:.68rem; letter-spacing:0; }
body[data-theme="dark"] #src-box,
body[data-theme="dark"] #dest-box { min-height:min(62vh,680px); border-radius:8px; border-color:rgba(244,114,182,.22); background:linear-gradient(145deg,rgba(236,72,153,.08),transparent 32%),rgba(12,11,18,.94); box-shadow:inset 0 0 0 1px rgba(244,114,182,.04),inset 0 0 34px rgba(0,0,0,.4); }
body[data-theme="dark"] #dropzone-hint { color:#edbfd3; background:linear-gradient(180deg,rgba(12,11,18,.58),rgba(12,11,18,.9)); }
body[data-theme="dark"] .arrow-sep { color:var(--pink); text-shadow:0 0 13px rgba(236,72,153,.35); }
body[data-theme="dark"] #message { border-color:rgba(236,72,153,.24); color:#f4c6da; background:rgba(236,72,153,.09); }
body[data-theme="dark"] #start { border-radius:8px; background:var(--red-gradient); color:#fff; }
body[data-theme="dark"] #stop,
body[data-theme="dark"] #cancel,
body[data-theme="dark"] #compare-btn,
body[data-theme="dark"] #fullscreen-btn { border-radius:8px; border-color:rgba(255,255,255,.16); color:#f7d7e6; background:rgba(255,255,255,.06); }
body[data-theme="dark"] .field-group label,
body[data-theme="dark"] .advanced-settings summary { color:#ffe0b5; }
body[data-theme="dark"] .preset-card { border-radius:13px; border-color:rgba(244,114,182,.2); background:linear-gradient(145deg,#2c1d35,#17111f); }
body[data-theme="dark"] .preset-card.is-active { border-color:rgba(244,114,182,.78); background:linear-gradient(145deg,#4b1e42,#28152f); }
body[data-theme="dark"] .segmented { border-radius:12px; border-color:rgba(244,114,182,.2); background:#120e18; }
body[data-theme="dark"] .segmented-btn.active { background:var(--red-gradient); }
body[data-theme="dark"] .quick-help { border-radius:12px; border-color:rgba(244,114,182,.2); background:rgba(37,29,45,.72); }
body[data-theme="dark"] #queue-panel,
body[data-theme="dark"] #result-summary,
body[data-theme="dark"] .upload-meta { border-radius:10px; border-color:rgba(244,114,182,.2); background:rgba(19,14,27,.78); }
body:not([data-theme="dark"]) .brand-title i,
body:not([data-theme="dark"]) .brand-kicker { display:none; }
body:not([data-theme="dark"]) #start { background:var(--red-gradient); color:#fff; }

/* Announcements, maintenance, and engine status */
.site-announcements { display:grid; gap:10px; margin:0 auto 16px; width:min(100%, 1480px); }
.site-announcements[hidden] { display:none !important; }
.site-announcement, .maintenance-banner { display:flex; align-items:flex-start; gap:12px; padding:13px 16px; border:1px solid rgba(194,24,91,.18); border-radius:14px; background:rgba(255,255,255,.92); box-shadow:0 8px 26px rgba(124,24,69,.07); color:#54142f; }
.site-announcement-icon, .maintenance-banner > span { font-size:1.25rem; line-height:1.2; }
.site-announcement strong, .maintenance-banner strong { display:block; font-size:.88rem; }
.site-announcement p, .maintenance-banner p { margin:3px 0 0; font-size:.76rem; line-height:1.55; color:#7d5067; }
.site-announcement.is-success { border-color:rgba(22,163,74,.25); }
.site-announcement.is-warning { border-color:rgba(245,158,11,.32); background:#fffaf0; }
.site-announcement.is-danger, .maintenance-banner { border-color:rgba(190,24,93,.3); background:#fff0f6; }
.maintenance-banner { width:min(100%, 1480px); margin:0 auto 16px; box-sizing:border-box; }
body[data-theme="dark"] .site-announcement, body[data-theme="dark"] .maintenance-banner { background:rgba(31,18,28,.94); color:#ffeaf4; border-color:rgba(244,114,182,.3); }
body[data-theme="dark"] .site-announcement p, body[data-theme="dark"] .maintenance-banner p { color:#e6bdd0; }

/* ---------- Final visual polish ---------- */
:root {
    --surface-soft: rgba(255,255,255,.84);
    --surface-strong: #fff;
    --text-strong: #351427;
    --text-muted: #82556c;
    --focus-ring: 0 0 0 4px rgba(236,72,153,.18);
}

body {
    background:
        radial-gradient(circle at 8% 2%, rgba(251,207,232,.36), transparent 30rem),
        radial-gradient(circle at 96% 14%, rgba(253,230,138,.18), transparent 26rem),
        #fff8fc;
    color: var(--text-strong);
}

#app-header {
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    background: rgba(255,255,255,.78);
    border-bottom-color: rgba(190,24,93,.12);
}

#canvas-panel,
#settings-panel {
    border-color: rgba(190,24,93,.13);
    box-shadow: 0 20px 55px rgba(116,26,69,.07);
}

#canvas-panel:hover,
#settings-panel:hover {
    border-color: rgba(236,72,153,.26);
}

#src-box,
#dest-box {
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,247,251,.9));
    border-color: rgba(190,24,93,.16);
}

#src-box:hover,
#dest-box:hover {
    border-color: rgba(236,72,153,.42);
    box-shadow: 0 12px 30px rgba(190,24,93,.10);
}

button,
a,
select,
input {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

#start {
    box-shadow: 0 12px 26px rgba(225,29,42,.22);
}

#start:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(225,29,42,.3);
}

#message {
    min-height: 1.5rem;
    display: grid;
    place-items: center;
    color: var(--text-muted);
}

body[data-theme="dark"] {
    background:
        radial-gradient(circle at 8% 2%, rgba(190,24,93,.14), transparent 30rem),
        radial-gradient(circle at 96% 14%, rgba(225,29,42,.10), transparent 26rem),
        #0b0b0f;
    color: #ffeaf4;
}

body[data-theme="dark"] #app-header {
    background: rgba(15,12,18,.78);
    border-bottom-color: rgba(244,114,182,.18);
}

body[data-theme="dark"] #canvas-panel,
body[data-theme="dark"] #settings-panel {
    border-color: rgba(244,114,182,.16);
    box-shadow: 0 22px 60px rgba(0,0,0,.24);
}

body[data-theme="dark"] #src-box,
body[data-theme="dark"] #dest-box {
    background: linear-gradient(145deg, rgba(26,19,29,.96), rgba(18,15,24,.94));
    border-color: rgba(244,114,182,.19);
}

body[data-theme="dark"] #src-box:hover,
body[data-theme="dark"] #dest-box:hover {
    border-color: rgba(244,114,182,.48);
    box-shadow: 0 14px 34px rgba(244,114,182,.10);
}

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

/* ---------- AI workflow and professional result actions ---------- */
.ai-workflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin: 10px 0 8px;
}
.ai-workflow[hidden] { display: none; }
.ai-workflow-step {
    position: relative;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(190,24,93,.13);
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    color: #7d5067;
    box-shadow: 0 8px 18px rgba(116,26,69,.05);
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.ai-workflow-step span,
.ai-workflow-step strong,
.ai-workflow-step small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-workflow-step span { font-size: 1.05rem; margin-bottom: 2px; }
.ai-workflow-step strong { color: #65173a; font-size: .68rem; }
.ai-workflow-step small { margin-top: 1px; font-size: .56rem; color: #9a6b81; }
.ai-workflow-step.is-active {
    transform: translateY(-2px);
    border-color: rgba(236,72,153,.42);
    background: linear-gradient(145deg, #fff, #fff0f7);
    box-shadow: 0 12px 25px rgba(190,24,93,.12);
}
.ai-workflow-step.is-active span { animation: workflowPulse 1.1s ease-in-out infinite; }
.ai-workflow-step.is-done {
    border-color: rgba(34,197,94,.22);
    background: #f0fdf4;
}
.ai-workflow-step.is-done strong { color: #166534; }
.ai-workflow-step.is-error {
    border-color: rgba(239,68,68,.3);
    background: #fff1f2;
}
.ai-workflow-step.is-error strong { color: #be123c; }
@keyframes workflowPulse {
    50% { transform: scale(1.08); filter: drop-shadow(0 7px 12px rgba(236,72,153,.22)); }
}

.result-download-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, #ef2a68, #c2185b 55%, #8d123e);
    box-shadow: 0 13px 28px rgba(194,24,91,.25);
}
.result-download-primary[hidden] { display: none; }
.result-download-primary:hover { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(194,24,91,.32); }

.wallet-mini-dashboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: -8px 0 16px;
}
.wallet-mini-dashboard article {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(190,24,93,.13);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,240,248,.72));
    box-shadow: 0 9px 22px rgba(124,24,69,.06);
}
.wallet-mini-dashboard span,
.wallet-mini-dashboard small,
.wallet-mini-dashboard strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-mini-dashboard span { font-size: 1.15rem; }
.wallet-mini-dashboard small { margin-top: 4px; color: #8b5870; font-size: .62rem; font-weight: 700; }
.wallet-mini-dashboard strong { margin-top: 2px; color: #741a45; font-size: .8rem; }

body[data-theme="dark"] .ai-workflow-step,
body[data-theme="dark"] .wallet-mini-dashboard article {
    border-color: rgba(244,114,182,.16);
    background: rgba(24,18,28,.78);
    color: #e8c2d4;
}
body[data-theme="dark"] .ai-workflow-step strong,
body[data-theme="dark"] .wallet-mini-dashboard strong { color: #ffeaf4; }
body[data-theme="dark"] .ai-workflow-step small,
body[data-theme="dark"] .wallet-mini-dashboard small { color: #d8a9bf; }
body[data-theme="dark"] .ai-workflow-step.is-active { background: linear-gradient(145deg, rgba(53,31,48,.94), rgba(30,18,31,.96)); }
body[data-theme="dark"] .ai-workflow-step.is-done { background: rgba(20,83,45,.28); }
body[data-theme="dark"] .ai-workflow-step.is-error { background: rgba(127,29,29,.3); }

@media (max-width: 720px) {
    .ai-workflow,
    .wallet-mini-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}