/* Cloth Layer Stacker — desktop tool layout: toolbar, layers | viewport | properties, status bar. */
:root {
  --win: #e7e7e7;          /* toolbar, status bar */
  --panel: #f3f3f3;
  --field: #ffffff;
  --view: #d6d7d9;         /* viewport backdrop */
  --hover: rgba(0, 0, 0, .05);
  --line: #d2d2d2;
  --line-2: #bcbcbc;
  --text: #1d1d1f;
  --text-2: #5f6064;
  --text-3: #8e8f94;
  --accent: #0a66e0;
  --accent-text: #ffffff;
  --sel-dim: #d9d9dc;      /* selected row while the list isn't focused */
  --ok: #1f8a3b;
  --warn: #c24c00; --danger: #d70015;
  --scroll-thumb: rgba(0, 0, 0, .2); --scroll-thumb-hover: rgba(0, 0, 0, .38);
  --grid: rgba(0, 0, 0, .16);
  --check-a: #ffffff;
  --check-b: #e3e3e3;
  --ruler: #e9e9ea;
  --ruler-ink: #8a8b90;
  --panel-head: #e9e9ea;   /* section header bars */
  --track: #c4c4c7;        /* slider and meter tracks */
  --track-fill: #77787d;
  --thumb: #ffffff;
  --shadow: 0 8px 28px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .18);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --win: #2a2a2c; --panel: #1f1f21; --field: #141416; --view: #161618; --hover: rgba(255, 255, 255, .06);
    --line: #39393c; --line-2: #4a4a4e; --text: #e8e8ea; --text-2: #a2a3a8; --text-3: #6f7075;
    --accent: #2f7cf6; --accent-text: #ffffff; --sel-dim: #3a3a3e; --ok: #34c759; --warn: #ff9f0a; --danger: #ff453a; --scroll-thumb: rgba(255, 255, 255, .16); --scroll-thumb-hover: rgba(255, 255, 255, .32);
    --grid: rgba(255, 255, 255, .12); --check-a: #3b3b3e; --check-b: #2e2e31; --ruler: #232325; --ruler-ink: #77787d;
    --panel-head: #29292b; --track: #47474b; --track-fill: #a9a9ae; --thumb: #d8d8db;
    --shadow: 0 10px 32px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(255, 255, 255, .12);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--panel); color: var(--text); font: 12px/1.4 var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.app {
  height: 100%;
  display: grid;
  grid-template-columns: var(--lw, 0px) minmax(0, 1fr) var(--rw, 272px);
  grid-template-rows: 44px minmax(0, 1fr) 24px;
  grid-template-areas: "tb tb tb" "left view right" "sb sb sb";
}

/* toolbar */
.toolbar { grid-area: tb; display: flex; align-items: center; gap: 10px; padding: 0 8px; background: var(--win); border-bottom: 1px solid var(--line); min-width: 0; }
.app-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; margin-right: 6px; }
.app-logo { width: 20px; height: 17px; flex: none; }
.tb-spacer { flex: 1; }
.tb-group { display: flex; gap: 2px; }

.seg { display: inline-flex; background: var(--hover); border-radius: 6px; padding: 2px; gap: 2px; }
.seg button { appearance: none; border: 0; background: none; border-radius: 4px; padding: 3px 10px; color: var(--text-2); cursor: default; white-space: nowrap; line-height: 18px; }
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--field); color: var(--text); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 2px rgba(0, 0, 0, .12); }
.seg .count { color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: 2px; }
.seg.small button { padding: 2px 7px; line-height: 16px; }

.icon-btn { appearance: none; border: 0; background: none; width: 28px; height: 26px; border-radius: 5px; display: inline-grid; place-items: center; color: var(--text-2); cursor: default; padding: 0; }
.icon-btn:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.icon-btn:disabled { opacity: .35; }

