:root {
    color-scheme: dark;
    --bg: #0d0d12;
    --surface-1: #13131a;
    --surface-2: #191922;
    --surface-3: #20202b;
    --surface-4: #272734;
    --line: #30303e;
    --line-strong: #404052;
    --text: #f4f2fb;
    --text-soft: #c1bdce;
    --text-muted: #898497;
    --primary: #8b5cf6;
    --primary-strong: #7443e6;
    --primary-soft: rgba(139, 92, 246, 0.15);
    --success: #41d68f;
    --warning: #f3b75f;
    --danger: #f16d7a;
    --focus: #b79bff;
    --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.46);
    --radius-sm: 5px;
    --radius: 8px;
    --radius-lg: 12px;
    --topbar-height: 64px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
}

body {
    min-width: 760px;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select {
    font: inherit;
}

button {
    color: inherit;
}

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.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;
}

.app-shell {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: var(--topbar-height) minmax(0, 1fr);
    width: 100%;
    height: auto;
    background: var(--bg);
}

.topbar {
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(190px, 0.8fr) minmax(240px, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-width: 0;
    padding: 0 14px 0 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(19, 19, 26, 0.97);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

.brand,
.document-identity,
.topbar-actions,
.history-actions,
.status-cluster,
.zoom-controls,
.section-heading,
.color-control,
.detail-row,
.modal-actions {
    display: flex;
    align-items: center;
}

.brand {
    min-width: 0;
    gap: 11px;
}

.mode-switch {
    display: flex;
    min-width: max-content;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #0f0f15;
}

.mode-button {
    height: 28px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.mode-button:hover {
    color: var(--text-soft);
}

.mode-button.is-active {
    background: var(--primary-soft);
    color: #cbb8ff;
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.35);
}

.brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.24), rgba(139, 92, 246, 0.08));
    color: #a985ff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.brand-mark svg {
    width: 21px;
    height: 21px;
}

.brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.05;
}

.brand-copy strong {
    overflow: hidden;
    font-family: "Pixelify Sans", "Segoe UI", sans-serif;
    font-size: 17px;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-copy small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.document-identity {
    justify-self: center;
    min-width: 0;
    max-width: 440px;
    gap: 12px;
}

.project-name {
    width: min(240px, 24vw);
    min-width: 120px;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 650;
    text-align: right;
    text-overflow: ellipsis;
}

.project-name:hover {
    border-color: var(--line);
    background: var(--surface-2);
}

.project-name:focus {
    border-color: var(--primary);
    background: var(--surface-2);
    text-align: left;
}

.save-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
}

.save-status[data-state="dirty"] .status-dot {
    background: var(--warning);
    box-shadow: 0 0 0 3px rgba(243, 183, 95, 0.1);
}

.save-status[data-state="saving"] .status-dot {
    background: var(--primary);
    animation: pulse 1s ease-in-out infinite;
}

.save-status[data-state="saved"] .status-dot {
    background: var(--success);
}

.save-status[data-state="error"] .status-dot {
    background: var(--danger);
}

@keyframes pulse {
    50% { opacity: 0.35; }
}

.topbar-actions {
    justify-self: end;
    gap: 8px;
}

.history-actions {
    gap: 2px;
    padding-right: 6px;
    margin-right: 2px;
    border-right: 1px solid var(--line);
}

.button,
.icon-button,
.tool-button,
.mini-button,
.mini-text-button,
.text-button,
.action-tile,
.inspector-tab,
.segment,
.preset-grid button,
.project-card,
.project-delete,
.palette-swatch,
.mini-action,
.layer-select,
.layer-visibility,
.toast button {
    border: 0;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}

.button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.button svg {
    width: 17px;
    height: 17px;
}

.button-primary {
    border-color: #9369f5;
    background: var(--primary);
    color: white;
    box-shadow: 0 5px 18px rgba(139, 92, 246, 0.2);
}

.button-primary:hover:not(:disabled) {
    border-color: #a783ff;
    background: var(--primary-strong);
}

.button-secondary {
    border-color: var(--line-strong);
    background: var(--surface-3);
    color: var(--text);
}

.button-secondary:hover:not(:disabled),
.button-ghost:hover:not(:disabled) {
    border-color: #555369;
    background: var(--surface-4);
}

.button-ghost {
    border-color: var(--line);
    background: transparent;
    color: var(--text-soft);
}

.button-danger {
    border-color: rgba(241, 109, 122, 0.45);
    background: rgba(241, 109, 122, 0.13);
    color: #ff9ba5;
}

.button-danger:hover:not(:disabled) {
    background: rgba(241, 109, 122, 0.22);
}

.button-full {
    width: 100%;
}

.icon-button {
    position: relative;
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
}

.icon-button:hover:not(:disabled) {
    background: var(--surface-3);
    color: var(--text);
}

.editor-layout {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 72px 252px minmax(0, 1fr) 332px;
    transition: grid-template-columns 160ms ease;
}

.editor-layout.color-panel-collapsed {
    grid-template-columns: 72px 0 minmax(0, 1fr) 332px;
}

