/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║  THE HOT PIC — LAYOUT AND COMPONENTS                                      ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

#bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.app {
  position: fixed; inset: 0; z-index: 1;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas: "brand header" "rail stage";
  transition: grid-template-columns .32s var(--ease-out);
}
.app[data-rail="collapsed"] { grid-template-columns: var(--rail-w-collapsed) 1fr; }

/* ═══ HEADER ═══════════════════════════════════════════════════════════════ */
.brandbox {
  grid-area: brand; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  background: var(--panel); backdrop-filter: blur(18px) saturate(1.3); min-width: 0;
}
.brandmark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: url("../assets/icon-192.png") center/cover, var(--hp-plum);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--hp-gold) 60%, transparent),
              0 0 16px -4px var(--hp-pink);
}
.brandtext { min-width: 0; line-height: 1.05; }
.brandtext b {
  display: block; font-size: 15px; font-weight: 900; letter-spacing: -.02em;
  background: linear-gradient(96deg, var(--hp-pink), var(--hp-gold) 62%, var(--hp-gold-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brandtext small { display: block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.app[data-rail="collapsed"] .brandtext { display: none; }

.header {
  grid-area: header; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-bottom: 1px solid var(--hair);
  background: var(--panel); backdrop-filter: blur(18px) saturate(1.3);
  min-width: 0; overflow: hidden;
}
.header .spacer { flex: 1 1 auto; min-width: 8px; }
.projname {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(0,0,0,.22); border: 1px solid var(--hair);
  font-weight: 700; font-size: 13px; max-width: 260px;
}
.projname input {
  background: none; border: 0; color: var(--ink); font: inherit; min-width: 40px; width: 100%;
  padding: 0;
}
.projname .dirty { width: 7px; height: 7px; border-radius: 99px; background: var(--hp-gold); flex: none; opacity: 0; transition: opacity .2s; }
.projname[data-dirty="true"] .dirty { opacity: 1; }

/* ═══ RAIL ═════════════════════════════════════════════════════════════════ */
.rail {
  grid-area: rail; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 8px; overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid var(--hair);
  background: var(--panel); backdrop-filter: blur(18px) saturate(1.3);
}
.rail-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: var(--r-md);
  color: var(--ink-2); background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 13.5px; text-align: left;
  position: relative; white-space: nowrap; min-height: 44px;
  transition: color .18s, background .18s;
}
.rail-item .ico { flex: none; width: 20px; display: grid; place-items: center; font-size: 16px; }
.rail-item:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.rail-item[aria-current="page"] {
  color: var(--ink);
  background: linear-gradient(96deg,
    color-mix(in srgb, var(--hp-pink) 26%, transparent),
    color-mix(in srgb, var(--hp-violet) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hp-pink) 40%, transparent);
}
.rail-item[aria-current="page"]::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 24px; border-radius: 0 99px 99px 0;
  background: linear-gradient(var(--hp-gold), var(--hp-pink));
  box-shadow: 0 0 12px var(--hp-pink), 0 0 26px color-mix(in srgb, var(--hp-pink) 50%, transparent);
}
.rail-item .badge { margin-left: auto; }
.app[data-rail="collapsed"] .rail-item { justify-content: center; padding: 10px 0; }
.app[data-rail="collapsed"] .rail-item .lbl,
.app[data-rail="collapsed"] .rail-item .badge { display: none; }
.app[data-rail="collapsed"] .railfoot { display: none; }

.railfoot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair); display: grid; gap: 7px; }
.railstat { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); padding: 0 4px; }
.railstat b { color: var(--ink-2); font-weight: 700; margin-left: auto; font-size: 11px; }
.meter { height: 5px; border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--hp-mint), var(--hp-gold) 70%, var(--hp-coral));
  transition: width .5s var(--ease-out); }

