/* FBX Painter -- app shell
 *
 * Type is deliberately larger and higher-contrast than a typical dark DCC tool:
 * 14-15px base rather than the 11px the old toolbar used, generous line-height,
 * and no light-gray-on-dark-gray text. Controls have real hit targets.
 */

:root {
    --bg:          #14161a;
    --bg-panel:    #1c1f25;
    --bg-raised:   #252932;
    --bg-input:    #101215;

    --line:        #333945;
    --line-strong: #454d5c;

    --text:        #f0f2f6;
    --text-dim:    #b8c0cf;

    --accent:      #2f9e5e;
    --accent-dim:  #1d6b3e;
    --danger:      #c8493f;

    --radius: 5px;
    --gap: 10px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    /* Keep letterforms distinct; avoids the tight tracking that makes dark UI
       text harder to scan. */
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}

#app {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


/* ---------------- base controls ---------------- */

button {
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--bg-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 6px 11px;
    min-height: 30px;
    cursor: pointer;
}

button:hover:not(:disabled) { background: #2f343f; }
button:active:not(:disabled) { background: #383e4b; }
button:disabled { opacity: 0.4; cursor: default; }

button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

select, input[type="text"], input[type="number"] {
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--bg-input);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 5px 7px;
    min-height: 30px;
}

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

/* File inputs presented as buttons. */
.file-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: var(--bg-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: 6px 11px;
    min-height: 30px;
    cursor: pointer;
    white-space: nowrap;
}
.file-btn:hover { background: #2f343f; }
.file-btn input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ---------------- menu bar ---------------- */

#menubar {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 10px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 100;
}

#menubar .brand {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    padding-right: 14px;
    white-space: nowrap;
}

.menu { position: relative; display: flex; }

.menu-title {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--text);
    min-height: 0;
}
.menu-title:hover { background: var(--bg-raised); }
.menu.open > .menu-title { background: var(--accent-dim); }

.menu-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 234px;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
    z-index: 120;
}
.menu.open > .menu-list { display: block; }

.menu-list li { margin: 0; }
.menu-list li.sep { height: 1px; background: var(--line); margin: 5px 4px; }

/* Labels all start at the same left edge; shortcuts and toggle boxes are pushed
   to the right, so the menu reads as a single column of names. */
.menu-list button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
    text-align: left;
    min-height: 0;
    color: var(--text);
}
.menu-list button:hover:not(:disabled) { background: var(--accent-dim); }
.menu-list button:disabled { opacity: 0.38; }

.menu-list .key { margin-left: auto; font-size: 12px; color: var(--text-dim); }

/* Toggles show a box on the right whether or not they are on, so it is obvious
   the entry is a switch rather than an action. */
.menu-list button[data-check]::after {
    content: "";
    margin-left: auto;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    background: var(--bg-input);
    box-sizing: border-box;
}

.menu-list button[data-check].checked::after {
    content: "\2713";
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

#menubar #status-text {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: var(--text-dim);
    font-size: 13px;
    white-space: nowrap;
}

#menubar #build-stamp {
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 12px;
    color: var(--text-dim);
    opacity: 0.7;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.tb-spacer { flex: 1; }

/* ---------------- workspace: docked columns ----------------
   brushes | model | texture | layers
   Hiding model or texture from the View menu collapses that column, leaving
   brushes | model | layers   or   brushes | texture | layers.
*/

/* Always a row: brushes | center | layers.
   The side docks are fixed; only the center reflows. */
#workspace {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    min-width: 0;
}

/* Model and Texture live here. View > Stack changes THIS, nothing else. */
#center {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-width: 0;
    min-height: 0;
}
#center.stacked { flex-direction: column; }

#center.stacked #model-panel,
#center.stacked #texture-panel { flex: 1 1 50%; min-height: 140px; min-width: 0; }

#center.stacked .splitter {
    flex: 0 0 6px;
    height: 6px;
    width: auto;
    cursor: row-resize;
    border: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.dock {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Without this a flex item cannot shrink below its content, so one wide
       child (a dropdown, a long layer name) can blow the whole column out. */
    min-width: 0;
    background: var(--bg-panel);
}
.dock.hidden { display: none; }

