/* =========================================================
   AutoSwap v2 — dark desktop-app theme
   ========================================================= */
:root {
  --bg-canvas: #262626;
  --bg-bar: #3b3b3b;
  --bg-bar-2: #353535;
  --bg-panel: #474747;
  --bg-panel-head: #3d3d3d;
  --bg-input: #2a2a2a;
  --bg-card: #333333;
  --bg-card-2: #2d2d2d;
  --bg-hover: rgba(255, 255, 255, .07);
  --bg-active: rgba(59, 142, 234, .18);
  --line: #1f1f1f;
  --line-soft: #4f4f4f;
  --text: #e9e9e9;
  --text-2: #bdbdbd;
  --text-3: #8f8f8f;
  --accent: #3b8eea;
  --accent-hi: #5aa2f0;
  --accent-lo: #2c74c7;
  --accent-soft: rgba(59, 142, 234, .16);
  --orange: #ef8a2b;
  --orange-hi: #f59f4c;
  --ok: #4cc38a;
  --warn: #f0b545;
  --danger: #ef5b5b;
  --radius: 6px;
  --radius-lg: 10px;
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text);
  font: 13px/1.4 var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
kbd { font-family: var(--font); font-size: 12px; opacity: .85; margin-left: 22px; }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }

#app { display: grid; grid-template-rows: 40px 46px 1fr 28px; height: 100vh; }