.tool-rail {
    z-index: 10;
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 8px 10px;
    border-right: 1px solid var(--line);
    background: var(--surface-1);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.tool-rail::-webkit-scrollbar { display: none; }

.tool-group {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.tool-button {
    position: relative;
    display: flex;
    width: 54px;
    min-height: 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 2px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
}

.tool-button span {
    font-size: 9px;
    font-weight: 650;
    line-height: 1;
}

.tool-button:hover:not(:disabled) {
    border-color: var(--line);
    background: var(--surface-2);
    color: var(--text);
}

.tool-button.is-active {
    border-color: rgba(139, 92, 246, 0.52);
    background: var(--primary-soft);
    color: #bda5ff;
    box-shadow: inset 3px 0 0 var(--primary);
}

.color-panel-trigger {
    min-height: 58px;
}

.color-panel-trigger.is-open {
    border-color: rgba(139, 92, 246, 0.34);
    background: rgba(139, 92, 246, 0.08);
    color: #c8b6ff;
}

.rail-color-swatch {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.color-panel {
    z-index: 11;
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: 48px minmax(0, 1fr);
    overflow: hidden;
    border-right: 1px solid var(--line);
    background: var(--surface-1);
    transition: opacity 120ms ease;
}

.color-panel.is-collapsed {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.color-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px 6px 15px;
    border-bottom: 1px solid var(--line);
    background: #15151c;
}

.color-panel-header h2 {
    margin-top: 1px;
    font-size: 13px;
}

.color-panel-content {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--surface-4) transparent;
    scrollbar-width: thin;
}

.rail-divider {
    width: 36px;
    height: 1px;
    background: var(--line);
}

.rail-bottom {
    margin-top: auto;
}

[data-tooltip]::after {
    position: absolute;
    z-index: 200;
    padding: 6px 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    opacity: 0;
    background: #262632;
    color: var(--text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    content: attr(data-tooltip);
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    transition: opacity 100ms ease;
    white-space: nowrap;
}

.tool-button[data-tooltip]::after {
    top: 50%;
    left: calc(100% + 12px);
    transform: translateY(-50%);
}

.icon-button[data-tooltip]::after {
    top: calc(100% + 8px);
    right: 0;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
}

.workspace {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) 44px;
    overflow: hidden;
    background-color: #0f0f14;
    background-image: radial-gradient(circle at 50% 42%, rgba(139, 92, 246, 0.055), transparent 38%), radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: auto, 22px 22px;
}

.workspace.is-animation-mode {
    grid-template-rows: minmax(0, 1fr) 174px 44px;
}

.canvas-viewport {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    place-items: center;
    scrollbar-color: var(--surface-4) transparent;
    scrollbar-width: thin;
}

.canvas-viewport.is-pan-ready,
.canvas-viewport.is-panning,
.canvas-viewport.is-hand-tool {
    cursor: grab;
}

.canvas-viewport.is-pan-ready #paint-canvas,
.canvas-viewport.is-panning #paint-canvas,
.canvas-viewport.is-hand-tool #paint-canvas {
    cursor: grab;
}

.canvas-viewport.is-panning,
.canvas-viewport.is-panning #paint-canvas {
    cursor: grabbing;
    user-select: none;
}

.canvas-viewport::before {
    width: 28px;
    height: 28px;
    content: "";
}

.canvas-wrapper {
    position: relative;
    isolation: isolate;
    width: 448px;
    height: 448px;
    flex: 0 0 auto;
    margin: 42px;
    overflow: hidden;
    outline: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.18), 0 20px 50px rgba(0, 0, 0, 0.38);
}

.canvas-wrapper::before,
.canvas-wrapper::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.canvas-wrapper::before {
    z-index: -1;
}

.canvas-wrapper.background-checker::before {
    background-color: #c9c9cf;
    background-image: linear-gradient(45deg, #e8e8ec 25%, transparent 25%), linear-gradient(-45deg, #e8e8ec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e8ec 75%), linear-gradient(-45deg, transparent 75%, #e8e8ec 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.canvas-wrapper.background-light::before {
    background: #f5f5f7;
}

.canvas-wrapper.background-dark::before {
    background: #17171d;
}

.canvas-wrapper.grid-on::after {
    z-index: 2;
    background-image: linear-gradient(to right, rgba(24, 22, 31, 0.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(24, 22, 31, 0.16) 1px, transparent 1px);
    background-size: var(--zoom-px) var(--zoom-px);
}

#paint-canvas,
#onion-canvas {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#paint-canvas {
    z-index: 1;
    cursor: crosshair;
    touch-action: none;
}

#onion-canvas {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
}

.selection-outline {
    position: absolute;
    z-index: 4;
    border: 1px dashed #fff;
    outline: 1px dashed #5d2fd0;
    outline-offset: 1px;
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.drop-overlay {
    position: absolute;
    z-index: 50;
    inset: 14px;
    display: grid;
    place-items: center;
    border: 2px dashed var(--primary);
    border-radius: var(--radius-lg);
    opacity: 0;
    background: rgba(13, 13, 18, 0.88);
    backdrop-filter: blur(8px);
    pointer-events: none;
    transition: opacity 120ms ease;
}

.workspace.is-dragging .drop-overlay {
    opacity: 1;
}

.drop-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.drop-card svg {
    width: 36px;
    height: 36px;
    color: #b79bff;
}

.drop-card strong {
    font-size: 16px;
}

.drop-card span {
    max-width: 330px;
    color: var(--text-muted);
    font-size: 12px;
}

.workspace-status {
    z-index: 5;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 12px;
    border-top: 1px solid var(--line);
    background: rgba(19, 19, 26, 0.96);
}

.navigation-hint {
    color: var(--text-dim);
}

.animation-dock {
    z-index: 7;
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: 52px minmax(0, 1fr);
    border-top: 1px solid var(--line);
    background: #111117;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.18);
}

.timeline-toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    background: #17171e;
}

