:root {
  color-scheme: dark;
  --bg: #101014;
  --panel: #19191f;
  --panel-2: #202027;
  --panel-3: #292932;
  --border: #34343e;
  --text: #f4f4f7;
  --muted: #9b9ba8;
  --accent: #ff4b6e;
  --accent-2: #ff6b86;
  --danger: #ff5d5d;
  --shadow: 0 18px 50px rgba(0,0,0,.4);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; background:var(--bg); color:var(--text); overflow:hidden; overscroll-behavior:none; }
#app { width:100%; height:100%; }
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.screen { display:none; width:100%; height:100%; }
.screen.active { display:flex; }
.button { border:0; border-radius:12px; padding:11px 16px; font-weight:700; background:var(--panel-3); }
.button.primary { background:var(--accent); color:#fff; }
.button.primary:hover { background:var(--accent-2); }
.button.secondary { border:1px solid var(--border); background:var(--panel); }
.button.compact { padding:9px 14px; }
.icon-button { width:38px; height:38px; border-radius:11px; border:1px solid var(--border); background:var(--panel-2); display:grid; place-items:center; font-size:20px; }
.icon-button:hover, .mini-button:hover { background:var(--panel-3); }
.text-button { border:0; background:none; color:var(--muted); padding:2px 4px; font-size:12px; }
.text-button:hover { color:var(--text); }
.mini-button { width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--panel-2); }
.danger, .danger-text { color:var(--danger) !important; }

