/* ==========================================================================
   snaprender-tool.css assumes Tailwind's global border-box reset (its calc()
   panel heights + width:100%+padding boxes only line up under border-box).
   This page does NOT load Tailwind, so provide the same reset here.
   Without it: upload box overflows/clips, wam-op runs past the sidebar bottom,
   and the page gets a vertical scrollbar. Page-scoped (file loads only here).
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* ==========================================================================
   Auto3D Tool — OVERLAY only.
   Base chrome/layout (web-ai-container, wam-op, wam-result, wamo-1/2,
   new-upload-container, gen-tab, wr-lists, progress, dt-gs-expand-btn,
   sidebar coordination) is provided by snaprender-tool.css.
   This file adds ONLY the 3D-specific pieces: model viewer, quality
   selector, tips, history cards. Loaded AFTER snaprender-tool.css.
   ========================================================================== */

/* ---- Panel titles: consistent size + rhythm across all sections ---- */
body[data-sidebar-active="auto3d"] .wam-op .new-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 20px 0 12px;
}
body[data-sidebar-active="auto3d"] .wamo-1 > .new-panel-title:first-child { margin-top: 2px; }
body[data-sidebar-active="auto3d"] .wam-op .title-star { font-size: 14px; }

/* ---- Generate button: flat brand blue (was snaprender's cyan gradient) ---- */
body[data-sidebar-active="auto3d"] .wamo2-btn { background: #2563eb; font-weight: 700; font-size: 14px; letter-spacing: .01em; transition: background .12s; }
body[data-sidebar-active="auto3d"] .wamo2-btn:hover { background: #1d4ed8; }
body.dark-mode[data-sidebar-active="auto3d"] .wam-op .new-panel-title { color: #e5e7eb; }

/* Reverted: an earlier flex-start + 24px-gutter override forced the panels to
   full-bleed in BOTH sidebar states. Per the user, content should fill ONLY when
   the sidebar is EXPANDED; when collapsed it stays centered/contained. So we keep
   snaprender's NATIVE layout for both states and add no override here. */

/* ---- Upload empty state: centered, explicit drop target with one primary action. ---- */
body[data-sidebar-active="auto3d"] #uploadContainer.new-upload-container {
    aspect-ratio: 8 / 5 !important;
    padding: 18px 20px;
    background: #fbfcfe;
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
body[data-sidebar-active="auto3d"] #uploadContainer.new-upload-container:hover,
body[data-sidebar-active="auto3d"] #uploadContainer.new-upload-container.dragover {
    background: #f8fbff;
    border-color: #2563eb;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.06);
}
body[data-sidebar-active="auto3d"] .new-upload-default {
    gap: 0;
    padding: 0;
}
body[data-sidebar-active="auto3d"] .a3-upload-icon {
    width: 44px;
    height: 44px;
    color: rgba(174,182,194,.5);
    flex: 0 0 auto;
}
body[data-sidebar-active="auto3d"] .a3-upload-copy {
    margin-top: 10px;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}
body[data-sidebar-active="auto3d"] .a3-upload-or {
    margin-top: 8px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1;
}
body[data-sidebar-active="auto3d"] .upload-buttons {
    gap: 12px;
    margin: 12px 0 0;
}
body[data-sidebar-active="auto3d"] .new-upload-btn {
    min-width: 112px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
}
body[data-sidebar-active="auto3d"] .new-upload-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}
body[data-sidebar-active="auto3d"] .new-upload-btn.a3-upload-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 1px 2px rgba(37,99,235,.18);
}
body[data-sidebar-active="auto3d"] .new-upload-btn.a3-upload-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
/* result box: replace snaprender's dashed frame with a clean solid border */
body[data-sidebar-active="auto3d"] .wr-lists-box { border: 1px solid #e5e7eb; }

/* ---- Kill scrollbars (snaprender uses overflow:scroll + scrollbar-width:none;
       add the webkit pseudo so Chrome/Edge don't show an always-on track) ---- */
body[data-sidebar-active="auto3d"] .wamo-1 { scrollbar-width: none; }
body[data-sidebar-active="auto3d"] .wamo-1::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Result box must NOT scroll — the 3D viewer manages its own interaction */
body[data-sidebar-active="auto3d"] .wr-lists-box { overflow: hidden; }

/* ---- Result stage: 3D viewer on top + example strip at the bottom ---- */
.wr-lists.result#a3Stage {
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    position: relative;
    /* subtle spotlight so the model "sits" in space (stays in the #f3f4f6 family) */
    background: radial-gradient(95% 75% at 50% 30%, #ffffff 0%, #f3f4f6 58%, #e8eaef 100%);
}
.wr-lists.result#a3Stage::-webkit-scrollbar { display: none; }

/* main viewer fills the space above the example strip */
.a3-viewer {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.a3-viewer model-viewer {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    --poster-color: transparent;
    background: transparent;
}
/* hide model-viewer's built-in loading bar (the gray bar at the top) */
.a3-viewer model-viewer::part(default-progress-bar) { display: none; }
.a3-viewer-poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #f3f4f6;
}
.a3-viewer-poster[hidden] { display: none; }
.a3-viewer-fallback {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 10;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 3px 12px;
    align-items: center;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    box-sizing: border-box;
    color: #1f2937;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(203,213,225,.9);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(15,23,42,.15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: none;
}
.a3-viewer-fallback-badge {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #2563eb;
    background: #eef4ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.a3-viewer-fallback-title {
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
}
.a3-viewer-fallback-help {
    min-width: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}
/* generating background: input image fills the result pane under a dark mask (single / fast) */
.a3-result-genbg { position: absolute; inset: 0; z-index: 5; display: none; overflow: hidden; align-items: center; justify-content: center; background: #f3f4f6; }
.a3-result-genbg.show { display: flex; }
.a3-result-genbg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.a3-result-genbg img[src]:not([src=""]) { display: block; }
.a3-result-genbg-mask { position: absolute; inset: 0; background: rgba(17,24,39,.42); }
/* centered caption used during the model-LOAD phase (spinner + "Loading 3D model" + %) */
.a3-result-genbg-caption { position: relative; z-index: 1; display: none; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.a3-result-genbg-caption.show { display: flex; }

/* ---- Canvas / Result / History tabs: match imageforge-tool — joined gray bar with
       4px rounded ends, active segment dark #333 + white. Taller .wr-title for the same
       vertical breathing room. Container clips so the hidden Canvas tab (single mode)
       keeps the rounded ends. ---- */
body[data-sidebar-active="auto3d"] .wr-title { height: auto; padding: 14px 0; line-height: normal; }
body[data-sidebar-active="auto3d"] .tab-buttons {
    display: inline-flex;
    gap: 0;
    background: transparent;
    border-radius: 4px;
    overflow: hidden;
}
body[data-sidebar-active="auto3d"] .gen-tab {
    background: #e0e0e0;
    color: #000;
    border: none;
    border-radius: 0 !important;   /* beat snaprender's `.gen-tab{border-radius:4px!important}`; container clips the outer ends, inner joints stay square */
    font-size: 12px;
    font-weight: 400;
    padding: 9px 14px;
    height: auto;
    line-height: 1.2;
    transition: background .12s, color .12s;
}
body[data-sidebar-active="auto3d"] .gen-tab:not(.active):hover { background: #d4d4d4; color: #000; }
body[data-sidebar-active="auto3d"] .gen-tab.active { background: #333333; color: #fff; font-weight: 700; box-shadow: none; }
body.dark-mode[data-sidebar-active="auto3d"] .tab-buttons { background: transparent; }
body.dark-mode[data-sidebar-active="auto3d"] .gen-tab { background: #2a2f37; color: #cbd5e1; }
body.dark-mode[data-sidebar-active="auto3d"] .gen-tab:not(.active):hover { background: #353b45; color: #e5e7eb; }
body.dark-mode[data-sidebar-active="auto3d"] .gen-tab.active { background: #e5e7eb; color: #15181d; font-weight: 700; box-shadow: none; }

/* Examples — 4 cards in ONE row (thumb on top + name below) in the LEFT panel */
.a3-examples {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 6px;
}
.a3-example {
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: border-color .12s, box-shadow .12s;
}
.a3-example:hover { border-color: #93c5fd; }
.a3-example.active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.14); }
.a3-example img {
    width: 100%;
    aspect-ratio: 1105 / 913;   /* match preview PNGs so cover = no letterbox */
    height: auto;
    object-fit: cover;          /* fill the card rectangle, no whitespace */
    padding: 0;
    background: #fff;
    display: block;
}
.a3-example-label { display: none; }

/* Empty state */
.a3-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    text-align: center;
    padding: 24px;
    pointer-events: none;
}
.a3-empty svg { width: 56px; height: 56px; stroke: #cbd5e1; margin-bottom: 14px; }
.a3-empty .a3-empty-main { font-size: 15px; font-weight: 600; color: #6b7280; }
.a3-empty .a3-empty-sub { font-size: 13px; margin-top: 6px; }

/* ---- Generation progress: rotating reassurance hint under the bar ---- */
body[data-sidebar-active="auto3d"] #a3Progress {
    width: min(56%, 520px);
    height: 38px;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 10px;
    background: rgba(17,24,39,.72);
    box-shadow: 0 10px 30px rgba(15,23,42,.24);
}
body[data-sidebar-active="auto3d"] #a3Progress .p-mask {
    border-radius: 9px;
    background: rgba(255,255,255,.18);
}
body[data-sidebar-active="auto3d"] #a3Progress .p-title {
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,.28);
}
body[data-sidebar-active="auto3d"] #a3Progress .p-bg-progress {
    height: 36px;
    border-radius: 9px;
    background: linear-gradient(90deg, #2563eb 0%, #4f7cff 100%);
}
#a3Progress .p-progress-hint {
    position: absolute;
    left: 0;
    top: 100%;            /* sit just below the progress bar */
    width: 100%;
    margin-top: 12px;
    text-align: center;
    z-index: 10003;        /* above .p-bg-progress (10001) */
    font-size: clamp(15px, 1.25vw, 19px);
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.45);
    background: transparent;
    border: 0;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    opacity: 0;            /* JS fades it in */
    transition: opacity .38s ease;
    pointer-events: none;
    padding: 0 10px;
    box-sizing: border-box;
}
body.dark-mode #a3Progress .p-progress-hint { color: #fff; }

/* ---- Generate area (wamo-2): auto-height so the toggle + button fit and stay
       pinned at the panel bottom (snaprender's fixed height:3.5vw overflowed) ---- */
body[data-sidebar-active="auto3d"] .wamo-2 {
    height: auto;
    flex-shrink: 0;
    padding-top: 6px;
}
/* tighten the gap between the Pro/Fast toggle and the Generate button (was ~0.9vw) */
body[data-sidebar-active="auto3d"] #a3GenBtn {
    height: 44px;
    min-height: 44px;
    margin-top: 8px !important;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.2;
}

/* ---- Engine tier toggle (Pro / Fast) above the Generate button ----
       single-row layout → ~half the previous height ---- */
/* Engine tier = ONE segmented toggle: light-gray track + border, active = white "slider" pill */
.a3-engine {
    display: flex;
    gap: 0;
    padding: 3px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.a3-engine-btn {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 9px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    transition: background .15s, box-shadow .15s;
}
.a3-engine-btn:not(.active):hover { background: rgba(255,255,255,.55); }
.a3-engine-btn.active { background: #fff; box-shadow: 0 1px 3px rgba(17,24,39,.12); }
.a3-engine-btn .a3-eng-name { font-size: 12.5px; font-weight: 600; color: #6b7280; }
.a3-engine-btn.active .a3-eng-name { color: #111827; font-weight: 700; }
.a3-engine-btn .a3-eng-sub { font-size: 10px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; }
.a3-engine-btn.active .a3-eng-sub { color: #6b7280; }

body.dark-mode .a3-engine { background: #15181d; border-color: #2a2f37; }
body.dark-mode .a3-engine-btn:not(.active):hover { background: rgba(255,255,255,.06); }
body.dark-mode .a3-engine-btn.active { background: #2a2f37; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
body.dark-mode .a3-engine-btn .a3-eng-name { color: #94a3b8; }
body.dark-mode .a3-engine-btn.active .a3-eng-name { color: #e5e7eb; }
body.dark-mode .a3-engine-btn .a3-eng-sub { color: #6b7280; }
body.dark-mode .a3-engine-btn.active .a3-eng-sub { color: #9ca3af; }

/* ---- Mode cards (2x2 grid) ---- */
.a3-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 6px;
}
.a3-mode {
    min-width: 0;
    min-height: 82px;
    border: 1px solid #e4e8ef;
    border-radius: 13px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    cursor: pointer;
    transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
    position: relative;
}
.a3-mode-ic {
    width: 38px;
    height: 38px;
    border: 1px solid #e7ebf1;
    border-radius: 10px;
    background: #f7f8fa;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.a3-mode:hover { border-color: #b9ccff; box-shadow: 0 5px 16px rgba(15,23,42,.06); transform: translateY(-1px); }
.a3-mode.active {
    border-color: #3769f5;
    background: linear-gradient(135deg, #f8faff 0%, #eef3ff 100%);
    box-shadow: 0 0 0 2px rgba(55,105,245,.1), 0 7px 18px rgba(55,105,245,.1);
}
.a3-mode.active .a3-mode-ic { border-color: #cbd8ff; background: #fff; }
.a3-mode[data-disabled="1"] { cursor: not-allowed; background: #fafbfc; border-color: #edf0f4; }
.a3-mode[data-disabled="1"]:hover { border-color: #edf0f4; box-shadow: none; transform: none; }
.a3-mode-ic svg { width: 21px; height: 21px; stroke: #687386; display: block; }
.a3-mode.active .a3-mode-ic svg { stroke: #3769f5; }
.a3-mode[data-disabled="1"] .a3-mode-ic { background: #f6f7f9; border-color: #eceff3; }
.a3-mode[data-disabled="1"] .a3-mode-ic svg { stroke: #aeb6c2; }
.a3-mode-copy { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.a3-mode-label { color: #1f2937; font-size: 13px; font-weight: 650; line-height: 1.2; white-space: normal; overflow-wrap: normal; word-break: normal; }
.a3-mode-desc { color: #7b8493; font-size: 10.5px; font-weight: 500; line-height: 1.2; white-space: normal; overflow-wrap: normal; word-break: normal; }
.a3-mode[data-disabled="1"] .a3-mode-label { color: #858f9e; }
.a3-mode[data-disabled="1"] .a3-mode-desc { color: #b1b8c2; }
.a3-mode .a3-soon {
    position: absolute;
    top: 8px;
    right: 9px;
    padding: 3px 5px;
    border-radius: 999px;
    background: #f0f2f5;
    color: #9aa2ae;
    font-size: 7px;
    font-weight: 750;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* The operation panel stays side-by-side with Result down to tablet widths.
   Compact the roadmap cards before their copy is squeezed into letter columns. */
@media (max-width: 1100px) {
    .a3-modes {
        gap: 8px;
        margin-top: 9px;
        margin-bottom: 4px;
    }
    .a3-mode {
        min-height: 60px;
        gap: 8px;
        padding: 8px 9px;
        border-radius: 11px;
    }
    .a3-mode-ic {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }
    .a3-mode-ic svg { width: 19px; height: 19px; }
    .a3-mode-copy { gap: 0; }
    .a3-mode-label {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 12.5px;
        line-height: 1.25;
    }
    .a3-mode-desc { display: none; }
    .a3-mode[data-disabled="1"] {
        padding-top: 14px;
        padding-bottom: 4px;
    }
    .a3-mode[data-disabled="1"] .a3-mode-label { padding-right: 0; }
    .a3-mode .a3-soon {
        top: 5px;
        right: 6px;
        padding: 2px 4px;
        font-size: 6px;
    }
    body[data-sidebar-active="auto3d"] #a3Progress {
        width: min(58%, 420px);
        height: 34px;
    }
    body[data-sidebar-active="auto3d"] #a3Progress .p-title {
        height: 32px;
        line-height: 32px;
        font-size: 13px;
    }
    body[data-sidebar-active="auto3d"] #a3Progress .p-bg-progress { height: 32px; }
    #a3Progress .p-progress-hint {
        margin-top: 9px;
        padding: 0 8px;
        font-size: 15px;
        line-height: 1.35;
    }
}

@media (max-width: 768px) {
    /* snaprender-tool.css keeps the collapsed operation panel at a 384px
       minimum. Scope the mobile reset to Auto3D so narrow screens use the
       full viewport without changing the other tools that share that file. */
    body[data-sidebar-active="auto3d"] .web-ai-container {
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
    }
    body[data-sidebar-active="auto3d"] .web-ai-main {
        width: 100% !important;
        height: auto !important;
        padding: 0 12px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }
    body[data-sidebar-active="auto3d"] .wam-op {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 12px 0 0 !important;
        padding: 12px !important;
        border: 0.5px solid #e8e8ea !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    body[data-sidebar-active="auto3d"] .wam-result {
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        height: 60vh !important;
        min-height: 420px !important;
        margin: 0 0 12px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    body[data-sidebar-active="auto3d"] #a3Progress {
        width: min(calc(100% - 32px), 420px);
    }
}

/* ---- Quality selector (single mode for now; others placeholders) ---- */
.a3-quality { display: flex; gap: 8px; margin-top: 6px; }
.a3-q-opt {
    flex: 1;
    text-align: center;
    padding: 9px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    background: #fff;
    transition: all .12s;
}
.a3-q-opt.active { border-color: #2563eb; background: #eff4ff; color: #1d4ed8; }
.a3-q-opt[data-disabled="1"] { cursor: not-allowed; color: #9ca3af; background: #f3f4f6; }
.a3-q-opt .a3-soon { display: block; font-size: 10px; font-weight: 600; margin-top: 2px; color: #9ca3af; }

/* ---- Tips ---- */
.a3-tips {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 10px 12px;
    margin-top: 14px;
}
.a3-tips b { color: #374151; }

/* ---- Result top-right actions: Reset | Fullscreen | Download ---- */
.a3-stage-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
    transform: scale(.84);
    transform-origin: top right;
    display: none;
    align-items: center;
    gap: 2px;
    padding: 5px;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(226,232,240,.9);
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(15,23,42,.13);
}
.a3-stage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: 40px;
    padding: 0 12px;
    border: none;
    border-radius: 9px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.a3-stage-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}
.a3-stage-btn:disabled,
.a3-stage-btn:disabled:hover {
    color: #94a3b8;
    background: transparent;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    opacity: .65;
}
.a3-stage-btn:active { transform: translateY(1px); }
.a3-stage-btn .btn-icon { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.a3-stage-label { display: inline-block; }
.a3-stage-btn-primary {
    min-width: 112px;
    padding: 0 16px;
    background: #2563eb;
    color: #fff;
    box-shadow: 0 2px 5px rgba(37,99,235,.22);
}
.a3-stage-btn-primary:hover {
    background: #1d4ed8;
    color: #fff;
    box-shadow: 0 4px 10px rgba(37,99,235,.28);
}
.a3-stage-divider { width: 1px; height: 24px; background: #e2e8f0; margin: 0 3px; flex: 0 0 auto; }
.wr-lists.result#a3Stage:fullscreen { background: #fff; }
.wr-lists.result#a3Stage:fullscreen .a3-viewer { width: 100%; height: 100%; }
body.dark-mode .a3-stage-actions { background: rgba(31,41,55,.92); border-color: rgba(255,255,255,.1); box-shadow: 0 6px 20px rgba(0,0,0,.38); }
body.dark-mode .a3-stage-btn { color: #e2e8f0; }
body.dark-mode .a3-stage-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
body.dark-mode .a3-stage-btn-primary { background: #2563eb; color: #fff; }
body.dark-mode .a3-stage-btn-primary:hover { background: #1d4ed8; color: #fff; }
body.dark-mode .a3-stage-divider { background: rgba(255,255,255,.14); }
body.dark-mode .a3-viewer-poster { background: #14171c; }
body.dark-mode .a3-viewer-fallback {
    color: #f8fafc;
    background: rgba(23,27,34,.9);
    border-color: rgba(148,163,184,.25);
    box-shadow: 0 8px 28px rgba(0,0,0,.38);
}
body.dark-mode .a3-viewer-fallback-badge { color: #93c5fd; background: rgba(37,99,235,.18); }
body.dark-mode .a3-viewer-fallback-help { color: #cbd5e1; }
body.dark-mode .a3-result-genbg { background: #14171c; }
body.dark-mode .a3-stage-btn:disabled,
body.dark-mode .a3-stage-btn:disabled:hover { color: #64748b; background: transparent; }
@media (max-width: 720px) {
    .a3-stage-actions { top: 10px; right: 10px; padding: 4px; }
    .a3-stage-btn { height: 36px; padding: 0 9px; gap: 6px; font-size: 12px; }
    .a3-stage-btn-primary { min-width: 0; padding: 0 12px; }
    .a3-stage-divider { height: 20px; margin: 0 1px; }
    .a3-viewer-fallback { bottom: 16px; width: calc(100% - 24px); padding: 10px 12px; }
}
/* download-format dropdown (GLB / OBJ .zip) */
.a3-dl-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 21;
    display: none; flex-direction: column; min-width: 124px; padding: 4px;
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 22px rgba(17,24,39,.16);
}
.a3-dl-menu.show { display: flex; }
.a3-dl-item {
    display: flex; align-items: center; width: 100%; gap: 8px;
    padding: 8px 10px; border: none; background: transparent; border-radius: 7px;
    font-size: 13px; font-weight: 600; color: #111827; cursor: pointer; text-align: left;
    -webkit-appearance: none; appearance: none;
}
.a3-dl-item:hover { background: rgba(17,24,39,.06); }
.a3-dl-item .a3-dl-sub { margin-left: auto; font-size: 11px; font-weight: 400; color: #9ca3af; }
body.dark-mode .a3-dl-menu { background: rgba(31,41,55,.95); border-color: #374151; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
body.dark-mode .a3-dl-item { color: #e5e7eb; }
body.dark-mode .a3-dl-item:hover { background: rgba(255,255,255,.08); }
body.dark-mode .a3-dl-item .a3-dl-sub { color: #6b7280; }

/* ---- History (3D model cards inside snaprender .wr-lists.history flex container) ---- */
/* Result box is overflow:hidden, so History scrolls internally (thin bar is fine here) */
.wr-lists.history#a3History {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    align-content: flex-start;
}
.wr-lists.history#a3History::-webkit-scrollbar { width: 6px; }
.wr-lists.history#a3History::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.a3-history-empty { width: 100%; color: #9ca3af; text-align: center; padding: 60px 20px; font-size: 14px; }
.a3-hist-item {
    width: calc((100% - 30px) / 4);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #f3f4f6;
    transition: border-color .12s, box-shadow .12s;
}
.a3-hist-item:hover { border-color: #2563eb; box-shadow: 0 2px 10px rgba(37,99,235,.12); }
.a3-hist-item model-viewer { width: 100%; height: 130px; background: #f3f4f6; --poster-color: transparent; }
.a3-hist-item > img { width: 100%; height: 130px; object-fit: cover; display: block; }
.a3-hist-meta { padding: 7px 10px; font-size: 11.5px; color: #6b7280; display: flex; justify-content: space-between; align-items: center; }
.a3-hist-badge { font-size: 10px; padding: 1px 6px; border-radius: 10px; background: #e5e7eb; color: #6b7280; }
.a3-hist-badge.failed { background: #fee2e2; color: #dc2626; }
.a3-hist-badge.pending { background: #fef9c3; color: #ca8a04; }

@media (max-width: 1100px) {
    .a3-hist-item { width: calc((100% - 20px) / 3); }
}

/* ==========================================================================
   Dark mode (body.dark-mode — global opt-in dark theme)
   ========================================================================== */
/* !important: dark-theme.css sets .new-upload-container to #111827 globally;
   force it to the unified inset gray so dark mode matches the other surfaces. */
body.dark-mode .new-upload-container { background: #15181d !important; border-color: #3a3f47 !important; }
/* auto3d: blue dashed upload border (overrides the gray above) — lighter blue in dark */
body.dark-mode[data-sidebar-active="auto3d"] .new-upload-container:hover { border-color: #3b82f6 !important; }
body.dark-mode[data-sidebar-active="auto3d"] #uploadContainer.new-upload-container.dragover {
    background: #172033 !important;
    border-color: #3b82f6 !important;
}
body.dark-mode[data-sidebar-active="auto3d"] .a3-upload-icon { color: #64748b; }
body.dark-mode[data-sidebar-active="auto3d"] .a3-upload-copy { color: #e5e7eb; }
body.dark-mode[data-sidebar-active="auto3d"] .a3-upload-or { color: #94a3b8; }
body.dark-mode[data-sidebar-active="auto3d"] .new-upload-btn:not(.a3-upload-primary) {
    background: #2a2f37 !important;
    border-color: #3a3f47 !important;
    color: #e5e7eb !important;
}
body.dark-mode[data-sidebar-active="auto3d"] .new-upload-btn:not(.a3-upload-primary):hover {
    background: #353b45 !important;
    border-color: #4b5563 !important;
}
body.dark-mode[data-sidebar-active="auto3d"] .new-upload-btn.a3-upload-primary {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
body.dark-mode[data-sidebar-active="auto3d"] .new-upload-btn.a3-upload-primary:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}
body.dark-mode .wr-lists.result#a3Stage { background: radial-gradient(95% 75% at 50% 30%, #232830 0%, #15181d 58%, #0f1115 100%); }
body.dark-mode[data-sidebar-active="auto3d"] .wr-lists-box,
body.dark-mode .wr-lists-box { border-color: #2a2f37; }
body.dark-mode .a3-example { background: #15181d; border-color: #2a2f37; }
body.dark-mode .a3-example:hover { border-color: #3b82f6; }
body.dark-mode .a3-example.active { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.3); }
body.dark-mode .a3-example img { background: #14171c; }
body.dark-mode .a3-example-label { color: #cbd5e1; }
body.dark-mode .a3-empty .a3-empty-main { color: #94a3b8; }
body.dark-mode .a3-empty svg { stroke: #3a3f47; }
body.dark-mode .a3-mode { background: #15181d; border-color: #2f353e; }
body.dark-mode .a3-mode:hover { border-color: #3b82f6; }
body.dark-mode .a3-mode.active { background: linear-gradient(135deg, #1c263b 0%, #192238 100%); border-color: #4f7cff; box-shadow: 0 0 0 2px rgba(59,130,246,.15), 0 7px 18px rgba(0,0,0,.2); }
body.dark-mode .a3-mode[data-disabled="1"] { background: #14171b; border-color: #282d35; }
body.dark-mode .a3-mode[data-disabled="1"]:hover { border-color: #282d35; }
body.dark-mode .a3-mode-ic { background: #1d2128; border-color: #343a44; }
body.dark-mode .a3-mode.active .a3-mode-ic { background: #202b42; border-color: #3f5683; }
body.dark-mode .a3-mode[data-disabled="1"] .a3-mode-ic { background: #1a1d22; border-color: #282d35; }
body.dark-mode .a3-mode-ic svg { stroke: #94a3b8; }
body.dark-mode .a3-mode.active .a3-mode-ic svg { stroke: #93c5fd; }
body.dark-mode .a3-mode-label { color: #cbd5e1; }
body.dark-mode .a3-mode-desc { color: #7f8a9b; }
body.dark-mode .a3-mode[data-disabled="1"] .a3-mode-label { color: #737d8c; }
body.dark-mode .a3-mode[data-disabled="1"] .a3-mode-desc { color: #535c69; }
body.dark-mode .a3-mode .a3-soon { background: #22272e; color: #687383; }
body.dark-mode .a3-q-opt { background: #15181d; border-color: #3a3f47; color: #cbd5e1; }
body.dark-mode .a3-q-opt.active { background: #1e2a44; border-color: #3b82f6; color: #93c5fd; }
body.dark-mode .a3-q-opt[data-disabled="1"] { background: #15181d; color: #6b7280; }
body.dark-mode .a3-tips { background: #15181d; border-color: #2a2f37; color: #94a3b8; }
body.dark-mode .a3-tips b { color: #cbd5e1; }
body.dark-mode .a3-hist-item { background: #15181d; border-color: #2a2f37; }
body.dark-mode .a3-hist-item model-viewer { background: #14171c; }


/* ==== Multi-object Canvas tab (roomflow-style box-selection workspace) ==== */
/* .hide must beat pane-specific display:flex (canvas / result#a3Stage) so panes toggle */
body[data-sidebar-active="auto3d"] .wr-lists.hide { display: none !important; }

body[data-sidebar-active="auto3d"] .wr-lists.canvas { padding: 0; position: absolute; inset: 0; overflow: hidden; }
/* generating mask: dark overlay over the image + boxes (z above the small .progress pill) */
.a3-canvas-genmask {
    position: absolute; inset: 0; z-index: 10010;
    background: rgba(17,24,39,.55);
    display: none; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center; padding: 20px;
}
.a3-canvas-genmask.show { display: flex; }
.a3-genmask-spinner {
    width: 40px; height: 40px; border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff; border-radius: 50%; animation: a3-spin .9s linear infinite;
}
@keyframes a3-spin { to { transform: rotate(360deg); } }
.a3-genmask-title { color: #fff; font-size: 20px; font-weight: 700; }
.a3-genmask-pct { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.a3-genmask-sub { color: rgba(255,255,255,.75); font-size: 12.5px; max-width: 280px; line-height: 1.5; }
.a3-canvas-wrap {
    width: 100%; height: 100%; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: #f3f4f6;
}
/* blank-state: click-to-upload placeholder */
.a3-canvas-placeholder {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer;
    background: #f5f5f5; border: none; border-radius: 8px;
    transition: box-shadow .2s, background .2s;
}
.a3-canvas-placeholder:hover { box-shadow: inset 0 0 0 2px #2563eb; background: #eff4ff; }
.a3-canvas-placeholder:hover svg { stroke: #2563eb; }
.a3-canvas-placeholder svg { width: 46px; height: 46px; stroke: #9ca3af; }
.a3-ph-main { margin-top: 12px; font-size: 14px; font-weight: 500; color: #6b7280; }
.a3-ph-sub { margin-top: 6px; font-size: 12px; color: #9ca3af; }
/* image + box overlay */
.a3-canvas-imgwrap { position: relative; display: inline-block; max-width: 100%; max-height: 100%; line-height: 0; }
.a3-canvas-imgwrap img { display: block; max-width: 100%; max-height: 100%; -webkit-user-drag: none; user-select: none; border-radius: 6px; }
.a3-box-layer { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.a3-box { position: absolute; border: 2px solid #2563eb; background: rgba(37,99,235,.10); box-sizing: border-box; pointer-events: none; }
.a3-box.drawing { background: rgba(37,99,235,.06); }
.a3-box-num { position: absolute; top: -1px; left: -1px; background: #2563eb; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 5px 0 5px 0; }
.a3-box-del { position: absolute; top: -10px; right: -10px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: #fff; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 50%; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 2px rgba(17,24,39,.14); }
.a3-box-del svg { width: 10px; height: 10px; display: block; margin: auto; }
.a3-box-del:hover { color: #dc2626; border-color: #fecaca; }
/* top-right actions pill: undo / redo / Done */
.a3-canvas-actions { position: absolute; top: 10px; right: 10px; z-index: 10; display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: #fff; border-radius: 24px; box-shadow: 0 2px 12px rgba(17,24,39,.15); }
.a3-act-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; cursor: pointer; color: #6b7280; transition: background .12s; }
.a3-act-btn:hover:not(:disabled) { background: #f3f4f6; }
.a3-act-btn:disabled { opacity: .4; cursor: default; }
.a3-act-btn svg { width: 18px; height: 18px; }
.a3-done-btn { height: 32px; padding: 0 16px; border-radius: 16px; background: #2563eb; color: #fff; font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: background .15s; }
.a3-done-btn:hover { background: #1d4ed8; }
/* bottom toolbar pill: box tool + count + clear */
.a3-canvas-toolbar { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 10; }
.a3-tool-pill { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fff; border-radius: 24px; box-shadow: 0 2px 12px rgba(17,24,39,.15); }
.a3-tool-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; cursor: pointer; transition: background .12s; }
.a3-tool-btn svg { width: 20px; height: 20px; stroke: #6b7280; }
.a3-tool-btn:hover { background: #f3f4f6; }
.a3-tool-btn.active { background: #eff4ff; }
.a3-tool-btn.active svg { stroke: #2563eb; }
.a3-tool-sep { width: 1px; height: 20px; background: #e5e7eb; }
.a3-tool-count { font-size: 12px; color: #6b7280; }
.a3-tool-count b { color: #2563eb; font-weight: 700; }
.a3-tool-clear { background: none; border: none; font-size: 12px; color: #6b7280; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.a3-tool-clear:hover { background: #f3f4f6; color: #374151; }
/* dark */
body.dark-mode .a3-canvas-wrap { background: #15181d; }
body.dark-mode .a3-canvas-placeholder { background: #15181d; }
body.dark-mode .a3-canvas-placeholder:hover { background: #1e2a44; box-shadow: inset 0 0 0 2px #3b82f6; }
body.dark-mode .a3-ph-main { color: #94a3b8; }
body.dark-mode .a3-canvas-actions, body.dark-mode .a3-tool-pill { background: #2a2f37; box-shadow: 0 2px 12px rgba(0,0,0,.4); }
body.dark-mode .a3-act-btn { color: #cbd5e1; }
body.dark-mode .a3-act-btn:hover:not(:disabled) { background: #3a3f47; }
body.dark-mode .a3-tool-btn:hover { background: #3a3f47; }
body.dark-mode .a3-tool-btn.active { background: #1e2a44; }
body.dark-mode .a3-tool-sep { background: #3a3f47; }
body.dark-mode .a3-tool-count, body.dark-mode .a3-tool-clear { color: #94a3b8; }
body.dark-mode .a3-tool-clear:hover { background: #3a3f47; color: #cbd5e1; }
body.dark-mode .a3-box-del { background: #2a2f37; color: #cbd5e1; border-color: #3a3f47; }