.transport-controls,
.timeline-actions,
.timeline-field-group,
.duration-field > div {
    display: flex;
    align-items: center;
}

.transport-controls {
    gap: 5px;
}

.timeline-icon-button,
.timeline-play-button {
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-soft);
    cursor: pointer;
}

.timeline-icon-button {
    width: 34px;
    font-size: 24px;
    line-height: 1;
}

.timeline-play-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 100px;
    justify-content: center;
    padding: 0 11px;
    color: var(--text);
    font-size: 10px;
    font-weight: 800;
}

.timeline-play-button.is-playing {
    border-color: rgba(139, 92, 246, 0.72);
    background: var(--primary-soft);
    color: #d6c8ff;
}

.timeline-field-group {
    gap: 6px;
}

.timeline-field-group label {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.timeline-field-group input {
    width: 52px;
    height: 32px;
    padding: 0 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #101016;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
}

.duration-field > div {
    gap: 4px;
}

.duration-field input {
    width: 68px;
}

.duration-field span,
.timeline-summary {
    color: var(--text-muted);
    font-size: 10px;
}

.timeline-summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-actions {
    margin-left: auto;
    gap: 6px;
}

.timeline-scroller {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px 12px;
    scrollbar-color: var(--surface-4) transparent;
    scrollbar-width: thin;
}

.timeline-frames {
    display: flex;
    min-width: max-content;
    align-items: stretch;
    gap: 8px;
}

.frame-card {
    position: relative;
    display: grid;
    width: 82px;
    height: 88px;
    flex: 0 0 auto;
    grid-template-rows: minmax(0, 1fr) 22px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
}

.frame-card:hover {
    border-color: var(--line-strong);
}

.frame-card.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25);
    color: var(--text);
}

.frame-card.is-dragging {
    opacity: 0.45;
}

.frame-card.is-drop-target {
    box-shadow: -3px 0 0 var(--primary);
}

.frame-thumbnail-wrap {
    position: relative;
    display: grid;
    overflow: hidden;
    place-items: center;
    border-radius: 4px;
    background-color: #c9c9cf;
    background-image: linear-gradient(45deg, #e8e8ec 25%, transparent 25%), linear-gradient(-45deg, #e8e8ec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e8ec 75%), linear-gradient(-45deg, transparent 75%, #e8e8ec 75%);
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    background-size: 10px 10px;
}

.frame-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.frame-number {
    position: absolute;
    top: 3px;
    left: 3px;
    display: grid;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    place-items: center;
    border-radius: 4px;
    background: rgba(10, 10, 14, 0.82);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
}

.frame-meta {
    align-self: center;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 9px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-cluster {
    min-width: 0;
    gap: 0;
}

.status-item {
    padding: 0 11px;
    border-right: 1px solid var(--line);
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px;
    white-space: nowrap;
}

.status-item:first-child {
    padding-left: 0;
}

.zoom-controls {
    flex: 0 0 auto;
    gap: 8px;
}

.zoom-controls input[type="range"] {
    width: 112px;
    accent-color: var(--primary);
}

.mini-button,
.mini-text-button {
    display: grid;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
}

.mini-button:hover,
.mini-text-button:hover {
    border-color: var(--line-strong);
    color: var(--text);
}

.zoom-label {
    min-width: 44px;
    color: var(--text-soft);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px;
    text-align: right;
}

.inspector {
    z-index: 12;
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: 48px minmax(0, 1fr);
    border-left: 1px solid var(--line);
    background: var(--surface-1);
}

.inspector-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 8px 0;
    border-bottom: 1px solid var(--line);
    background: #15151c;
}

.inspector-tabs.has-animation {
    grid-template-columns: repeat(6, 1fr);
}

.inspector-tab {
    position: relative;
    padding: 0 4px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
}

.inspector-tab::after {
    position: absolute;
    right: 18px;
    bottom: -1px;
    left: 18px;
    height: 2px;
    background: transparent;
    content: "";
}

.inspector-tab:hover {
    color: var(--text-soft);
}

.inspector-tab.is-active {
    background: rgba(255, 255, 255, 0.025);
    color: var(--text);
}

.inspector-tab.is-active::after {
    background: var(--primary);
}

.inspector-panel {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: var(--surface-4) transparent;
    scrollbar-width: thin;
}

.animation-preview-wrap {
    display: grid;
    width: 100%;
    aspect-ratio: var(--animation-preview-aspect, 1);
    margin-bottom: 14px;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: #c9c9cf;
    background-image: linear-gradient(45deg, #e8e8ec 25%, transparent 25%), linear-gradient(-45deg, #e8e8ec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e8ec 75%), linear-gradient(-45deg, transparent 75%, #e8e8ec 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.frame-name-field {
    margin-bottom: 8px;
}

.frame-order-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 14px;
}

.frame-order-actions .mini-action {
    justify-content: center;
}

.frame-batch-tools {
    display: grid;
    gap: 9px;
    margin-bottom: 14px;
}

.frame-batch-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frame-batch-actions .mini-action:last-child {
    grid-column: 1 / -1;
}

#animation-preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
}