/* ═══ STAGE ════════════════════════════════════════════════════════════════ */
.stage { grid-area: stage; position: relative; overflow: hidden; }
.route { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.pad { padding: clamp(16px, 2.4vw, 30px); max-width: 1400px; margin: 0 auto; }

.page-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: clamp(24px, 3.4vw, 36px); line-height: 1; }
.page-head h1 .accent {
  background: linear-gradient(96deg, var(--hp-pink), var(--hp-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; max-width: 62ch; }
.page-head .spacer { flex: 1 1 auto; }

.section { margin-bottom: 26px; }
.section > header { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.section > header h2 { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.section > header .spacer { flex: 1; }

/* ═══ PRIMITIVES ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 15px; border-radius: var(--r-pill);
  border: 1px solid var(--hair); background: rgba(255,255,255,.05);
  color: var(--ink); font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; white-space: nowrap; position: relative;
  transition: background .16s, border-color .16s, transform .12s var(--ease-snap), color .16s;
}
.btn:hover:not(:disabled) { background: rgba(255,255,255,.11); border-color: var(--hair-hot); }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(96deg, var(--hp-pink), var(--hp-coral) 55%, var(--hp-gold));
  color: var(--ink-on-hot); border-color: transparent; font-weight: 900;
  box-shadow: 0 6px 20px -8px var(--hp-pink), 0 0 0 1px rgba(255,255,255,.16) inset;
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.09) saturate(1.06); }
.btn.ghost { background: none; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover:not(:disabled) { background: rgba(255,255,255,.07); color: var(--ink); }
.btn.danger { border-color: color-mix(in srgb, var(--hp-coral) 55%, transparent); color: var(--hp-coral); }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--hp-coral) 16%, transparent); }
.btn.icon { min-width: 38px; padding: 0 9px; }
.btn.sm { min-height: 30px; padding: 0 10px; font-size: 12px; }
.btn.block { width: 100%; }

.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-pill);
  background: rgba(0,0,0,.32); border: 1px solid var(--hair); }
.seg button {
  border: 0; background: none; color: var(--ink-3); font: inherit; font-weight: 700; font-size: 12px;
  padding: 6px 13px; border-radius: var(--r-pill); cursor: pointer; min-height: 30px;
  transition: color .16s, background .16s;
}
.seg button:hover:not(:disabled) { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: linear-gradient(96deg, var(--hp-pink), var(--hp-coral));
  color: var(--ink-on-hot); box-shadow: 0 0 14px -4px var(--hp-pink);
}
.seg button:disabled { opacity: .34; cursor: not-allowed; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255,255,255,.07); border: 1px solid var(--hair); color: var(--ink-2);
}
.chip .dot { width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.chip[data-tone="ok"]    { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 42%, transparent);   background: color-mix(in srgb, var(--ok) 12%, transparent); }
.chip[data-tone="warn"]  { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.chip[data-tone="err"]   { color: var(--err);  border-color: color-mix(in srgb, var(--err) 42%, transparent);  background: color-mix(in srgb, var(--err) 12%, transparent); }
.chip[data-tone="busy"]  { color: var(--busy); border-color: color-mix(in srgb, var(--busy) 42%, transparent); background: color-mix(in srgb, var(--busy) 12%, transparent); }
.chip[data-tone="sim"]   { color: var(--sim);  border-color: color-mix(in srgb, var(--sim) 55%, transparent);  background: color-mix(in srgb, var(--sim) 16%, transparent); }
.chip[data-tone="sim"] .dot { animation: sim-blink 1s steps(2,end) infinite; }
@keyframes sim-blink { 50% { opacity: .2; } }

.badge {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 99px; font-size: 10.5px; font-weight: 900;
  background: var(--hp-pink); color: #fff; box-shadow: 0 0 10px -2px var(--hp-pink);
}
.badge[data-empty="true"] { display: none; }

.card {
  background: var(--panel); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: 16px;
}
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.stat { display: grid; gap: 2px; }
.stat .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stat .v { font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.kv { display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 4px 12px; font-size: 12.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); }

/* ── Form controls ──────────────────────────────────────────────────────── */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > label, .field-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.field .hint { font-size: 11px; color: var(--ink-3); }
.field-label .spacer { flex: 1; }
.field-label .val { font-size: 12px; color: var(--ink); font-weight: 800; }
.field[data-modified="true"] .field-label::after {
  content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--hp-gold);
  box-shadow: 0 0 8px var(--hp-gold); order: 99;
}

input[type="text"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; min-height: 36px; padding: 7px 11px;
  background: rgba(0,0,0,.3); border: 1px solid var(--hair); border-radius: var(--r-sm);
  color: var(--ink); font: inherit; font-size: 13px;
}
input:focus, select:focus, textarea:focus { border-color: var(--hp-pink); outline-offset: 1px; }
input:disabled, select:disabled, textarea:disabled { opacity: .4; cursor: not-allowed; }
select { cursor: pointer; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 99px;
  background: linear-gradient(90deg, var(--hp-pink) var(--fill, 50%), rgba(255,255,255,.12) var(--fill, 50%));
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 99px; background: rgba(255,255,255,.12); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 17px; height: 17px; margin-top: -6px;
  border-radius: 99px; background: var(--hp-cream);
  box-shadow: 0 0 0 2px var(--hp-pink), 0 0 14px -2px var(--hp-pink);
  transition: transform .12s var(--ease-snap);
}
input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px; border: 0; border-radius: 99px; background: var(--hp-cream);
  box-shadow: 0 0 0 2px var(--hp-pink), 0 0 14px -2px var(--hp-pink);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.22); }
input[type="range"]:disabled { opacity: .35; cursor: not-allowed; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 34px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 40px; height: 23px; border-radius: 99px; flex: none; position: relative;
  background: rgba(255,255,255,.12); border: 1px solid var(--hair);
  transition: background .2s, border-color .2s;
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 99px; background: var(--ink-3);
  transition: transform .22s var(--ease-snap), background .2s;
}
.switch input:checked + .track { background: color-mix(in srgb, var(--hp-pink) 34%, transparent); border-color: var(--hp-pink); }
.switch input:checked + .track::after { transform: translateX(17px); background: var(--hp-cream); box-shadow: 0 0 10px var(--hp-pink); }
.switch input:focus-visible + .track { outline: 2px solid var(--hp-gold); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .35; }
.switch .txt { font-size: 12.5px; font-weight: 600; }
.switch .txt small { display: block; color: var(--ink-3); font-weight: 400; font-size: 11px; }

/* ── Tooltip ────────────────────────────────────────────────────────────── */
.tip { position: fixed; z-index: 9500; max-width: 268px; pointer-events: none;
  padding: 8px 11px; border-radius: var(--r-sm); font-size: 12px; line-height: 1.45;
  background: #0c0713; border: 1px solid var(--hair-hot); color: var(--ink);
  box-shadow: 0 14px 40px -12px #000; opacity: 0; transform: translateY(4px);
  transition: opacity .14s, transform .14s; }
.tip.show { opacity: 1; transform: none; }
:root[data-tooltips="off"] .tip { display: none; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty { display: grid; place-items: center; gap: 10px; padding: 44px 20px; text-align: center; color: var(--ink-3); }
.empty .big { font-size: 38px; opacity: .5; }
.empty h3 { font-size: 16px; color: var(--ink-2); }
.empty p { margin: 0; font-size: 13px; max-width: 46ch; }

/* ── Skeleton ───────────────────────────────────────────────────────────── */
.skel { border-radius: var(--r-sm); background:
  linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 70%)
  0 0/240% 100%; animation: skel 1.3s linear infinite; }
@keyframes skel { to { background-position: -240% 0; } }

/* ── Progress ───────────────────────────────────────────────────────────── */
.bar { height: 6px; border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; position: relative; }
.bar > i { display: block; height: 100%; border-radius: 99px; width: 0;
  background: linear-gradient(90deg, var(--hp-pink), var(--hp-gold));
  box-shadow: 0 0 12px -2px var(--hp-pink); transition: width .3s var(--ease-out); }
.bar[data-indeterminate="true"] > i {
  width: 34% !important; animation: bar-indet 1.15s var(--ease-gta) infinite;
}
@keyframes bar-indet { from { transform: translateX(-110%); } to { transform: translateX(330%); } }

/* ═══ DROPZONE ═════════════════════════════════════════════════════════════ */
.dropzone {
  position: relative; display: grid; place-items: center; gap: 14px;
  min-height: 264px; padding: 34px 22px; text-align: center;
  border-radius: var(--r-xl); cursor: pointer;
  background: radial-gradient(120% 90% at 50% 0%, rgba(242,73,110,.11), transparent 62%), var(--panel);
  border: 2px dashed color-mix(in srgb, var(--hp-lav) 34%, transparent);
  transition: border-color .2s, background .2s, transform .2s var(--ease-out);
}
.dropzone:hover, .dropzone.over { border-color: var(--hp-pink); transform: translateY(-2px); }
.dropzone.over { background: radial-gradient(120% 90% at 50% 0%, rgba(242,73,110,.22), transparent 62%), var(--panel); }
.dropzone .dz-ico { font-size: 46px; filter: drop-shadow(0 0 18px var(--hp-pink)); }
.dropzone h2 { font-size: 21px; }
.dropzone p { margin: 0; color: var(--ink-3); font-size: 13px; max-width: 52ch; }

/* ═══ EDITOR ═══════════════════════════════════════════════════════════════ */
.editor {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: 1fr var(--inspector-w);
  grid-template-rows: 1fr var(--strip-h);
  grid-template-areas: "canvas inspector" "strip inspector";
}
.editor[data-strip="collapsed"] { grid-template-rows: 1fr 40px; }
.editor[data-inspector="right"] { grid-template-columns: 1fr var(--inspector-w); grid-template-areas: "canvas inspector" "strip inspector"; }
.editor[data-inspector="left"]  { grid-template-columns: var(--inspector-w) 1fr; grid-template-areas: "inspector canvas" "inspector strip"; }

.canvas-wrap { grid-area: canvas; position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.canvas-tools {
  display: flex; align-items: center; gap: 4px; padding: 7px 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--hair); background: var(--panel); backdrop-filter: blur(14px);
}
.canvas-tools .sep { width: 1px; height: 20px; background: var(--hair); margin: 0 3px; }
.canvas-tools .spacer { flex: 1; }
.viewport {
  position: relative; overflow: hidden; min-height: 0;
  background:
    conic-gradient(from 90deg at 50% 50%, rgba(255,255,255,.035) 0 25%, transparent 0 50%) 0 0/22px 22px,
    var(--bg-deep);
  display: grid; place-items: center; cursor: grab; touch-action: none;
}
.viewport[data-checker="off"] { background: var(--bg-deep); }
.viewport.panning { cursor: grabbing; }
.viewport .plate { position: relative; transform-origin: center; will-change: transform; }
.viewport .plate img { display: block; max-width: none; image-rendering: auto; }
.viewport[data-pixelgrid="on"] .plate img { image-rendering: pixelated; }
.info-bar {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  padding: 7px 12px; border-top: 1px solid var(--hair);
  background: var(--panel); backdrop-filter: blur(14px); font-size: 11.5px; color: var(--ink-3);
}
.info-bar b { color: var(--ink-2); font-weight: 700; }
.info-bar .spacer { flex: 1; }

/* Comparison slider */
.compare { position: absolute; inset: 0; pointer-events: none; }
.compare .handle {
  position: absolute; top: 0; bottom: 0; width: 3px; left: var(--split, 50%);
  background: linear-gradient(var(--hp-gold), var(--hp-pink));
  box-shadow: 0 0 16px var(--hp-pink); pointer-events: auto; cursor: ew-resize;
}
.compare .handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 34px; height: 34px; border-radius: 99px; background: var(--hp-cream);
  box-shadow: 0 0 0 2px var(--hp-pink), 0 0 22px -2px var(--hp-pink);
}
.compare-range { position: absolute; left: 12px; right: 12px; bottom: 10px; pointer-events: auto; }

