:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f7f4ff;
  background: #0b0914;
  font-synthesis: none;
  --ink: #0b0914;
  --panel: #151225;
  --panel-2: #1e1932;
  --line: #332a50;
  --muted: #aaa3bf;
  --purple: #6622cf;
  --purple-2: #9b5cff;
  --cyan: #00ccfe;
  --pink: #ff007f;
  --yellow: #ffd24c;
  --green: #54e6a4;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 860px; min-height: 100vh; overflow: hidden; background: var(--ink); }
button, input { font: inherit; }
button { color: inherit; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .35; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.pixel-app { height: 100vh; display: grid; grid-template-rows: 58px minmax(0, 1fr) 166px; background: radial-gradient(circle at 76% -15%, rgba(102,34,207,.24), transparent 35%), var(--ink); }
.topbar { display: grid; grid-template-columns: minmax(210px, .5fr) minmax(260px, 1fr) minmax(380px, 1fr); align-items: center; gap: 16px; padding: 9px 16px; border-bottom: 1px solid #2b2146; background: rgba(11,9,20,.92); box-shadow: 0 10px 30px rgba(0,0,0,.24); z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: white; background: linear-gradient(135deg, var(--purple), var(--pink)); box-shadow: 0 0 22px rgba(155,92,255,.38); }
.beta { padding: 3px 6px; border-radius: 5px; color: var(--cyan); background: rgba(0,204,254,.1); font-size: 9px; letter-spacing: .08em; }
.project-title input { width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; color: #fff; background: transparent; text-align: center; font-weight: 750; outline: none; }
.project-title input:focus { border-color: #4d3a78; background: #151225; }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 7px; }
.status { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 5px; color: var(--muted); font-size: 12px; }
.button, .icon-action, .top-actions button, .stage-toolbar button, .timeline-actions button, .panel button { border: 1px solid #3a2f58; border-radius: 8px; background: #211a36; transition: border-color .15s, background .15s, transform .15s; }
.button { min-height: 36px; padding: 0 13px; font-weight: 750; }
.button:hover, .icon-action:hover, .stage-toolbar button:hover, .timeline-actions button:hover, .panel button:hover { border-color: var(--purple-2); background: #2b1e49; }
.button.primary { border-color: var(--cyan); color: #06131d; background: linear-gradient(135deg, var(--cyan), #65e4ff); }
.icon-action { width: 35px; height: 35px; }

.workspace { min-height: 0; display: grid; grid-template-columns: 58px minmax(420px, 1fr) 280px; }
.toolbar { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 8px; border-right: 1px solid var(--line); background: #100d1b; }
.tool { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 10px; color: #c9c3d9; background: transparent; font: 22px/1 ui-monospace, monospace; }
.tool:hover { border-color: #443361; background: #211a36; }
.tool.active { border-color: var(--cyan); color: white; background: linear-gradient(135deg, rgba(102,34,207,.95), rgba(255,0,127,.52)); box-shadow: 0 0 18px rgba(0,204,254,.16); }
.text-tool { font-size: 13px; font-weight: 900; }
.tool-separator { width: 32px; border-top: 1px solid var(--line); margin: 4px 0; }

.stage-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: 42px minmax(0,1fr); }
.stage-toolbar { display: flex; align-items: center; gap: 18px; padding: 6px 12px; border-bottom: 1px solid var(--line); color: var(--muted); background: #121020; font-size: 12px; }
.stage-toolbar label { display: flex; align-items: center; gap: 6px; }
.stage-toolbar input { accent-color: var(--purple-2); }
.stage-toolbar #pointer-position { margin-left: auto; font-family: ui-monospace, monospace; }
.zoom-control { display: flex; align-items: center; gap: 7px; }
.zoom-control button { width: 28px; height: 28px; }
.zoom-control span { min-width: 52px; text-align: center; }
.stage-scroll { position: relative; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 64px; background: radial-gradient(circle, rgba(155,92,255,.07) 1px, transparent 1px) 0 0 / 19px 19px, #0d0b17; }
.canvas-shell { position: relative; flex: 0 0 auto; background-color: #fff; background-image: linear-gradient(45deg,#d6d6de 25%,transparent 25%),linear-gradient(-45deg,#d6d6de 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d6d6de 75%),linear-gradient(-45deg,transparent 75%,#d6d6de 75%); background-size: 16px 16px; background-position: 0 0,0 8px,8px -8px,-8px 0; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 24px 70px rgba(0,0,0,.45); }
#pixel-canvas { position: absolute; inset: 0; display: block; image-rendering: pixelated; touch-action: none; cursor: crosshair; }
.grid-overlay { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(17,12,32,.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(17,12,32,.18) 1px, transparent 1px); }

.inspector { min-height: 0; overflow: auto; border-left: 1px solid var(--line); background: #100d1b; }
.panel { padding: 12px; border-bottom: 1px solid var(--line); }
.panel-title { min-height: 30px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 800; }
.panel-title > div { display: flex; gap: 5px; }
.panel-title button, .panel button { min-width: 29px; min-height: 29px; }
.panel-title input[type=color] { width: 34px; height: 28px; border: 0; padding: 0; background: transparent; }
.color-row { display: grid; grid-template-columns: 34px 1fr 30px; gap: 7px; margin-bottom: 10px; }
.color-row input { min-width: 0; border: 1px solid #40345e; border-radius: 7px; padding: 7px; color: white; background: #0c0a15; font-family: ui-monospace, monospace; }
.color-chip { border-radius: 8px !important; background: #6622cf; box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); }
.palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.swatch { aspect-ratio: 1; min-width: 0 !important; min-height: 0 !important; border: 2px solid transparent !important; border-radius: 6px !important; background: linear-gradient(var(--swatch),var(--swatch)), conic-gradient(#ddd 25%,#999 0 50%,#ddd 0 75%,#999 0) 0 0/8px 8px !important; opacity: var(--alpha); }
.swatch.active { border-color: white !important; transform: scale(1.08); box-shadow: 0 0 0 2px var(--purple); }
.layers { display: grid; gap: 4px; }
.layer-row { display: grid; grid-template-columns: 27px 27px 1fr; align-items: center; min-height: 37px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: #171326; }
.layer-row.active { border-color: #634c91; color: white; background: #211934; }
.layer-row button { border: 0; background: transparent; }
.layer-row span { padding: 7px 5px; outline: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.layer-settings { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 11px; color: var(--muted); }
.layer-settings label { display: grid; gap: 3px; }
.layer-settings input { width: 130px; accent-color: var(--purple-2); }
.danger-text { color: #ff719d !important; background: transparent !important; border-color: transparent !important; }
.metadata-panel summary { cursor: pointer; color: #d9d3e7; font-size: 13px; font-weight: 800; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.field-grid label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.field-grid input { min-width: 0; border: 1px solid #40345e; border-radius: 7px; padding: 7px; color: white; background: #0c0a15; }
.stacked-field { display: grid; gap: 5px; margin: 9px 0; color: var(--muted); font-size: 11px; }
.stacked-field select, .stacked-field input, #tag-select { width: 100%; min-height: 32px; border: 1px solid #443660; border-radius: 8px; padding: 6px; color: var(--text); background: #171225; }
.tag-editor { margin-top: 12px; padding-top: 10px; border-top: 1px solid #302548; }
.tag-heading { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; font-size: 11px; font-weight: 800; }
.tag-heading span { margin-right: auto; }

.timeline-panel { min-width: 0; display: grid; grid-template-columns: 150px minmax(0,1fr) 150px; gap: 10px; border-top: 1px solid var(--line); background: #100d1b; }
.timeline-actions { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-right: 1px solid var(--line); }
.timeline-actions button { min-height: 30px; }
.timeline-actions label { display: grid; grid-template-columns: 1fr auto; gap: 5px; align-items: center; color: var(--muted); font-size: 10px; }
.timeline-actions input { width: 62px; border: 1px solid #40345e; border-radius: 6px; padding: 5px; color: white; background: #0c0a15; }
.play-button { color: #07151d !important; background: var(--cyan) !important; font-weight: 900; }
.frames { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 13px 4px; overflow-x: auto; }
.frame-card { flex: 0 0 98px; height: 130px; display: grid; grid-template-rows: 96px auto; place-items: center; gap: 5px; padding: 5px; border: 2px solid transparent; border-radius: 9px; background: #19152a; }
.frame-card.active { border-color: var(--cyan); background: #251b3d; box-shadow: 0 0 18px rgba(0,204,254,.12); }
.frame-card canvas { width: 88px; height: 88px; object-fit: contain; image-rendering: pixelated; background: conic-gradient(#eee 25%,#aaa 0 50%,#eee 0 75%,#aaa 0) 0 0/10px 10px; }
.frame-card span { color: var(--muted); font-size: 10px; }
.animation-preview { display: grid; place-items: center; align-content: center; gap: 5px; border-left: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.animation-preview canvas { max-width: 116px; max-height: 110px; width: auto; height: auto; image-rendering: pixelated; background: conic-gradient(#eee 25%,#aaa 0 50%,#eee 0 75%,#aaa 0) 0 0/10px 10px; }

.modal { width: min(560px, 92vw); border: 1px solid #513b7e; border-radius: 16px; padding: 0; color: white; background: #171326; box-shadow: 0 32px 100px rgba(0,0,0,.65); }
.modal::backdrop { background: rgba(5,4,10,.76); backdrop-filter: blur(5px); }
.modal form { padding: 22px; }
.modal h2 { margin: 0 0 6px; }
.modal p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.size-presets { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.size-presets button, .export-grid button { border: 1px solid #443660; border-radius: 10px; padding: 11px; background: #211a36; }
.size-presets button:hover, .export-grid button:hover { border-color: var(--cyan); }
.size-presets button.active { border-color: var(--cyan); color: #06151c; background: var(--cyan); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal-actions button { min-height: 37px; padding: 0 14px; border-radius: 8px; background: #2a2241; }
.export-modal { width: min(720px,92vw); }
.export-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.export-grid button { display: grid; gap: 5px; min-height: 100px; text-align: left; }
.export-grid b { color: var(--cyan); }
.export-grid span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.toast { position: fixed; left: 50%; bottom: 190px; z-index: 20; transform: translate(-50%,20px); padding: 11px 16px; border: 1px solid var(--green); border-radius: 10px; color: white; background: #142b24; opacity: 0; pointer-events: none; transition: .2s; }
.toast.error { border-color: #ff5d8f; background: #351522; }
.toast.visible { transform: translate(-50%,0); opacity: 1; }

@media (max-width: 1050px) {
  .topbar { grid-template-columns: 190px minmax(190px,1fr) 380px; }
  .workspace { grid-template-columns: 54px minmax(400px,1fr) 245px; }
  .stage-toolbar { gap: 9px; }
}