.dock-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: var(--bg-raised);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.dock-title .title-actions { display: flex; gap: 3px; margin-left: auto; }
.dock-title .title-actions button {
    min-height: 24px; min-width: 26px;
    padding: 2px 7px; font-size: 13px; line-height: 1;
}

.dock-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* The rail carries a dozen tools now, so it has to be able to scroll on a short
   window. That is only safe because the shape chooser is positioned FIXED and
   placed by script -- an absolutely positioned popout would be clipped by the
   very overflow that makes the rail scrollable. The slider popouts are
   unaffected: the tray is a sibling of this box, not inside it. */
#brush-panel .dock-body { overflow-y: auto; overflow-x: hidden; }
#brush-panel .dock-body::-webkit-scrollbar { width: 0; }


.pane { flex: 1 1 50%; min-width: 0; }

#brush-panel  { flex: 0 0 52px; border-right: 1px solid var(--line); overflow: visible; }
#layers-panel { flex: 0 0 292px; border-left: 1px solid var(--line); }

.splitter {
    flex: 0 0 6px;
    cursor: col-resize;
    background: var(--bg-panel);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
.splitter:hover { background: var(--accent-dim); }
.splitter.hidden { display: none; }

/* ---------------- tools ---------------- */

#toolrail { display: flex; flex-direction: column; padding: 4px; gap: 2px; }

/* Outside the scrolling rail, so color is reachable at any window height. */
.rail-pinned {
    flex: 0 0 auto;
    padding: 4px;
    border-top: 1px solid var(--line);
}

.tool, .swatch-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 100%;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-dim);
    min-height: 0;
    cursor: pointer;
}

.tool svg {
    width: 19px; height: 19px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

.tool:hover { background: var(--bg-raised); color: var(--text); }
.tool.active { background: var(--accent-dim); border-color: var(--accent); color: #fff; }


/* Tooltips.
   Drawn into a single FIXED element placed by script, not a ::after on the
   button. The rail scrolls, and a scrolling box computes overflow-x as hidden
   no matter what, so a pseudo-element that reaches out to the right of the
   column is clipped away to nothing -- which is exactly what happened to every
   tool name. */
#tooltip {
    position: fixed;
    z-index: 200;
    padding: 5px 9px;
    background: var(--bg-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
#tooltip[hidden] { display: none; }

/* ---------------- brush sliders ---------------- */
/*
   The column is too narrow to hold a usable slider, so each row shows only its
   name and value. Hovering floats the control out BESIDE the column, overflowing
   the panel, where there is room to drag it accurately.
*/

.slider-tray {
    border-top: 1px solid var(--line);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: visible;
}

/* Two lines, tight.
   One line was tried and does not fit: the column is 43px of usable width and
   "ANGLE 100" needs 60, so five of the six rows were visibly cut off. Stacked
   at 9px the widest label is 31px and nothing is clipped, and at 27px a row the
   tray still leaves the rail enough height not to scroll at a 900px window. */
.slider-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 2px;
    border-radius: var(--radius);
    background: var(--bg-input);
    cursor: pointer;
}

.slider-label {
    font-size: 9px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1.15;
}

.slider-row output {
    font-size: 11px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.slider-row:hover,
.slider-row:focus-within { background: var(--bg-raised); }

/* The floating control. */
.slider-pop {
    display: none;
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 7px;
    z-index: 80;
    width: 196px;
    padding: 9px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.slider-row:hover .slider-pop,
.slider-row:focus-within .slider-pop { display: block; }

/* A bridge across the gap, so moving the pointer toward the control does not
   pass over dead space and dismiss it. */
.slider-pop::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 0;
    bottom: 0;
    width: 9px;
}

.pop-name {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.slider-pop input[type="range"] {
    width: 100%;
    height: 20px;
    margin: 0;
    accent-color: var(--accent);
}

/* ---------------- viewport + uv ---------------- */

#viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    background: #0d0f12;
}

#three-canvas { width: 100%; height: 100%; display: block; }

#viewport-hint {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 16px; pointer-events: none;
}
#viewport-hint.hidden { display: none; }

#uv-canvas-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: 8px;
    background: #0d0f12;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

#tex-base, #tex-overlay {
    position: absolute; inset: 0;
    width: 100%; height: 100%; display: block;
}
#tex-overlay { pointer-events: none; }

#material-select {
    flex: 1; min-width: 0;
    font: inherit; font-size: 13px;
    text-transform: none; letter-spacing: 0;
    color: var(--text); background: var(--bg-input);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: 4px 6px; min-height: 28px;
}

