/* Frame Studio visual system. Loaded after the legacy mode styles so it can
   unify the workbench without changing any runtime selectors or behaviors. */
:root {
  --bg-primary: #080c12;
  --bg-panel: #101722;
  --bg-hover: #172333;
  --bg-active: #173447;
  --bg-input: #172331;
  --border-color: #26394c;
  --border-light: #38526a;
  --text-primary: #e6eff8;
  --text-secondary: #91a4b7;
  --text-muted: #617488;
  --accent-blue: #5dd6ff;
  --accent-blue-light: #b2efff;
  --accent-blue-bg: #123f58;
  --accent-green: #72d29a;
  --accent-green-light: #a2ebbc;
  --accent-red: #ff938d;
  --accent-amber: #ffbd6b;
  --button-primary: #2caed8;
  --button-primary-hover: #5dd6ff;
  --line: var(--border-color);
  --muted: var(--text-secondary);
  --ok: var(--accent-green);
  --err: var(--accent-red);
  --studio-shadow: 0 20px 52px rgba(0, 0, 0, 0.22);
}

* { scrollbar-color: #344b61 transparent; }

body {
  background:
    radial-gradient(circle at 77% -18%, rgba(32, 111, 152, 0.34), transparent 34%),
    linear-gradient(135deg, #091018 0%, var(--bg-primary) 46%, #080c12 100%);
  color: var(--text-primary);
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(93, 214, 255, 0.2);
}

html { color-scheme: dark; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  background-image:
    linear-gradient(rgba(112, 165, 198, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 165, 198, 0.13) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 68%);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #354b60; border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #506b84; border: 2px solid transparent; background-clip: padding-box; }

button,
select,
input[type="text"],
input[type="number"] {
  min-height: 30px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-primary);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

button:hover:not(:disabled),
select:hover,
input[type="text"]:hover,
input[type="number"]:hover { border-color: #58728b; }

button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(93, 214, 255, 0.16);
}

button:disabled {
  opacity: 0.42;
  color: #778b9e;
  border-color: #2a3b4b;
  background: #111a24;
}

input[type="range"] { background: #2b4257; }
input[type="range"]::-webkit-slider-thumb { width: 13px; height: 13px; border: 2px solid #d8f8ff; background: var(--accent-blue); box-shadow: 0 0 0 2px rgba(93, 214, 255, 0.22); }

/* Left mode rail */
.side-nav {
  width: 214px;
  align-items: stretch;
  gap: 0;
  padding: 12px 10px 10px;
  border-right: 1px solid #24384a;
  background: linear-gradient(180deg, rgba(14, 22, 32, 0.98), rgba(9, 14, 20, 0.99));
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.18);
}

.side-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 47px;
  padding: 0 9px 12px;
  border-bottom: 1px solid rgba(83, 112, 137, 0.35);
}

.brand-mark {
  display: inline-grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(93, 214, 255, 0.68);
  border-radius: 8px 8px 8px 2px;
  color: var(--accent-blue);
  background: linear-gradient(135deg, rgba(93, 214, 255, 0.16), rgba(93, 214, 255, 0.02));
  font: 800 14px/1 Consolas, "Courier New", monospace;
}

.brand-copy { display: grid; gap: 2px; line-height: 1; }
.brand-copy strong { color: #e9f7ff; font: 800 12px/1 Consolas, "Courier New", monospace; letter-spacing: 0.15em; }
.brand-copy small { color: #7691a8; font: 700 9px/1 Consolas, "Courier New", monospace; letter-spacing: 0.18em; }

.side-nav-top { width: 100%; align-items: stretch; gap: 4px; padding-top: 13px; }

.side-nav-divider { height: 1px; margin: 6px 8px 7px; background: rgba(83, 112, 137, 0.3); }

.side-nav-item {
  width: 100%;
  min-height: 38px;
  height: 38px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #96aabe;
  font-size: 12px;
  text-decoration: none;
}

.side-nav-item:hover { background: rgba(47, 74, 97, 0.38); color: #e4f4ff; }

.side-nav-item.active {
  border-color: rgba(93, 214, 255, 0.29);
  background: linear-gradient(90deg, rgba(32, 105, 139, 0.34), rgba(22, 51, 70, 0.48));
  color: var(--accent-blue-light);
}

.side-nav-item.active::before {
  left: -11px;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-blue);
  box-shadow: 0 0 12px rgba(93, 214, 255, 0.72);
}

.nav-icon {
  display: inline-grid;
  width: 19px;
  height: 19px;
  place-items: center;
  flex: 0 0 auto;
  color: currentColor;
  font: 700 12px/1 Consolas, "Courier New", monospace;
}

.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-tooltip { display: none; }

.side-nav-bottom {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin: auto 5px 0;
  padding: 10px 3px 0;
  border-top: 1px solid rgba(83, 112, 137, 0.3);
}

.logo-mini {
  width: auto;
  height: auto;
  background: transparent;
  color: var(--accent-green);
  font-size: 11px;
}

.side-nav-local { color: #6f8498; font: 700 9px/1 Consolas, "Courier New", monospace; letter-spacing: 0.08em; }

/* Persistent title bar */
.main-wrapper { z-index: 1; }

.title-bar {
  min-height: 51px;
  height: 51px;
  padding: 0 18px;
  border-bottom-color: #273b4d;
  background: rgba(14, 22, 32, 0.92);
  backdrop-filter: blur(14px);
  gap: 14px;
}

.breadcrumbs { min-width: 0; font-size: 12px; }
.breadcrumbs .crumb:first-child { color: #7895ac; font: 700 10px/1 Consolas, "Courier New", monospace; letter-spacing: 0.09em; text-transform: uppercase; }
.breadcrumbs .crumb#modeCrumb { color: var(--text-primary); font: 700 13px/1 "Segoe UI", "Microsoft YaHei", sans-serif; letter-spacing: 0; text-transform: none; }
.breadcrumbs .sep { color: #4d6579; }
.replace-hint { max-width: min(38vw, 560px); color: #7f95a9; border-left-color: #344c60; font-size: 11px; }

.title-bar-actions { min-width: 0; max-width: 60%; overflow-x: auto; padding: 3px 0; scrollbar-width: none; }
.title-bar-actions::-webkit-scrollbar { display: none; }
.usage-btn {
  min-height: 28px;
  padding: 4px 8px;
  border-color: #334b60;
  background: #142232;
  color: #a9bfd0;
  font-size: 11px;
}
.usage-btn:hover:not(:disabled) { color: #e7f8ff; border-color: #5bcaed; background: #193349; }

/* Workspace home */
.workspace-home {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: clamp(24px, 4vw, 60px);
  background:
    radial-gradient(circle at 80% 5%, rgba(42, 143, 189, 0.15), transparent 30%),
    linear-gradient(135deg, rgba(17, 35, 49, 0.74), rgba(8, 12, 18, 0.2));
}

.workspace-home-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto 28px;
}

.workspace-eyebrow { margin: 0 0 9px; color: var(--accent-blue); font: 800 10px/1 Consolas, "Courier New", monospace; letter-spacing: 0.15em; }
.workspace-home h1 { margin: 0; color: #f2faff; font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.05em; }
.workspace-home h1,
.workspace-card-copy strong { text-wrap: balance; }
.workspace-home-intro p:not(.workspace-eyebrow) { max-width: 600px; margin: 11px 0 0; color: #8fa4b8; font-size: 14px; line-height: 1.7; }
.workspace-home-status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; margin-top: 10px; padding: 7px 10px; border: 1px solid rgba(114, 210, 154, 0.24); border-radius: 999px; color: #a4e6bb; background: rgba(38, 104, 70, 0.17); font-size: 11px; }
.workspace-home-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 9px rgba(114, 210, 154, 0.8); }

.workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; max-width: 1180px; width: 100%; margin: 0 auto; }
.workspace-card {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 156px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid #2c4257;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(22, 33, 46, 0.96), rgba(13, 22, 32, 0.94));
  color: var(--text-primary);
  text-align: left;
  text-decoration: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.workspace-card::after { content: ""; position: absolute; inset: auto -44px -72px auto; width: 180px; height: 180px; border: 1px solid rgba(93, 214, 255, 0.13); border-radius: 50%; pointer-events: none; }
.workspace-card:hover { transform: translateY(-2px); border-color: rgba(93, 214, 255, 0.72); background: linear-gradient(135deg, #162c3d, #101b28); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26), 0 0 0 2px rgba(93, 214, 255, 0.08); }
.workspace-card:focus-visible { transform: translateY(-2px); }
.workspace-card-index { position: absolute; top: 13px; left: 16px; color: #6d91a9; font: 800 9px/1 Consolas, "Courier New", monospace; letter-spacing: 0.11em; }
.workspace-card-art { position: relative; display: grid; width: 100px; height: 82px; place-items: center; margin-top: 14px; overflow: hidden; border: 1px solid #324d62; border-radius: 8px; background: #0a1119; }
.workspace-card-copy { display: grid; gap: 7px; align-content: center; min-width: 0; padding: 18px 16px 0 3px; }
.workspace-card-copy strong { font-size: 16px; letter-spacing: -0.025em; }
.workspace-card-copy small { color: #8ba2b6; font-size: 11px; line-height: 1.55; }
.workspace-card-action { align-self: end; padding-bottom: 4px; color: #8fcfe7; font-size: 11px; white-space: nowrap; }
.workspace-card-action b { padding-left: 4px; color: var(--accent-blue); font-size: 16px; font-weight: 400; }

.workspace-skeleton-art { background-color: #09121b; background-image: linear-gradient(rgba(93, 214, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 214, 255, 0.08) 1px, transparent 1px); background-size: 15px 15px; }
.workspace-skeleton-art i,
.workspace-skeleton-art b,
.workspace-skeleton-art em { position: absolute; width: 51px; height: 4px; border-radius: 999px; background: var(--accent-blue); box-shadow: 0 0 10px rgba(93, 214, 255, 0.35); transform-origin: left center; }
.workspace-skeleton-art i { top: 41px; left: 39px; transform: rotate(-43deg); }
.workspace-skeleton-art b { top: 43px; left: 41px; transform: rotate(42deg); }
.workspace-skeleton-art em { top: 45px; left: 40px; transform: rotate(117deg); }
.workspace-files-art { align-content: center; gap: 8px; padding: 18px; }
.workspace-files-art i { display: block; width: 100%; height: 8px; border: 1px solid #3a596e; border-radius: 2px; background: #1a2a39; }
.workspace-files-art i:first-child { border-color: var(--accent-blue); background: #1b4258; }
.workspace-image-art { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 13px; }
.workspace-image-art i { height: 48px; border: 1px solid #42637c; border-radius: 5px; background: linear-gradient(135deg, #385a73, #122130); }
.workspace-image-art i:nth-child(2) { border-color: var(--accent-blue); background: linear-gradient(135deg, #5dd6ff, #1b3f55); }
.workspace-tools-art { grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 19px; }
.workspace-tools-art i { height: 35px; border: 1px solid #3c576c; border-radius: 6px; background: #152536; }
.workspace-tools-art i:nth-child(2) { border-color: var(--accent-blue); box-shadow: inset 0 0 0 3px rgba(93, 214, 255, 0.13); }
.workspace-tools-art i:nth-child(3) { border-color: rgba(255, 189, 107, 0.68); }

/* Mode containers and preview */
.mode-container { background: rgba(10, 16, 24, 0.68); }
.preview-sidebar {
  width: 290px;
  padding: 14px;
  gap: 13px;
  border-right-color: #2a4053;
  background: linear-gradient(180deg, #111b27, #0e1721);
}

.preview-sidebar section { padding: 11px; border: 1px solid rgba(60, 86, 108, 0.58); border-radius: 8px; background: rgba(21, 34, 47, 0.76); }
.preview-sidebar section h2 { color: #81a2bb; font: 800 10px/1 Consolas, "Courier New", monospace; letter-spacing: 0.1em; }
.preview-sidebar .info-grid > div { border: 1px solid #2d465b; border-radius: 5px; background: #142232; }
.preview-sidebar select,
.preview-sidebar input[type="number"] { width: 100%; border-color: #385269; background: #101d2a; }
.preview-sidebar .control-row button { min-height: 29px; color: #bbd6e5; background: #152536; }
.preview-main { background: #091019; }
.canvas-area { background-color: #091019; background-image: linear-gradient(rgba(103, 156, 191, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 156, 191, 0.08) 1px, transparent 1px); background-size: 22px 22px; }
.canvas-placeholder { width: 300px; height: 220px; border-color: #35566e; border-radius: 10px; color: #88a1b5; background: rgba(15, 28, 40, 0.62); }
.timeline { height: 78px; padding: 11px 18px; border-top-color: #294052; background: #101a25; }
.timeline-bar { background: #294256; }
.timeline-bar-fill { background: linear-gradient(90deg, #3dbfe9, var(--accent-blue)); box-shadow: 0 0 10px rgba(93, 214, 255, 0.4); }
.timeline-controls button { border: 1px solid #4bc2e7; border-radius: 5px; background: #197d9d; }
.timeline-controls button:hover:not(:disabled) { background: #2caed8; }

/* Replace and image replace workspaces */
#replaceContainer .stepper,
#imageReplaceContainer .stepper { padding: 10px 16px; border-bottom: 1px solid #294052; background: #0f1823; }
#replaceContainer .step,
#imageReplaceContainer .step {
  border-color: #2b465b;
  background: linear-gradient(135deg, #13202d, #101923);
  color: #7e97ab;
  font-size: 11px;
}
#replaceContainer .step.active,
#imageReplaceContainer .step.active {
  border-color: #30c4ef;
  background: linear-gradient(135deg, #123b51, #102b3b);
  color: var(--accent-blue);
  box-shadow: inset 0 1px rgba(178, 239, 255, 0.12);
}
#replaceContainer .step.done,
#imageReplaceContainer .step.done {
  border-color: rgba(114, 210, 154, 0.58);
  background: rgba(31, 89, 62, 0.24);
  color: var(--accent-green-light);
}

#replaceContainer .layout,
#imageReplaceContainer .layout { gap: 10px; padding: 10px; background: #0b121a; }
#replaceContainer .panel,
#imageReplaceContainer .panel { overflow: hidden; border: 1px solid #2b4357; border-radius: 9px; background: #111d29; box-shadow: var(--studio-shadow); }
#replaceContainer .panel-head,
#imageReplaceContainer .panel-head { min-height: 54px; padding: 9px 11px; border-bottom-color: #2a4053; background: #14212e; }
#replaceContainer .panel-head h3,
#imageReplaceContainer .panel-head h3 { color: #dcecf7; font-size: 12px; letter-spacing: 0; text-transform: none; }
#replaceContainer .dir-path,
#imageReplaceContainer .dir-path { color: #7690a5; font: 10px/1.4 Consolas, "Courier New", monospace; }
#replaceContainer .dropzone,
#imageReplaceContainer .dropzone { background: #0e1823; }
#replaceContainer .dropzone-hint,
#imageReplaceContainer .dropzone-hint { color: #718da4; }
#replaceContainer .empty,
#imageReplaceContainer .empty {
  border-color: #29445a;
  background: #101b26;
  color: #7690a5;
}
#replaceContainer .tree-node,
#imageReplaceContainer .image-node { border-radius: 5px; color: #bdccda; }
#replaceContainer .tree-node:hover,
#imageReplaceContainer .image-node:hover { background: #182a3a; }
#replaceContainer .tree-node.selected,
#imageReplaceContainer .image-node.selected { border-color: #2caed8; background: #143c52; color: #e5f9ff; }
#replaceContainer .preview,
#imageReplaceContainer .preview { background: #0c151f; }
#replaceContainer .preview > p,
#imageReplaceContainer .preview > p { color: #7893a7; }
#replaceContainer .actions,
#imageReplaceContainer .actions { padding: 11px; border-top-color: #2a4053; background: #111c27; }
#replaceContainer .actions button,
#imageReplaceContainer .actions button { margin: 0 5px 0 0; }
#replaceContainer .actions button:disabled,
#imageReplaceContainer .actions button:disabled {
  border-color: #263e52;
  background: #14202c;
  color: #5e7488;
  opacity: 1;
}
#replaceContainer #replaceBtn,
#imageReplaceContainer #imageReplaceBtn { border-color: #36bfe8; background: #1d95ba; color: #061116; font-weight: 700; }
#replaceContainer #replaceBtn:hover:not(:disabled),
#imageReplaceContainer #imageReplaceBtn:hover:not(:disabled) { background: var(--accent-blue); }
#replaceContainer .op-status,
#imageReplaceContainer .op-status { margin: 0 11px 11px; border-color: #2d4558; border-radius: 6px; background: #0d1721; }
#replaceContainer .op-status.ok,
#imageReplaceContainer .op-status.ok { border-color: rgba(114, 210, 154, 0.6); background: rgba(38, 104, 70, 0.14); }
#replaceContainer .op-status.error,
#imageReplaceContainer .op-status.error { border-color: rgba(255, 147, 141, 0.62); background: rgba(145, 47, 51, 0.14); }

.pick-dir-btn,
.refresh-btn,
.head-tools-btn { min-height: 27px; background: #182b3b; color: #b4ccdc; }
.head-tools .view-toggle { border-color: #385269; border-radius: 5px; }
.head-tools .view-toggle button { min-height: 26px; background: #142332; color: #89a3b7; }
.head-tools .view-toggle button.active { background: #1b80a2; color: #e9fbff; }
.direction-toggle { border-color: #2d475d; border-radius: 6px; background: #14202d; }
.direction-toggle .direction-label { color: #71899e; }
.direction-toggle button:not(.active) { border-color: transparent; background: transparent; color: #8199ad; }
.direction-toggle button.active { border-color: #41c8f0; background: #16506b; color: #d9f8ff; }
.tree-filter-row { border-bottom-color: #2a4053; }
.tree-filter-input { background: #111f2c; border-color: #365067; }

#imageReplaceContainer .image-preview-side img,
#imageReplaceContainer .image-preview-single img { border-color: #3a5970; border-radius: 7px; background-color: #0a1119; }
#imageReplaceContainer .image-replace-report { border-color: #324c61; border-radius: 6px; background: #111e2b; color: #b9cbd8; }

/* Image tools including Sprite Lab panels */
#imageToolsContainer { overflow: auto; background: #0b121a; }
.image-tools-tabs { position: sticky; top: 0; z-index: 5; min-height: 47px; padding: 7px 15px; border-bottom-color: #294052; background: rgba(14, 23, 33, 0.96); backdrop-filter: blur(14px); }
.image-tools-tab { min-height: 30px; padding: 5px 10px; border: 1px solid transparent; border-radius: 6px; color: #8ca3b6; }
.image-tools-tab:hover { background: #172a3a; color: #d8f2fb; }
.image-tools-tab.active { border-color: rgba(93, 214, 255, 0.4); background: #14384d; color: var(--accent-blue); }
.image-tools-panel { padding: 16px; }
.image-tools-body,
.image-tools-split-layout { gap: 14px; }
.image-tools-upload,
.image-tools-options,
.image-tools-split-sidebar,
.image-tools-section,
.sprite-lab-sidebar,
.sprite-lab-preview-card,
.sprite-lab-frames { border-color: #2c455a; border-radius: 9px; background: #111d29; box-shadow: inset 0 1px rgba(255,255,255,0.02); }
.image-tools-upload,
.image-tools-options { padding: 14px; }
.image-tools-upload-area { border-color: #3a6077; border-radius: 8px; background: linear-gradient(135deg, rgba(28, 83, 106, 0.18), rgba(12, 22, 31, 0.44)); }
.image-tools-upload-area.hover,
.image-tools-canvas-shell.hover { border-color: var(--accent-blue); background: rgba(27, 94, 122, 0.2); }
.image-tools-empty-title { color: #d6e9f4; }
.image-tools-empty-sub { color: #829bb0; }
.image-tools-btn { min-height: 30px; border-color: #38556c; border-radius: 6px; background: #172a39; color: #bcd5e3; }
.image-tools-btn:hover:not(:disabled) { border-color: #5dd6ff; background: #1a3548; }
.image-tools-btn.danger { color: #dba39f; }
.image-tools-btn.danger:hover:not(:disabled) { border-color: #f08b85; background: #3b2229; }
.image-tools-primary-btn { min-height: 33px; border-color: #46c9ef; border-radius: 6px; background: linear-gradient(135deg, #1b8eb2, #31b9e3); color: #041015; font-weight: 800; }
.image-tools-primary-btn:hover:not(:disabled) { border-color: #b9f3ff; background: var(--accent-blue); }
.image-tools-file-item,
.image-tools-result-item { border-bottom-color: #294156; }
.image-tools-file-thumb,
.image-tools-result-thumb { border-color: #38566c; border-radius: 5px; background: #0b141d; }
.image-tools-input-row,
.image-tools-dim-field { color: #9bb1c3; }
.image-tools-inputs input[type="number"],
.image-tools-dim-field input[type="number"],
.image-tools-dim-unit select { border-color: #39546b; background: #101e2b; }
.image-tools-option-tab,
.image-tools-scale-presets button,
.image-tools-split-mode,
.image-tools-shape-type,
.image-tools-grid-layouts button { border-color: #365167; border-radius: 5px; background: #142535; color: #9fb5c7; }
.image-tools-option-tab.active,
.image-tools-scale-presets button.active,
.image-tools-split-mode.active,
.image-tools-shape-type.active,
.image-tools-grid-layouts button.active { border-color: #57d1f7; background: #17465e; color: #d9f8ff; }
.image-tools-canvas-shell { border-color: #375971; border-radius: 9px; background-color: #0a121b; background-image: linear-gradient(rgba(111, 164, 199, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(111, 164, 199, 0.07) 1px, transparent 1px); background-size: 18px 18px; }
.image-tools-canvas-placeholder { color: #829bb0; }
.image-tools-split-bottom { border-top-color: #2b4559; background: #101b26; }
.image-tools-status-bar { border-color: #304b60; background: #0d1822; }
.sprite-lab-preview-canvas { border-color: #36566d; background-color: #0a121a; }
.sprite-lab-preview-canvas.sprite-lab-checker,
.sprite-lab-frame-cell { background-color: #111d29; }
.sprite-lab-preview-empty { color: #829bb0; }
.sprite-lab-preview-card h3,
.sprite-lab-frames-header { color: #d7eafa; }
.sprite-lab-frame-cell { border-color: #344e64; border-radius: 6px; }
.sprite-lab-frame-cell:hover { border-color: var(--accent-blue); }

/* Dialogs and shared status */
.modal-overlay { overscroll-behavior: contain; background: rgba(2, 7, 12, 0.7); backdrop-filter: blur(5px); }
.modal { border: 1px solid #365169; border-radius: 10px; background: #101b27; box-shadow: 0 26px 80px rgba(0, 0, 0, 0.52); }
.modal-head,
.modal-footer { border-color: #2b4358; background: #132130; }
.modal-head h2,
.modal-head h3 { color: #e8f5fb; }
.modal-body { color: #a8bdcc; }
.modal-close { color: #a9bfd0; background: transparent; }
.modal-close:hover:not(:disabled) { color: #fff; background: #263d50; }
.animation-rename-summary,
.animation-rename-row { border-color: #324c61; background: #132130; }
.animation-rename-row.is-changed { border-color: var(--accent-blue); }

@media (max-width: 1100px) {
  .side-nav { width: 62px; align-items: center; padding: 10px 8px; }
  .side-nav-brand { justify-content: center; padding: 0 0 12px; }
  .brand-copy,
  .nav-label,
  .side-nav-local { display: none; }
  .side-nav-top { align-items: center; }
  .side-nav-item { width: 42px; justify-content: center; padding: 0; }
  .side-nav-bottom { margin-left: 0; margin-right: 0; justify-content: center; }
  .side-nav-item:hover .nav-tooltip { display: block; left: 50px; opacity: 1; }
  .workspace-card { grid-template-columns: 102px minmax(0, 1fr); }
  .workspace-card-action { display: none; }
  .replace-hint { display: none !important; }
}

@media (max-width: 840px) {
  .title-bar { padding: 0 12px; }
  .title-bar-actions { max-width: 53%; }
  .workspace-home { padding: 24px 18px; }
  .workspace-home-intro { display: block; }
  .workspace-home-status { margin-top: 16px; }
  .workspace-grid { grid-template-columns: 1fr; }
  #replaceContainer .layout,
  #imageReplaceContainer .layout { min-width: 850px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}