.btn { appearance: none; border: 0; border-radius: 6px; padding: 4px 12px; line-height: 18px; background: var(--field); color: var(--text); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 1.5px rgba(0, 0, 0, .1); cursor: default; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.btn:hover { filter: brightness(.98); }
.btn.primary { background: var(--accent); color: var(--accent-text); box-shadow: 0 1px 1.5px rgba(0, 0, 0, .2); }
.btn.primary:hover { filter: brightness(1.08); }
.btn .chev { width: 12px; height: 12px; margin-right: -4px; }
.link { appearance: none; border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; }
.link:hover { text-decoration: underline; }

.toggle { appearance: none; border: 0; border-radius: 5px; padding: 2px 7px; line-height: 16px; background: none; color: var(--text-2); cursor: default; }
.toggle:hover { background: var(--hover); color: var(--text); }
.toggle[aria-pressed="true"] { background: var(--field); color: var(--text); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 2px rgba(0, 0, 0, .12); }

.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: 5px; background: var(--field); border-radius: 8px; box-shadow: var(--shadow); }
.menu button { width: 100%; display: flex; justify-content: space-between; gap: 18px; appearance: none; border: 0; background: none; padding: 5px 9px; border-radius: 4px; text-align: left; cursor: default; }
.menu button:hover, .menu button:focus-visible { background: var(--accent); color: var(--accent-text); outline: none; }
.menu-hint { color: var(--text-3); font-variant-numeric: tabular-nums; }
.menu button:hover .menu-hint, .menu button:focus-visible .menu-hint { color: inherit; opacity: .8; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }

/* docks: columns of panels on each side, resizable, hideable */
.dock { position: relative; min-width: 0; min-height: 0; background: var(--panel); overflow: hidden; }
#dock-left { grid-area: left; border-right: 1px solid var(--line); }
#dock-right { grid-area: right; border-left: 1px solid var(--line); }
.dock-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; scrollbar-gutter: stable; }
/* thin scrollbars of our own: a 4 px thumb (6 px under the pointer) in its own 12 px lane, so it's easy to grab and never sits on top of panel controls */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); border: 4px solid transparent; border-radius: 6px; background-clip: padding-box; min-height: 28px; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--scroll-thumb-hover); border-width: 3px; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } }
.dock-resizer { position: absolute; top: 0; bottom: 0; width: 5px; z-index: 8; cursor: col-resize; touch-action: none; }
/* each docked panel's bottom edge resizes its height */
.pbox { position: relative; }
.pb-resize { position: absolute; left: 0; right: 0; bottom: -6px; height: 12px; z-index: 6; cursor: row-resize; touch-action: none; outline: none; } /* 12 px to grab, half of it over the next panel's top */
.pb-resize::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--accent); opacity: 0; transition: opacity .1s; }
.pb-resize:hover::after, .pb-resize.is-dragging::after, .pb-resize:focus-visible::after { opacity: 1; }
.pbox.is-collapsed .pb-resize, .pbox.is-floating .pb-resize { display: none; }
.pbox.has-height { overflow: clip; overflow-clip-margin: 6px; }
.pbox.has-height > .pb-body { flex: 1; min-height: 0; overflow-y: auto; }
body.is-resizing-panel, body.is-resizing-panel * { cursor: row-resize !important; user-select: none; }
#dock-left .dock-resizer { right: 0; }
#dock-right .dock-resizer { left: 0; }
.dock-resizer:hover, .dock-resizer.is-dragging, .dock-resizer:focus-visible { background: var(--accent); outline: none; }

/* panels: header bar (drag to move, click to fold) + body */
.pbox { display: flex; flex-direction: column; flex: none; border-bottom: 1px solid var(--line); background: var(--panel); min-height: 0; }
.pb-head { display: flex; align-items: center; gap: 2px; height: 28px; padding: 0 6px 0 0; background: var(--panel-head); border-bottom: 1px solid var(--line); flex: none; user-select: none; cursor: default; touch-action: none; }
.pb-head:hover { background: color-mix(in srgb, var(--panel-head) 88%, var(--text) 5%); }
.pb-grip { width: 12px; align-self: stretch; flex: none; opacity: 0; background-image: radial-gradient(var(--text-3) 1px, transparent 1.2px); background-size: 4px 4px; background-position: 4px center; background-repeat: repeat-y; background-clip: content-box; padding: 8px 0; transition: opacity .12s; }
.pb-head:hover .pb-grip { opacity: 1; }
.pb-toggle { appearance: none; border: 0; background: none; flex: 1; min-width: 0; height: 100%; padding: 0 2px; text-align: left; font: inherit; font-weight: 600; color: var(--text); cursor: default; }
.pb-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-tools { display: flex; align-items: center; gap: 1px; }
.pb-head .icon-btn { width: 24px; height: 22px; }
.pb-float { opacity: 0; transition: opacity .12s; }
.pb-head:hover .pb-float, .pb-float:focus-visible, .pbox.is-floating .pb-float { opacity: 1; }
.pb-chev { width: 12px; height: 12px; color: var(--text-3); transition: transform .12s; margin-left: 2px; }
.pbox.is-collapsed .pb-chev { transform: rotate(-90deg); }
.pbox.is-collapsed .pb-head { border-bottom-color: transparent; }
.pbox.is-collapsed .pb-body { display: none; }
/* folded panels keep a small tab with a down arrow, so they read as folded rather than gone */
.pbox.is-collapsed::after { content: ""; display: block; height: 11px; cursor: default; background-color: var(--text-3); opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M4 2l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 8px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M4 2l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 8px no-repeat; }
.pbox.is-collapsed:hover::after { opacity: 1; background-color: var(--text); }
.pb-body { min-height: 0; }
.pb-body.pad { padding: 10px 12px 14px; display: grid; gap: 9px; align-content: start; }
.pbox.is-layers:not(.is-collapsed) { flex: 1 0 170px; }
.pbox.is-layers .pb-body { flex: 1; display: flex; flex-direction: column; }
.pbox.is-layers:not(.is-collapsed), .pbox[data-panel="accessories"]:not(.is-collapsed) { overflow: clip; overflow-clip-margin: 6px; }
.pbox.is-layers .pb-body > :not(.layer-list) { flex: none; }
.pbox[data-panel="accessories"]:not(.is-collapsed) { flex: 1 0 150px; }
.pbox[data-panel="accessories"]:not(.is-collapsed) .pb-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pb-kind { width: 15px; height: 15px; margin-left: 1px; color: var(--text-3); }
.pbox.is-layers.is-active .pb-kind { color: var(--accent); }
.pbox.is-moving { opacity: .45; }
.panel-head h2 { margin: 0; font-size: 12px; font-weight: 600; }