#island-lock-label {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; text-transform: none; letter-spacing: 0;
    color: var(--text-dim); cursor: pointer;
}
#island-lock-label input { width: 15px; height: 15px; accent-color: var(--accent); }

/* ---------------- layers ---------------- */

#layer-list {
    flex: 1;
    min-height: 90px;
    overflow-y: auto; overflow-x: hidden;
    list-style: none;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.layer-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    background: var(--bg-input);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}
.layer-item:hover { border-color: var(--line-strong); }
.layer-item.active { border-color: var(--accent); background: #17251d; }

.layer-item[data-depth="1"] { margin-left: 13px; }
.layer-item[data-depth="2"] { margin-left: 26px; }
.layer-item[data-depth="3"] { margin-left: 39px; }

.layer-vis {
    flex: 0 0 auto;
    width: 20px; height: 20px; min-height: 0;
    padding: 0; border: none; background: transparent;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--text-dim); border-radius: 3px;
}
.layer-vis:hover { background: var(--bg-raised); color: var(--text); }
.layer-item.hidden-layer .layer-name { opacity: 0.45; }

.thumb {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    padding: 0; min-height: 0;
    border: 2px solid transparent; border-radius: 3px;
    background: #0b0d10 repeating-conic-gradient(#20242c 0% 25%, #171a20 0% 50%) 0 0 / 9px 9px;
    cursor: pointer; overflow: hidden; display: block;
}
.thumb canvas { width: 100%; height: 100%; display: block; }
.thumb:hover { border-color: var(--line-strong); }
.thumb.editing { border-color: var(--accent); }
.thumb.mask-thumb { border-style: dashed; }
.thumb.mask-thumb.editing { border-style: solid; }
.thumb.mask-off { opacity: 0.4; }

.layer-name {
    flex: 1;
    font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-item.is-group .layer-name { font-weight: 600; }

/* ---------------- layer information ---------------- */

#layer-info {
    border-top: 1px solid var(--line);
    padding: 9px 10px;
    background: var(--bg-panel);
}

.info-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.info-grid {
    display: grid;
    grid-template-columns: 62px 1fr;
    align-items: center;
    gap: 6px 8px;
}

.info-grid label { font-size: 12px; color: var(--text-dim); }

.info-grid select {
    width: 100%;
    font: inherit; font-size: 13px;
    color: var(--text); background: var(--bg-input);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: 4px 6px; min-height: 28px;
}

.inline-slider { display: flex; align-items: center; gap: 7px; }
.inline-slider input[type="range"] { flex: 1; accent-color: var(--accent); }
.inline-slider output {
    font-size: 12px; width: 30px; text-align: right;
    font-variant-numeric: tabular-nums; color: var(--text-dim);
}

.info-grid input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }

/* Mask controls, grouped and separated from the blend/opacity rows above. */
.info-group {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.group-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 7px;
}

.mask-actions { display: flex; gap: 6px; }
.mask-actions button { flex: 1; min-height: 28px; padding: 3px 8px; font-size: 12px; }

.check-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
}
.check-line input[type="checkbox"] { width: 15px; height: 15px; flex: 0 0 auto; }
.check-line:hover { color: var(--text); }