/* Gallery */
.gallery-screen {}
#galleryScreen { flex-direction:column; overflow:auto; }
.gallery-header { display:flex; justify-content:space-between; gap:28px; padding:34px clamp(18px, 5vw, 64px) 24px; align-items:flex-end; border-bottom:1px solid var(--border); background:linear-gradient(180deg,#17171d,#111116); }
.gallery-header h1 { margin:4px 0 8px; font-size:clamp(30px,4vw,48px); letter-spacing:-.04em; }
.gallery-header p { margin:0; color:var(--muted); }
.eyebrow { color:var(--accent-2); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.header-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.gallery-main { padding:26px clamp(18px,5vw,64px) 60px; }
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.project-card { background:var(--panel); border:1px solid var(--border); border-radius:18px; overflow:hidden; transition:.18s transform,.18s border-color; position:relative; }
.project-card:hover { transform:translateY(-3px); border-color:#51515f; }
.project-preview { aspect-ratio:1.35; width:100%; display:grid; place-items:center; background-color:#17171d; background-image:linear-gradient(45deg,#23232a 25%,transparent 25%),linear-gradient(-45deg,#23232a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#23232a 75%),linear-gradient(-45deg,transparent 75%,#23232a 75%); background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; border-bottom:1px solid var(--border); }
.project-preview canvas { max-width:82%; max-height:82%; image-rendering:pixelated; box-shadow:0 8px 22px rgba(0,0,0,.32); }
.project-meta { padding:14px 15px 16px; }
.project-meta strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-sub { color:var(--muted); font-size:12px; margin-top:6px; display:flex; justify-content:space-between; }
.project-open { position:absolute; inset:0; background:transparent; border:0; }
.project-card-menu { position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(12,12,15,.72); backdrop-filter:blur(12px); }
.empty-state { min-height:60vh; display:grid; place-items:center; align-content:center; text-align:center; gap:8px; color:var(--muted); }
.empty-state h2 { margin:6px 0 0; color:var(--text); }
.empty-icon { font-size:56px; color:var(--accent); }

/* Editor */
.editor-screen { flex-direction:column; }
.topbar { height:58px; flex:0 0 58px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 10px; background:var(--panel); border-bottom:1px solid var(--border); z-index:20; }
.topbar-left,.topbar-center,.topbar-right { display:flex; align-items:center; gap:8px; }
.topbar-right { justify-content:flex-end; }
.project-name { width:min(32vw,330px); background:transparent; border:1px solid transparent; border-radius:8px; padding:7px 9px; font-weight:700; }
.project-name:focus { outline:none; border-color:var(--border); background:var(--panel-2); }
.save-state { font-size:11px; color:var(--muted); white-space:nowrap; }
.zoom-button { min-width:58px; height:36px; border-radius:10px; border:1px solid var(--border); background:var(--panel-2); }
.editor-layout { flex:1; min-height:0; display:grid; grid-template-columns:74px 1fr 310px; }
.tool-rail { background:var(--panel); border-right:1px solid var(--border); padding:8px; overflow-y:auto; display:flex; flex-direction:column; gap:5px; }
.tool { width:100%; min-height:54px; border:1px solid transparent; border-radius:12px; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--muted); }
.tool span { font-size:23px; line-height:1; }
.tool small { font-size:9px; }
.tool:hover { background:var(--panel-2); color:var(--text); }
.tool.active { color:#fff; background:rgba(255,75,110,.17); border-color:rgba(255,75,110,.38); }
.workspace { position:relative; min-width:0; min-height:0; overflow:hidden; background:#0c0c0f; touch-action:none; }
#viewCanvas { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.canvas-hud { position:absolute; left:10px; bottom:10px; display:flex; gap:8px; pointer-events:none; }
.canvas-hud span { background:rgba(18,18,22,.76); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08); padding:5px 8px; border-radius:8px; font-size:11px; color:#d2d2d8; }
.drop-hint { position:absolute; inset:16px; border:2px dashed var(--accent); border-radius:18px; background:rgba(255,75,110,.12); display:grid; place-items:center; font-weight:800; font-size:20px; pointer-events:none; }
.right-panel { min-width:0; background:var(--panel); border-left:1px solid var(--border); overflow-y:auto; }
.panel-section { padding:14px; border-bottom:1px solid var(--border); }
.section-title { display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:13px; margin-bottom:12px; }
.section-title.minor { margin:12px 0 7px; font-size:11px; color:var(--muted); }
.color-row { display:flex; gap:10px; align-items:center; margin-bottom:13px; }
.color-stack { width:62px; height:46px; position:relative; flex:0 0 auto; }
.color-swatch { position:absolute; width:34px; height:34px; border-radius:10px; border:2px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.35); }
.primary-swatch { left:0; top:0; z-index:2; background:#111; }
.secondary-swatch { left:22px; top:12px; z-index:1; background:#fff; }
.swap-colors { position:absolute; left:42px; top:-4px; z-index:3; width:22px; height:22px; border:0; border-radius:50%; background:var(--panel-3); font-size:12px; }
#colorInput { width:40px; height:38px; border:0; padding:0; background:transparent; }
.hex-input { min-width:0; flex:1; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:9px; text-transform:uppercase; }
.control-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; color:var(--muted); font-size:12px; margin:10px 0; }
.control-row input[type=range] { min-width:0; accent-color:var(--accent); }
.control-row output { min-width:44px; text-align:right; color:var(--text); }
.segmented { display:flex; background:var(--panel-2); padding:3px; border-radius:11px; gap:3px; }
.segmented button { flex:1; border:0; border-radius:8px; padding:7px 8px; background:transparent; color:var(--muted); font-size:12px; }
.segmented button.active { background:var(--panel-3); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.2); }
.toggle-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.toggle-grid label,.inline-check,.onion-label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; }
.toggle-grid label { border:1px solid var(--border); border-radius:10px; padding:8px; background:var(--panel-2); }
.toggle-grid input,.inline-check input,.onion-label input { accent-color:var(--accent); }
.palette { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; }
.palette-color { aspect-ratio:1; min-width:20px; border:2px solid rgba(255,255,255,.16); border-radius:7px; padding:0; }
.palette-color:hover { transform:scale(1.08); }
.layers-list { display:flex; flex-direction:column-reverse; gap:6px; max-height:260px; overflow:auto; }
.layer-item { display:grid; grid-template-columns:28px 42px 1fr auto; align-items:center; gap:7px; padding:7px; border:1px solid var(--border); border-radius:11px; background:var(--panel-2); }
.layer-item.active { border-color:var(--accent); background:rgba(255,75,110,.1); }
.layer-visible { width:28px; height:28px; border:0; border-radius:8px; background:transparent; }
.layer-thumb { width:42px; height:42px; image-rendering:pixelated; background-color:#18181d; background-image:linear-gradient(45deg,#25252d 25%,transparent 25%),linear-gradient(-45deg,#25252d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#25252d 75%),linear-gradient(-45deg,transparent 75%,#25252d 75%); background-size:10px 10px; background-position:0 0,0 5px,5px -5px,-5px 0; border-radius:7px; }
.layer-name { min-width:0; background:transparent; border:1px solid transparent; border-radius:6px; padding:5px; font-size:12px; }
.layer-name:focus { outline:none; border-color:var(--border); background:var(--panel); }
.layer-delete-small { border:0; background:transparent; color:var(--muted); }

.timeline { flex:0 0 112px; min-height:112px; display:grid; grid-template-columns:115px 1fr auto; gap:10px; padding:10px; background:var(--panel); border-top:1px solid var(--border); }
.timeline-title { display:flex; flex-direction:column; gap:8px; font-size:12px; font-weight:800; justify-content:center; }
.frames-list { display:flex; gap:8px; overflow-x:auto; align-items:center; }
.frame-item { position:relative; flex:0 0 74px; border:2px solid var(--border); border-radius:10px; padding:4px; background:var(--panel-2); }
.frame-item.active { border-color:var(--accent); }
.frame-thumb { width:62px; height:62px; display:block; image-rendering:pixelated; background:#15151a; border-radius:6px; }
.frame-index { position:absolute; left:5px; top:5px; font-size:9px; background:rgba(0,0,0,.65); border-radius:5px; padding:2px 4px; }
.frame-duration { width:100%; border:0; background:transparent; color:var(--muted); font-size:9px; text-align:center; margin-top:2px; }
.timeline-actions { display:flex; flex-direction:column; gap:6px; justify-content:center; }

/* Dialogs */
.modal { width:min(92vw,460px); border:1px solid var(--border); border-radius:18px; padding:0; background:var(--panel); color:var(--text); box-shadow:var(--shadow); }
.modal::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(5px); }
.modal form { margin:0; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.modal-header h2 { margin:0; font-size:18px; }
.modal-body { padding:16px; display:flex; flex-direction:column; gap:13px; }
.modal-body label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12px; }
.modal-body input:not([type=checkbox]):not([type=color]), .modal-body select { width:100%; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); padding:10px; }
.two-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.preset-row { display:flex; gap:7px; }
.preset-row button { flex:1; border:1px solid var(--border); background:var(--panel-2); border-radius:9px; padding:7px; }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; padding:14px 16px; border-top:1px solid var(--border); }
.menu-modal { width:min(92vw,390px); }
.menu-list { display:flex; flex-direction:column; padding:8px; }
.menu-list button { text-align:left; padding:13px 12px; border:0; border-radius:9px; background:transparent; }
.menu-list button:hover { background:var(--panel-2); }
.export-pane { display:none; }
.export-pane.active { display:flex; flex-direction:column; gap:12px; }
.help-text { margin:0; color:var(--muted); line-height:1.5; font-size:13px; }
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:100; background:#2c2c35; border:1px solid #454550; padding:10px 14px; border-radius:11px; box-shadow:var(--shadow); font-size:13px; }

@media (max-width: 900px) {
  .topbar { grid-template-columns:1fr auto; }
  .topbar-center { display:none; }
  .editor-layout { grid-template-columns:1fr; grid-template-rows:1fr 188px 68px; }
  .workspace { grid-row:1; }
  .right-panel { grid-row:2; height:188px; border-left:0; border-top:1px solid var(--border); display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; }
  .panel-section { min-width:285px; border-bottom:0; border-right:1px solid var(--border); scroll-snap-align:start; overflow-y:auto; }
  .tool-rail { position:static; grid-row:3; height:68px; z-index:15; flex-direction:row; overflow-x:auto; overflow-y:hidden; border-right:0; border-top:1px solid var(--border); padding:6px 8px; }
  .tool { min-width:62px; width:62px; min-height:54px; }
  .timeline { flex-basis:104px; min-height:104px; grid-template-columns:76px 1fr auto; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  .timeline-title { font-size:11px; }
  .frame-item { flex-basis:66px; }
  .frame-thumb { width:54px; height:54px; }
  .topbar-right #playBtn { display:none; }
  .project-name { width:36vw; }
}
@media (max-width: 640px) {
  .gallery-header { align-items:flex-start; flex-direction:column; }
  .header-actions { justify-content:flex-start; width:100%; }
  .header-actions .button { flex:1; min-width:130px; }
  .topbar { padding:0 6px; }
  .save-state { display:none; }
  .project-name { width:31vw; padding-left:4px; }
  .topbar-right { gap:5px; }
  .topbar-right .icon-button, .topbar-left .icon-button { width:34px; height:34px; }
  .button.compact { padding:8px 10px; }
  .editor-layout { grid-template-rows:1fr 164px 68px; }
  .right-panel { height:164px; }
  .panel-section { min-width:270px; padding:11px; }
  .timeline { grid-template-columns:62px 1fr 66px; gap:5px; }
  .onion-label { flex-direction:column; align-items:flex-start; gap:2px; }
  .canvas-hud { bottom:10px; }
}
@media (display-mode: standalone) {
  .topbar { padding-top:env(safe-area-inset-top); height:calc(58px + env(safe-area-inset-top)); flex-basis:calc(58px + env(safe-area-inset-top)); }
}

/* v2 additions */
.selection-bar {
  position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:18;
  display:flex; align-items:center; gap:4px; padding:6px;
  max-width:calc(100% - 24px); overflow-x:auto;
  border:1px solid rgba(255,255,255,.12); border-radius:13px;
  background:rgba(25,25,31,.9); backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.selection-bar button { flex:0 0 34px; width:34px; height:32px; border:0; border-radius:8px; background:var(--panel-3); }
.selection-bar button:hover { background:#383844; }
.selection-bar .selection-primary { background:var(--accent); }
.selection-bar .selection-danger { color:var(--danger); }
.selection-divider { width:1px; height:22px; background:var(--border); margin:0 2px; flex:0 0 auto; }
.brush-presets { display:flex; flex-wrap:wrap; gap:6px; }
.brush-preset { cursor:pointer; display:flex; align-items:center; gap:6px; max-width:100%; padding:6px 8px; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); font-size:11px; }
.brush-preset span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:105px; }
.brush-preset b { width:15px; height:15px; display:inline-block; border-radius:4px; border:1px solid rgba(255,255,255,.2); flex:0 0 auto; }
.brush-preset .preset-remove { border:0; background:transparent; color:var(--muted); padding:0; margin-left:2px; }
.dither-control select { min-width:0; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); padding:5px; }
.layer-item { grid-template-columns:28px 42px 1fr 28px auto; }
.layer-lock { width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:var(--muted); }
.layer-lock.active { color:var(--accent-2); background:rgba(255,75,110,.12); }
.timeline-actions { display:grid; grid-template-columns:repeat(2,30px); align-content:center; gap:5px; }
.frame-item[draggable="true"] { cursor:grab; }
.frame-item.dragging { opacity:.45; }
.frame-item.drag-over { border-color:#fff; }
.palette-color { position:relative; }
.palette-color.removable::after { content:'×'; position:absolute; inset:-5px -5px auto auto; width:14px; height:14px; display:grid; place-items:center; border-radius:50%; background:#2d2d35; color:#fff; font-size:9px; }

@media (max-width: 900px) {
  .selection-bar { top:8px; }
  .timeline-actions { grid-template-columns:30px 30px; }
}
@media (max-width: 640px) {
  .selection-bar { left:8px; right:8px; transform:none; justify-content:flex-start; }
  .selection-bar button { flex-basis:32px; width:32px; }
  .canvas-hud { max-width:calc(100% - 20px); overflow:hidden; }
  .canvas-hud span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* v3 storage, recovery and deployment readiness */
.gallery-storage-line {
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}
.gallery-storage-line span:first-child { color:var(--text); }
.storage-warning,
.update-banner {
  margin:14px clamp(18px,5vw,64px) 0;
  border:1px solid var(--border);
  border-radius:12px;
  padding:11px 13px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:13px;
}
.storage-warning.warning {
  border-color:rgba(255,184,77,.5);
  background:rgba(255,184,77,.08);
  color:#ffd79a;
}
.update-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-color:rgba(255,75,110,.45);
  background:rgba(255,75,110,.09);
  color:var(--text);
}
.wide-modal { width:min(94vw,640px); }
.storage-details dl {
  display:grid;
  gap:8px;
  margin:0;
}
.storage-details dl div {
  display:grid;
  grid-template-columns:minmax(120px, .7fr) minmax(0, 1.3fr);
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--border);
}
.storage-details dt { color:var(--muted); }
.storage-details dd { margin:0; overflow-wrap:anywhere; }
.storage-actions { border-top:1px solid var(--border); }
.recovery-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:min(58vh,520px);
  overflow:auto;
  padding:14px 16px;
}
.recovery-empty {
  padding:34px 18px;
  text-align:center;
  color:var(--muted);
}
.recovery-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel-2);
}
.recovery-item strong,
.recovery-item small { display:block; }
.recovery-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recovery-item small { margin-top:4px; color:var(--muted); }
.recovery-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.recovery-actions button {
  border:1px solid var(--border);
  border-radius:8px;
  padding:7px 9px;
  background:var(--panel-3);
  color:var(--text);
}
.recovery-actions .danger-text { color:var(--danger); }
.project-card-menu.trash-indicator { color:#ffd79a; }
.save-state.error { color:var(--danger); }
.save-state.saving { color:#ffd79a; }
.save-state.saved { color:#8fe3a7; }

@media (max-width: 640px) {
  .gallery-storage-line { flex-direction:column; gap:4px; }
  .update-banner { align-items:flex-start; flex-direction:column; }
  .update-banner .button { width:100%; }
  .storage-details dl div { grid-template-columns:1fr; gap:3px; }
  .recovery-item { grid-template-columns:1fr; }
  .recovery-actions { justify-content:flex-start; }
}

/* v4 selection and transformation tools */
.selection-size-label {
  flex:0 0 auto;
  min-width:48px;
  padding:0 6px;
  color:var(--muted);
  font-size:11px;
  text-align:center;
  white-space:nowrap;
}
.selection-options-section { min-width:285px; }
.selection-operation button { min-width:0; padding-inline:6px; }
.selection-toggle-grid { grid-template-columns:1fr; }
.selection-actions-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:10px;
}
.selection-actions-grid button {
  min-width:0;
  border:1px solid var(--border);
  border-radius:9px;
  padding:8px 7px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:11px;
}
.selection-actions-grid button:hover { color:var(--text); background:var(--panel-3); }
.selection-help {
  margin:10px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}

@media (max-width:900px) {
  .selection-options-section { min-width:300px; }
}

@media (max-width:640px) {
  .selection-size-label { position:sticky; right:0; background:rgba(25,25,31,.94); }
  .selection-options-section { min-width:285px; }
}

/* v5 professional brushes and palette tools */
.brush-shape-segmented { flex-wrap:wrap; }
.brush-shape-segmented button { flex:1 1 calc(50% - 3px); }
.custom-brush-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) 34px 34px;
  gap:6px;
  align-items:center;
}
.custom-brush-controls select,
.dither-control select {
  width:100%;
  min-width:0;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel-2);
  color:var(--text);
  padding:6px 7px;
}
.advanced-brush-section .control-row { margin-top:8px; }
.advanced-toggle-grid { grid-template-columns:1fr 1fr; }
.compact-check,
.palette-lock-check { margin-top:8px; color:var(--muted); font-size:12px; }
.palette-lock-check { padding-top:7px; border-top:1px solid var(--border); }
.custom-brush-modal { width:min(94vw,560px); }
.custom-brush-grid {
  --brush-grid-size:5;
  display:grid;
  grid-template-columns:repeat(var(--brush-grid-size),1fr);
  width:min(76vw,360px);
  aspect-ratio:1;
  margin:2px auto;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:#0d0d11;
  touch-action:none;
  user-select:none;
}
.custom-brush-cell {
  min-width:0;
  min-height:0;
  border:0;
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#1d1d24;
  padding:0;
}
.custom-brush-cell.active { background:var(--accent); }
.custom-brush-cell.center { box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.custom-brush-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.custom-brush-actions button {
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel-2);
  color:var(--text);
  padding:8px 5px;
  font-size:12px;
}
.custom-brush-footer { justify-content:space-between; }
.brush-preset em { color:var(--muted); font-style:normal; font-size:10px; }