/* floating panels */
.float-layer { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.pbox.is-floating { position: absolute; pointer-events: auto; border: 0; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); resize: both; min-width: 200px; min-height: 29px; max-width: calc(100vw - 16px); max-height: calc(100vh - 60px); }
.pbox.is-floating.is-collapsed { resize: none; height: auto !important; }
.pbox.is-floating .pb-body { flex: 1; overflow: auto; }
.pbox.is-floating .pb-head { border-radius: 8px 8px 0 0; }

/* drag feedback */
body.is-panel-dragging, body.is-panel-dragging * { cursor: grabbing !important; }
.drop-line { position: fixed; z-index: 45; height: 2px; background: var(--accent); border-radius: 1px; pointer-events: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.drop-bar { position: fixed; z-index: 44; pointer-events: none; display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--accent) 65%, transparent); background: color-mix(in srgb, var(--panel) 72%, transparent); color: var(--text-2); font-weight: 600; transition: background-color .1s, border-color .1s; }
.drop-bar.is-hot { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--text); }
.dock-empty { margin: 12px; padding: 22px 12px; text-align: center; color: var(--text-3); border: 1.5px dashed var(--line-2); border-radius: 8px; }
.drag-chip { position: fixed; z-index: 50; pointer-events: none; padding: 4px 10px; border-radius: 6px; background: var(--field); color: var(--text); font-weight: 600; box-shadow: var(--shadow); white-space: nowrap; }
.panel-foot { display: flex; align-items: center; gap: 1px; padding: 4px 6px; border-top: 1px solid var(--line); flex: none; }
.panel-foot.is-top { border-top: 0; border-bottom: 1px solid var(--line); } /* the layer actions sit under the title */
.foot-sep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }

.layer-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1; min-height: 0; }
.layer-list:focus { outline: none; }
.layer { display: grid; grid-template-columns: 12px 24px 36px minmax(0, 1fr) 24px 24px; align-items: center; gap: 4px; height: 46px; padding: 0 4px 0 3px; border-radius: 5px; user-select: none; cursor: default; position: relative; }
.layer:hover { background: var(--hover); }
.layer[aria-selected="true"] { background: var(--sel-dim); }
.layer-list:focus-within .layer[aria-selected="true"] { background: var(--accent); color: var(--accent-text); }
.layer-list:focus-within .layer[aria-selected="true"] .l-sub,
.layer-list:focus-within .layer[aria-selected="true"] .eye { color: inherit; opacity: .85; }
.layer.is-off .thumb, .layer.is-off .l-name { opacity: .4; }
.layer.drop-above::before, .layer.drop-below::after { content: ""; position: absolute; left: 4px; right: 4px; height: 2px; background: var(--accent); border-radius: 1px; }
.layer.drop-above::before { top: -1px; }
.layer.drop-below::after { bottom: -1px; }
.layer.dragging { opacity: .4; }
.row-ghost { position: fixed; z-index: 50; pointer-events: none; margin: 0; background: var(--field); box-shadow: var(--shadow); opacity: .96; }
.row-ghost .l-edit, .row-ghost .eye { opacity: 0; }
body.is-row-dragging, body.is-row-dragging * { cursor: grabbing !important; }
.eye { appearance: none; border: 0; background: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-2); border-radius: 4px; padding: 0; cursor: default; }
.eye:hover { background: var(--hover); }
.layer.is-off .eye { color: var(--text-3); }
.l-edit { appearance: none; border: 0; background: none; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border-radius: 4px; color: var(--text-3); opacity: 0; cursor: default; }
.l-edit svg { width: 14px; height: 14px; }
.l-del:hover { color: var(--warn); }
/* grip at the left end: shows the row can be dragged */
.l-grip { display: grid; gap: 2px; justify-items: center; align-content: center; height: 100%; cursor: grab; }
.l-grip i { width: 4px; height: 4px; border-radius: 1px; background: var(--text-3); opacity: .55; }
.layer:hover .l-grip i { opacity: 1; }
.layer.dragging .l-grip { cursor: grabbing; }
.layer-list:focus-within .layer[aria-selected="true"] .l-grip i { background: currentColor; opacity: .7; }
.layer:hover .l-edit, .layer[aria-selected="true"] .l-edit { opacity: 1; }
.l-edit:hover { background: var(--hover); color: var(--text); }
.layer-list:focus-within .layer[aria-selected="true"] .l-edit { color: inherit; }
.layer.is-renaming .l-edit { opacity: 0; }
.l-name { cursor: text; }
.thumb { width: 36px; height: 34px; border-radius: 3px; display: block; background-color: var(--check-a); background-image: conic-gradient(var(--check-b) 25%, transparent 0 50%, var(--check-b) 0 75%, transparent 0); background-size: 6px 6px; box-shadow: 0 0 0 .5px var(--line-2); }
.l-text { min-width: 0; display: grid; }
.l-name, .l-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-sub { color: var(--text-3); font-size: 11px; }
.l-sub .warn { color: var(--warn); }
.l-rename { width: 100%; border: 0; border-radius: 3px; padding: 1px 3px; margin: -2px -4px; background: var(--field); color: var(--text); box-shadow: 0 0 0 2px var(--accent); }

.layers-empty { padding: 28px 18px; text-align: center; color: var(--text-2); display: grid; gap: 6px; justify-items: center; }
.layers-empty p { margin: 0; }
.empty-title { font-size: 13px; font-weight: 600; color: var(--text); }
.layers-empty .btn { margin-top: 6px; }
.sample-note { margin: 0; padding: 8px 12px; border-top: 1px solid var(--line); color: var(--text-2); }
/* a small warning in the 3D view's corner; the explanation shows on hover or focus */
.view-warn { position: absolute; left: 8px; bottom: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--panel); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 3px rgba(0, 0, 0, .12); cursor: help; outline: none; }
.view-warn[hidden] { display: none; }
.view-warn svg { width: 18px; height: 18px; }
.view-warn .vw-tri { fill: var(--warn); stroke: none; }
.view-warn .vw-mark { fill: none; stroke: #1b1b1d; stroke-width: 1.7; stroke-linecap: round; }
.view-warn:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.view-warn { cursor: default; }
.view-warn svg { cursor: help; }
.vw-tip { position: absolute; left: 0; bottom: calc(100% + 8px); width: 270px; padding: 9px 11px; border-radius: 8px; background: var(--panel); color: var(--text); box-shadow: var(--shadow);
  font-size: 12px; line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .12s .3s, transform .12s .3s, visibility 0s .42s; } /* lingers a moment, so the mouse can reach Dismiss */
.vw-tip b { font-weight: 600; }
.vw-tip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; } /* keeps it open on the way up from the icon */
.view-warn:hover .vw-tip, .view-warn:focus-within .vw-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.vw-dismiss { display: block; margin: 7px 0 0; appearance: none; border: 0; background: none; padding: 2px 0; color: var(--accent); font: inherit; font-weight: 500; cursor: default; }
.vw-dismiss:hover { text-decoration: underline; }
.pb-toggle:focus-visible { outline-offset: -2px; border-radius: 4px; }