.toggle-row span {
    display: grid;
    gap: 3px;
}

.toggle-row strong {
    font-size: 11px;
}

.toggle-row small {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.35;
}

.toggle-row input {
    width: 36px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}

.onion-direction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 14px 0;
}

.onion-direction-grid label {
    display: flex;
    height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 700;
}

.onion-direction-grid input {
    accent-color: var(--primary);
}

.animation-export-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.sticker-readiness {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid rgba(64, 201, 136, 0.3);
    border-radius: var(--radius);
    background: rgba(64, 201, 136, 0.08);
}

.sticker-readiness[data-state="warning"] {
    border-color: rgba(243, 183, 95, 0.32);
    background: rgba(243, 183, 95, 0.08);
}

.sticker-readiness-icon {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: rgba(64, 201, 136, 0.16);
    color: #72d9a5;
    font-size: 12px;
    font-weight: 900;
}

.sticker-readiness[data-state="warning"] .sticker-readiness-icon {
    background: rgba(243, 183, 95, 0.14);
    color: #efbd73;
}

.sticker-readiness > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.sticker-readiness strong { color: var(--text-soft); font-size: 10px; }
.sticker-readiness small { color: var(--text-muted); font-size: 9px; line-height: 1.45; }

.animation-export-actions {
    display: grid;
    gap: 7px;
    margin-bottom: 11px;
}

.animation-export-section select {
    appearance: auto;
}

.panel-section {
    padding: 20px 18px;
    border-bottom: 1px solid var(--line);
}

.section-heading {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #9d7cf1;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.section-heading h2,
.modal-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.25;
}

.section-count {
    display: grid;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px;
}

.section-description,
.clipboard-note,
.empty-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.55;
}

.palette-saved .palette-swatch.is-selected {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.mini-action {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 750;
}

.mini-action:hover:not(:disabled) {
    border-color: rgba(139, 92, 246, 0.62);
    background: var(--primary-soft);
    color: #d2c4ff;
}

.mini-action:disabled {
    cursor: default;
    opacity: 0.38;
}

.mini-action-accent {
    border-color: rgba(139, 92, 246, 0.45);
    color: #bea8ff;
}

.danger-action { color: #ff9ba5; }

.palette-file-actions .mini-action:last-child,
.selection-actions .mini-action {
    flex: 1 1 auto;
}

.layer-list {
    display: flex;
    flex-direction: column-reverse;
    gap: 7px;
    margin-top: 12px;
}

.layer-item {
    display: grid;
    min-width: 0;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.layer-item.is-active {
    border-color: rgba(139, 92, 246, 0.6);
    background: var(--primary-soft);
    box-shadow: inset 3px 0 0 var(--primary);
}

.layer-visibility {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
}

.layer-visibility:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }

.layer-select {
    display: grid;
    min-width: 0;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    text-align: left;
}

.layer-thumb {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background-color: #c9c9cf;
    background-image: linear-gradient(45deg, #e8e8ec 25%, transparent 25%), linear-gradient(-45deg, #e8e8ec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e8ec 75%), linear-gradient(-45deg, transparent 75%, #e8e8ec 75%);
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
    background-size: 8px 8px;
    image-rendering: pixelated;
}

.layer-name {
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layer-footer-actions .mini-action { flex: 1; }

.range-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 10px;
}

.range-field strong { color: var(--text-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.full-range {
    width: 100%;
    margin-top: 8px;
    accent-color: var(--primary);
}

.transform-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.transform-grid .mini-action:last-child { grid-column: 1 / -1; }
.transform-dimensions { margin-top: 16px; }
.transform-size-actions .mini-action { flex: 1; }

.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.action-tile-wide {
    grid-column: 1 / -1;
}

.privacy-chip {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid rgba(64, 201, 136, 0.28);
    border-radius: 999px;
    background: rgba(64, 201, 136, 0.08);
    color: #74d8aa;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.photo-empty-state {
    padding: 18px;
}

.photo-dropzone {
    display: flex;
    width: 100%;
    min-height: 168px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
    padding: 24px;
    border: 1px dashed rgba(139, 92, 246, 0.5);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.1), rgba(255, 255, 255, 0.02));
    color: var(--text);
    text-align: center;
}

.photo-dropzone:hover {
    border-color: #a78bfa;
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.16), rgba(255, 255, 255, 0.035));
}

.photo-dropzone svg {
    width: 36px;
    height: 36px;
    color: #aa8af8;
}

.photo-dropzone strong { font-size: 12px; }
.photo-dropzone span,
.photo-local-note { color: var(--text-muted); font-size: 9px; }
.photo-local-note { margin: 12px 0 0; text-align: center; }

.photo-source-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.photo-source-summary > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.photo-source-summary strong,
.photo-source-summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-source-summary strong { font-size: 11px; }
.photo-source-summary small { color: var(--text-muted); font-size: 9px; }

.photo-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.photo-preview-card {
    min-width: 0;
}

.photo-preview-card > span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
}