.sym-space {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.sym-space label { font-size: 12px; color: var(--text-dim); }
.sym-space select { width: 100%; min-width: 0; min-height: 28px; font-size: 12px; }

.sym-line[hidden] { display: none; }
.sym-line select { width: 100%; min-width: 0; min-height: 26px; font-size: 12px; }

.sym-line {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 6px 8px;
    margin-top: 8px;
}
.sym-line label { font-size: 12px; color: var(--text-dim); }
.sym-line input[type=range] { width: 100%; min-width: 0; }
.sym-line output {
    font-size: 12px;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#sym-recenter { width: 100%; margin-top: 8px; }

/* A proper icon rather than an emoji: emoji render differently on every
   platform and sit awkwardly against the rest of the interface. */
.layer-vis svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.layer-vis.off { color: var(--text-dim); opacity: 0.55; }

.info-meta {
    margin-top: 9px;
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.45;
}

/* ---------------- footer ---------------- */

/* One line: in a docked tool, vertical space belongs to the panels. */
#footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 5px 10px;
    background: var(--bg-panel);
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
}
#footer img { height: 21px; display: block; }
#footer a { display: flex; align-items: center; }

@media (max-width: 900px) {
    #brush-panel { flex: 0 0 48px; }
    #layers-panel { flex: 0 0 244px; }
}

/* ---------------- overlays: setup + loading ---------------- */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 13, 0.78);
    padding: 20px;
}

.overlay.hidden { display: none; }

.dialog {
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto; overflow-x: hidden;
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 22px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.dialog h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.step { margin-top: 14px; }
.step.hidden { display: none; }

.step-hint {
    margin: 0 0 14px;
    color: var(--text-dim);
    font-size: 15px;
    max-width: 60ch;
}
.step-hint.small { font-size: 13px; margin-top: 8px; }

/* Large, obvious targets -- this is the first thing anyone touches. */
.big-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
}
.big-btn:hover { background: #24603c; }

.big-btn.alt {
    background: var(--bg-raised);
    border-color: var(--line-strong);
    font-weight: 500;
}
.big-btn.alt:hover { background: #2f343f; }

.big-btn input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.chosen {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-dim);
    word-break: break-all;
}
.chosen.set { color: var(--text); }

.or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--text-dim);
    font-size: 13px;
}
.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.dialog-actions .ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--text-dim);
}
.dialog-actions .ghost:hover { background: var(--bg-raised); color: var(--text); }
.dialog-actions .hidden { display: none; }

/* Loading */

.loading-box {
    text-align: center;
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 24px 34px;
    min-width: 300px;
}

.loading-box p { margin: 4px 0 0; font-size: 15px; }

/* ---------------- startup ---------------- */

#boot {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}
#boot.done { display: none; }

.boot-box { text-align: center; min-width: 300px; }

.boot-title { margin: 14px 0 4px; font-size: 17px; font-weight: 600; }
.boot-sub { margin: 0 0 16px; font-size: 14px; color: var(--text-dim); }

/* An indeterminate bar: the work has no measurable progress, but a moving bar
   makes it clear the program is busy rather than wedged.
   Animated with transform so it keeps moving even while the main thread is
   blocked parsing a large mesh -- a width-based animation would freeze. */
.boot-bar {
    position: relative;
    width: 100%;
    height: 4px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--bg-raised);
    overflow: hidden;
}

.boot-bar span {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent, var(--accent), transparent);
    transform: translateX(-100%);
    animation: sweep 1.15s linear infinite;
}

@keyframes sweep {
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .boot-bar span { animation: none; transform: none; opacity: 0.6; }
}

/* ---------------- color ---------------- */

/* Color opens a picker; it is not one of the tools, so it never takes the
   selection away from Paint or Erase. */
.swatch-btn:hover { background: var(--bg-raised); color: var(--text); }
.swatch-btn.open { background: var(--bg-raised); border-color: var(--line-strong); }

