@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:wght@400;500;600;700&family=Fira+Sans+Condensed:wght@400;500;600;700&family=Gabarito:wght@400;500;600;700;800;900&family=Luckiest+Guy&family=Montserrat:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&family=Rubik:wght@400;500;600;700;800;900&display=swap');
@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card-foreground);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

:root {
  color-scheme: dark;
  --background: #17191c;
  --foreground: #e2e4e7;
  --card: #202327;
  --card-foreground: #e2e4e7;
  --popover: #202327;
  --popover-foreground: #e2e4e7;
  --primary: #aeb5bc;
  --primary-foreground: #181a1d;
  --secondary: #2a2d31;
  --secondary-foreground: #d9dce0;
  --muted: #272a2e;
  --muted-foreground: #92989f;
  --accent: #303338;
  --accent-foreground: #e2e4e7;
  --destructive: #c17474;
  --border: #34383d;
  --input: #3a3e43;
  --ring: #aeb5bc;
  --chart-1: #aeb5bc;
  --chart-2: #858d95;
  --chart-3: #c2c6ca;
  --chart-4: #707880;
  --chart-5: #d8dadd;
  --radius: 0.45rem;
  --sidebar: #1c1e21;
  --sidebar-foreground: #e2e4e7;
  --sidebar-primary: #aeb5bc;
  --sidebar-primary-foreground: #181a1d;
  --sidebar-accent: #2b2e32;
  --sidebar-accent-foreground: #e2e4e7;
  --sidebar-border: #303338;
  --sidebar-ring: #aeb5bc;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.editor-app { display: flex; width: 100%; height: 100dvh; min-height: 560px; flex-direction: column; overflow: hidden; background: #17191c; color: #e2e4e7; }
.topbar { z-index: 5; display: flex; flex: 0 0 58px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #303338; background: #1c1e21; padding: 0 18px; }
.workspace-title { display: flex; min-width: 196px; align-items: center; gap: 10px; }
.workspace-indicator { width: 8px; height: 8px; border: 1px solid #858d95; background: #858d95; }
.workspace-title > div { display: flex; flex-direction: column; gap: 2px; }
.workspace-title strong { color: #e2e4e7; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.workspace-title > div > span { color: #80868d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; letter-spacing: .1em; }
.document-status { display: flex; flex: 1; align-items: center; gap: 8px; color: #b7bbc0; font-size: 11px; }
.status-square { width: 6px; height: 6px; background: #828990; }
.saved-label { margin-left: 4px; color: #727880; font-size: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.size-caption, .eyebrow { color: #858b92; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 600; letter-spacing: .1em; }
.preset-select-wrap { position: relative; }
.preset-select { width: 210px; height: 31px; appearance: none; border: 1px solid #3a3e43; border-radius: 4px; background: #24272b; padding: 0 28px 0 9px; color: #d3d6d9; font-size: 10px; outline: none; }
.preset-select-wrap > svg { position: absolute; top: 9px; right: 8px; width: 13px; height: 13px; color: #8a9097; pointer-events: none; }
.preset-select:focus-visible, .dark-select:focus-visible, .text-content-input:focus-visible, .hex-input:focus-visible { border-color: #aeb5bc; box-shadow: 0 0 0 2px #aeb5bc24; outline: none; }
.export-control { display: flex; align-items: center; gap: 7px; }
.format-switch { display: flex; height: 31px; align-items: center; gap: 2px; border: 1px solid #373b40; border-radius: 4px; background: #202327; padding: 3px; }
.format-switch button { height: 23px; border: 0; border-radius: 3px; background: transparent; padding: 0 7px; color: #858b92; cursor: pointer; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.format-switch button.selected { background: #3a3e43; color: #eaeced; }
.export-button { display: inline-flex; height: 32px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #858d95; border-radius: 4px; background: #858d95; padding: 0 11px; color: #17191c; cursor: pointer; font-size: 10px; font-weight: 650; white-space: nowrap; }
.export-button:hover:not(:disabled) { background: #aeb5bc; }
.export-button:disabled { cursor: progress; opacity: .65; }
.export-button svg { width: 14px; height: 14px; }

.editor-workspace { display: flex; min-height: 0; flex: 1; }
.tool-panel, .properties-panel { position: relative; z-index: 2; display: flex; flex: 0 0 234px; flex-direction: column; overflow: auto; border-right: 1px solid #303338; background: #1c1e21; padding: 17px 13px 12px; }
.sidebar-section { padding-bottom: 14px; }
.panel-heading { display: flex; min-height: 19px; align-items: center; justify-content: space-between; padding: 0 5px; }
.panel-heading-note { margin-top: 4px; color: #70767d; font-size: 9px; }
.tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 9px; }
.tool-button { display: flex; height: 33px; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; padding: 0 8px; color: #aeb3b8; cursor: pointer; text-align: left; }
.tool-button svg { width: 14px; height: 14px; flex: 0 0 auto; color: #858b92; stroke-width: 1.7; }
.tool-button span { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tool-button:hover, .tool-button.is-active { border-color: #40444a; background: #292c30; color: #eceeef; }
.tool-button.is-active svg { color: #c1c6cb; }
.tool-button:focus-visible, .format-button:focus-visible, .delete-layer:focus-visible, .export-button:focus-visible, .upload-canvas-button:focus-visible, .guide-toggle:focus-visible, .layer-row:focus-visible, .stack-grid button:focus-visible, .transform-handle:focus-visible, .rotate-handle:focus-visible, .mini-tool:focus-visible, .layer-name-button:focus-visible, .layer-select-button:focus-visible, .layer-index-button:focus-visible, .zoom-controls button:focus-visible { outline: 2px solid #aeb5bc; outline-offset: 2px; }
.active-colors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px 30px; gap: 5px; padding: 2px 2px 13px; }
.active-color-swatch { position: relative; display: flex; min-width: 0; height: 35px; align-items: center; gap: 5px; border: 1px solid #393d42; border-radius: 3px; background: #222529; padding: 0 5px; cursor: pointer; }
.active-color-swatch span { overflow: hidden; color: #aeb3b8; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.active-color-swatch i { width: 13px; height: 13px; flex: 0 0 13px; border: 1px solid #ffffff45; border-radius: 2px; }
.active-color-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mini-tool { display: flex; min-width: 0; height: 35px; align-items: center; justify-content: center; border: 1px solid #393d42; border-radius: 3px; background: #222529; color: #9da4ab; cursor: pointer; }
.mini-tool svg { width: 14px; height: 14px; }
.mini-tool:hover, .mini-tool.is-active { border-color: #656c73; background: #34383d; color: #edf0f2; }
.layers-section { border-top: 1px solid #303338; padding-top: 12px; }
.count-badge { min-width: 19px; border: 1px solid #3a3e43; border-radius: 3px; padding: 2px 5px; color: #979da4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; text-align: center; }
.layers-hint { margin: 4px 5px 0; color: #767d84; font-size: 8px; }
.layer-list { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; }
.layer-list > li { min-width: 0; }
.layer-row { display: flex; min-width: 0; height: 29px; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 3px; background: transparent; padding: 0 6px; color: #aeb3b8; cursor: pointer; text-align: left; }
.layer-row:hover { background: #272a2e; }
.layer-row.is-selected { border-color: #41464c; background: #2a2d31; color: #e2e4e7; }
.layer-row button { min-width: 0; border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; }
.layer-select-button { display: flex; align-items: center; justify-content: center; }
.layer-kind-icon { display: flex; width: 14px; height: 14px; flex: 0 0 14px; align-items: center; justify-content: center; color: #8e959c; }
.layer-kind-icon svg { width: 13px; height: 13px; stroke-width: 1.5; }
.layer-name { overflow: hidden; flex: 1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.layer-name-button { flex: 1; overflow: hidden; font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.layer-name-button:hover { color: #f0f2f3 !important; }
.layer-name-input { width: 0; min-width: 0; height: 21px; flex: 1; border: 1px solid #59616a !important; border-radius: 2px; outline: none; background: #202327 !important; padding: 0 4px !important; color: #f0f2f3 !important; font-size: 9px; }
.layer-group-mark { border: 1px solid #50565d; border-radius: 2px; padding: 1px 3px; color: #aeb5bc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7px; }
.layer-index, .layer-index-button { color: #71777e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }
.layer-index-button { flex: 0 0 auto; }
.background-layer { margin-top: 3px; border-top: 1px solid #303338; border-radius: 0; padding-top: 4px; }
.background-chip { border: 1px solid #60666d; background: #272a2e; }
.guides-section { border-top: 1px solid #303338; padding-top: 12px; }
.guides-section .panel-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
.guide-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.guide-toggle { display: flex; min-height: 27px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid transparent; border-radius: 3px; background: transparent; padding: 0 5px; color: #aeb3b8; cursor: pointer; text-align: left; }
.guide-toggle:hover { background: #272a2e; }
.guide-toggle-label { font-size: 9px; }
.switch-track { position: relative; width: 25px; height: 14px; flex: 0 0 25px; border: 1px solid #4a4f55; border-radius: 9px; background: #303338; transition: background .14s ease; }
.switch-track > span { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #aeb4bb; transition: transform .14s ease; }
.guide-toggle.is-on .switch-track { border-color: #9299a0; background: #7a828a; }
.guide-toggle.is-on .switch-track > span { transform: translateX(11px); background: #f0f1f2; }
.sidebar-footer { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 12px 5px 2px; color: #70767d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }
.sidebar-footer svg { width: 12px; height: 12px; }

.canvas-workspace { position: relative; display: flex; min-width: 0; flex: 1; flex-direction: column; overflow: hidden; background-color: #222529; background-image: radial-gradient(#ffffff0a .7px, transparent .7px); background-size: 18px 18px; }
.canvas-toolbar { display: flex; min-height: 39px; flex: 0 0 39px; align-items: center; gap: 12px; border-bottom: 1px solid #303338; background: #202327; padding: 0 14px; }
.canvas-tool-active { display: flex; align-items: center; gap: 7px; color: #d0d3d6; font-size: 10px; }
.canvas-tool-active > svg { width: 13px; height: 13px; color: #aeb5bc; }
.canvas-tool-active kbd { border: 1px solid #3b4045; border-radius: 3px; padding: 1px 4px; color: #828890; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }
.canvas-dimensions { margin-left: auto; color: #838a91; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zoom-controls { display: flex; height: 25px; align-items: center; gap: 3px; border: 1px solid #3a3e43; border-radius: 3px; background: #24272b; padding: 2px; }
.zoom-controls button { display: flex; width: 21px; height: 19px; align-items: center; justify-content: center; border: 0; border-radius: 2px; background: transparent; color: #aeb5bc; cursor: pointer; }
.zoom-controls button:hover { background: #373b40; color: #f0f2f3; }
.zoom-controls svg { width: 12px; height: 12px; }
.zoom-controls span { min-width: 32px; color: #b6bbc0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; text-align: center; }
.upload-canvas-button { display: inline-flex; height: 26px; align-items: center; gap: 6px; border: 1px solid #3a3e43; border-radius: 3px; background: #282b2f; padding: 0 8px; color: #c0c4c8; cursor: pointer; font-size: 9px; }
.upload-canvas-button:hover { border-color: #5a6067; background: #303338; }
.upload-canvas-button svg { width: 13px; height: 13px; color: #aeb5bc; }
.canvas-stage { display: flex; min-height: 0; flex: 1; align-items: center; justify-content: center; overflow: auto; padding: 18px 26px; }
.fabric-viewport { position: relative; width: min(100%, calc((100dvh - 180px) * var(--workspace-ratio, 1))); max-height: calc(100dvh - 180px); flex: 0 0 auto; overflow: visible; isolation: isolate; }
.fabric-artboard { position: absolute; z-index: 0; overflow: hidden; border: 1px solid #555b62; border-radius: 2px; box-shadow: 0 15px 48px #0008; }
.fabric-artboard::before { position: absolute; z-index: 0; inset: 0; background-color: #fff; background-image: linear-gradient(45deg, #d2d5d8 25%, transparent 25%), linear-gradient(-45deg, #d2d5d8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d2d5d8 75%), linear-gradient(-45deg, transparent 75%, #d2d5d8 75%); background-position: 0 0, 0 12px, 12px -12px, -12px 0; background-size: 24px 24px; content: ''; pointer-events: none; }
.fabric-viewport:not(.is-checkerboard) .fabric-artboard::before { display: none; }
.fabric-artboard-guides { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.fabric-drawing-canvas { position: absolute; inset: 0; }
.fabric-viewport .canvas-container { position: absolute !important; z-index: 1; inset: 0; width: 100% !important; height: 100% !important; overflow: visible !important; touch-action: none; }
.fabric-viewport .canvas-container canvas { width: 100% !important; height: 100% !important; }
.fabric-viewport[data-tool='eyedropper'] .upper-canvas { cursor: crosshair !important; }
.fabric-viewport[data-tool='bucket'] .upper-canvas { cursor: cell !important; }
.fabric-selection-outlines { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.fabric-selection-outline { position: absolute; border: 1px dashed #e0e5e9; outline: 1px solid #1a1c1f80; transform-origin: center; }
.fabric-workspace-label { position: absolute; right: 2px; bottom: 2px; color: #8d949b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7px; letter-spacing: .09em; pointer-events: none; user-select: none; }
.editor-canvas::after { position: absolute; z-index: 250; inset: 0; border: 1px solid #ffffff12; content: ''; pointer-events: none; }
.uploaded-background { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.canvas-element { position: absolute; display: flex; align-items: center; overflow: visible; cursor: grab; line-height: 1; touch-action: none; user-select: none; white-space: pre; }
.canvas-element:active { cursor: grabbing; }
.text-element { display: block; padding: 0; }
.canvas-text-content { display: block; width: max-content; white-space: pre; line-height: .98; }
.square-element { border-radius: 1px; }
.circle-element { border-radius: 50%; }
.star-shape { position: absolute; inset: 0; background: currentColor; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 93%, 50% 71%, 21% 93%, 32% 57%, 2% 35%, 39% 35%); }
.canvas-element.is-selected { outline: 1px solid #d5d9dd; outline-offset: 3px; }
.canvas-transform-ui { position: absolute; z-index: 205; inset: -4px; pointer-events: none; }
.transform-handle { position: absolute; width: 9px; height: 9px; border: 1px solid #303338; border-radius: 1px; background: #e1e4e7; padding: 0; pointer-events: auto; touch-action: none; }
.handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.handle-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.rotate-handle { position: absolute; top: -30px; left: 50%; display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; transform: translateX(-50%); border: 1px solid #51565c; border-radius: 50%; background: #25282c; color: #e1e4e7; padding: 0; cursor: grab; pointer-events: auto; touch-action: none; }
.rotate-handle svg { width: 11px; height: 11px; }
.background-selection-ui { position: absolute; z-index: 200; inset: 0; outline: 1px solid #d5d9dd; outline-offset: -5px; pointer-events: none; }
.background-selection-ui span { position: absolute; top: 8px; left: 8px; background: #212428d9; padding: 4px 6px; color: #e2e4e7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; letter-spacing: .08em; }
.canvas-guides { position: absolute; z-index: 180; inset: 0; overflow: hidden; pointer-events: none; }
.guide-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: .2; vector-effect: non-scaling-stroke; }
.thirds-guide { stroke: #f1f3f580; stroke-dasharray: 1.4 1; }
.phi-guide { stroke: #d4d9debd; stroke-dasharray: 2.2 1.2; }
.horizon-guide { stroke: #e5e8ebd9; stroke-width: .28; }
.triangles-guide { stroke: #d9dde0b3; stroke-dasharray: 1.8 1; }
.center-guide { stroke: #f0f2f4cc; stroke-width: .28; }
.safe-guide { stroke: #f3f4f5e8; stroke-width: .32; stroke-dasharray: 2 1; }
.editor-canvas[data-exporting='true'] .canvas-guides, .editor-canvas[data-exporting='true'] .canvas-transform-ui, .editor-canvas[data-exporting='true'] .background-selection-ui { display: none !important; }
.editor-canvas[data-exporting='true'] .canvas-element.is-selected { outline: none !important; }
.canvas-statusbar { display: flex; min-height: 31px; flex: 0 0 31px; align-items: center; justify-content: space-between; border-top: 1px solid #303338; background: #202327; padding: 0 14px; color: #7f858c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.canvas-statusbar > div { display: flex; align-items: center; gap: 7px; }
.status-indicator { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #969da4; }
.status-separator { color: #545a60; }

.properties-panel { flex-basis: 258px; border-right: 0; border-left: 1px solid #303338; padding: 17px 14px 14px; }
.properties-title-row { display: flex; min-height: 34px; align-items: flex-start; justify-content: space-between; padding: 0 1px 12px; }
.properties-title-row h2 { margin: 6px 0 0; color: #e2e4e7; font-size: 12px; font-weight: 600; }
.delete-layer { display: flex; width: 25px; height: 25px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #999fa6; cursor: pointer; font-size: 19px; line-height: 1; }
.delete-layer:hover { border-color: #604747; background: #332626; color: #d79898; }
.property-section { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #303338; padding: 13px 1px 14px; }
.control-label-row, .section-title { display: flex; align-items: center; justify-content: space-between; }
.control-label, .section-title h3 { color: #aeb3b8; font-size: 9px; font-weight: 550; }
.section-title h3 { margin: 0; color: #d3d6d9; font-size: 10px; font-weight: 600; }
.section-title > svg { width: 13px; height: 13px; color: #858b92; }
.value-label { color: #858b92; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-variant-numeric: tabular-nums; }
.text-content-input { width: 100%; min-height: 62px; resize: vertical; border: 1px solid #3a3e43; border-radius: 3px; background: #24272b; padding: 7px 8px; color: #e2e4e7; font-size: 10px; line-height: 1.45; outline: none; }
.dark-select { width: 100%; height: 29px; border: 1px solid #3a3e43; border-radius: 3px; background: #24272b; padding: 0 8px; color: #d3d6d9; font-size: 9px; outline: none; }
.size-label-row { margin-top: 2px; }
.range-control { width: 100%; height: 13px; margin: 0; accent-color: #aeb5bc; cursor: pointer; }
.format-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.format-group { display: flex; gap: 2px; }
.format-button { display: flex; width: 27px; height: 25px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #92989f; cursor: pointer; }
.format-button svg { width: 13px; height: 13px; }
.format-button:hover { background: #2a2d31; color: #e2e4e7; }
.format-button.selected { border-color: #4a4f55; background: #303338; color: #e0e3e6; }
.uppercase-mark { font-size: 8px; font-weight: 800; letter-spacing: -.5px; }
.align-group { gap: 1px; }
.color-control-row { display: flex; gap: 7px; }
.color-input-wrap { position: relative; display: flex; width: 32px; height: 29px; flex: 0 0 32px; overflow: hidden; align-items: center; justify-content: center; border: 1px solid #484d53; border-radius: 3px; background: #282b2f; cursor: pointer; }
.color-input-wrap input { position: absolute; width: 42px; height: 42px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.hex-input { width: 100%; min-width: 0; height: 29px; border: 1px solid #3a3e43; border-radius: 3px; background: #24272b; padding: 0 8px; color: #d3d6d9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .04em; outline: none; }
.shadow-section { gap: 8px; }
.shadow-indicator { border: 1px solid #454a50; border-radius: 2px; background: #2a2d31; padding: 2px 5px; color: #b8bdc2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7px; font-weight: 700; letter-spacing: .06em; }
.shadow-opacity-label { margin-top: 4px; }
.stack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.stack-grid button { min-height: 28px; border: 1px solid #3a3e43; border-radius: 3px; background: #24272b; padding: 4px 5px; color: #b9bdc2; cursor: pointer; font-size: 8px; }
.stack-grid button:hover { border-color: #565c63; background: #2e3136; color: #eaeced; }
.inspector-note { border-top: 1px solid #303338; padding: 12px 1px; color: #7f858c; font-size: 9px; line-height: 1.55; }
.property-empty-state { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 20px; text-align: center; }
.empty-icon { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid #3a3e43; border-radius: 4px; background: #25282c; color: #a3a9b0; }
.empty-icon svg { width: 16px; height: 16px; }
.property-empty-state strong { color: #cbd0d4; font-size: 10px; font-weight: 600; }
.property-empty-state > span { max-width: 165px; color: #7f858c; font-size: 9px; line-height: 1.55; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.export-error { position: fixed; z-index: 300; right: 18px; bottom: 18px; border: 1px solid #604747; border-radius: 4px; background: #332626; padding: 10px 12px; color: #e1baba; font-size: 10px; box-shadow: 0 10px 30px #0006; }
.project-name-input { width: min(220px, 28vw); border: 0; background: transparent; padding: 0; color: #b7bbc0; font-size: 11px; outline: none; }
.project-name-input:focus { color: #f0f2f3; }
.project-action { display: inline-flex; height: 31px; align-items: center; gap: 5px; border: 1px solid #3a3e43; border-radius: 4px; background: #24272b; padding: 0 8px; color: #c5c9cd; cursor: pointer; font-size: 9px; }
.project-action:hover { background: #303338; }
.project-action svg { width: 13px; height: 13px; }
.editor-canvas.is-checkerboard::before { position: absolute; z-index: 0; inset: 0; background-color: #fff; background-image: linear-gradient(45deg, #d2d5d8 25%, transparent 25%), linear-gradient(-45deg, #d2d5d8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d2d5d8 75%), linear-gradient(-45deg, transparent 75%, #d2d5d8 75%); background-position: 0 0, 0 12px, 12px -12px, -12px 0; background-size: 24px 24px; content: ''; pointer-events: none; }
.editor-canvas[data-exporting='true'].is-checkerboard::before { display: none; }
.canvas-image-content { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.canvas-text-content.has-highlight { padding: .12em .22em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.selection-actions { display: flex; align-items: center; gap: 3px; }
.selection-actions button { min-width: 23px; height: 22px; border: 1px solid #3a3e43; border-radius: 3px; background: #282b2f; padding: 0 5px; color: #c4c8cc; cursor: pointer; font-size: 8px; }
.selection-actions button:hover:not(:disabled) { border-color: #666d75; background: #35393e; }
.selection-actions button:disabled { opacity: .45; cursor: not-allowed; }
.selection-actions svg { width: 12px; height: 12px; }
.align-action-label { margin: 0 3px; color: #7e858c; font-size: 8px; }
.flip-controls { display: flex; gap: 4px; }
.flip-controls .format-button { width: auto; min-height: 26px; gap: 5px; border: 1px solid #3a3e43; padding: 0 6px; font-size: 8px; }
.flip-controls .format-button svg { width: 12px; height: 12px; }
.image-tint-note { border: 0; padding: 2px 0 0; }
.palette-generator { border-top: 1px solid #303338; padding-top: 11px; }
.palette-generator-controls { display: flex; align-items: center; gap: 7px; margin: 9px 3px 7px; color: #91979e; font-size: 9px; }
.palette-wheel { display: flex; width: 23px; height: 23px; overflow: hidden; align-items: center; justify-content: center; border: 1px solid #535960; border-radius: 50%; background: conic-gradient(#eb5757, #f2c94c, #27ae60, #2d9cdb, #9b51e0, #eb5757); }
.palette-wheel input { width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; }
.palette-generator-controls button { margin-left: auto; border: 1px solid #3a3e43; border-radius: 3px; background: #24272b; padding: 4px 7px; color: #abb0b5; cursor: pointer; font-size: 8px; }
.generated-swatches { display: flex; gap: 5px; padding: 0 3px; }
.generated-swatches button { width: 25px; height: 20px; border: 1px solid #ffffff35; border-radius: 3px; cursor: pointer; }
.highlight-section { border-top: 1px solid #303338; }
.highlight-toggle { display: inline-flex; align-items: center; gap: 5px; color: #aeb3b8; font-size: 8px; }
.highlight-toggle input { accent-color: #aeb5bc; }
.highlight-color-row { display: flex; align-items: center; justify-content: space-between; color: #aeb3b8; font-size: 9px; }
.highlight-color-row input { width: 28px; height: 22px; border: 1px solid #484d53; border-radius: 3px; background: transparent; cursor: pointer; }
.editor-dialog-backdrop { position: fixed; z-index: 400; inset: 0; display: grid; place-items: center; background: #08090bcc; padding: 18px; }
.editor-dialog { width: min(100%, 430px); border: 1px solid #41464c; border-radius: 6px; background: #202327; box-shadow: 0 24px 80px #0009; }
.editor-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid #34383d; padding: 17px 18px 14px; }
.editor-dialog-header h2 { margin: 5px 0 0; color: #e2e4e7; font-size: 14px; font-weight: 600; }
.dialog-close { display: flex; width: 27px; height: 27px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #aeb3b8; cursor: pointer; }
.dialog-close:hover { background: #303338; }
.dialog-close svg { width: 15px; height: 15px; }
.dialog-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
.dialog-body > p { margin: 0; color: #a5abb1; font-size: 10px; line-height: 1.6; }
.project-file-name { height: 32px; border: 1px solid #3a3e43; border-radius: 3px; background: #24272b; padding: 0 8px; color: #e2e4e7; font-size: 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 4px; }
.dialog-primary, .dialog-secondary { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; border: 1px solid #4a4f55; border-radius: 3px; background: #303338; padding: 0 9px; color: #e3e5e7; cursor: pointer; font-size: 9px; }
.dialog-primary { border-color: #aeb5bc; background: #aeb5bc; color: #17191c; }
.dialog-actions svg { width: 13px; height: 13px; }
.dialog-status { margin: 0; border-top: 1px solid #34383d; padding: 11px 18px 13px; color: #aeb5bc; font-size: 9px; line-height: 1.5; }
.export-choice-list { display: grid; gap: 8px; margin-top: 4px; }
.export-choice { display: flex; width: 100%; min-height: 59px; align-items: center; gap: 11px; border: 1px solid #3a3e43; border-radius: 4px; background: #24272b; padding: 10px 12px; color: #c7cbd0; cursor: pointer; text-align: left; }
.export-choice:hover:not(:disabled) { border-color: #656c73; background: #2b2e32; }
.export-choice:disabled { opacity: .6; cursor: progress; }
.export-choice > svg { width: 16px; height: 16px; flex: 0 0 auto; color: #b7bdc3; }
.export-choice span { display: flex; flex-direction: column; gap: 4px; }
.export-choice strong { font-size: 10px; font-weight: 600; }
.export-choice small { color: #858b92; font-size: 8px; }

@media (max-width: 1150px) {
  .topbar { gap: 12px; padding: 0 12px; }
  .workspace-title { min-width: 145px; }
  .tool-panel { flex-basis: 210px; }
  .properties-panel { flex-basis: 240px; }
}
@media (max-width: 900px) {
  .document-status { display: none; }
  .tool-panel { flex-basis: 196px; }
  .properties-panel { flex-basis: 230px; }
  .canvas-stage { padding: 14px; }
}
@media (max-width: 680px) {
  .editor-app { height: auto; min-height: 100dvh; overflow: visible; }
  .topbar { min-height: 58px; height: auto; flex: 0 0 auto; flex-wrap: wrap; gap: 9px; padding: 9px 11px; }
  .workspace-title { min-width: auto; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .size-caption { display: none; }
  .preset-select { width: 148px; height: 29px; font-size: 9px; }
  .export-control { gap: 5px; }
  .format-switch { height: 29px; }
  .format-switch button { height: 21px; padding: 0 5px; }
  .export-button { height: 30px; gap: 5px; padding: 0 8px; font-size: 9px; }
  .editor-workspace { min-height: calc(100dvh - 58px); flex-direction: column; overflow: visible; }
  .tool-panel { width: 100%; flex: 0 0 auto; overflow: visible; border-right: 0; border-bottom: 1px solid #303338; padding: 7px 9px; }
  .sidebar-section { padding-bottom: 7px; }
  .sidebar-section:first-child { display: flex; align-items: center; gap: 9px; }
  .sidebar-section:first-child .tool-list { display: flex; margin: 0; }
  .sidebar-section:first-child .panel-heading { padding-left: 3px; }
  .tool-button { width: auto; min-width: 58px; height: 30px; gap: 5px; padding: 0 7px; }
  .tool-button span { font-size: 9px; }
  .layers-section, .guides-section { display: block; }
  .layers-section, .guides-section { border-top: 1px solid #303338; padding-top: 9px; }
  .layer-list { display: grid; max-height: 90px; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: auto; }
  .guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-footer { display: none; }
  .canvas-workspace { min-height: 68vh; overflow: visible; }
  .canvas-toolbar { min-height: 36px; flex-basis: 36px; padding: 0 9px; }
  .canvas-stage { min-height: 58vh; padding: 12px; }
  .editor-canvas { width: min(100%, calc((100dvh - 320px) * var(--canvas-ratio, 1))); max-height: none; }
  .fabric-viewport { width: min(100%, calc((100dvh - 320px) * var(--workspace-ratio, 1))); max-height: none; }
  .canvas-toolbar { gap: 7px; overflow-x: auto; }
  .canvas-tool-active, .selection-actions, .canvas-dimensions, .zoom-controls, .upload-canvas-button { flex: 0 0 auto; }
  .canvas-statusbar { min-height: 28px; flex-basis: 28px; padding: 0 10px; }
  .properties-panel { width: 100%; min-height: 240px; flex: 0 0 auto; overflow: visible; border-top: 1px solid #303338; border-left: 0; padding: 13px 14px 20px; }
  .property-empty-state { padding: 14px; }
}
@media (max-width: 430px) {
  .topbar { align-items: flex-start; }
  .topbar-actions { max-width: 63%; }
  .preset-select { width: 132px; }
  .upload-canvas-button { padding: 0 6px; }
  .upload-canvas-button span { display: none; }
  .canvas-dimensions { font-size: 8px; }
}

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

@layer base {
  * { @apply border-border outline-ring/50; }
}