.photo-preview-surface {
    position: relative;
    display: grid;
    height: 126px;
    overflow: auto;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: #bfc0c7;
    background-image: linear-gradient(45deg, #e7e7eb 25%, transparent 25%), linear-gradient(-45deg, #e7e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e7e7eb 75%), linear-gradient(-45deg, transparent 75%, #e7e7eb 75%);
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    background-size: 12px 12px;
}

.photo-preview-surface canvas {
    display: block;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.photo-preview-surface.is-pixel canvas {
    image-rendering: pixelated;
}

.photo-processing {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    background: rgba(13, 13, 18, 0.78);
    color: var(--text);
    font-size: 9px;
}

.photo-processing[hidden] { display: none; }

.photo-processing span {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: photo-spin 0.75s linear infinite;
}

@keyframes photo-spin { to { transform: rotate(360deg); } }

.photo-preview-footer {
    margin-top: 8px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 9px;
}

.photo-style-grid {
    display: grid;
    gap: 7px;
}

.photo-style-grid { grid-template-columns: repeat(3, 1fr); }

.photo-choice {
    display: flex;
    min-width: 0;
    min-height: 58px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-soft);
    text-align: left;
}

.photo-choice:hover { border-color: var(--line-strong); }
.photo-choice.is-active { border-color: var(--primary); background: rgba(139, 92, 246, 0.12); color: var(--text); }
.photo-choice strong { font-size: 9px; }
.photo-choice small { color: var(--text-muted); font-size: 8px; line-height: 1.35; }

.photo-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.photo-preset-grid button {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
}

.photo-preset-grid button.is-active { border-color: var(--primary); background: rgba(139, 92, 246, 0.12); color: var(--text); }
.photo-dimensions { margin-top: 14px; }

.check-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 13px;
    color: var(--text-soft);
    cursor: pointer;
}

.check-row input { margin-top: 2px; accent-color: var(--primary); }
.check-row span { display: flex; flex-direction: column; gap: 3px; }
.check-row strong { font-size: 10px; }
.check-row small { color: var(--text-muted); font-size: 8px; line-height: 1.35; }
.select-field { width: 100%; color-scheme: dark; }
.photo-adjustments .range-field { margin-top: 17px; }
.photo-apply-section { display: grid; gap: 10px; }
.photo-primary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo-primary-actions .button { width: 100%; min-width: 0; padding: 0 9px; font-size: 9px; }

.ai-hero {
    background: radial-gradient(circle at 100% 0, rgba(139, 92, 246, 0.16), transparent 52%);
}

.ai-bridge-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.ai-bridge-card[data-state="online"] {
    border-color: rgba(64, 201, 136, 0.32);
    background: rgba(64, 201, 136, 0.06);
}

.ai-bridge-card[data-state="file"] {
    border-color: rgba(245, 181, 67, 0.32);
    background: rgba(245, 181, 67, 0.06);
}

.ai-bridge-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #777788;
    box-shadow: 0 0 0 4px rgba(119, 119, 136, 0.12);
}

.ai-bridge-card[data-state="online"] .ai-bridge-dot {
    background: #40c988;
    box-shadow: 0 0 0 4px rgba(64, 201, 136, 0.12);
}

.ai-bridge-card[data-state="file"] .ai-bridge-dot {
    background: #f5b543;
    box-shadow: 0 0 0 4px rgba(245, 181, 67, 0.12);
}

.ai-bridge-card > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.ai-bridge-card strong { color: var(--text); font-size: 10px; }
.ai-bridge-card small { color: var(--text-muted); font-size: 8px; line-height: 1.4; }

.ai-provider-grid { display: grid; gap: 7px; }

.ai-provider {
    display: grid;
    min-height: 58px;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-soft);
    text-align: left;
}

.ai-provider:hover { border-color: var(--line-strong); }
.ai-provider.is-active { border-color: var(--primary); background: rgba(139, 92, 246, 0.11); color: var(--text); }
.ai-provider > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.ai-provider strong { font-size: 10px; }
.ai-provider small { color: var(--text-muted); font-size: 8px; line-height: 1.35; }

.ai-provider-icon {
    display: grid;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.12);
    color: #b9a0fa;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 8px;
    font-weight: 900;
}

.ai-provider-note { margin-top: 10px; }
.ai-scope-section { margin-bottom: 16px; }
.ai-scope-section .section-heading { margin-bottom: 9px; }
.ai-scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

.ai-scope {
    display: flex;
    min-width: 0;
    min-height: 58px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-soft);
    text-align: left;
}

.ai-scope:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-3); }
.ai-scope.is-active { border-color: var(--primary); background: rgba(139, 92, 246, 0.11); color: var(--text); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.08); }
.ai-scope:disabled { cursor: not-allowed; opacity: 0.42; }
.ai-scope strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ai-scope small { color: var(--text-muted); font-size: 7px; line-height: 1.35; }
.ai-scope-note { margin-top: 9px; }
.ai-prompt { min-height: 104px; padding: 10px; resize: vertical; line-height: 1.5; }
.ai-dimensions { margin-top: 14px; }
.ai-frame-count { margin-top: 13px; }
.ai-request-button { margin-top: 16px; }

.ai-job-card {
    display: grid;
    gap: 9px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.025));
}