/* ---------------- title bar ---------------- */
.titlebar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  background: var(--bg-bar); border-bottom: 1px solid var(--line); padding: 0 8px 0 10px;
}
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* placeholder for the logo: a plain blue circle (put an <img> inside later) */
.app-mark {
  width: 16px; height: 16px; border-radius: 3px; display: grid; place-items: center; overflow: hidden; flex: none;
}
.app-mark img { width: 100%; height: 100%; object-fit: contain; }
.tb-title { justify-self: center; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--text); letter-spacing: .2px; padding: 4px 10px; border-radius: 5px; }
.tb-title:hover { background: var(--bg-hover); }
.btn-shop {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; border-radius: 999px;
  background: var(--orange); color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .6px;
}
.btn-shop svg { width: 15px; height: 15px; }
.btn-shop:hover { background: var(--orange-hi); }
.tb-right { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.tb-chip {
  display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px;
  border-radius: 6px; background: var(--bg-input); border: 1px solid var(--line-soft); color: var(--text-2);
  max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-chip:hover { color: var(--text); border-color: #666; }
.tb-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.tb-chip.not-ready .dot { background: var(--warn); }
.tb-icon { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 6px; color: var(--text-2); }
.tb-icon:hover { background: var(--bg-hover); color: var(--text); }
.tb-icon span { font-size: 12px; font-weight: 600; }

.menubar { display: flex; }
.menu { position: relative; }
.menu-btn { height: 30px; padding: 0 10px; border-radius: 5px; color: var(--text); font-size: 13.5px; }
.menu-btn:hover, .menu.open .menu-btn { background: var(--bg-hover); }
.menu-pop {
  display: none; position: absolute; top: 34px; left: 0; z-index: 50; min-width: 250px;
  background: #3f3f3f; border: 1px solid #262626; border-radius: 8px; padding: 5px; box-shadow: var(--shadow);
}
.menu.open .menu-pop { display: block; }
.menu-pop button {
  display: flex; width: 100%; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-radius: 5px; text-align: left;
}
.menu-pop button:hover { background: var(--accent); color: #fff; }
.menu-pop hr { border: 0; border-top: 1px solid #555; margin: 5px 4px; }

/* link menus: setup videos, old versions, contact */
.menu-pop a {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px;
  padding: 7px 10px; border-radius: 5px; color: var(--text); text-decoration: none;
}
.menu-pop a:hover { background: var(--accent); color: #fff; }
.menu-pop a > span, .menu-pop button > span { display: inline-flex; align-items: center; gap: 9px; }
.menu-links .menu-pop svg { width: 16px; height: 16px; }
.menu-links .menu-pop svg.ext { width: 13px; height: 13px; opacity: .6; }
.menu-group { padding: 7px 10px 4px; color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
.contact-pop { min-width: 290px; }
.contact-head { display: flex; align-items: center; gap: 9px; padding: 9px 10px 8px; margin-bottom: 3px; border-bottom: 1px solid #555; font-size: 14px; }
.contact-head svg { color: var(--accent-hi); }
@media (max-width: 1200px) { .tb-title { display: none; } }

/* advanced settings menu */
.menu-adv .menu-btn { display: flex; align-items: center; gap: 6px; }
.adv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-hi); }
.adv-pop { width: 400px; padding: 8px; }
.adv-head { padding: 6px 8px 8px; color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; }
.adv-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 6px; cursor: pointer; }
.adv-row:hover { background: var(--bg-hover); }
.adv-ic { width: 30px; height: 30px; border-radius: 6px; background: #333; display: grid; place-items: center; color: var(--text-2); flex: none; }
.adv-ic svg { width: 16px; height: 16px; }
.adv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adv-text b { font-weight: 500; font-size: 13.5px; }
.adv-text small { color: var(--text-3); font-size: 12px; line-height: 1.4; }
.adv-num {
  height: 30px; width: 72px; padding: 0 8px; border-radius: 5px; text-align: center; flex: none;
  background: var(--bg-input); border: 1px solid var(--line-soft); font-family: var(--mono); font-size: 13px; outline: none; user-select: text;
}
.adv-num:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.adv-row .ob-check { width: 72px; justify-content: center; flex: none; }
.menu-pop .adv-reset { justify-content: center; color: var(--text-2); }
.adv-empty { padding: 14px 12px 10px; color: var(--text-3); font-size: 12.5px; text-align: center; }
.adv-row-col { flex-direction: column; align-items: stretch; gap: 8px; cursor: default; }
.adv-name { display: flex; align-items: center; gap: 8px; }
.adv-name input {
  flex: 1; min-width: 0; height: 30px; padding: 0 10px; border-radius: 5px; outline: none; user-select: text;
  background: var(--bg-input); border: 1px solid var(--line-soft); font-family: var(--mono); font-size: 13px;
}
.adv-name input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.adv-name .mono { color: var(--text-3); font-size: 12px; }

/* ---------------- options bar ---------------- */
.optionsbar {
  display: flex; align-items: center; gap: 14px; padding: 0 8px 0 12px;
  background: var(--bg-bar); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.optionsbar::-webkit-scrollbar { display: none; }
.ob-home { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: var(--text-2); }
.ob-home:hover { background: var(--bg-hover); color: var(--text); }
.ob-sep { width: 1px; height: 24px; background: #555; flex: none; }
.ob-spacer { flex: 1; }
#exportBtn { position: sticky; right: 0; box-shadow: -14px 0 12px var(--bg-bar); }
.ob-field { display: flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap; font-size: 13.5px; }
.ob-field svg { color: var(--text-3); width: 16px; height: 16px; }
.ob-field input {
  height: 28px; width: 62px; padding: 0 8px; border-radius: 5px; text-align: center;
  background: var(--bg-input); border: 1px solid var(--line-soft); font-family: var(--mono); font-size: 13px; outline: none;
}
.ob-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ob-field .unit { color: var(--text-3); font-size: 12px; }
.ob-name input { width: 170px; text-align: left; font-family: var(--mono); user-select: text; }
.ob-check { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; font-size: 13.5px; }
.ob-check input { display: none; }
.ob-check .box {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #8a8a8a; display: grid; place-items: center; flex: none;
  transition: background .12s, border-color .12s;
}
.ob-check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.ob-check input:checked + .box::after {
  content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px);
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 32px; padding: 0 16px; border-radius: 999px; font-weight: 500; white-space: nowrap;
  transition: background .12s, border-color .12s, opacity .12s;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hi); }
.btn-primary:disabled { background: #34506f; color: #9fb3c8; cursor: not-allowed; }
.btn-reload { background: var(--accent); color: #fff; height: 30px; padding: 0 14px; border-radius: 6px; }
.btn-reload:hover { background: var(--accent-hi); }
.btn-outline { border: 1.5px solid #d8d8d8; color: #fff; }
.btn-outline:hover { background: var(--bg-hover); }
.btn-ghost { color: var(--text-2); border-radius: 6px; padding: 0 10px; }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-lg { height: 40px; padding: 0 22px; font-size: 15px; min-width: 260px; }
.btn-lg kbd { margin-left: auto; padding-left: 22px; font-size: 14px; }

/* ---------------- workspace ---------------- */
.workspace { display: grid; grid-template-columns: 52px 1fr 48px 320px; min-height: 0; }
#app.panel-hidden .workspace { grid-template-columns: 52px 1fr 48px 0; }
#app.panel-hidden .panel { display: none; }

.toolbar {
  background: var(--bg-bar); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0;
}
.tool { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; color: var(--text); }
.tool svg { width: 20px; height: 20px; }
.tool:hover { background: var(--bg-hover); }
.tool.active { background: var(--bg-active); color: var(--accent-hi); box-shadow: inset 0 0 0 1px rgba(59, 142, 234, .45); }
.tool.danger:hover { color: var(--danger); }
.tool-sep { width: 26px; height: 1px; background: #555; margin: 6px 0; }
.tool-spacer { flex: 1; }

/* ---------------- canvas ---------------- */
.canvas { position: relative; overflow: auto; min-width: 0; background: var(--bg-canvas); user-select: none; }

/* start screen fills the canvas exactly (no scrolling); spacing shrinks with the window height */
@media (min-height: 560px) { .canvas.at-welcome { overflow: hidden; } }
.welcome {
  max-width: 640px; height: 100%; margin: 0 auto; padding: clamp(12px, 3vh, 32px) 24px; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.welcome-head { display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.welcome-head h1 { font-size: clamp(38px, 7vh, 54px); font-weight: 700; margin: 0; letter-spacing: -.5px; line-height: 1.1; }
.welcome-tag { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 8px; line-height: 1.15; }
.app-word { color: var(--text-2); font-size: 17px; }
.app-ver { color: var(--accent-hi); font-size: 11.5px; font-family: var(--mono); }
.supporters { margin: clamp(10px, 2.4vh, 22px) 0 0; }
.supporters img { width: 240px; max-width: 70%; height: auto; opacity: .85; pointer-events: none; }
.welcome-sub { font-size: 17px; color: var(--text); margin: clamp(10px, 2vh, 18px) auto clamp(16px, 3.4vh, 30px); max-width: 540px; }
.welcome-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.welcome-hint { margin: clamp(14px, 3.4vh, 32px) 0 0; color: var(--text-2); font-size: 15px; }
.welcome-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: clamp(16px, 4.6vh, 44px) 0 0; text-align: left; }
.step { display: flex; gap: 12px; padding: 14px; background: #2c2c2c; border: 1px solid #353535; border-radius: var(--radius-lg); }
.step-n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent-hi); font-weight: 700; font-size: 12px;
}
.step b { font-size: 13.5px; }
.step p { margin: 4px 0 0; color: var(--text-3); font-size: 12.5px; }
.recent { margin: 40px 0 0; text-align: left; }
.recent-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px 14px; }
.recent h3 { font-size: 15px; font-weight: 600; margin: 0; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 6px; font-size: 14.5px; }
.recent li:hover { background: var(--bg-hover); }
.recent li svg { color: var(--text-2); }
.recent li .r-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent li .r-meta { color: var(--text-2); font-size: 13px; white-space: nowrap; }

/* queue view */
.queue { padding: 18px 22px 40px; }
.stats {
  display: flex; align-items: center; gap: 28px; padding: 14px 18px; border-radius: var(--radius-lg);
  background: #2e2e2e; border: 1px solid #383838; flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-l { color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; }
.stat-v { font-size: 20px; font-weight: 600; font-family: var(--mono); }
.stats-spacer { flex: 1; }

.seq-strip { display: flex; gap: 3px; margin: 14px 0 4px; height: 8px; border-radius: 4px; overflow: hidden; }
.seq-strip span { flex: 1; min-width: 2px; background: var(--accent); opacity: .85; }
.seq-strip span:nth-child(odd) { opacity: .55; }

.plates { list-style: none; margin: 16px 0 0; padding: 0; }
.plates.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.plates.list { display: flex; flex-direction: column; gap: 8px; }

.plate {
  position: relative; background: var(--bg-card); border: 1px solid #3c3c3c; border-radius: var(--radius-lg);
  overflow: hidden; transition: border-color .12s, transform .12s, opacity .12s;
}
.plate:hover { border-color: #555; }
.plate.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plates { position: relative; }
.plate { cursor: grab; touch-action: pan-y; }
.plate .p-thumb { touch-action: none; }

/* ---- drag & drop reorder ---- */
body.is-sorting, body.is-sorting * { cursor: grabbing !important; }
body.is-sorting .plate:hover { border-color: #3c3c3c; }

/* the slot where the item will land */
.drag-slot {
  border: 2px dashed var(--accent) !important;
  background: rgba(59, 142, 234, .07) !important;
  box-shadow: inset 0 0 28px rgba(59, 142, 234, .16) !important;
  animation: slotPulse 1.2s ease-in-out infinite;
}
.drag-slot > * { visibility: hidden; }
.drag-slot::after {
  content: attr(data-pos); position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 46px; font-weight: 700; color: var(--accent-hi); font-family: var(--mono); visibility: visible;
}
@keyframes slotPulse { 50% { background: rgba(59, 142, 234, .14); } }

/* the floating copy that follows the pointer */
.drag-ghost-wrap {
  position: fixed !important; z-index: 300; margin: 0 !important; padding: 0 !important;
  display: block !important; pointer-events: none; list-style: none;
}
.drag-ghost-wrap > .drag-ghost {
  height: 100%; margin: 0; transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms;
  border-color: var(--accent);
}
.drag-ghost-wrap > .drag-ghost.lifted {
  transform: rotate(1.6deg) scale(1.05);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .6), 0 0 0 2px var(--accent);
}
.just-dropped { animation: dropped .7s ease; }
@keyframes dropped { 0% { box-shadow: 0 0 0 3px var(--accent-hi); } 100% { box-shadow: 0 0 0 0 transparent; } }
.plate.skipped .p-thumb img { opacity: .3; filter: grayscale(1); }

.p-thumb { position: relative; aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 40%, #3a3a3a, #2a2a2a); display: grid; place-items: center; cursor: grab; }
.p-thumb img { max-width: 88%; max-height: 88%; object-fit: contain; pointer-events: none; }
.p-num {
  position: absolute; top: 8px; left: 8px; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: rgba(0, 0, 0, .55); font-weight: 700; font-size: 12px; display: grid; place-items: center; font-family: var(--mono);
}
.p-remove {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .5); color: var(--text-2); opacity: 0; transition: opacity .12s;
}
.p-remove svg { width: 15px; height: 15px; }
.plate:hover .p-remove { opacity: 1; }
.p-remove:hover { color: #fff; background: var(--danger); }
.p-warn {
  position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; gap: 6px; align-items: center;
  padding: 4px 8px; border-radius: 6px; background: rgba(240, 181, 69, .16); color: var(--warn); font-size: 11.5px;
  border: 1px solid rgba(240, 181, 69, .35);
}
.p-warn svg { width: 14px; height: 14px; }

.p-body { padding: 10px 12px 12px; }
.p-file { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-sub { color: var(--text-3); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 8px; }
.p-time { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 14px; color: var(--text); }
.p-time svg { width: 15px; height: 15px; color: var(--text-3); }
.stepper { display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--line-soft); border-radius: 6px; height: 28px; }
.stepper button { width: 26px; height: 100%; display: grid; place-items: center; color: var(--text-2); }
.stepper button:hover { color: #fff; background: var(--bg-hover); }
.stepper button svg { width: 14px; height: 14px; }
.stepper input {
  width: 38px; height: 100%; text-align: center; background: none; border: 0; outline: none; font-family: var(--mono); font-weight: 600;
  -moz-appearance: textfield; user-select: text;
}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-x { color: var(--text-3); font-size: 11px; margin-right: 2px; }
.p-fils { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fil-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border-radius: 999px;
  background: var(--bg-card-2); border: 1px solid #3c3c3c; font-size: 11.5px; color: var(--text-2);
}
.fil-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); flex: none; }
.fil-num {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; display: inline-grid; place-items: center; flex: none;
  background: #444; color: var(--text); font-size: 10.5px; font-weight: 700; font-family: var(--mono);
}
.fil-chip.moved .fil-num { background: var(--orange); color: #fff; }
.fil-num.big { min-width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
.fil-head { padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid #555; display: flex; flex-direction: column; gap: 3px; }
.fil-head b { font-size: 13px; }
.fil-head span { color: var(--text-3); font-size: 11.5px; line-height: 1.4; }
.fil-head.over { background: rgba(240, 181, 69, .12); border: 1px solid rgba(240, 181, 69, .4); border-radius: 6px; }
.fil-head.over span { color: var(--warn); }
.fil-files { color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.fil-warn { color: var(--warn); }

/* loading line in the middle of the screen while files are read */
.file-loader {
  position: fixed; z-index: 90; width: min(380px, 80vw); transform: translate(-50%, -50%);
  padding: 16px 18px 14px; border-radius: 12px; background: rgba(40, 40, 40, .96); border: 1px solid #444;
  box-shadow: var(--shadow); pointer-events: none; transition: opacity .25s;
}
.file-loader.leaving { opacity: 0; }
.fl-title { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.fl-track { height: 4px; border-radius: 2px; background: #1f1f1f; overflow: hidden; }
.fl-bar {
  height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi), var(--accent-lo)); background-size: 200% 100%;
  animation: move 1.4s linear infinite; box-shadow: 0 0 10px rgba(59, 142, 234, .6);
}
.fl-file { margin-top: 8px; color: var(--text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-click { cursor: pointer; }
.stat-v.warn { color: var(--warn); }

/* list view */
.plates.list .plate { display: grid; grid-template-columns: 84px 1fr; }
.plates.list .p-thumb { aspect-ratio: auto; height: 84px; }
.plates.list .p-num { top: 4px; left: 4px; height: 20px; min-width: 22px; font-size: 11px; }
.plates.list .p-warn { display: none; }
.plates.list .p-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 10px 46px 10px 14px; }
.plates.list .p-row { margin: 0; grid-column: 2; grid-row: 1 / 3; }
.plates.list .p-fils { margin-top: 6px; }
.plates.list .p-remove { opacity: 1; top: 50%; transform: translateY(-50%); background: none; }

/* drop overlay */
.drop-overlay {
  position: fixed; inset: 86px 368px 28px 52px; z-index: 30; display: grid; grid-template-columns: 2fr 1fr; gap: 18px; padding: 24px;
  background: rgba(20, 20, 20, .82); backdrop-filter: blur(3px);
}
#app.panel-hidden ~ .drop-overlay, #app.panel-hidden .drop-overlay { right: 48px; }
.drop-target {
  border: 2px dashed #6c6c6c; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--text-2); transition: background .12s, border-color .12s, color .12s;
}
.drop-target svg { width: 44px; height: 44px; stroke-width: 1.4; }
.drop-target b { font-size: 22px; color: var(--text); }
.drop-target span { font-size: 14px; }
.drop-target.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hi); }
.drop-target.express.over { border-color: var(--warn); background: rgba(240, 181, 69, .12); color: var(--warn); }

/* ---------------- right rail + panel ---------------- */
.rail {
  background: var(--bg-bar-2); border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0;
}
.rail-btn { width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; color: var(--text-2); border: 1px solid transparent; }
.rail-btn:hover { color: var(--text); background: var(--bg-hover); }
.rail-btn.active { color: var(--text); border-color: #555; background: #3c3c3c; }

.panel { background: var(--bg-panel); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.panel-sec { display: flex; flex-direction: column; min-height: 0; border-bottom: 6px solid #3a3a3a; }
.panel-sec.grow { flex: 1; border-bottom: 0; }
.panel-tabs { display: flex; align-items: stretch; background: var(--bg-panel-head); height: 38px; flex: none; padding-right: 10px; }
.panel-tab { padding: 0 16px; display: flex; align-items: center; color: var(--text-2); font-size: 13.5px; }
.panel-tab:hover { color: var(--text); }
.panel-tab.active { background: var(--bg-panel); color: var(--text); }
.panel-tab-count {
  margin-left: auto; align-self: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: #2e2e2e; color: var(--text-2); font-size: 11.5px; display: grid; place-items: center; font-family: var(--mono);
}
.panel-body { flex: 1; overflow: auto; padding: 8px; min-height: 0; }
.panel-empty { color: var(--text-2); margin: 6px 6px; font-size: 13.5px; }

.panel-sec.flash { animation: flash 1s ease; }
@keyframes flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: inset 0 0 0 2px var(--accent); } }

.printer-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.printer {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; text-align: left; width: 100%;
  border: 1px solid transparent; background: rgba(0, 0, 0, .08);
}
.printer:hover { background: var(--bg-hover); }
.printer.active { border-color: var(--accent); background: var(--accent-soft); }
/* printer picture: rounded square; grows a little on hover (a big preview opens beside the panel) */
.printer-img {
  width: 54px; height: 54px; border-radius: 12px; flex: none; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, var(--accent-hi), var(--accent-lo));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s;
}
.printer-img.has-img { background: #2b2b2b; }
.printer-img img { width: 100%; height: 100%; object-fit: cover; }
.printer:hover .printer-img { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 6px 16px rgba(0, 0, 0, .45); }
.printer-legacy {
  white-space: nowrap; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; letter-spacing: .3px;
  color: var(--warn); background: rgba(240, 181, 69, .12); border: 1px solid rgba(240, 181, 69, .35);
}

.printer-preview {
  position: fixed; z-index: 40; width: 290px; padding: 12px; border-radius: 16px; pointer-events: none;
  background: rgba(46, 46, 46, .97); border: 1px solid #4a4a4a; box-shadow: var(--shadow);
  opacity: 0; transform: translateX(10px) scale(.96); transition: opacity .16s, transform .18s cubic-bezier(.2, .8, .2, 1);
}
.printer-preview.show { opacity: 1; transform: none; }
.pp-img {
  height: 250px; border-radius: 12px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #555, #2a2a2a);
}
.pp-img img { width: 100%; height: 100%; object-fit: cover; }
.pp-name { margin-top: 10px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-meta { margin-top: 3px; color: var(--text-3); font-size: 12px; }
.printer-info { flex: 1; min-width: 0; }
.printer-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.printer-variant { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: #2e2e2e; color: var(--text-2); }
.printer.active .printer-variant { background: var(--accent); color: #fff; }
.printer-state { font-size: 12px; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.printer-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.printer-state.pending::before { background: var(--warn); }
.printer-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #8a8a8a; flex: none; display: grid; place-items: center; }
.printer.active .printer-radio { border-color: var(--accent); }
.printer.active .printer-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.layer-list, .fil-list, .hist-list { list-style: none; margin: 0; padding: 0; }
.layer {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 4px; border-radius: 6px; cursor: grab;
  border: 1px solid transparent;
}
.layer:hover { background: var(--bg-hover); }
.layer.selected { background: var(--accent-soft); border-color: rgba(59, 142, 234, .5); }
.layer-list { position: relative; }
.layer { position: relative; }
.layer.drag-slot::after { font-size: 16px; }
.drag-ghost-wrap > .layer.drag-ghost { background: #4f4f4f; border-radius: 6px; }
.layer .grip { color: var(--text-3); width: 16px; height: 16px; }
.layer-thumb { width: 36px; height: 36px; border-radius: 4px; background: #2e2e2e; display: grid; place-items: center; overflow: hidden; flex: none; }
.layer-thumb img { max-width: 100%; max-height: 100%; }
.layer-info { flex: 1; min-width: 0; }
.layer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.layer-meta { color: var(--text-3); font-size: 11.5px; font-family: var(--mono); }
.layer-rep { font-family: var(--mono); font-size: 12px; color: var(--text-2); padding: 1px 6px; border-radius: 4px; background: #3a3a3a; }

.fil-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; }
.fil-row:hover { background: var(--bg-hover); }
.fil-row .fil-dot { width: 22px; height: 22px; }
.fil-row .fil-info { flex: 1; }
.fil-row b { font-size: 13px; }
.fil-row span { color: var(--text-3); font-size: 12px; }
.fil-row .fil-amt { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.fil-bar { height: 4px; border-radius: 2px; background: #333; margin-top: 4px; overflow: hidden; }
.fil-bar i { display: block; height: 100%; }

.hist-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; margin-bottom: 4px; border-bottom: 1px solid #555; }
.hist-note { flex: 1; color: var(--text-3); font-size: 11.5px; }
.btn-mini {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 5px;
  color: var(--text-2); border: 1px solid var(--line-soft); font-size: 12px; white-space: nowrap;
}
.btn-mini svg { width: 14px; height: 14px; }
.btn-mini:hover { color: #fff; background: var(--bg-hover); }
.btn-mini.danger:hover, .recent .btn-mini:hover { color: #fff; background: var(--danger); border-color: var(--danger); }
.hist-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 6px; }
.hist-row > svg { margin-top: 2px; }
.hist-row .h-plates { color: var(--text-2); font-size: 11.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-row:hover { background: var(--bg-hover); }
.hist-row svg { color: var(--text-3); }
.hist-row .h-info { flex: 1; min-width: 0; }
.hist-row .h-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.hist-row .h-meta { color: var(--text-3); font-size: 11.5px; }
.hist-row { align-items: center; border: 1px solid transparent; }
.hist-row.can-open { cursor: pointer; }
.hist-row.can-open:hover { border-color: rgba(59, 142, 234, .45); background: var(--accent-soft); }
.h-thumb {
  width: 46px; height: 46px; border-radius: 6px; background: #2e2e2e; flex: none; display: grid; place-items: center; overflow: hidden;
  border: 1px solid #3c3c3c;
}
.h-thumb img { width: 100%; height: 100%; object-fit: contain; }
.h-thumb svg { width: 18px; height: 18px; color: #555; }
.h-actions { display: flex; gap: 2px; flex: none; opacity: .55; transition: opacity .12s; }
.hist-row:hover .h-actions { opacity: 1; }
.h-btn { width: 26px; height: 26px; border-radius: 5px; display: grid; place-items: center; color: var(--text-2); }
.h-btn svg { width: 15px; height: 15px; color: inherit; }
.h-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.h-btn.danger:hover { background: var(--danger); }

/* ---------------- status bar ---------------- */
.statusbar {
  display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--bg-panel); border-top: 1px solid var(--line);
  color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden;
}
.sb-spacer { flex: 1; }
.sb-version { color: var(--text-2); }
.sb-version span { font-family: var(--mono); color: var(--text); }

/* ---------------- modals ---------------- */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; }
.modal { background: #383838; border: 1px solid #262626; border-radius: 12px; box-shadow: var(--shadow); position: relative; }
.progress-modal { width: min(420px, 100%); padding: 22px 24px; }
.progress-modal h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.progress { height: 6px; border-radius: 3px; background: #262626; overflow: hidden; }
.progress-bar {
  height: 100%; width: 0; border-radius: 3px; transition: width .15s;
  background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi), var(--accent-lo)); background-size: 200% 100%;
  animation: move 1.4s linear infinite;
}
@keyframes move { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.progress-step { margin: 10px 0 0; color: var(--text-3); font-size: 12px; min-height: 16px; }

/* ---- swap window: printer + three yellow files merging into a blue swap file ---- */
.modal-back:has(.merge-modal) { animation: mmBackIn .2s ease-out; }
.modal-back.closing { opacity: 0; transition: opacity .2s; }
@keyframes mmBackIn { from { opacity: 0; } }
.merge-modal { width: min(400px, 100%); padding: 24px 26px 20px; text-align: center; animation: mmIn .32s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes mmIn { from { transform: scale(.88) translateY(10px); opacity: 0; } }
.merge-modal h3 { margin: 4px 0 12px; }
.merge-modal .progress { height: 4px; }
.merge-modal .progress-step { margin-top: 8px; }
.mm-printer { width: 190px; height: 190px; margin: 0 auto; border-radius: 34px; overflow: hidden; background: #2e2e2e; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.mm-printer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-name { margin: 14px 0 0; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.mm-name .printer-variant { font-size: 13px; padding: 2px 8px; }
.mm-name .printer-legacy { font-size: 12.5px; padding: 2px 8px; }

/* the whole animation is drawn at 70% size */
.mm-stage { --mm-dur: 4.4s; position: relative; height: 150px; margin: 6px -10px 2px; overflow: hidden; zoom: .7; }
.mm-stage > * { position: absolute; left: 50%; top: 50%; }
.mm-file { width: 46px; height: 58px; margin: -29px 0 0 -23px; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.mm-doc {
  position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 13px, 100% 100%, 0 100%);
  background: linear-gradient(160deg, #ffe066, #f5b82e);
}
.mm-doc::before { content: ""; position: absolute; top: 0; right: 0; width: 14px; height: 13px; background: #d99a16; clip-path: polygon(0 0, 100% 100%, 0 100%); border-bottom-left-radius: 3px; }
.mm-blue .mm-doc { background: linear-gradient(160deg, var(--accent-hi), var(--accent-lo)); }
.mm-blue .mm-doc::before { background: #1f5ea8; }
/* cute face: two eyes (blinking) and a smile */
.mm-face { position: absolute; left: 50%; top: 20px; width: 24px; height: 16px; margin-left: -12px; }
.mm-face i { position: absolute; top: 0; width: 5px; height: 6px; border-radius: 50%; background: #3a2a05; animation: mmBlink 2.2s infinite; }
.mm-face i:first-child { left: 3px; } .mm-face i:nth-child(2) { right: 3px; }
.mm-face b { position: absolute; left: 50%; top: 7px; width: 9px; height: 5px; margin-left: -4.5px; border: 2px solid #3a2a05; border-top: 0; border-radius: 0 0 6px 6px; }
.mm-face::before, .mm-face::after { content: ""; position: absolute; top: 7px; width: 5px; height: 3px; border-radius: 50%; background: rgba(255, 120, 90, .55); }
.mm-face::before { left: -2px; } .mm-face::after { right: -2px; }
.mm-y2 .mm-face i { animation-delay: .7s; } .mm-y3 .mm-face i { animation-delay: 1.3s; }
@keyframes mmBlink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.mm-face.happy i { width: 7px; height: 4px; background: none; border: 2px solid #fff; border-bottom: 0; border-radius: 7px 7px 0 0; animation: none; }
.mm-face.happy b { border-color: #fff; width: 11px; height: 6px; margin-left: -5.5px; }
.mm-lines { position: absolute; left: 9px; right: 9px; bottom: 9px; height: 10px; background: linear-gradient(#c98d10 0 2px, transparent 2px 4px, #c98d10 4px 6px, transparent 6px 8px, #c98d10 8px 10px); opacity: .45; border-radius: 1px; }
.mm-tag { position: absolute; left: 0; right: 0; bottom: 8px; font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #fff; }
.mm-check { position: absolute; right: -9px; bottom: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; box-shadow: 0 0 0 2px #383838; transform: scale(0); }
.mm-check svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3.2; }
.mm-glow { width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: radial-gradient(circle, rgba(90, 162, 240, .45), transparent 65%); opacity: 0; }
.mm-ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 3px solid var(--accent-hi); opacity: 0; }
.mm-flash { width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255, 255, 255, 0) 70%); opacity: 0; }
.mm-spark, .mm-twinkle { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #ffe066; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; }
.mm-spark:nth-of-type(even) { background: var(--accent-hi); width: 9px; height: 9px; }
.mm-twinkle { background: #fff; width: 10px; height: 10px; }

.mm-stage.play .mm-y { animation: mmSide var(--mm-dur) linear both; }
.mm-stage.play .mm-y1 { --x: -92px; --r: -1; }
.mm-stage.play .mm-y3 { --x: 92px; --r: 1; animation-delay: .08s; }
.mm-stage.play .mm-y2 { animation-name: mmMid; animation-delay: .04s; }
.mm-stage.play .mm-blue { animation: mmBlue var(--mm-dur) linear both; }
.mm-stage.play .mm-check { animation: mmCheck var(--mm-dur) linear both; }
.mm-stage.play .mm-glow { animation: mmGlow var(--mm-dur) ease-out both; }
.mm-stage.play .mm-ring { animation: mmRing var(--mm-dur) ease-out both; }
.mm-stage.play .mm-flash { animation: mmFlash var(--mm-dur) ease-out both; }
.mm-stage.play .mm-spark { animation: mmSpark var(--mm-dur) ease-out both; }
.mm-stage.play .mm-twinkle { animation: mmTwinkle var(--mm-dur) linear both; }
.mm-stage.play .mm-twinkle:nth-last-of-type(2) { animation-delay: .15s; }
.mm-stage.play .mm-twinkle:nth-last-of-type(1) { animation-delay: .3s; }

/* side files: pop in, hop twice, then swirl into the middle */
@keyframes mmSide {
  0%   { opacity: 0; transform: translate(var(--x), 18px) scale(0); }
  5%   { opacity: 1; transform: translate(var(--x), 0) scale(1.15); }
  8%   { transform: translate(var(--x), 0) scale(1); }
  12%  { transform: translate(var(--x), 4px) scale(1.14, .84); }
  16%  { transform: translate(var(--x), -24px) scale(.94, 1.08) rotate(calc(var(--r) * 10deg)); }
  20%  { transform: translate(var(--x), 3px) scale(1.12, .88); }
  23%  { transform: translate(var(--x), 0) scale(1); }
  27%  { transform: translate(var(--x), 4px) scale(1.14, .84); }
  31%  { transform: translate(var(--x), -20px) scale(.94, 1.08) rotate(calc(var(--r) * -8deg)); }
  35%  { transform: translate(var(--x), 3px) scale(1.12, .88); }
  38%  { transform: translate(var(--x), 0) scale(1); }
  45%  { transform: translate(calc(var(--x) * .66), -20px) rotate(calc(var(--r) * -14deg)) scale(.95); }
  52%  { transform: translate(calc(var(--x) * .16), -4px) rotate(calc(var(--r) * -30deg)) scale(.75); }
  56%  { opacity: 1; transform: translate(0, 0) rotate(calc(var(--r) * -60deg)) scale(.3); }
  58%, 100% { opacity: 0; transform: translate(0, 0) scale(0); }
}
/* middle file: hops in between the others, then gets squeezed as they arrive */
@keyframes mmMid {
  0%   { opacity: 0; transform: translateY(18px) scale(0); }
  5%   { opacity: 1; transform: translateY(0) scale(1.15); }
  8%, 16% { transform: translateY(0) scale(1); }
  19%  { transform: translateY(4px) scale(1.14, .84); }
  23%  { transform: translateY(-26px) scale(.94, 1.08); }
  27%  { transform: translateY(3px) scale(1.12, .88); }
  30%, 32% { transform: translateY(0) scale(1); }
  35%  { transform: translateY(4px) scale(1.14, .84); }
  39%  { transform: translateY(-20px) scale(.94, 1.08) rotate(6deg); }
  43%  { transform: translateY(3px) scale(1.12, .88); }
  46%  { transform: translateY(0) scale(1); }
  50%  { transform: scale(1.08) rotate(-4deg); }
  53%  { transform: scale(.85) rotate(5deg); }
  56%  { opacity: 1; transform: scale(.35) rotate(0); }
  58%, 100% { opacity: 0; transform: scale(0); }
}
/* the new blue swap file pops out and does a happy wiggle */
@keyframes mmBlue {
  0%, 56% { opacity: 0; transform: scale(0); }
  58%  { opacity: 1; transform: scale(.3); }
  63%  { transform: scale(1.38) rotate(-4deg); }
  67%  { transform: scale(1.06, 1.24); }
  71%  { transform: scale(1.24, 1.12); }
  74%  { transform: scale(1.18); }
  78%  { transform: translateY(-8px) rotate(-7deg) scale(1.18); }
  82%  { transform: translateY(0) rotate(6deg) scale(1.18); }
  86%  { transform: translateY(-4px) rotate(-3deg) scale(1.18); }
  90%, 100% { opacity: 1; transform: translateY(0) rotate(0) scale(1.18); }
}
@keyframes mmCheck { 0%, 72% { transform: scale(0); } 77% { transform: scale(1.35); } 81%, 100% { transform: scale(1); } }
@keyframes mmGlow { 0%, 40% { opacity: 0; transform: scale(.4); } 56% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: .55; transform: scale(.9); } }
@keyframes mmRing { 0%, 55% { opacity: 0; transform: scale(.3); } 57% { opacity: 1; transform: scale(.5); } 72%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes mmFlash { 0%, 54% { opacity: 0; transform: scale(.4); } 57% { opacity: .95; transform: scale(1.1); } 66%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes mmSpark {
  0%, 55% { opacity: 0; transform: translate(0, 0) scale(0); }
  58% { opacity: 1; transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .3)) scale(1.3) rotate(45deg); }
  76%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3) rotate(220deg); }
}
@keyframes mmTwinkle {
  0%, 76% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0); }
  81% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1.2) rotate(30deg); }
  87% { opacity: .5; transform: translate(var(--x), var(--y)) scale(.6) rotate(60deg); }
  93% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(90deg); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3) rotate(120deg); }
}

.info-modal { width: min(640px, 100%); max-height: 84vh; overflow: auto; padding: 26px 28px; user-select: text; }
.info-modal h2 { margin: 0 0 6px; font-size: 22px; }
.info-modal h4 { margin: 20px 0 6px; font-size: 14px; color: var(--accent-hi); }
.info-modal p, .info-modal li { color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.info-modal ul { padding-left: 18px; }
.info-modal code { font-family: var(--mono); background: #2a2a2a; padding: 1px 5px; border-radius: 4px; font-size: 12px; color: var(--text); }
.shop-modal { width: min(520px, 100%); padding: 26px 28px 28px; }
.shop-modal h2 { margin: 0; font-size: 22px; letter-spacing: .8px; }
.shop-sub { margin: 6px 0 20px; color: var(--text-2); }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shop-item {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 14px 16px; border-radius: 12px;
  background: #2e2e2e; border: 1px solid #444; color: var(--text); text-decoration: none; transition: border-color .12s, background .12s;
}
.shop-item:hover { border-color: var(--accent); background: #323232; }
.shop-img { width: 150px; height: 150px; border-radius: 14px; overflow: hidden; background: #2b2b2b; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .18s; }
.shop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-item:hover .shop-img { transform: scale(1.04); }
.shop-img.orange { background: radial-gradient(circle at 35% 30%, var(--orange-hi), #c96a14); }
.shop-img.blue { background: radial-gradient(circle at 35% 30%, var(--accent-hi), var(--accent-lo)); }
.shop-item b { font-size: 14.5px; }
.shop-go { display: flex; align-items: center; gap: 6px; color: var(--accent-hi); font-size: 12.5px; }
.shop-go svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .shop-grid { grid-template-columns: 1fr; } }
.modal-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: var(--text-2); }
.modal-x:hover { background: var(--bg-hover); color: #fff; }

/* ---------------- toasts + tooltip ---------------- */
.toasts { position: fixed; right: 380px; bottom: 44px; z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#app.panel-hidden ~ .toasts { right: 60px; }
.toast {
  display: flex; gap: 10px; align-items: flex-start; max-width: 420px; padding: 11px 14px; border-radius: 8px;
  background: #3f3f3f; border: 1px solid #262626; border-left: 3px solid var(--accent); box-shadow: var(--shadow);
  animation: toastIn .18s ease; font-size: 13px;
}
.toast.err { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warn); }
.toast.ok { border-left-color: var(--ok); }
.toast svg { margin-top: 1px; }
.toast.err svg { color: var(--danger); }
.toast.warn svg { color: var(--warn); }
.toast.ok svg { color: var(--ok); }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } }

.tooltip {
  position: fixed; z-index: 200; pointer-events: none; max-width: 280px; padding: 7px 10px; border-radius: 6px;
  background: #1e1e1e; border: 1px solid #444; color: var(--text); font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow);
}

/* ---------------- scrollbars ---------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #555; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #666; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 52px 1fr 48px 280px; }
  .drop-overlay { right: 328px; }
  .toasts { right: 340px; }
}
@media (max-width: 860px) {
  #app { grid-template-rows: 40px 46px 1fr 28px; }
  .workspace { grid-template-columns: 44px 1fr 0 0; }
  .rail, .panel { display: none; }
  .tb-title, .tb-chip { display: none; }
  .titlebar { grid-template-columns: 1fr 0 auto; }
  .menu-btn { padding: 0 7px; }
  .adv-pop { position: fixed; left: 8px; right: 8px; top: 40px; width: auto; }
  .tb-left { gap: 0; }
  .drop-overlay { inset: 86px 0 28px 44px; grid-template-columns: 1fr; }
  .toasts { right: 12px; }
  .welcome-steps { grid-template-columns: 1fr; }
  .tool { width: 34px; height: 34px; }
  #app.panel-mobile .panel {
    display: flex; position: fixed; top: 86px; right: 0; bottom: 28px; width: min(320px, 100vw); z-index: 45; box-shadow: var(--shadow);
  }
  .welcome { padding-top: 6vh; }
  .welcome-head h1 { font-size: 40px; }
  .btn-lg { min-width: 0; width: 100%; }
}

/* update notes: dated entries */
.info-modal .cl-now { margin: 0 0 6px; }
.info-modal .cl-date {
  display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 4px; font-family: var(--mono); font-size: 12px;
  background: var(--accent-soft); color: var(--accent-hi); border: 1px solid rgba(59, 142, 234, .35);
}

.welcome-powered { margin: 8px 0 0; color: var(--text-3); font-size: 12px; letter-spacing: .2px; }

/* Help menu: side submenus (hover, or click on touch screens) */
.has-sub { position: relative; }
.menu-pop .sub-btn > span { display: inline-flex; align-items: center; gap: 9px; }
.menu.open .sub-pop { display: none; top: -6px; left: calc(100% + 4px); }
.menu.open .has-sub:hover > .sub-pop, .menu.open .has-sub.open > .sub-pop { display: block; }
.has-sub:hover > .sub-btn, .has-sub.open > .sub-btn { background: var(--bg-hover); }
.sub-btn svg.chev { width: 14px; height: 14px; transform: rotate(-90deg); opacity: .7; }
.menu-links .menu-pop .sub-btn svg:not(.chev) { width: 16px; height: 16px; }