.asset-strip { grid-area: strip; display: grid; grid-template-rows: auto 1fr; border-top: 1px solid var(--hair);
  background: var(--panel); backdrop-filter: blur(14px); min-height: 0; }
.strip-tools { display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.strip-tools .spacer { flex: 1; }
.strip-scroll { display: flex; gap: 9px; padding: 9px; overflow-x: auto; overflow-y: hidden; align-items: stretch; }
.editor[data-strip="collapsed"] .strip-scroll { display: none; }
.asset {
  --tube-w: 3px; --tube-r: 11px;
  flex: none; width: 152px; display: grid; grid-template-rows: 1fr auto;
  border-radius: var(--tube-r); cursor: pointer; background: rgba(0,0,0,.32);
  padding: 3px; text-align: left; border: 0; color: inherit; font: inherit;
}
.asset .th { border-radius: 8px; overflow: hidden; background: #0a0610; display: grid; place-items: center; min-height: 58px; }
.asset .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset .meta { padding: 4px 5px 3px; min-width: 0; }
.asset .meta b { display: block; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset .meta small { display: block; font-size: 9.5px; color: var(--ink-3); }
.asset[aria-selected="true"] { --tube-w: 4px; }
.asset[aria-selected="true"] .meta b { color: var(--hp-gold); }

.inspector { grid-area: inspector; display: grid; grid-template-rows: auto 1fr auto; min-height: 0;
  border-left: 1px solid var(--hair); background: var(--panel); backdrop-filter: blur(18px) saturate(1.3); }
.editor[data-inspector="left"] .inspector { border-left: 0; border-right: 1px solid var(--hair); }
.tabs { display: flex; gap: 2px; padding: 7px 7px 0; overflow-x: auto; border-bottom: 1px solid var(--hair); }
.tabs button {
  border: 0; background: none; color: var(--ink-3); font: inherit; font-weight: 700; font-size: 12px;
  padding: 8px 11px; border-radius: var(--r-sm) var(--r-sm) 0 0; cursor: pointer; white-space: nowrap;
  position: relative; min-height: 38px;
}
.tabs button:hover { color: var(--ink-2); }
.tabs button[aria-selected="true"] { color: var(--ink); background: rgba(255,255,255,.06); }
.tabs button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 99px;
  background: linear-gradient(90deg, var(--hp-pink), var(--hp-gold));
  box-shadow: 0 0 12px var(--hp-pink);
}
.tabs button .mod { position: absolute; top: 6px; right: 4px; width: 5px; height: 5px; border-radius: 99px;
  background: var(--hp-gold); box-shadow: 0 0 7px var(--hp-gold); opacity: 0; }
.tabs button[data-modified="true"] .mod { opacity: 1; }
.tabpanels { overflow-y: auto; padding: 14px; min-height: 0; }
.tabpanel { display: none; } .tabpanel.active { display: block; }
.action-bar { display: flex; gap: 7px; padding: 10px; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.action-bar .btn.primary { flex: 1 1 130px; }

.subsec { border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px; margin-bottom: 12px; }
.subsec > header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.subsec > header h3 { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.subsec > header .spacer { flex: 1; }
.subsec[data-disabled="true"] { opacity: .55; }
.subsec .locknote {
  font-size: 11.5px; color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--r-sm);
  padding: 8px 10px; margin-bottom: 10px;
}

/* ═══ TABLE ════════════════════════════════════════════════════════════════ */
.tablewrap { overflow: auto; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--panel); }
table.q { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
table.q th, table.q td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--hair); }
table.q th { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  position: sticky; top: 0; background: var(--panel-solid); z-index: 2; font-weight: 800; }
table.q tbody tr { transition: background .14s; }
table.q tbody tr:hover { background: rgba(255,255,255,.045); }
table.q tbody tr[aria-selected="true"] { background: color-mix(in srgb, var(--hp-pink) 12%, transparent); }
table.q td .th { width: 44px; height: 30px; border-radius: 5px; object-fit: cover; background: #0a0610; display: block; }
.drag-handle { cursor: grab; color: var(--ink-3); user-select: none; }
tr.dragging { opacity: .4; }
tr.drop-target td { box-shadow: inset 0 2px 0 var(--hp-gold); }

/* ═══ DIALOG / DRAWER ══════════════════════════════════════════════════════ */
.scrim { position: fixed; inset: 0; z-index: 200; background: rgba(8,4,14,.68);
  backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .22s; }
.scrim.show { opacity: 1; pointer-events: auto; }

dialog.dlg {
  --tube-w: 5px; --tube-r: var(--r-xl);
  position: fixed; z-index: 210; margin: auto; padding: 0; border: 0;
  max-width: min(620px, calc(100vw - 28px)); width: 100%; max-height: calc(100vh - 60px);
  background: transparent; color: var(--ink); overflow: visible;
}
dialog.dlg::backdrop { background: rgba(8,4,14,.7); backdrop-filter: blur(5px); }
dialog.dlg .dlg-body {
  position: relative; border-radius: var(--tube-r); overflow: hidden;
  background: linear-gradient(180deg, var(--bg-raise), var(--panel-solid));
  display: grid; grid-template-rows: auto 1fr auto; max-height: calc(100vh - 60px);
}
dialog.dlg[open] { animation: dlg-in .3s var(--ease-out) both; }
@keyframes dlg-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); filter: brightness(1.8) blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.dlg-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.dlg-head h2 { font-size: 18px; }
.dlg-head .spacer { flex: 1; }
.dlg-content { padding: 4px 18px 14px; overflow-y: auto; font-size: 13px; }
.dlg-foot { display: flex; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.dlg-foot .spacer { flex: 1; }

.drawer {
  position: fixed; top: 0; bottom: 0; right: 0; width: min(430px, 100vw); z-index: 205;
  background: linear-gradient(180deg, var(--bg-raise), var(--panel-solid));
  border-left: 1px solid var(--hair-hot); display: grid; grid-template-rows: auto 1fr;
  transform: translateX(102%); transition: transform .3s var(--ease-gta);
  box-shadow: -20px 0 60px -20px #000;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.drawer-head h2 { font-size: 15px; } .drawer-head .spacer { flex: 1; }
.drawer-body { overflow-y: auto; padding: 14px 16px; }

/* ═══ TOASTS ═══════════════════════════════════════════════════════════════ */
.toasts { position: fixed; z-index: 300; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: grid; gap: 8px; width: min(430px, calc(100vw - 24px)); pointer-events: none; }
.toast {
  --tube-w: 3px; --tube-r: var(--r-md);
  position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-radius: var(--tube-r); background: #140c1e; pointer-events: auto; font-size: 13px;
  animation: toast-in .34s var(--ease-snap) both;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
.toast.out { animation: toast-out .22s var(--ease-out) both; }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }
.toast .msg { flex: 1; min-width: 0; }
.toast .msg b { display: block; font-weight: 800; }
.toast .msg small { color: var(--ink-3); }

/* ═══ BOOT / SPLASH ════════════════════════════════════════════════════════ */
.boot {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center;
  background: #0b0612; overflow: hidden;
}
.boot.done { animation: boot-out .7s var(--ease-gta) forwards; }
@keyframes boot-out {
  0%    { opacity: 1; visibility: visible; }
  99.9% { opacity: 0; visibility: visible; transform: scale(1.05); filter: brightness(1.6) blur(6px); }
  100%  { opacity: 0; visibility: hidden; pointer-events: none; }
}
.boot-art {
  position: absolute; inset: 0;
  background: url("../assets/splash-lqip.webp") center/cover;
  filter: saturate(1.05);
}
.boot-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s var(--ease-out);
}
.boot-art img.ready { opacity: 1; }
.boot-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 18%, transparent 30%, rgba(11,6,18,.55) 72%, #0b0612 100%),
    linear-gradient(180deg, transparent 42%, rgba(11,6,18,.86) 78%, #0b0612 100%);
}
/* Scanning pass over the art — the app's own subject matter as its loader. */
.boot-scan {
  position: absolute; left: 0; right: 0; height: 34%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hp-gold) 16%, transparent) 55%,
              color-mix(in srgb, var(--hp-pink) 26%, transparent) 88%, #fff 99%, transparent);
  mix-blend-mode: screen; animation: boot-scan 2.4s var(--ease-gta) infinite;
}
@keyframes boot-scan { from { top: -34%; } to { top: 100%; } }
.boot-panel {
  position: relative; z-index: 3; align-self: end; justify-self: center;
  width: min(520px, calc(100vw - 34px)); margin-bottom: clamp(20px, 6vh, 62px);
  display: grid; gap: 12px; text-align: center;
}
.boot-title { font-size: clamp(30px, 7vw, 50px); font-weight: 900; line-height: .96; letter-spacing: -.02em;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.7)); }
.boot-title .a { background: linear-gradient(96deg, var(--hp-pink), var(--hp-coral));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.boot-title .b { background: linear-gradient(96deg, var(--hp-gold), var(--hp-gold-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.boot-sub { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.boot-stage { font-size: 12px; color: var(--ink-3); min-height: 1.5em; }
.boot-stage b { color: var(--hp-gold); font-weight: 800; }
.boot-steps { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.boot-steps i { width: 22px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.16); transition: background .3s, box-shadow .3s; }
.boot-steps i.on { background: linear-gradient(90deg, var(--hp-pink), var(--hp-gold)); box-shadow: 0 0 10px var(--hp-pink); }
.boot-err { color: var(--err); font-size: 12.5px; }

/* ═══ MOBILE ═══════════════════════════════════════════════════════════════ */
.mobilenav { display: none; }
.sheet-handle { display: none; }

@media (max-width: 980px) {
  .editor { grid-template-columns: 1fr; grid-template-areas: "canvas" "strip"; grid-template-rows: 1fr var(--strip-h); }
  .inspector {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
    height: min(72vh, 560px); border-left: 0; border-top: 1px solid var(--hair-hot);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(calc(100% - 52px)); transition: transform .32s var(--ease-gta);
    grid-template-rows: auto auto 1fr auto;
    box-shadow: 0 -20px 60px -24px #000;
  }
  .inspector.open { transform: none; }
  .sheet-handle {
    display: grid; place-items: center; padding: 8px; cursor: grab; touch-action: none;
    border: 0; background: none; width: 100%; min-height: 44px;
  }
  .sheet-handle span { width: 42px; height: 4px; border-radius: 99px; background: var(--ink-3); }
}

@media (max-width: 760px) {
  .app {
    grid-template-columns: 1fr; grid-template-rows: var(--header-h) 1fr auto;
    grid-template-areas: "header" "stage" "mobilenav";
  }
  .brandbox, .rail { display: none; }
  .header { padding-left: 10px; }
  .mobilenav {
    grid-area: mobilenav; display: flex; align-items: stretch; z-index: 50;
    border-top: 1px solid var(--hair); background: var(--panel-solid);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobilenav button {
    flex: 1; display: grid; place-items: center; gap: 2px; padding: 7px 2px 6px; min-height: 56px;
    border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer;
    position: relative;
  }
  .mobilenav button .ico { font-size: 18px; }
  .mobilenav button[aria-current="page"] { color: var(--hp-gold); }
  .mobilenav button[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, var(--hp-pink), var(--hp-gold)); box-shadow: 0 0 12px var(--hp-pink);
  }
  .mobilenav button .badge { position: absolute; top: 5px; right: 26%; }
  .pad { padding: 14px; }
  .g2, .g3, .g4 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .drawer { width: 100vw; }
  .action-bar { position: sticky; bottom: 0; }
  /* §31 — 44px minimum touch targets. .btn.sm is (0,2,0) and was outranking a
     bare .btn rule, so every compact button stayed at 30px on phones. These
     selectors match or beat it. */
  .btn, .btn.sm, .btn.icon, .seg button, .rail-item, .tabs button,
  .mobilenav button, table.q td .btn.sm { min-height: 44px; }
  .btn.icon, .btn.sm.icon { min-width: 44px; }
  .switch { min-height: 44px; }
  .switch .track { width: 46px; height: 26px; }
  .switch .track::after { width: 20px; height: 20px; }
  .switch input:checked + .track::after { transform: translateX(20px); }
  input[type="range"] { height: 44px; }
  input[type="text"], input[type="number"], input[type="search"], select, textarea { min-height: 44px; }
  .canvas-tools { overflow-x: auto; flex-wrap: nowrap; }
  .canvas-tools .btn.sm { flex: none; }
}

@media (max-width: 420px) {
  :root { --strip-h: 112px; }
  .header .hide-xs { display: none; }
}

/* ═══ PRINT / MISC ═════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.muted { color: var(--ink-3); }
.tiny { font-size: 11px; }
.mt { margin-top: 12px; } .mb { margin-bottom: 12px; }
.warnbanner {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  color: var(--warn); font-size: 12.5px; font-weight: 600; margin-bottom: 14px;
}
.warnbanner.err { background: color-mix(in srgb, var(--err) 12%, transparent);
  border-color: color-mix(in srgb, var(--err) 34%, transparent); color: var(--err); }
.warnbanner .spacer { flex: 1; }

/* ── Editor neon treatment ──────────────────────────────────────────────────
   The loaded image sits inside its own glass tube. The viewport clips, so the
   bloom stops at the frame edge, which reads as the image being lit from
   inside a housing rather than floating. */
.viewport .plate { --tube-w: 5px; --tube-r: 6px; }
.viewport .plate > .tube { z-index: 6; }
.dropzone > .tube { --tube-w: 4px; --tube-r: var(--r-xl); }
.dropzone > .haze { --tube-r: var(--r-xl); }
.inspector { position: relative; }
.action-bar { position: relative; z-index: 5; }

/* Long-labelled buttons must wrap inside a narrow card rather than run past
   its edge. .btn sets white-space:nowrap for toolbars; cards need the opposite. */
.card > .btn, .card > .row > .btn { max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 760px) {
  .card .btn { white-space: normal; height: auto; padding-top: 8px; padding-bottom: 8px; }
}

/* Settings cards run long; a thinner tube keeps them from shouting. */
#route-settings .card.neon { --tube-w: 3px; --tube-r: var(--r-lg); }
#route-settings .card.neon > .haze { opacity: .5; }

/* Interactive crop rectangle. It lives in viewport coordinates so pan/zoom
   transforms cannot turn a rectangle into modern art. */
.crop-selection {
  position: absolute; z-index: 30; pointer-events: none;
  border: 2px solid var(--hp-gold); border-radius: 4px;
  background: color-mix(in srgb, var(--hp-gold) 13%, transparent);
  box-shadow: 0 0 0 9999px rgb(0 0 0 / .42), 0 0 18px color-mix(in srgb, var(--hp-gold) 55%, transparent);
}


/* Settings-driven accessibility affordances. */
[data-key-hints="off"] kbd { display: none !important; }
label[data-disabled], .field[data-disabled] { opacity: .58; }