.ai-job-card[data-status="completed"] { border-color: rgba(64, 201, 136, 0.34); background: rgba(64, 201, 136, 0.06); }
.ai-job-card[data-status="failed"] { border-color: rgba(241, 109, 122, 0.4); background: rgba(241, 109, 122, 0.06); }
.ai-job-card[data-status="canceled"] { border-color: rgba(245, 181, 67, 0.32); background: rgba(245, 181, 67, 0.05); }
.ai-job-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text); font-size: 9px; }
.ai-job-heading strong { color: #b9a0fa; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; }
.ai-progress-track { overflow: hidden; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); }
.ai-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #b493ff); transition: width 240ms ease; }
.ai-job-card[data-status="running"] .ai-progress-track span,
.ai-job-card[data-status="queued"] .ai-progress-track span,
.ai-job-card[data-status="canceling"] .ai-progress-track span { box-shadow: 0 0 12px rgba(139, 92, 246, 0.55); }
.ai-job-card[data-status="completed"] .ai-progress-track span { background: #40c988; }
.ai-job-card[data-status="failed"] .ai-progress-track span { background: #f16d7a; }
.ai-job-card p { margin: 0; color: var(--text-muted); font-size: 8px; line-height: 1.45; }
.ai-job-actions { display: flex; justify-content: flex-end; gap: 7px; }
.ai-job-actions .button { min-height: 30px; padding: 0 10px; font-size: 8px; }
.ai-import-section { display: grid; gap: 9px; }
.ai-import-section .section-heading { margin-bottom: 2px; }

.action-tile {
    display: flex;
    min-width: 0;
    min-height: 68px;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    text-align: left;
}

.action-tile:hover {
    border-color: rgba(139, 92, 246, 0.55);
    background: var(--surface-3);
}

.action-tile svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    color: #aa8af8;
}

.action-tile span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.action-tile strong {
    font-size: 11px;
}

.action-tile small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-button {
    padding: 4px 0;
    background: transparent;
    color: #ad90f6;
    font-size: 10px;
    font-weight: 750;
}

.text-button:hover {
    color: #c9b7ff;
}

.project-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-empty {
    display: grid;
    min-height: 124px;
    padding: 18px;
    place-items: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
}

.project-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 6px;
}

.project-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    text-align: left;
}

.project-card:hover,
.project-card.is-current {
    border-color: rgba(139, 92, 246, 0.54);
    background: var(--surface-3);
}

.project-card.is-current {
    box-shadow: inset 3px 0 0 var(--primary);
}

.project-thumb {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: #c9c9cf;
    background-image: linear-gradient(45deg, #e8e8ec 25%, transparent 25%), linear-gradient(-45deg, #e8e8ec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e8ec 75%), linear-gradient(-45deg, transparent 75%, #e8e8ec 75%);
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    background-size: 12px 12px;
}

.project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.project-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.project-copy strong,
.project-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-copy strong {
    font-size: 11px;
}

.project-copy small {
    color: var(--text-muted);
    font-size: 9px;
}

.project-delete {
    display: grid;
    width: 30px;
    height: 30px;
    align-self: center;
    padding: 0;
    place-items: center;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
}

.project-delete:hover {
    background: rgba(241, 109, 122, 0.12);
    color: var(--danger);
}

.project-delete svg {
    width: 15px;
    height: 15px;
}

.local-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 18px 22px;
    padding: 11px;
    border: 1px solid rgba(65, 214, 143, 0.2);
    border-radius: var(--radius);
    background: rgba(65, 214, 143, 0.055);
}

.local-note svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--success);
}

.local-note p {
    margin: 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.5;
}

.local-note strong {
    color: #8ee7bc;
}

.color-control {
    align-items: stretch;
    gap: 12px;
}

.color-swatch-large {
    position: relative;
    display: block;
    width: 60px;
    min-height: 58px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background-color: #c9c9cf;
    background-image: linear-gradient(45deg, #eeeef2 25%, transparent 25%), linear-gradient(-45deg, #eeeef2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eeeef2 75%), linear-gradient(-45deg, transparent 75%, #eeeef2 75%);
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    background-size: 14px 14px;
    cursor: pointer;
}

.color-swatch-large input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.color-swatch-large span {
    position: absolute;
    inset: 0;
    background-color: #8257e5;
}

.color-opacity-control .range-field { margin-top: 16px; }
.color-opacity-control .section-description { margin-top: 10px; font-size: 9px; }
.controlled-opacity-control {
    margin-top: 16px;
    padding-top: 1px;
    border-top: 1px solid var(--line-soft, var(--line));
}
.controlled-opacity-control .range-field { margin-top: 14px; }

.opaque-only-toggle {
    display: grid;
    width: 100%;
    min-height: 62px;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-soft);
    text-align: left;
}

.opaque-only-toggle:hover { border-color: var(--line-strong); }
.opaque-only-toggle[aria-pressed="true"] { border-color: rgba(139, 92, 246, 0.72); background: rgba(139, 92, 246, 0.12); }

.toggle-switch {
    position: relative;
    width: 30px;
    height: 17px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #23232d;
    transition: background 120ms ease, border-color 120ms ease;
}

.toggle-switch i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 120ms ease, background 120ms ease;
}