@media (max-width:640px) {
  .advanced-toggle-grid { grid-template-columns:1fr; }
  .custom-brush-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .custom-brush-grid { width:min(82vw,330px); }
}

/* v6: advanced layers */
.layers-list { flex-direction:column; }
.layer-item { grid-template-columns:24px 28px 42px minmax(0,1fr) 28px auto; position:relative; }
.layer-item.selected { box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.layer-item.active.selected { box-shadow:inset 0 0 0 1px var(--accent); }
.layer-select { width:20px; height:20px; margin:0; accent-color:var(--accent); }
.layer-main { min-width:0; display:flex; flex-direction:column; gap:2px; }
.layer-main .layer-name { width:100%; }
.layer-meta { min-height:15px; display:flex; flex-wrap:wrap; gap:4px; color:var(--muted); font-size:9px; }
.layer-badge { display:inline-flex; align-items:center; min-height:15px; padding:1px 5px; border:1px solid var(--border); border-radius:999px; background:var(--panel); }
.layer-badge.clip { color:var(--accent-2); }
.layer-badge.alpha { color:var(--accent); }
.layer-group { display:flex; flex-direction:column; gap:5px; }
.layer-group-children { display:flex; flex-direction:column; gap:5px; padding-left:14px; border-left:2px solid var(--border); }
.layer-group.collapsed .layer-group-children { display:none; }
.layer-group-header { display:grid; grid-template-columns:28px 28px minmax(0,1fr) auto; align-items:center; gap:6px; padding:6px 7px; border:1px solid var(--border); border-radius:10px; background:var(--panel-3); }
.layer-group-header input { min-width:0; border:1px solid transparent; border-radius:6px; padding:5px; background:transparent; color:var(--text); font-size:12px; }
.layer-group-header input:focus { border-color:var(--border); outline:none; background:var(--panel); }
.layer-group-count { color:var(--muted); font-size:10px; }
.layer-group-button { width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:var(--muted); }
.layer-group-button:hover { background:var(--panel-2); color:var(--text); }
.layer-blend-row { grid-template-columns:auto 1fr; }
.layer-blend-row select { min-width:0; border:1px solid var(--border); border-radius:8px; padding:6px 8px; background:var(--panel-2); color:var(--text); }
.layer-toggle-grid { margin-top:6px; }
.layer-selection-help { margin:7px 0 0; color:var(--muted); font-size:10px; line-height:1.35; }

@media (max-width: 620px) {
  .layer-item { grid-template-columns:22px 26px 38px minmax(0,1fr) 26px auto; gap:5px; padding:6px; }
  .layer-thumb { width:38px; height:38px; }
  .layer-group-children { padding-left:8px; }
}

/* v7 advanced animation and timeline */
.timeline {
  flex:0 0 154px;
  min-height:154px;
  grid-template-columns:190px minmax(0,1fr) 74px;
  align-items:stretch;
}
.timeline-title { justify-content:flex-start; gap:7px; min-width:0; }
.timeline-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.timeline-title-row .text-button { font-size:10px; }
.timeline-field { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px; color:var(--muted); font-size:10px; }
.timeline-field select,
.timeline-playback-row select {
  min-width:0;
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel-2);
  color:var(--text);
  padding:5px 7px;
  font-size:10px;
}
.timeline-playback-row { display:grid; grid-template-columns:1fr 30px; gap:5px; }
.timeline-center { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:5px; }
.timeline-range-label { color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frames-list { align-items:flex-start; padding-bottom:3px; }
.frame-item { flex-basis:78px; transition:border-color .12s,opacity .12s,background .12s; }
.frame-item.selected { box-shadow:inset 0 0 0 1px var(--accent); background:rgba(255,75,110,.11); }
.frame-item.active { border-color:#fff; }
.frame-item.active.selected { border-color:var(--accent); }
.frame-item.out-of-range { opacity:.48; }
.frame-select {
  position:absolute;
  z-index:3;
  right:7px;
  top:7px;
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--accent);
}
.frame-tag-strip { height:4px; margin:4px 2px 0; border-radius:3px; background:transparent; display:flex; gap:1px; overflow:hidden; }
.frame-tag-strip span { flex:1 1 0; min-width:2px; border-radius:2px; }
.frame-event-badge { position:absolute; z-index:3; left:6px; top:6px; display:grid; place-items:center; min-width:16px; height:16px; padding:0 3px; border-radius:8px; border:1px solid rgba(255,255,255,.75); background:var(--event-color,#ffd166); color:#16181f; font-size:9px; font-weight:900; line-height:1; box-shadow:0 1px 4px rgba(0,0,0,.35); }
.frame-event-badge.hidden { display:none; }
.frame-duration { border:1px solid transparent; border-radius:5px; padding:1px 2px; }
.frame-duration:focus { border-color:var(--border); background:var(--panel); outline:none; }
.timeline-actions { grid-template-columns:repeat(2,32px); align-content:start; padding-top:19px; }
.export-tabs { display:flex; overflow-x:auto; justify-content:flex-start; }
.export-tabs button { flex:0 0 auto; min-width:74px; }
.animation-export-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px; border:1px solid var(--border); border-radius:11px; background:var(--panel-2); }
.animation-export-options label { margin:0; }
.animation-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.animation-subsection { display:flex; flex-direction:column; gap:10px; padding-top:4px; }
.onion-settings-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.onion-settings-grid label:has(input[type=color]) input { width:100%; min-height:40px; }
.animation-check { align-self:end; min-height:40px; padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.animation-tags-list,
.animation-events-list { display:flex; flex-direction:column; gap:8px; }
.animation-tag-row {
  display:grid;
  grid-template-columns:28px minmax(110px,1fr) 66px 66px minmax(120px,.8fr) 34px;
  align-items:end;
  gap:7px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--panel-2);
  margin-left:min(calc(var(--tag-depth,0) * 18px),72px);
}
.animation-event-row {
  display:grid;
  grid-template-columns:28px minmax(120px,1fr) minmax(120px,1fr) 72px 34px;
  align-items:end;
  gap:7px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--panel-2);
}
.animation-event-row label { gap:3px; }
.animation-event-row input[type=color] { width:28px; height:36px; padding:0; border:0; background:transparent; }
.animation-event-row input[type=text],
.animation-event-row input[type=number],
.animation-tag-row select { padding:8px !important; }
.animation-tag-row.active { border-color:var(--accent); }
.animation-tag-row label { gap:3px; }
.animation-tag-row input[type=color] { width:28px; height:36px; padding:0; border:0; background:transparent; }
.animation-tag-row input[type=text],
.animation-tag-row input[type=number] { padding:8px !important; }
.animation-tag-delete { height:36px; border:0; border-radius:8px; color:var(--danger); background:transparent; }
.animation-tag-empty { padding:13px; border:1px dashed var(--border); border-radius:11px; color:var(--muted); text-align:center; }
.frame-menu-body { padding-bottom:5px; }
.frame-duration-bulk { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end; }
.frame-duration-bulk label { margin:0; }

@media (max-width:900px) {
  .timeline { flex-basis:132px; min-height:132px; grid-template-columns:126px minmax(0,1fr) 70px; gap:6px; }
  .timeline-title { gap:4px; }
  .timeline-title-row .text-button { max-width:68px; overflow:hidden; text-overflow:ellipsis; }
  .timeline-field { grid-template-columns:1fr; gap:2px; }
  .timeline-field > span { display:none; }
  .onion-label { font-size:10px; }
  .frame-item { flex-basis:68px; }
  .frame-thumb { width:54px; height:54px; }
  .timeline-actions { padding-top:16px; }
}
@media (max-width:640px) {
  .timeline { grid-template-columns:92px minmax(0,1fr) 66px; min-height:128px; flex-basis:128px; padding:7px; }
  .timeline-title-row { align-items:flex-start; flex-direction:column; gap:1px; }
  .timeline-title-row .text-button { padding:0; }
  .timeline-playback-row { grid-template-columns:1fr 28px; }
  .timeline-playback-row select { padding:4px; }
  .timeline-title .onion-label { flex-direction:row; align-items:center; white-space:nowrap; }
  .timeline-range-label { display:none; }
  .timeline-center { grid-template-rows:1fr; }
  .frame-item { flex-basis:64px; padding:3px; }
  .frame-thumb { width:52px; height:52px; }
  .frame-select { right:5px; top:5px; width:18px; height:18px; }
  .animation-settings-grid,
  .onion-settings-grid,
  .animation-export-options { grid-template-columns:1fr; }
  .animation-tag-row { grid-template-columns:28px minmax(0,1fr) 54px 54px 32px; gap:5px; margin-left:min(calc(var(--tag-depth,0) * 10px),30px); }
  .animation-tag-row label { font-size:10px; }
  .animation-tag-row label:has(select) { grid-column:2 / 5; }
  .animation-tag-row .animation-tag-delete { grid-column:5; grid-row:1; }
  .animation-event-row { grid-template-columns:28px minmax(0,1fr) 58px 32px; gap:5px; }
  .animation-event-row label:nth-of-type(2) { grid-column:2 / 4; }
  .animation-event-row input[type=text],
  .animation-event-row input[type=number],
  .animation-tag-row input[type=text],
  .animation-tag-row input[type=number],
  .animation-tag-row select { padding:6px !important; }
}

/* v8 game and tileset tools */
.game-tools-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.game-tools-section{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(255,255,255,.025)}
.game-tools-section:last-child{grid-column:1/-1}
.game-tools-grid,.offset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.offset-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}
.offset-grid .button{min-height:42px}
.game-preset-row,.minecraft-project-presets{margin-top:10px;flex-wrap:wrap}
.game-preset-row button,.minecraft-project-presets button{min-height:38px}
@media (max-width:780px){
  .game-tools-body{grid-template-columns:1fr}
  .game-tools-section:last-child{grid-column:auto}
  .offset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:440px){
  .game-tools-grid,.offset-grid{grid-template-columns:1fr 1fr}
  .game-tools-modal .modal-body{padding:12px}
}