.swatch-chip {
    width: 26px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid var(--line-strong);
    background: #ff0000;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* ---- the picker ---- */

.cp {
    position: fixed;
    z-index: 300;
    box-sizing: border-box;
    width: 244px;
    max-width: calc(100vw - 16px);
    overflow: hidden;
    padding: 12px;
    background: var(--bg-panel);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.cp.hidden { display: none; }

.cp-sv-wrap { position: relative; line-height: 0; }

.cp-sv {
    display: block;
    width: 100%;
    height: 150px;
    border-radius: 5px;
    cursor: crosshair;
    touch-action: none;
}

.cp-sv-dot,
.cp-hue-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.cp-sv-dot { top: 0; left: 0; }

.cp-hue-wrap { position: relative; margin-top: 10px; }

.cp-hue {
    display: block;
    width: 100%;
    height: 14px;
    border-radius: 7px;
    cursor: ew-resize;
    touch-action: none;
}

.cp-hue-dot { top: 7px; }

.cp-fields {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px;
    margin-top: 11px;
}

.cp-preview {
    grid-row: span 2;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid var(--line-strong);
    background: #ff0000;
}

.cp-field { display: flex; align-items: center; gap: 6px; }
.cp-field > span { font-size: 11px; color: var(--text-dim); width: 22px; }

.cp-field input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    background: var(--bg-input);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding: 4px 6px;
}

/* R, G and B share the second row, beside the preview.
   A number input has an intrinsic minimum width (its spinner included), and a
   flex item will not shrink below that unless min-width is cleared -- without
   this the three fields push straight through the right edge of the panel. */
.cp-num-row { grid-column: 2; display: flex; gap: 5px; min-width: 0; }
.cp-num-row .cp-field { flex: 1 1 0; min-width: 0; gap: 3px; }
.cp-num-row .cp-field > span { flex: 0 0 auto; width: auto; font-size: 10px; }

.cp-num-row input {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    padding: 4px 2px;
    text-align: center;
    font-size: 12px;
    /* The spinner arrows cost width that these narrow fields cannot spare. */
    -moz-appearance: textfield;
    appearance: textfield;
}
.cp-num-row input::-webkit-outer-spin-button,
.cp-num-row input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cp-recent-wrap { margin-top: 12px; }
.cp-recent-wrap.hidden { display: none; }

.cp-recent-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 5px;
}

.cp-recent {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cp-swatch {
    width: 100%;
    height: 20px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    cursor: pointer;
}
.cp-swatch:hover { border-color: var(--accent); }

/* Textures cannot be chosen before there is a mesh, so that section is dimmed
   and inert until an .fbx has been picked -- visible, so the whole job is clear
   from the outset, but plainly not yet available. */
.step.disabled {
    opacity: 0.42;
    pointer-events: none;
    user-select: none;
}

.step.disabled .big-btn {
    background: var(--bg-raised);
    border-color: var(--line);
}

.dialog .step + .step {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}


/* ---------- Tool groups: one rail button, several tools ---------- */

.rail-sep {
    height: 1px;
    margin: 5px 6px;
    background: var(--line);
}

.tool-group { position: relative; }

/* A folded corner marks a button that hides more behind it. */
.tool-more {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-bottom: 5px solid var(--text-dim);
}
.tool.active .tool-more { border-bottom-color: #fff; }

/* Opens on CLICK, not hover: picking a shape is a decision, and a chooser that
   appears while the pointer is merely passing gets in the way. */
.tool-pop {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    width: 168px;
    padding: 9px 10px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.tool-group.open .tool-pop { display: block; }

.tool-pop .shape {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 4px;
    padding: 7px 8px;
    font-size: 13px;
    text-align: left;
}
.tool-pop .shape svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tool-pop .shape.active {
    background: var(--accent-dim);
    color: #fff;
    border-color: var(--accent);
}


/* ---------- Save dialog ---------- */

.field { margin-top: 16px; }
.field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-dim);
}

.field-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.field-row input[type=text] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
}
.field-row .suffix {
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* What is actually going into the file, so Save is not a leap of faith. */
.save-summary {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-input);
    font-size: 13px;
    line-height: 1.7;
}
.save-summary dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 14px;
}
.save-summary dt { color: var(--text-dim); }
.save-summary dd { margin: 0; font-variant-numeric: tabular-nums; }

.step-hint.small { font-size: 12px; margin: 10px 0 0; }