.opaque-only-toggle[aria-pressed="true"] .toggle-switch { border-color: var(--primary); background: var(--primary); }
.opaque-only-toggle[aria-pressed="true"] .toggle-switch i { transform: translateX(13px); background: white; }
.toggle-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.toggle-copy strong { font-size: 9px; }
.toggle-copy small { color: var(--text-muted); font-size: 8px; line-height: 1.35; }
.opaque-only-toggle b { color: var(--text-muted); font-size: 8px; }
.opaque-only-toggle[aria-pressed="true"] b { color: #bea8ff; }
.controlled-opacity-control.is-disabled {
    opacity: .5;
}

.controlled-opacity-control.is-disabled input {
    cursor: not-allowed;
}

.field-stack {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 7px;
}

.field-stack > label,
.field-stack > span,
.field-stack > :first-child:not(input) {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 650;
}

.text-field {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    outline: none;
    background: #111118;
    color: var(--text);
    font-size: 12px;
}

.text-field:hover {
    border-color: #555369;
}

.text-field:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    text-transform: uppercase;
}

.field-error,
.form-error {
    min-height: 14px;
    color: #ff9da6;
    font-size: 10px;
    line-height: 1.4;
}

.form-error {
    margin: 0;
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px;
}

.palette-swatch {
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.13);
}

.palette-swatch:hover,
.palette-swatch.is-active {
    outline: 2px solid white;
    outline-offset: 2px;
}

.empty-copy {
    padding: 10px 0 2px;
}

.segmented-control {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #101016;
}

.segment {
    min-height: 32px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 650;
}

.segment:hover {
    color: var(--text-soft);
}

.segment.is-active {
    background: var(--surface-4);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.canvas-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row {
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 11px;
}

.detail-row strong {
    color: var(--text-soft);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px;
}

.export-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    border: 0;
}

.export-options legend {
    margin-bottom: 10px;
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 650;
}

.scale-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.scale-choice {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 8px 5px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-soft);
    cursor: pointer;
}

.scale-choice:hover,
.scale-choice:has(input:checked) {
    border-color: rgba(139, 92, 246, 0.66);
    background: rgba(139, 92, 246, 0.1);
    color: #d6c8ff;
}