/* v9 interface customization, onboarding and memory-aware history */
.user-panel-hidden { display:none !important; }
.section-note { color:var(--muted); font-size:11px; font-weight:500; }
.show-ui-button {
  position:fixed;
  z-index:80;
  right:calc(12px + env(safe-area-inset-right));
  top:calc(12px + env(safe-area-inset-top));
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  padding:9px 12px;
  background:rgba(25,25,31,.88);
  color:var(--text);
  backdrop-filter:blur(12px);
}
body.ui-hidden .topbar,
body.ui-hidden .tool-rail,
body.ui-hidden .right-panel,
body.ui-hidden .timeline { display:none !important; }
body.ui-hidden .editor-layout { grid-template-columns:1fr !important; grid-template-rows:1fr !important; }
body.ui-hidden .workspace { grid-column:1 !important; grid-row:1 !important; }
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after { scroll-behavior:auto !important; transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; }
body.hide-tool-labels .tool small { display:none; }
body.hide-tool-labels .tool { min-height:44px; }
body.compact-ui .editor-layout { grid-template-columns:60px 1fr 280px; }
body.compact-ui .tool-rail { padding:5px; gap:3px; }
body.compact-ui .tool { min-height:44px; border-radius:9px; }
body.compact-ui .tool span { font-size:20px; }
body.compact-ui .panel-section { padding:10px; }
body.compact-ui .section-title { margin-bottom:8px; }
body.compact-ui .control-row { margin:7px 0; }
body.compact-ui .timeline { flex-basis:128px; min-height:128px; }

@media (min-width:901px) {
  body.inspector-left .editor-layout { grid-template-columns:310px 74px 1fr; }
  body.inspector-left .right-panel { grid-column:1; grid-row:1; border-left:0; border-right:1px solid var(--border); }
  body.inspector-left .tool-rail { grid-column:2; grid-row:1; border-right:1px solid var(--border); }
  body.inspector-left .workspace { grid-column:3; grid-row:1; }
  body.inspector-left.compact-ui .editor-layout { grid-template-columns:280px 60px 1fr; }
}

.interface-dialog-body { gap:18px; max-height:min(68vh,690px); overflow:auto; }
.interface-section { display:flex; flex-direction:column; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.interface-section:last-child { border-bottom:0; padding-bottom:0; }
.interface-options-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.interface-options-grid > label { min-width:0; }
.interface-options-grid .inline-check { min-height:43px; padding:9px 10px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.panel-settings-list { display:flex; flex-direction:column; gap:7px; }
.panel-setting-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 9px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.panel-setting-row .inline-check { color:var(--text); }
.panel-order-actions { display:flex; gap:5px; }
.panel-order-actions button { width:31px; height:31px; border:1px solid var(--border); border-radius:8px; background:var(--panel-3); }
.panel-order-actions button:disabled { opacity:.3; cursor:default; }
.interface-action-row { display:flex; flex-wrap:wrap; gap:8px; }

.shortcuts-dialog-body { max-height:min(68vh,690px); overflow:auto; }
.shortcut-capture-hint { padding:10px 12px; border:1px solid rgba(255,75,110,.5); border-radius:10px; background:rgba(255,75,110,.1); color:var(--text); font-size:12px; }
.shortcuts-list { display:flex; flex-direction:column; gap:6px; }
.shortcut-category { position:sticky; top:-1px; z-index:1; padding:8px 2px 5px; background:var(--panel); color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.shortcut-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,auto); align-items:center; gap:10px; padding:7px 8px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.shortcut-row.capturing { border-color:var(--accent); background:rgba(255,75,110,.1); }
.shortcut-row > span { min-width:0; font-size:12px; }
.shortcut-row button { min-width:120px; border:1px solid var(--border); border-radius:8px; padding:7px 9px; background:var(--panel-3); font-size:11px; white-space:nowrap; }

.help-modal { width:min(94vw,720px); }
.help-tabs { display:flex; gap:4px; overflow-x:auto; padding:8px 12px; border-bottom:1px solid var(--border); }
.help-tabs button { flex:0 0 auto; border:0; border-radius:9px; padding:8px 11px; background:transparent; color:var(--muted); }
.help-tabs button.active { background:var(--panel-3); color:var(--text); }
.help-dialog-body { min-height:330px; max-height:min(62vh,620px); overflow:auto; }
.help-panel { display:none; }
.help-panel.active { display:block; }
.help-panel h3 { margin:0 0 12px; font-size:17px; }
.help-panel p { color:var(--muted); line-height:1.55; }
.help-steps,.help-list { margin:0; padding-left:22px; color:var(--muted); line-height:1.6; }
.help-steps li,.help-list li { margin:8px 0; }
.help-steps b { color:var(--text); }
.help-callout { margin-top:16px; padding:12px; border:1px solid rgba(255,184,77,.38); border-radius:11px; background:rgba(255,184,77,.07); color:#ffe0ac; line-height:1.5; }
.help-definition-list { display:grid; gap:8px; margin:0; }
.help-definition-list div { display:grid; grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr); gap:12px; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.help-definition-list dt { font-weight:700; }
.help-definition-list dd { margin:0; color:var(--muted); line-height:1.45; }
.help-shortcuts-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:14px; }
.help-shortcuts-list > div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 9px; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); font-size:11px; }
kbd { border:1px solid var(--border); border-bottom-width:2px; border-radius:6px; padding:3px 6px; background:var(--panel-3); color:var(--text); font:inherit; white-space:nowrap; }
.onboarding-actions { justify-content:space-between; align-items:center; }