/* property panels */
.head-action { appearance: none; border: 0; background: none; padding: 2px 6px; border-radius: 4px; color: var(--text-2); font-size: 11px; cursor: default; }
.head-action:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.head-action:disabled { opacity: .35; }
.insp-none { margin: 0; color: var(--text-3); }
.fields { display: grid; gap: 8px; }
.f-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 8px; }
.f-row.top { align-items: start; }
.f-row > label, .f-label { color: var(--text-2); }
.f-row.top .f-label { padding-top: 2px; }
.f-ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
input[type="text"], input[type="number"], select { height: 22px; border: 0; border-radius: 5px; background: var(--field); box-shadow: 0 0 0 .5px var(--line-2), inset 0 1px 1px rgba(0, 0, 0, .04); padding: 0 7px; min-width: 0; width: 100%; }
select { padding-right: 4px; }
input[type="text"]:focus, input[type="number"]:focus, select:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
/* Lightroom-style slider: label and value on top, hairline track below */
.sliders { gap: 10px; }
.lr { display: grid; gap: 1px; }
.lr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 18px; }
.lr-label { color: var(--text-2); user-select: none; }
input.lr-num { width: 58px; height: 18px; padding: 0 3px; border-radius: 3px; background: transparent; box-shadow: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); cursor: ew-resize; }
input.lr-num:hover { background: var(--hover); }
input.lr-num:focus { cursor: text; background: var(--field); box-shadow: 0 0 0 2px var(--accent); }
.lr-track { position: relative; height: 16px; margin: 0 6px; touch-action: none; cursor: default; }
.lr-track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: var(--track); }
.lr-fill { position: absolute; top: 7px; height: 2px; border-radius: 1px; background: var(--track-fill); }
.lr-thumb { position: absolute; top: 2px; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--thumb); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35); transition: transform .1s; pointer-events: none; }
.lr-track:hover .lr-thumb, .lr.is-dragging .lr-thumb { transform: scale(1.18); }
.lr-track:focus { outline: none; }
.lr-track:focus-visible .lr-thumb { box-shadow: 0 0 0 2px var(--accent); }
.lr-hue .lr-track::before, .lr-sat .lr-track::before, .lr-bri .lr-track::before { top: 6.5px; height: 3px; }
.lr-hue .lr-track::before { background: linear-gradient(90deg, hsl(180 60% 52%), hsl(270 60% 60%), hsl(0 65% 55%), hsl(90 55% 48%), hsl(180 60% 52%)); }
.lr-sat .lr-track::before { background: linear-gradient(90deg, #8a8a8a, hsl(18 85% 55%)); }
.lr-bri .lr-track::before { background: linear-gradient(90deg, #141414, #f2f2f2); }
.lr-hue .lr-fill, .lr-sat .lr-fill, .lr-bri .lr-fill { display: none; }
input[type="checkbox"] { accent-color: var(--accent); margin: 0; width: 14px; height: 14px; }
.f-meta { margin: 0; color: var(--text-3); padding-left: 82px; }

/* body map: an R6 figure whose parts are toggles or color targets */
.bodymap-wrap { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
.bodymap { width: 70px; height: 90px; flex: none; overflow: visible; }
.bm-inert { fill: var(--hover); stroke: var(--line); stroke-width: 1; }
.bm-part { stroke-width: 1.2; cursor: default; transition: fill .12s, stroke .12s; outline: none; }
.bm-part.on { fill: var(--accent); stroke: color-mix(in srgb, var(--accent) 70%, #000); }
.bm-part.off { fill: transparent; stroke: var(--line-2); stroke-dasharray: 3 2; }
.bm-part:hover { stroke: var(--text-2); stroke-dasharray: none; }
.bm-part:focus-visible { stroke: var(--accent); stroke-width: 2.2; stroke-dasharray: none; }
.bodymap.colors .bm-part { stroke: rgba(0, 0, 0, .35); }
.bodymap.colors .bm-part:hover { stroke: var(--text); stroke-width: 1.8; }
.bm-text { display: grid; gap: 3px; min-width: 0; }
.bm-text p { margin: 0; }
.bm-caption { color: var(--text); font-weight: 500; }
.bm-caption.warn { color: var(--warn); }
.bm-hint { color: var(--text-3); font-size: 11px; }

/* body color: swatch + hex field, quick presets */
.color-field { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px 0 3px; border-radius: 6px; background: var(--field); box-shadow: 0 0 0 .5px var(--line-2), inset 0 1px 1px rgba(0, 0, 0, .04); justify-self: start; cursor: default; }
.color-field:hover { box-shadow: 0 0 0 .5px var(--text-3); }
.color-field:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.cf-swatch { width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25); }
.cf-hex { font: 11.5px/1 var(--mono); color: var(--text); letter-spacing: .02em; }
.cf-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: default; }
#partColorInput { inset: auto; width: 1px; height: 1px; pointer-events: none; }
.presets { display: flex; gap: 6px; padding-left: 82px; }
.preset { appearance: none; border: 0; padding: 0; width: 16px; height: 16px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); cursor: default; transition: transform .1s; }
.preset:hover { transform: scale(1.15); }
.preset[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent); }

/* face tiles */
.face-tiles { display: flex; gap: 6px; min-width: 0; }
.face-tile { appearance: none; border: 0; background: var(--field); border-radius: 8px; padding: 4px 3px 5px; display: grid; justify-items: center; gap: 2px; width: 50px; color: var(--text-2); font-size: 11px; cursor: default; box-shadow: 0 0 0 .5px var(--line-2); }
.face-tile canvas { width: 40px; height: 40px; }
.face-tile:hover { color: var(--text); box-shadow: 0 0 0 .5px var(--text-3); }
.face-tile[aria-checked="true"] { color: var(--text); box-shadow: 0 0 0 2px var(--accent); }
.f-meta .warn { color: var(--warn); }

/* viewport */
.viewport { grid-area: view; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--view); }
.viewport[data-view="3d"] { grid-template-columns: 1fr; }
.viewport[data-view="3d"] .view-flat, .viewport[data-view="flat"] .view-3d { display: none; }
.viewport[data-view="flat"] { grid-template-columns: 1fr; }
.view { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.splitter { position: relative; z-index: 6; background: var(--line); cursor: col-resize; touch-action: none; }
.splitter::after { content: ""; position: absolute; inset: 0 -4px; }
.splitter[aria-orientation="horizontal"] { cursor: row-resize; }
.splitter[aria-orientation="horizontal"]::after { inset: -4px 0; }
.splitter:hover, .splitter.is-dragging, .splitter:focus-visible { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); outline: none; }
.viewport[data-view="3d"] .splitter, .viewport[data-view="flat"] .splitter { display: none; }
#view3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#view3d.is-dragging { cursor: grabbing; }
.view-bar { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px; border-radius: 7px; background: var(--panel); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 3px rgba(0, 0, 0, .1); max-width: calc(100% - 52px); }
.view-bar .seg { background: none; padding: 0; }
/* navigation: axis gizmo + drag tools, top right of the 3D view (Blender-style) */
.nav { position: absolute; top: 6px; right: 6px; display: grid; justify-items: center; gap: 6px; }
#gizmo { width: 80px; height: 80px; display: block; cursor: default; touch-action: none; }
.nav-tools { display: grid; gap: 5px; }
.nav-btn { appearance: none; border: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: default; color: var(--text-2); background: color-mix(in srgb, var(--panel) 82%, transparent); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 3px rgba(0, 0, 0, .12); touch-action: none; }
.nav-btn:hover, .nav-btn.is-dragging { color: var(--text); background: var(--field); }
#navZoom, #navPan { cursor: grab; }
#navZoom.is-dragging, #navPan.is-dragging { cursor: grabbing; }
.nav-btn[aria-pressed="true"] { color: var(--accent-text); background: var(--accent); }
#view3d[data-mode="pan"] { cursor: move; }
#view3d[data-mode="zoom"] { cursor: ns-resize; }
.view-msg { position: absolute; inset: 45% 20px auto; text-align: center; color: var(--text-2); margin: 0; }
.flat-box { position: absolute; inset: 44px 12px 12px; display: grid; place-items: center; container-type: size; }
#mat { display: block; width: min(100cqw, calc(100cqh * 625 / 599)); height: auto; cursor: crosshair; }

/* status bar */
.statusbar { grid-area: sb; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 12px; background: var(--win); border-top: 1px solid var(--line); color: var(--text-2); font-size: 11px; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.statusbar span { overflow: hidden; text-overflow: ellipsis; }

/* dialog, toast */
.sheet { border: 0; border-radius: 10px; padding: 18px 20px 16px; background: var(--field); color: var(--text); box-shadow: var(--shadow); width: min(420px, calc(100vw - 32px)); }
.sheet::backdrop { background: rgba(0, 0, 0, .25); }
.sheet h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.keys { width: 100%; border-collapse: collapse; }
.keys td { padding: 4px 0; border-bottom: 1px solid var(--line); }
.keys td:first-child { width: 46%; white-space: nowrap; }
kbd { display: inline-block; min-width: 18px; padding: 0 4px; margin-right: 2px; border-radius: 4px; background: var(--panel); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 0 var(--line-2); font: 11px/17px var(--font); text-align: center; }
.keys-note { color: var(--text-2); margin: 10px 0 12px; }
.sheet form { display: flex; justify-content: flex-end; gap: 8px; margin: 0; }
.sheet-actions #resetLayout { margin-right: auto; }
.toast { position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 50; background: var(--text); color: var(--field); padding: 7px 12px; border-radius: 7px; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }

/* narrower windows: layers and properties share the left column */
/* phones: one scrolling column, panels stack under the view, no docking */
@media (max-width: 720px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 62vh auto auto 24px; grid-template-areas: "tb" "view" "right" "left" "sb"; }
  .toolbar { flex-wrap: wrap; height: auto; padding: 8px max(10px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); row-gap: 8px; }
  .viewport[data-view="split"] { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 1px minmax(0, 1fr); }
  .dock { border: 0 !important; border-top: 1px solid var(--line) !important; overflow: visible; }
  .dock-scroll { height: auto; overflow: visible; }
  .dock-resizer, .pb-float, .pb-grip, #toggleLeft, #toggleRight { display: none !important; }
  .pbox.is-layers:not(.is-collapsed) { flex: none; }
  .layer-list { max-height: 320px; }
  .menu { right: auto; left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

#toggleLeft[aria-pressed="false"], #toggleRight[aria-pressed="false"], #toggleBottom[aria-pressed="false"] { color: var(--text-3); }
/* status bar is optional */
.app.no-status { grid-template-rows: 44px minmax(0, 1fr) 0; }
.app.no-status .statusbar { display: none; }
@media (max-width: 720px) { .app.no-status { grid-template-rows: auto 62vh auto auto 0; } }

/* floating icon bars over the 3D view */
.float-bars { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 104px); }
.float-bar { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--panel); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 3px rgba(0, 0, 0, .12); }
.fb-btn { appearance: none; border: 0; background: none; width: 30px; height: 26px; border-radius: 5px; display: grid; place-items: center; padding: 0; color: var(--text-2); cursor: default; }
.fb-btn svg { width: 17px; height: 17px; }
.fb-btn:hover { color: var(--text); background: var(--hover); }
.fb-btn[aria-pressed="true"] { color: var(--text); background: var(--field); box-shadow: 0 0 0 .5px var(--line-2), 0 1px 2px rgba(0, 0, 0, .12); }
.fb-text { font-weight: 600; font-size: 12.5px; letter-spacing: .01em; }
#lightBtn[aria-pressed="true"] svg { color: #f5c542; }

/* file drop targets: only the two layer panels, shown while files are dragged over the window */
.pbox.is-layers { position: relative; }
.file-drop { display: none; position: absolute; inset: 3px; z-index: 12; place-items: center; border-radius: 7px; border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--panel) 78%, transparent); pointer-events: none; }
.file-drop span { padding: 6px 12px; border-radius: 6px; background: var(--field); color: var(--text-2); box-shadow: 0 0 0 .5px var(--line-2); }
body.is-file-dragging .file-drop { display: grid; }
.pbox.is-drop-hot .file-drop { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.pbox.is-drop-hot .file-drop span { color: var(--text); box-shadow: 0 0 0 1.5px var(--accent); }
.pbox.is-row-target .file-drop { display: none; } /* a row is lit instead */
/* sub-layers: eye above a + for a new sub-layer; sub-layer rows indent behind a clip arrow */
.l-side { display: grid; grid-template-rows: 23px 19px; justify-items: center; align-content: center; height: 100%; }
.l-side .eye { width: 22px; height: 22px; }
.l-add { appearance: none; border: 0; background: none; width: 20px; height: 18px; display: grid; place-items: center; padding: 0; border-radius: 4px; color: var(--text-3); opacity: 0; cursor: default; }
.l-add svg { width: 12px; height: 12px; }
.layer:hover .l-add, .layer[aria-selected="true"] .l-add, .l-add:focus-visible { opacity: 1; }
.layer-list:focus-within .layer[aria-selected="true"] :is(.l-add, .l-fold, .l-clip) { color: inherit; opacity: .85; }
.layer-list:focus-within .layer[aria-selected="true"] :is(.l-add, .l-fold):hover { background: rgba(255, 255, 255, .18); opacity: 1; }
.l-add:hover { background: var(--hover); color: var(--text); }
.layer.is-sub { grid-template-columns: 12px 24px 18px 36px minmax(0, 1fr) 24px 24px; }
.layer.is-sub .l-side { grid-template-rows: 23px; }
.l-clip { color: var(--text-3); display: grid; place-items: center; }
.l-clip svg { width: 13px; height: 13px; }
.l-fold { appearance: none; border: 0; background: none; width: 14px; height: 24px; margin-left: -2px; display: grid; place-items: center; padding: 0; color: var(--text-2); border-radius: 3px; cursor: default; }
.l-fold svg { width: 11px; height: 11px; transition: transform .12s; }
.l-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
.l-fold:hover { background: var(--hover); color: var(--text); }
.layer.drop-into { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.upl-item { grid-template-columns: 36px minmax(0, 1fr) 24px 24px; padding-left: 6px; }
.upl-item .l-edit { opacity: .55; }
.upl-item:hover .l-edit { opacity: 1; }
.pbox.is-uploads { position: relative; }
.pbox.is-uploads:not(.is-collapsed) { flex: 1 0 130px; overflow: clip; overflow-clip-margin: 6px; }
.pbox.is-uploads:not(.is-collapsed) .pb-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.upl-list { flex: 1; min-height: 0; }
.item-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.item-text { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; color: var(--text-2); font-size: 11.5px; }
.item-info .head-action:first-of-type { margin-left: -6px; }
.head-action.danger { color: var(--danger); }
.head-action.danger:hover:not(:disabled) { color: var(--danger); }
#mat:focus { outline: none; }

/* custom dropdown (Blend) */
.dropdown { position: relative; min-width: 0; }
.dd-button { appearance: none; border: 0; width: 100%; height: 24px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 8px; border-radius: 6px; background: var(--field); color: var(--text); box-shadow: 0 0 0 .5px var(--line-2), inset 0 1px 1px rgba(0, 0, 0, .04); text-align: left; cursor: default; }
.dd-button:hover { box-shadow: 0 0 0 .5px var(--text-3); }
.dd-button:focus-visible, .dd-button[aria-expanded="true"] { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.dd-value { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-chev { width: 12px; height: 12px; color: var(--text-3); transition: transform .12s; }
.dd-button[aria-expanded="true"] .dd-chev { transform: rotate(180deg); }
.dd-menu { position: fixed; z-index: 70; width: max-content; margin: 0; padding: 4px; list-style: none; background: var(--field); border-radius: 9px; box-shadow: var(--shadow); outline: none; }
.dd-menu li { display: grid; grid-template-columns: minmax(0, 1fr) 14px; align-items: center; gap: 14px; padding: 5px 8px 5px 10px; border-radius: 5px; cursor: default; }
.dd-text { white-space: nowrap; }
.dd-check { width: 14px; height: 14px; opacity: 0; color: var(--accent); }
.dd-menu li[aria-selected="true"] .dd-check { opacity: 1; }
.dd-menu li.is-active { background: var(--accent); color: var(--accent-text); }
.dd-menu li.is-active .dd-check { color: inherit; opacity: .85; }
.dd-menu li.is-active[aria-selected="false"] .dd-check { opacity: 0; }

/* downloads panel */
.pbox.is-downloads:not(.is-collapsed) { flex: 1 0 200px; }
.pbox.is-downloads .pb-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dl-form { display: flex; gap: 6px; padding: 8px 8px 4px; }
.dl-form input { flex: 1; height: 26px; }
.dl-form .btn { padding: 3px 12px; }
.dl-status { margin: 0; padding: 2px 12px 6px; color: var(--text-2); font-size: 11.5px; }
.dl-status.warn { color: var(--warn); }
.av-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.av-form { display: flex; gap: 6px; }
.av-form input { flex: 1; min-width: 0; height: 26px; }
.av-form .btn { padding: 3px 12px; }
.av-status { margin: 0; color: var(--text-2); font-size: 11.5px; line-height: 1.35; }
.av-status.warn { color: var(--warn); }
.av-clear { align-self: flex-start; padding-left: 0; color: var(--danger); }
.av-clear:hover:not(:disabled) { color: var(--danger); }
.acc-list { flex: 1; min-height: 0; }
.acc-row { grid-template-columns: 24px 36px minmax(0, 1fr); }
.acc-row img { width: 36px; height: 36px; border-radius: 4px; background: var(--field); object-fit: contain; }
.acc-row.is-skipped .l-name, .acc-row.is-skipped img { opacity: .4; }
.acc-empty { margin: 0; padding: 10px 12px 12px; color: var(--text-3); font-size: 11.5px; }
.dl-item { grid-template-columns: 10px 36px minmax(0, 1fr); }
.dl-item.no-template .thumb { opacity: .55; }
.dl-actions { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; gap: 1px; padding-left: 22px; opacity: 0; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--panel) 20px); transition: opacity .1s; }
.dl-item:hover .dl-actions, .dl-item:focus-within .dl-actions { opacity: 1; pointer-events: auto; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--panel) 92%, var(--text) 5%) 20px); }
.dl-actions .l-edit { opacity: 1; }
.dl-actions .l-edit:disabled { opacity: .3; }
.dl-count { color: var(--text-3); font-size: 11px; padding-left: 6px; }
.row-ghost.dl-item .dl-actions { display: none; }