.scale-choice input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.scale-choice:has(input:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.scale-choice span {
    font-size: 12px;
    font-weight: 800;
}

.scale-choice small {
    overflow: hidden;
    max-width: 100%;
    color: var(--text-muted);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-file-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.project-file-actions .mini-action {
    min-height: 36px;
    height: auto;
    line-height: 1.3;
    white-space: normal;
}

.asset-library-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.asset-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.asset-empty {
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}

.asset-row {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    cursor: grab;
    user-select: none;
}

.asset-row:active {
    cursor: grabbing;
}

.asset-thumb {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border-radius: 5px;
    background-color: #c9c9cf;
    background-image: linear-gradient(45deg, #e8e8ec 25%, transparent 25%), linear-gradient(-45deg, #e8e8ec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e8ec 75%), linear-gradient(-45deg, transparent 75%, #e8e8ec 75%);
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
    background-size: 8px 8px;
}

.asset-thumb img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}

.asset-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.asset-copy strong,
.asset-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-copy strong { color: var(--text-soft); font-size: 10px; }
.asset-copy small { color: var(--text-muted); font-size: 8px; }

.asset-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.asset-action {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-3);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.asset-action:hover { border-color: var(--line-strong); color: var(--text); }
.asset-action.is-danger:hover { border-color: rgba(241, 109, 122, 0.45); color: #f58b96; }

.import-background-option {
    margin-top: 12px;
}

.radio-card {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    cursor: pointer;
}

.radio-card:hover,
.radio-card:has(input:checked) {
    border-color: rgba(139, 92, 246, 0.58);
    background: rgba(139, 92, 246, 0.08);
}

.radio-card input {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.radio-mark {
    display: grid;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
}

.radio-card input:checked + .radio-mark {
    border: 5px solid var(--primary);
    background: white;
}

.radio-card input:focus-visible + .radio-mark {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.radio-card > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.radio-card strong {
    font-size: 11px;
}

.radio-card small {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.45;
}

.output-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.output-preview-wrap {
    display: grid;
    width: 88px;
    height: 88px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: #c9c9cf;
    background-image: linear-gradient(45deg, #e8e8ec 25%, transparent 25%), linear-gradient(-45deg, #e8e8ec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e8ec 75%), linear-gradient(-45deg, transparent 75%, #e8e8ec 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.output-preview-wrap.is-white {
    background: #fff;
}

#export-preview {
    max-width: 80px;
    max-height: 80px;
    image-rendering: pixelated;
}

.output-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.output-summary span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.output-summary strong {
    font-size: 16px;
}

.output-summary small {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.4;
}

.inline-message {
    margin: 16px 18px 0;
    padding: 10px;
    border: 1px solid rgba(243, 183, 95, 0.22);
    border-radius: var(--radius);
    background: rgba(243, 183, 95, 0.07);
    color: #e8c58f;
    font-size: 10px;
}

.inline-message[data-kind="ready"] {
    border-color: rgba(64, 201, 136, 0.24);
    background: rgba(64, 201, 136, 0.07);
    color: #83dcae;
}

.inline-message[data-kind="warning"] {
    border-color: rgba(243, 183, 95, 0.3);
    background: rgba(243, 183, 95, 0.08);
    color: #e8c58f;
}

.inline-message[data-kind="progress"] {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.08);
    color: #c9b8ff;
}

.export-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 10px;
}

.clipboard-note {
    padding: 0 18px 24px;
    line-height: 1.55;
}

.clipboard-note strong {
    color: var(--text-soft);
}

.modal {
    width: min(520px, calc(100vw - 32px));
    max-width: none;
    padding: 0;
    overflow: visible;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
}

.modal::backdrop {
    background: rgba(5, 5, 8, 0.74);
    backdrop-filter: blur(5px);
}

.modal-card {
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: var(--shadow-lg);
}

.modal-card-small {
    max-width: 440px;
    margin: auto;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid var(--line);
}

.modal-header h2 {
    font-size: 18px;
}

.modal-header p {
    max-width: 410px;
    margin: 7px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.55;
}

.modal-close {
    flex: 0 0 auto;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 22px 4px;
}

.preset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.preset-grid button {
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
}

.preset-grid button:hover,
.preset-grid button.is-active {
    border-color: rgba(139, 92, 246, 0.65);
    background: var(--primary-soft);
    color: #c6b2ff;
}

.dimension-fields {
    display: grid;
    grid-template-columns: 1fr 24px 1fr;
    align-items: end;
    gap: 6px;
}

.dimension-x {
    display: grid;
    height: 38px;
    place-items: center;
    color: var(--text-muted);
    font-size: 13px;
}

.modal-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 22px 22px;
}

.modal-actions .button {
    flex-shrink: 0;
}

#confirm-dialog .modal-card-small {
    max-width: 560px;
}

.toast {
    position: fixed;
    z-index: 500;
    right: 20px;
    bottom: 20px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto 24px;
    align-items: center;
    gap: 9px;
    width: min(420px, calc(100vw - 40px));
    min-height: 48px;
    padding: 10px 10px 10px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    opacity: 0;
    background: #24242f;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
    color: var(--text-soft);
    font-size: 11px;
    transform: translateY(8px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(65, 214, 143, 0.1);
}

.toast[data-kind="error"] .toast-icon {
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(241, 109, 122, 0.1);
}

.toast[data-kind="warning"] .toast-icon {
    background: var(--warning);
    box-shadow: 0 0 0 4px rgba(243, 183, 95, 0.1);
}

.toast button {
    min-height: 28px;
    padding: 0 7px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #bda5ff;
    font-size: 10px;
    font-weight: 750;
}

.toast button:hover {
    background: rgba(255, 255, 255, 0.05);
}

.toast-close {
    padding: 0 !important;
    color: var(--text-muted) !important;
    font-size: 17px !important;
}

.fatal-error {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    padding: 28px;
    place-content: center;
    gap: 8px;
    background: #0d0d12;
    text-align: center;
}

.fatal-error span {
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 1180px) {
    .topbar {
        grid-template-columns: minmax(150px, 0.65fr) minmax(190px, 1fr) auto;
        gap: 10px;
    }

    .brand-copy {
        display: none;
    }

    .timeline-summary {
        display: none;
    }

    .timeline-play-button {
        min-width: 34px;
        padding: 0;
    }

    #animation-play-label,
    .duration-field > label {
        display: none;
    }

    .timeline-toolbar {
        gap: 7px;
    }

    .timeline-actions .mini-action {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 9px;
    }

    .editor-layout {
        grid-template-columns: 66px minmax(0, 1fr) 300px;
    }

    .editor-layout.color-panel-collapsed {
        grid-template-columns: 66px minmax(0, 1fr) 300px;
    }

    .color-panel {
        position: absolute;
        z-index: 30;
        top: 0;
        bottom: 0;
        left: 66px;
        width: 240px;
        border-left: 1px solid var(--line);
        box-shadow: 16px 0 36px rgba(0, 0, 0, 0.34);
        transform: translateX(0);
        transition: opacity 120ms ease, transform 160ms ease, visibility 160ms;
    }

    .color-panel.is-collapsed {
        transform: translateX(-18px);
    }

    .topbar .button span {
        display: none;
    }

    .topbar .button {
        width: 38px;
        padding: 0;
    }

    .button-full {
        width: 100%;
        padding: 0 13px;
    }

    .button-full span {
        display: initial;
    }

    .project-name {
        width: min(210px, 21vw);
    }

    .panel-section {
        padding-right: 15px;
        padding-left: 15px;
    }

    .local-note {
        margin-right: 15px;
        margin-left: 15px;
    }
}

@media (max-width: 900px) {
    .topbar {
        grid-template-columns: auto minmax(180px, 1fr) auto;
    }

    .mode-button {
        padding: 0 7px;
        font-size: 9px;
    }

    .document-identity {
        justify-self: stretch;
    }

    .save-status {
        display: none;
    }

    .project-name {
        width: 100%;
        text-align: left;
    }

    .editor-layout {
        grid-template-columns: 62px minmax(0, 1fr) 280px;
    }

    .editor-layout.color-panel-collapsed {
        grid-template-columns: 62px minmax(0, 1fr) 280px;
    }

    .color-panel {
        left: 62px;
        width: min(270px, calc(100vw - 342px));
    }

    .tool-rail {
        padding-right: 4px;
        padding-left: 4px;
    }

    .tool-button {
        width: 50px;
    }

    .status-cluster .status-item:first-child {
        display: none;
    }

    .zoom-controls input[type="range"] {
        width: 78px;
    }

    .workspace.is-animation-mode {
        grid-template-rows: minmax(0, 1fr) 160px 44px;
    }

    .animation-dock {
        grid-template-rows: 48px minmax(0, 1fr);
    }

    .timeline-toolbar {
        gap: 7px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .timeline-field-group > label,
    .duration-field {
        display: none;
    }
}

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