@media (max-width:900px) {
  body.compact-ui .editor-layout,
  body.inspector-left .editor-layout,
  body.inspector-left.compact-ui .editor-layout { grid-template-columns:1fr; grid-template-rows:1fr 164px 62px; }
  body.inspector-left .right-panel,
  body.inspector-left .tool-rail,
  body.inspector-left .workspace { grid-column:auto; }
  body.inspector-left .workspace { grid-row:1; }
  body.inspector-left .right-panel { grid-row:2; border-right:0; }
  body.inspector-left .tool-rail { grid-row:3; }
  body.compact-ui .tool { min-width:54px; width:54px; }
}
@media (max-width:640px) {
  .topbar-right #focusModeBtn,.topbar-right #helpBtn { display:none; }
  .interface-options-grid,.help-shortcuts-list { grid-template-columns:1fr; }
  .panel-setting-row { padding:7px; }
  .shortcut-row { grid-template-columns:minmax(0,1fr) 105px; }
  .shortcut-row button { min-width:105px; overflow:hidden; text-overflow:ellipsis; }
  .help-definition-list div { grid-template-columns:1fr; gap:4px; }
  .onboarding-actions { align-items:stretch; flex-direction:column; }
  .show-ui-button { top:auto; bottom:calc(12px + env(safe-area-inset-bottom)); }
}
.interface-modal,
.shortcuts-modal,
.help-modal { max-height:calc(100dvh - 24px); overflow:hidden; }
.interface-modal form,
.shortcuts-modal form,
.help-modal form { display:flex; flex-direction:column; max-height:calc(100dvh - 24px); }
.interface-modal .modal-body,
.shortcuts-modal .modal-body,
.help-modal .modal-body { flex:1; min-height:0; max-height:none; }

.performance-details {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.performance-details b { color: var(--text); font-weight: 600; }
.performance-warnings {
  margin-top: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 190, 75, .42);
  border-radius: 10px;
  background: rgba(255, 190, 75, .08);
  color: #ffd99a;
  font-size: 13px;
  line-height: 1.45;
}
.performance-warnings ul { margin: 0; padding-left: 18px; }
.performance-warnings.hidden { display: none; }

/* v14: reference images */
.references-list { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; margin-bottom:10px; }
.reference-item { display:grid; grid-template-columns:28px 42px minmax(0,1fr) 28px; align-items:center; gap:7px; padding:7px; border:1px solid var(--border); border-radius:11px; background:var(--panel-2); }
.reference-item.active { border-color:var(--accent); background:rgba(255,75,110,.1); }
.reference-item-visibility, .reference-item-lock { width:28px; height:28px; border:0; border-radius:7px; background:transparent; color:var(--muted); }
.reference-item-visibility:hover, .reference-item-lock:hover { background:var(--panel-3); color:var(--text); }
.reference-thumb { width:42px; height:42px; border-radius:8px; object-fit:cover; image-rendering:auto; background:repeating-conic-gradient(#32323a 0 25%,#24242b 0 50%) 50%/10px 10px; border:1px solid var(--border); }
.reference-item-info { min-width:0; display:flex; flex-direction:column; gap:2px; }
.reference-item-info strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; }
.reference-item-info small { color:var(--muted); font-size:11px; }
.reference-controls { display:flex; flex-direction:column; gap:9px; }
.reference-name-label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:12px; }
.reference-name-label input, .reference-position-grid input { width:100%; min-width:0; }
.reference-position-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.reference-position-grid label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.reference-toggle-grid { grid-template-columns:1fr 1fr; }
.reference-toggle-grid label:last-child { grid-column:1 / -1; }
.reference-actions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.reference-actions-grid button { min-height:34px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); color:var(--text); }
.reference-actions-grid button:hover { background:var(--panel-3); }
#referenceEditToggle.active { color:var(--accent); border-color:var(--accent); background:rgba(255,75,110,.12); }
.reference-canvas-active { cursor:move; }

@media (max-width: 760px) {
  .references-list { max-height:190px; }
  .reference-item { grid-template-columns:26px 38px minmax(0,1fr) 26px; gap:5px; padding:6px; }
  .reference-thumb { width:38px; height:38px; }
}

/* v15: interactive reference transform handles */
.reference-canvas-active { touch-action:none; }
.reference-section .help-text { line-height:1.45; }
@media (pointer: coarse) {
  #referenceEditToggle { min-width:38px; min-height:38px; }
}

/* v16: project-wide geometry controls */
.project-transform-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.project-transform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.project-transform-grid button{min-height:42px}
.project-transform-grid .wide-action{grid-column:1/-1}

/* v17: блокировка рабочего места на время тяжёлой геометрической операции */
body.geometry-busy::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100000;
  cursor: progress;
  background: rgba(0, 0, 0, 0.001);
}

/* v18: блокировка интерфейса на время тяжёлого квантования */
body.raster-busy::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100000;
  cursor: progress;
  background: rgba(0, 0, 0, 0.001);
}
.menu-field { display:grid; gap:6px; padding:6px 0; }
.menu-field select { width:100%; }

/* v20 environment diagnostics */
.diagnostics-dialog-body{display:grid;gap:14px}.diagnostics-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}.diagnostics-overall{font-weight:700}.diagnostics-results{display:grid;gap:8px}.diagnostics-empty{padding:18px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);text-align:center}.diagnostics-row{display:grid;grid-template-columns:auto minmax(130px,.8fr) minmax(180px,1.7fr);align-items:start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.diagnostics-status{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.diagnostics-status.pass{background:rgba(35,180,95,.16);color:#31c878}.diagnostics-status.warn{background:rgba(255,174,40,.16);color:#f1aa37}.diagnostics-status.fail{background:rgba(235,74,74,.16);color:#ef6565}.diagnostics-status.info{background:rgba(90,145,255,.16);color:#76a8ff}.diagnostics-label{font-weight:650}.diagnostics-detail{color:var(--muted);overflow-wrap:anywhere}.diagnostics-note{border:1px solid var(--border);border-radius:12px;padding:10px 12px}.diagnostics-note summary{cursor:pointer;font-weight:650}.diagnostics-actions{flex-wrap:wrap}.diagnostics-running #runDiagnosticsBtn{pointer-events:none;opacity:.65}.diagnostics-overall.pass{color:#31c878}.diagnostics-overall.warn{color:#f1aa37}.diagnostics-overall.fail{color:#ef6565}.diagnostics-overall.info{color:#76a8ff}
@media (max-width:640px){.diagnostics-row{grid-template-columns:auto 1fr}.diagnostics-detail{grid-column:1/-1;padding-left:0}.diagnostics-actions .button{flex:1 1 140px}}

/* v21: professional layer groups */
.layer-group-header{grid-template-columns:28px 28px minmax(0,1fr) auto 28px}
.layer-group.locked>.layer-group-header{border-color:color-mix(in srgb,var(--accent) 38%,var(--border));background:color-mix(in srgb,var(--panel-3) 88%,var(--accent) 12%)}
.layer-group-lock.active{color:var(--accent)}
.layer-group-controls{display:grid;grid-template-columns:minmax(110px,.85fr) minmax(130px,1.15fr);gap:7px;padding:0 7px 2px 68px;align-items:center}
.layer-group-controls select{min-width:0;height:30px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--text);font-size:11px;padding:3px 6px}
.layer-group-opacity{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:6px;align-items:center}
.layer-group-opacity input{min-width:0;width:100%}
.layer-group-opacity output{font-size:10px;color:var(--muted);text-align:right}
.layer-group.collapsed .layer-group-controls{display:none}
.layer-item.group-locked{opacity:.78}
.layer-badge.group-lock{color:var(--accent)}
@media(max-width:760px){.layer-group-header{grid-template-columns:28px 28px minmax(0,1fr) auto 28px}.layer-group-controls{grid-template-columns:1fr;padding-left:8px}.layer-group-opacity{min-height:34px}}

/* v22: layer and group masks */
.mask-edit-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 18;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 28px);
  padding: 7px 9px;
  border: 1px solid rgba(125, 211, 252, .65);
  border-radius: 10px;
  background: rgba(12, 19, 27, .94);
  color: #e8f6ff;
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.mask-edit-banner.hidden { display: none; }
.mask-edit-banner strong { white-space: nowrap; }
.mask-edit-banner .mask-edit-hint { color: #9fb1c2; font-size: 12px; white-space: nowrap; }
.mask-edit-banner button { min-height: 30px; padding: 4px 8px; }
body.mask-editing .workspace { outline: 2px solid rgba(77, 184, 255, .45); outline-offset: -2px; }
body.mask-editing #viewCanvas { cursor: crosshair; }
.layer-mask-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; margin-top: 8px; }
.layer-mask-controls > button { min-height: 34px; }
.layer-mask-controls .inline-check { margin: 0; white-space: nowrap; }
.layer-mask-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 1px;
  border-radius: 5px;
  overflow: hidden;
  font-size: 10px;
  background: #171a20;
  border: 1px dashed rgba(255,255,255,.2);
}
.layer-mask-button canvas { width: 24px; height: 24px; image-rendering: pixelated; display: block; border-radius: 3px; }
.layer-mask-button.has-mask { border-style: solid; }
.layer-mask-button.active, .group-mask-button.active { border-color: #4db8ff; box-shadow: 0 0 0 2px rgba(77,184,255,.22); }
.layer-mask-button.disabled-mask { opacity: .48; }
.layer-item.mask-active, .layer-group.mask-active > .layer-group-header { box-shadow: inset 3px 0 0 #4db8ff; }
.layer-badge.mask { color: #8ed7ff; border-color: rgba(77,184,255,.35); }
.layer-badge.mask.off { opacity: .55; text-decoration: line-through; }
.group-mask-controls { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.group-mask-controls .compact-mask-check { margin: 0; font-size: 12px; }
.group-mask-delete { width: auto; min-width: 36px; }
.group-mask-button.has-mask { color: #8ed7ff; }

@media (max-width: 720px), (pointer: coarse) {
  .mask-edit-banner { top: 8px; flex-wrap: wrap; justify-content: center; width: calc(100% - 16px); }
  .mask-edit-banner .mask-edit-hint { width: 100%; text-align: center; }
  .layer-mask-controls { grid-template-columns: 1fr 1fr; }
  .layer-mask-controls > button:first-child { grid-column: 1 / -1; }
  .layer-mask-button { width: 32px; min-width: 32px; height: 32px; }
  .layer-mask-button canvas { width: 28px; height: 28px; }
  .group-mask-controls { justify-content: flex-start; }
}

/* v23 indexed color mode */
.indexed-mode-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
}
.indexed-mode-toggle { font-weight: 700; }
.indexed-mode-status,
.indexed-storage-info {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.indexed-mode-status.active { color: var(--accent); font-weight: 700; }
.indexed-controls { display: grid; gap: 8px; }
.indexed-controls label { display: grid; gap: 5px; }
.indexed-controls select,
.indexed-controls input[type="color"] { width: 100%; min-height: 38px; }
.palette-color[data-palette-index] { position: relative; }
.palette-color[data-palette-index]::after {
  content: attr(data-palette-index);
  position: absolute;
  right: 2px;
  bottom: 1px;
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 8px;
  line-height: 12px;
  pointer-events: none;
  opacity: .72;
}

/* v24 custom dither patterns and portable tool library */
.custom-brush-controls { grid-template-columns:minmax(0,1fr) 34px 34px 34px; }
.custom-pattern-controls {
  display:grid;
  grid-template-columns:34px 34px 34px minmax(0,1fr) minmax(0,1fr);
  gap:6px;
  margin-top:6px;
  align-items:center;
}
.wide-mini-button { width:auto; min-width:0; padding:0 7px; font-size:10px; }
.custom-pattern-modal { width:min(96vw,760px); }
.custom-pattern-body { gap:12px; }
.custom-pattern-options { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:end; }
.custom-pattern-options label { min-width:0; }
.custom-pattern-options output { display:inline-block; min-width:32px; margin-left:7px; color:var(--muted); }
.custom-pattern-grid {
  --pattern-grid-size:4;
  display:grid;
  grid-template-columns:repeat(var(--pattern-grid-size),minmax(0,1fr));
  width:min(82vw,520px);
  aspect-ratio:1;
  margin:2px auto;
  border:1px solid var(--border);
  border-radius:11px;
  overflow:hidden;
  background:#0d0d11;
  touch-action:none;
  user-select:none;
}
.custom-pattern-cell {
  min-width:0;
  min-height:0;
  border:0;
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:0;
  font-size:clamp(7px,1.6vw,12px);
  font-weight:700;
  background:rgb(var(--pattern-lightness),var(--pattern-lightness),var(--pattern-lightness));
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.custom-pattern-cell:focus-visible { position:relative; z-index:1; outline:2px solid var(--accent); outline-offset:-2px; }
.custom-pattern-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.custom-pattern-actions button {
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel-2);
  color:var(--text);
  padding:8px 5px;
  min-height:38px;
  font-size:11px;
}
.custom-pattern-footer { justify-content:space-between; }
@media (max-width:640px) {
  .custom-brush-controls { grid-template-columns:minmax(0,1fr) 34px 34px 34px; }
  .custom-pattern-controls { grid-template-columns:repeat(3,34px) minmax(0,1fr) minmax(0,1fr); }
  .custom-pattern-options { grid-template-columns:1fr; }
  .custom-pattern-grid { width:min(88vw,420px); }
  .custom-pattern-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .custom-pattern-cell { font-size:7px; }
}
.selection-morph-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
.selection-morph-actions button { padding-inline:4px; }
#polygonActions { margin-top:7px; }
#polygonActions button:last-child { color:var(--text); border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); }

/* v28 floating-selection transform controls */
.selection-transform-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.selection-transform-actions button { padding-inline:5px; }
@media (max-width: 620px) {
  .selection-transform-actions { grid-template-columns:1fr 1fr; }
}

/* v29 — clipping chains and group clipping */
.clip-target-row select { min-width:0; max-width:100%; }
.clip-target-row.disabled { opacity:.55; }
.layer-group-clipping { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px; align-items:center; }
.layer-group-clipping label { display:flex; gap:5px; align-items:center; font-size:10px; color:var(--muted); white-space:nowrap; }
.layer-group-clipping select { width:100%; }
.layer-group.clipping > .layer-group-header { box-shadow: inset 3px 0 0 #d18cff; }
.layer-badge.clip-group { color:#d18cff; }
@media(max-width:760px){ .layer-group-clipping { grid-template-columns:1fr; } }

/* v30 — аварийный журнал и восстановление незавершённой сессии */
.recovery-emergency-state {
  padding: 14px 16px;
  border: 1px solid var(--border, #34343d);
  border-radius: 10px;
  background: rgba(255, 190, 80, .08);
  line-height: 1.45;
}
.recovery-emergency-state.available {
  border-color: rgba(255, 190, 80, .55);
  background: rgba(255, 190, 80, .12);
}
.recovery-emergency-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 14px 0 0;
}
.recovery-emergency-details > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}
.recovery-emergency-details dt { color: var(--muted, #aaa); font-size: 12px; }
.recovery-emergency-details dd { margin: 0; overflow-wrap: anywhere; }
#emergencyRecoveryBtn.has-recovery::after {
  content: '•';
  margin-left: 8px;
  color: #ffbe50;
  font-size: 20px;
  line-height: 0;
}
@media (max-width: 620px) {
  .recovery-emergency-details { grid-template-columns: 1fr; }
  #emergencyRecoveryDialog .modal-actions { display: grid; grid-template-columns: 1fr; }
}


/* v31 — вложенные группы */
.layer-group.nested > .layer-group-header { background:color-mix(in srgb,var(--panel-3) 92%,var(--accent) 8%); }
.layer-group-parent { grid-column:1 / -1; }
.layer-group-children > .layer-group { min-width:0; }
.layer-group-children .layer-group-children { padding-left:12px; }
@media(max-width:760px){ .layer-group-children .layer-group-children { padding-left:6px; } }

/* v32 — неразрушающие заливочные слои */
.layer-item.fill-layer { border-style:solid; }
.layer-item.fill-layer .layer-thumb { box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.layer-badge.fill { color:#ffd166; border-color:rgba(255,209,102,.38); }
.fill-layer-controls { display:grid; gap:8px; margin-top:8px; padding:9px; border:1px solid rgba(255,209,102,.28); border-radius:10px; background:rgba(255,209,102,.055); }
.fill-layer-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.fill-layer-heading strong { font-size:12px; color:#ffe39b; }
.fill-layer-heading span { color:var(--muted); font-size:10px; }
.fill-layer-controls input[type="color"] { width:42px; height:30px; padding:2px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); }
.fill-layer-controls > button { min-height:34px; }
@media(max-width:760px){
  .fill-layer-controls { min-width:250px; }
}

.layer-item.adjustment-layer { border-style:solid; }
.layer-item.adjustment-layer .layer-thumb { box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.layer-badge.adjustment { color:#bde7ff; border-color:rgba(94,197,255,.38); background:rgba(94,197,255,.09); }
.adjustment-layer-controls { display:grid; gap:8px; margin-top:8px; padding:9px; border:1px solid rgba(94,197,255,.28); border-radius:10px; background:rgba(94,197,255,.055); }
.adjustment-layer-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.adjustment-layer-heading strong { font-size:12px; color:#bde7ff; }
.adjustment-layer-heading span { color:var(--muted); font-size:10px; }
.adjustment-layer-controls > button { min-height:34px; }
@media (min-width:900px) { .adjustment-layer-controls { min-width:250px; } }

/* v34 — расширенные корректирующие слои: уровни RGB */
.adjustment-kind-controls { display:grid; gap:8px; }
.adjustment-layer-controls select { min-width:96px; }
.adjustment-layer-controls .layer-selection-help { margin:1px 0 0; }
.layer-badge.adjustment { white-space:nowrap; }
@media(max-width:760px){
  .adjustment-layer-controls { min-width:270px; }
}

/* v35 — профессиональные кривые */
.adjustment-curves-controls { gap:9px; }
.adjustment-curve-canvas { width:100%; aspect-ratio:8 / 5; min-height:150px; display:block; border:1px solid rgba(148,190,220,.32); border-radius:8px; background:#171b20; touch-action:none; cursor:crosshair; }
.curve-coordinate-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.curve-coordinate-row label { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.curve-coordinate-row input { min-width:0; width:100%; }
.curve-action-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.curve-action-row button { min-height:32px; padding:5px 6px; font-size:10px; }
@media (max-width:520px) { .adjustment-curve-canvas { min-height:170px; } .curve-action-row { grid-template-columns:1fr; } }


/* v36 — неразрушающая градиентная карта */
.adjustment-gradient-map-controls { gap:9px; }
.adjustment-gradient-preview { width:100%; aspect-ratio:4 / 1; min-height:92px; display:block; border:1px solid rgba(148,190,220,.32); border-radius:8px; background:#171b20; touch-action:none; cursor:crosshair; }
.gradient-stop-row { display:grid; grid-template-columns:1fr 1.35fr; gap:8px; }
.gradient-stop-row label { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.gradient-stop-row input[type="color"] { width:100%; min-width:0; height:32px; padding:2px; }
.gradient-stop-row input[type="number"] { min-width:0; width:100%; }
.gradient-action-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.gradient-action-row button { min-height:32px; padding:5px 6px; font-size:10px; }
@media (max-width:520px) { .adjustment-gradient-preview { min-height:110px; } .gradient-stop-row,.gradient-action-row { grid-template-columns:1fr; } }


/* v37 — постеризация и порог */
.threshold-color-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.threshold-color-row label { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.threshold-color-row input[type="color"] { width:100%; min-width:0; height:34px; padding:2px; }
#adjustmentThresholdSwapBtn { min-height:32px; }
@media (max-width:520px) { .threshold-color-row { grid-template-columns:1fr; } }

/* v39 — микшер каналов */
#adjustmentColorBalanceControls .inline-check { margin-top:2px; }


/* v40 — выборочная коррекция цвета */
#adjustmentSelectiveColorControls .control-row output { min-width:42px; text-align:right; }
#adjustmentSelectiveColorControls select { min-width:0; }

/* v48 independent animation preview */
.timeline-title-actions { display:flex; align-items:center; gap:7px; min-width:0; }
.animation-preview-panel {
  position:fixed;
  z-index:80;
  left:24px;
  top:88px;
  width:520px;
  height:520px;
  min-width:300px;
  min-height:320px;
  max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  resize:both;
  border:1px solid rgba(148,190,220,.34);
  border-radius:14px;
  background:rgba(25,27,34,.98);
  color:var(--text);
  box-shadow:0 18px 58px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
}
.animation-preview-panel.hidden { display:none !important; }
.animation-preview-header {
  flex:0 0 auto;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 8px 7px 12px;
  border-bottom:1px solid var(--border);
  background:var(--panel-2);
  cursor:move;
  touch-action:none;
  user-select:none;
}
.animation-preview-heading { min-width:0; display:flex; align-items:baseline; gap:9px; }
.animation-preview-heading strong { font-size:13px; }
.animation-preview-heading span { min-width:0; color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.animation-preview-header-actions { display:flex; gap:5px; }
.animation-preview-header-actions .mini-button { width:28px; height:28px; }
.animation-preview-stage {
  position:relative;
  flex:1 1 auto;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  background-color:#101014;
}
.animation-preview-stage.checker-background {
  background-color:#d8d8dc;
  background-image:linear-gradient(45deg,#bfc0c6 25%,transparent 25%),linear-gradient(-45deg,#bfc0c6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bfc0c6 75%),linear-gradient(-45deg,transparent 75%,#bfc0c6 75%);
  background-size:20px 20px;
  background-position:0 0,0 10px,10px -10px,-10px 0;
}
.animation-preview-stage canvas {
  flex:0 0 auto;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.animation-preview-stage canvas.fit-preview {
  width:auto;
  height:auto;
  max-width:calc(100% - 24px);
  max-height:calc(100% - 24px);
  object-fit:contain;
}
.animation-preview-events {
  position:absolute;
  left:10px;
  bottom:10px;
  max-width:calc(100% - 20px);
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  pointer-events:none;
}
.animation-preview-event {
  max-width:100%;
  padding:4px 7px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:999px;
  background:color-mix(in srgb,var(--event-color,#ffd166) 82%,#101218);
  color:#11151c;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 2px 8px rgba(0,0,0,.32);
}
.animation-preview-scrub-row {
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:7px 10px 0;
}
.animation-preview-scrub-row input { width:100%; margin:0; }
.animation-preview-scrub-row span { min-width:46px; color:var(--muted); font-size:10px; text-align:right; }
.animation-preview-transport {
  flex:0 0 auto;
  display:grid;
  grid-template-columns:34px 34px 46px 34px 34px;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
}
.animation-preview-transport button { height:32px; }
.animation-preview-play { border:1px solid rgba(255,255,255,.16); border-radius:9px; background:var(--accent); color:white; font-weight:900; }
.animation-preview-options {
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  padding:0 10px 8px;
}
.animation-preview-options label { min-width:0; display:flex; flex-direction:column; gap:3px; color:var(--muted); font-size:9px; }
.animation-preview-options select,
.animation-preview-options input[type=color] {
  min-width:0;
  width:100%;
  height:30px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel-2);
  color:var(--text);
  padding:4px 6px;
  font-size:10px;
}
.animation-preview-options input[type=color] { padding:2px; }
.animation-preview-toggles {
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:0 10px 10px;
  color:var(--muted);
  font-size:9px;
}
.animation-preview-toggles .inline-check { margin:0; align-items:flex-start; }

@media (max-width: 700px) {
  .timeline-title-actions { gap:3px; }
  .timeline-title-actions .text-button { font-size:9px; }
  .animation-preview-panel {
    left:8px !important;
    right:8px !important;
    top:auto !important;
    bottom:calc(8px + env(safe-area-inset-bottom));
    width:auto !important;
    height:min(62vh,580px) !important;
    max-width:none;
    max-height:calc(100vh - 16px - env(safe-area-inset-bottom));
    min-width:0;
    resize:none;
    border-radius:14px;
  }
  .animation-preview-header { cursor:default; }
  .animation-preview-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .animation-preview-toggles { grid-template-columns:1fr; }
}

@media (max-width: 430px) {
  .animation-preview-panel { height:min(68vh,620px) !important; }
  .animation-preview-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .animation-preview-options label > span { display:none; }
  .animation-preview-options select,
  .animation-preview-options input[type=color] { font-size:9px; padding:3px; }
  .animation-preview-toggles { display:flex; flex-wrap:wrap; }
  .animation-preview-toggles .inline-check { flex:1 1 180px; }
}

/* v49 tileset editor */
.tileset-editor-dialog{width:min(96vw,980px)}
.tileset-editor-body{max-height:min(72vh,760px);overflow:auto}
.tileset-editor-toolbar{display:flex;flex-direction:column;gap:9px;position:sticky;top:-16px;z-index:3;margin:-16px -16px 0;padding:14px 16px 12px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(14px)}
.tileset-editor-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tileset-editor-actions{display:flex;gap:6px;flex-wrap:wrap}
.tileset-editor-actions button{min-height:34px;padding:7px 10px}
.tileset-editor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;align-items:start}
.tileset-tile-card{display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px;padding:9px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2);transition:border-color .12s ease,opacity .12s ease,transform .12s ease}
.tileset-tile-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.tileset-tile-card.excluded{opacity:.55}
.tileset-tile-card.dragging{opacity:.35;transform:scale(.98)}
.tileset-tile-card.drag-over{border-color:#ffc04f;box-shadow:0 0 0 2px rgba(255,192,79,.22)}
.tileset-tile-header{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;min-height:28px}
.tileset-tile-header>input{width:18px;height:18px}
.tileset-include-toggle{display:flex!important;flex-direction:row!important;align-items:center;gap:5px!important;color:var(--muted);font-size:11px!important}
.tileset-include-toggle input{width:16px;height:16px}
.tileset-tile-preview{display:flex;align-items:center;justify-content:center;min-height:74px;border:1px solid var(--border);border-radius:9px;overflow:hidden;background-color:#c8c8c8;background-image:linear-gradient(45deg,#e9e9e9 25%,transparent 25%),linear-gradient(-45deg,#e9e9e9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9e9e9 75%),linear-gradient(-45deg,transparent 75%,#e9e9e9 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}
.tileset-tile-preview canvas{display:block;width:auto;height:auto;max-width:68px;max-height:68px;image-rendering:pixelated;image-rendering:crisp-edges}
.tileset-name-label{min-width:0!important}
.tileset-name-label input{padding:8px!important}
.tileset-tile-info{grid-column:1/-1;color:var(--muted);font-size:10px;line-height:1.35;overflow-wrap:anywhere}
.tileset-card-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:5px}
.tileset-card-actions button{width:34px;height:30px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--panel-3)}
@media(max-width:640px){
  .tileset-editor-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0}
  .tileset-editor-dialog form{height:100%;display:flex;flex-direction:column}
  .tileset-editor-body{flex:1;max-height:none}
  .tileset-editor-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:8px}
  .tileset-tile-card{grid-template-columns:58px minmax(0,1fr);padding:7px}
  .tileset-tile-preview{min-height:58px}
  .tileset-tile-preview canvas{max-width:54px;max-height:54px}
  .tileset-editor-toolbar{top:-16px}
}


/* v50: встроенный 3D-предпросмотр элитр */
.minecraft-preview-actions{display:flex;gap:8px;margin-top:12px}.minecraft-preview-actions .button{flex:1}
.elytra-preview-dialog{width:min(98vw,1380px);height:min(94dvh,900px);max-width:none;max-height:none;padding:0;overflow:hidden}
.elytra-preview-dialog::backdrop{background:rgba(4,6,10,.78);backdrop-filter:blur(5px)}
.elytra-preview-shell{height:100%;display:flex;flex-direction:column;background:var(--panel,#11151d)}
.elytra-preview-shell>.modal-header{flex:0 0 auto}.elytra-preview-shell>.modal-header>div{min-width:0}.elytra-preview-shell>.modal-header h2{margin-bottom:2px}.elytra-preview-shell>.modal-header .help-text{margin:0}
#elytraPreviewFrame{width:100%;flex:1 1 auto;min-height:0;border:0;background:#0b0e15}
.elytra-preview-shell>.modal-actions{flex:0 0 auto}
@media(max-width:760px){.elytra-preview-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0}.elytra-preview-shell>.modal-header{padding-top:max(12px,env(safe-area-inset-top))}.elytra-preview-shell>.modal-actions{padding-bottom:max(12px,env(safe-area-inset-bottom))}}

/* Google Drive sync */
.cloud-button.connected {
  border-color: rgba(94, 201, 126, .65);
  box-shadow: inset 0 0 0 1px rgba(94, 201, 126, .18);
}
.cloud-button.needs-reconnect {
  border-color: rgba(245, 177, 66, .65);
}
.cloud-modal {
  width: min(680px, calc(100vw - 28px));
}
.cloud-body {
  display: grid;
  gap: 14px;
}
.cloud-config-warning {
  border: 1px solid rgba(245, 177, 66, .48);
  background: rgba(245, 177, 66, .1);
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.45;
}
.cloud-account-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.cloud-account-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.cloud-account-card strong,
.cloud-account-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cloud-account-card > div > span {
  color: var(--muted);
  font-size: 12px;
}
.cloud-account-photo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-2);
}
.cloud-badge {
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.cloud-badge.connected {
  color: #8ee8a8;
  border-color: rgba(94, 201, 126, .5);
  background: rgba(94, 201, 126, .08);
}
.cloud-badge.warning {
  color: #ffd18a;
  border-color: rgba(245, 177, 66, .5);
  background: rgba(245, 177, 66, .08);
}
.cloud-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.cloud-stats > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}
.cloud-stats dt {
  color: var(--muted);
  font-size: 11px;
}
.cloud-stats dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
.cloud-auto-sync {
  align-items: flex-start;
}
.cloud-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.cloud-progress > div {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: width .18s ease;
}
.cloud-result {
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 12px;
  line-height: 1.45;
  font-size: 13px;
}
.cloud-result.error {
  border-color: rgba(255, 89, 102, .55);
  background: rgba(255, 89, 102, .08);
}
.cloud-actions {
  flex-wrap: wrap;
}
@media (max-width: 620px) {
  .cloud-stats { grid-template-columns: 1fr; }
  .cloud-account-card { grid-template-columns: auto 1fr; }
  .cloud-account-card .cloud-badge { grid-column: 1 / -1; justify-self: start; }
  .cloud-actions .button { flex: 1 1 150px; }
}

/* v52 exact selection geometry */
.selection-geometry-fields {
  display:grid;
  grid-template-columns:repeat(4, 74px);
  gap:4px;
  flex:0 0 auto;
}
.selection-geometry-fields label {
  display:grid;
  grid-template-columns:18px 1fr;
  align-items:center;
  height:32px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel-2);
  overflow:hidden;
}
.selection-geometry-fields span {
  color:var(--muted);
  font-size:10px;
  text-align:center;
}
.selection-geometry-fields input {
  width:100%;
  min-width:0;
  height:30px;
  padding:0 5px;
  border:0;
  border-left:1px solid var(--border);
  outline:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:11px;
}
.selection-bar .selection-geometry-apply {
  flex:0 0 auto;
  width:auto;
  min-width:58px;
  padding:0 9px;
  color:var(--accent-2);
}
@media (max-width:640px) {
  .selection-geometry-fields { grid-template-columns:repeat(4, 68px); }
  .selection-bar .selection-geometry-apply { min-width:54px; }
}

/* v53 — журнал возобновляемых Worker-задач */
#workerTaskRecoveryBtn.has-recovery::after {
  content:'•';
  margin-left:8px;
  color:#69c7ff;
}
.worker-task-item { align-items:center; }
.worker-task-item > div:first-child { min-width:0; flex:1 1 auto; }
.worker-task-item strong { display:block; margin-bottom:4px; }
.worker-task-item small { display:block; color:var(--muted); overflow-wrap:anywhere; }
.worker-task-progress {
  height:5px;
  margin-top:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.worker-task-progress span {
  display:block;
  height:100%;
  min-width:0;
  border-radius:inherit;
  background:var(--accent);
  transition:width .18s ease;
}
@media(max-width:640px){
  .worker-task-item { align-items:stretch; }
  .worker-task-item .recovery-actions { width:100%; grid-template-columns:1fr 1fr; }
}