:root { --bg: #11141b; --panel: #181c25; --panel-2: #1d222c; --panel-3: #242a35; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.14); --text: #f1f1ec; --muted: #8c929f; --muted-2: #656c78; --accent: #d9f28f; --accent-dark: #b8d36a; --canvas: #f8f5ee; --warm: #f0b05c; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 1180px; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; }
button, input, select { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
.app-shell { height: 100vh; display: flex; flex-direction: column; background: radial-gradient(circle at 57% 37%, rgba(50,59,78,.2), transparent 40%), var(--bg); }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(17,20,27,.88); }
.brand-lockup, .document-name, .top-actions, .canvas-tools, .canvas-meta, .layers-header, .setting-row, .color-picker-wrap, .blend-row, .properties-title { display: flex; align-items: center; }
.brand-lockup { gap: 12px; width: 280px; }.brand-lockup h1 { margin: 0; font: 600 19px/1 Georgia, serif; letter-spacing: .01em; }.eyebrow, .section-label { margin: 0; color: var(--muted-2); font: 500 9px/1.2 'Courier New', monospace; letter-spacing: .16em; }.brand-mark { width: 29px; height: 29px; position: relative; transform: rotate(-7deg); }.brand-mark span { display: block; position: absolute; border-radius: 8px; }.brand-mark span:nth-child(1) { width: 13px; height: 27px; left: 0; top: 2px; background: var(--accent); }.brand-mark span:nth-child(2) { width: 12px; height: 21px; left: 10px; top: 0; background: #ef6f61; }.brand-mark span:nth-child(3) { width: 11px; height: 15px; right: 0; bottom: 1px; background: #5e7ce2; }
.document-name { gap: 10px; position: absolute; left: 50%; transform: translateX(-50%); }.name-field { display: flex; flex-direction: column; gap: 2px; }.name-field input { width: 155px; border: 0; outline: 0; background: transparent; color: var(--text); text-align: center; font-weight: 600; }.name-field span { text-align: center; color: var(--muted-2); font-size: 10px; }.save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(217,242,143,.09); }
.top-actions { gap: 7px; width: 360px; justify-content: flex-end; }.icon-button, .canvas-icon-btn { background: transparent; color: var(--muted); border-radius: 9px; width: 33px; height: 33px; display: inline-grid; place-items: center; font-size: 19px; transition: .2s ease; }.icon-button:hover, .canvas-icon-btn:hover { background: var(--panel-3); color: var(--text); }.icon-button.subtle { font-size: 24px; color: var(--muted-2); }.icon-button.small { font-size: 23px; background: var(--panel-3); color: var(--text); }.top-divider, .canvas-toolbar-divider { height: 22px; width: 1px; background: var(--line-strong); margin: 0 6px; }.ghost-button, .primary-button { height: 34px; border-radius: 8px; padding: 0 12px; font-size: 11px; font-weight: 600; transition: .2s ease; }.ghost-button { background: transparent; color: var(--muted); }.ghost-button:hover { color: var(--text); background: var(--panel-2); }.primary-button { background: var(--accent); color: #242817; box-shadow: 0 5px 18px rgba(217,242,143,.12); }.primary-button:hover { background: #e6f7a7; transform: translateY(-1px); }.button-icon { font-size: 16px; margin-right: 4px; }
.workspace { min-height: 0; flex: 1; display: grid; grid-template-columns: 252px minmax(500px,1fr) 270px; }.tool-panel, .layers-panel { background: rgba(24,28,37,.82); }.tool-panel { border-right: 1px solid var(--line); overflow: auto; }.layers-panel { border-left: 1px solid var(--line); overflow: auto; }.panel-section { padding: 22px 20px; border-bottom: 1px solid var(--line); }.section-label { margin-bottom: 15px; }.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.tool-button { min-height: 61px; padding: 9px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--muted); font-size: 10px; transition: .2s ease; }.tool-button:hover { background: var(--panel-2); color: var(--text); }.tool-button.active { background: rgba(217,242,143,.1); border-color: rgba(217,242,143,.32); color: var(--accent); }.tool-glyph { width: 24px; height: 24px; display: grid; place-items: center; font-size: 24px; color: currentColor; }.brush-glyph { width: 17px; height: 17px; border-radius: 50% 50% 44% 44%; background: currentColor; box-shadow: 0 4px 0 -2px currentColor; }.pencil-glyph, .pen-glyph, .eraser-glyph, .blend-glyph, .eyedropper-glyph { font-family: Georgia, serif; }.marker-glyph { width: 23px; height: 9px; border-radius: 3px; background: currentColor; transform: rotate(-45deg); }.highlighter-glyph { width: 24px; height: 9px; border: 2px solid currentColor; border-radius: 3px; transform: rotate(-45deg); opacity: .9; }.controls-section { padding-bottom: 20px; }.setting-row { justify-content: space-between; font-size: 11px; color: var(--muted); }.setting-row output { color: var(--text); font: 500 10px 'Courier New', monospace; }.range-input { display: block; width: 100%; height: 4px; margin: 10px 0 15px; appearance: none; border-radius: 4px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 26%, var(--panel-3) 26%); outline: none; }.range-input::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border: 3px solid var(--panel); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }.size-preview { height: 44px; display: grid; place-items: center; margin: 4px 0 18px; border-radius: 6px; background: repeating-conic-gradient(#202631 0 25%, #1b2029 0 50%) 50% / 12px 12px; }.size-preview span { border-radius: 50%; background: var(--text); display: block; transition: width .2s, height .2s; }.color-picker-wrap { gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }.color-picker-wrap input { width: 30px; height: 30px; padding: 0; border: 0; overflow: hidden; border-radius: 7px; background: none; cursor: pointer; }.color-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }.color-info strong { font: 500 10px 'Courier New', monospace; }.color-info span { color: var(--muted-2); font-size: 9px; }.eyedrop-button { width: 27px; height: 27px; border-radius: 6px; background: var(--panel-3); color: var(--muted); }.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }.swatch { width: 19px; height: 19px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 0 0 0 transparent; transition: .18s; }.swatch:hover, .swatch.selected { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 3px rgba(217,242,143,.2); transform: scale(1.1); }.add-swatch { background: transparent; border: 1px dashed var(--muted-2); color: var(--muted); font-size: 15px; line-height: 15px; }.quick-section { padding-bottom: 10px; }.quick-action { width: 100%; display: flex; align-items: center; gap: 9px; height: 33px; padding: 0 3px; background: transparent; color: var(--muted); font-size: 11px; text-align: left; border-radius: 6px; }.quick-action:hover { background: var(--panel-2); color: var(--text); }.quick-icon { width: 20px; color: var(--muted-2); font-size: 17px; text-align: center; }.toggle-indicator { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }.toggle-indicator.on { background: var(--accent); box-shadow: 0 0 0 3px rgba(217,242,143,.12); }.tool-footer { display: flex; align-items: center; gap: 8px; padding: 18px 20px; color: var(--muted-2); font-size: 9px; }.keyboard-key { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 11px; }
.canvas-area { min-width: 0; display: flex; flex-direction: column; background: radial-gradient(circle at center, rgba(38,45,59,.22), transparent 58%); }.canvas-toolbar { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 23px; border-bottom: 1px solid var(--line); }.canvas-meta { gap: 8px; color: var(--muted); font-size: 10px; }.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #71b8a6; }.canvas-tools { gap: 4px; }.canvas-icon-btn { width: 28px; height: 28px; font-size: 17px; }.zoom-label { width: 38px; text-align: center; color: var(--muted); font: 500 10px 'Courier New', monospace; }.canvas-stage { position: relative; flex: 1; min-height: 400px; overflow: hidden; display: grid; place-items: center; }.canvas-shadow { position: absolute; width: min(72%, 700px); aspect-ratio: 4/3; background: rgba(0,0,0,.26); filter: blur(30px); border-radius: 5px; transform: translateY(18px); }.canvas-stack { position: relative; z-index: 2; width: min(72%, 700px); aspect-ratio: 4/3; background: var(--canvas); box-shadow: 0 18px 45px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.11); transform-origin: center; transition: transform .25s ease; overflow: hidden; }.canvas-stack canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; -webkit-user-drag: none; user-select: none; }.grid-overlay { position: absolute; z-index: 3; pointer-events: none; width: min(72%, 700px); aspect-ratio: 4/3; opacity: 0; transition: opacity .2s; background-image: linear-gradient(rgba(75,93,111,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(75,93,111,.11) 1px, transparent 1px); background-size: 30px 30px; }.grid-overlay.visible { opacity: 1; }.empty-state { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #bcc0bd; font-size: 11px; pointer-events: none; opacity: .8; }.empty-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #d2cec3; border-radius: 50%; color: #999a95; font-size: 17px; }.canvas-footer { height: 42px; display: flex; justify-content: center; align-items: center; gap: 22px; color: var(--muted-2); font-size: 9px; border-top: 1px solid var(--line); }.canvas-footer kbd { margin-right: 3px; padding: 2px 4px; border: 1px solid var(--line-strong); border-radius: 3px; font: 9px 'Courier New', monospace; color: var(--muted); }
.layers-header { justify-content: space-between; padding: 22px 20px 17px; border-bottom: 1px solid var(--line); }.layers-header h2 { margin: 5px 0 0; font: 600 21px Georgia, serif; }.layer-list { padding: 11px 10px 7px; }.layer-item { display: flex; align-items: center; gap: 9px; min-height: 49px; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: .2s; }.layer-item:hover { background: var(--panel-2); }.layer-item.active { background: rgba(217,242,143,.09); border-color: rgba(217,242,143,.22); }.layer-visibility { width: 17px; background: transparent; color: var(--muted-2); font-size: 13px; padding: 0; }.layer-item.active .layer-visibility { color: var(--accent); }.layer-thumb { width: 31px; height: 31px; flex: none; overflow: hidden; border-radius: 5px; background: #f8f5ee; border: 1px solid var(--line-strong); }.layer-thumb canvas { width: 100%; height: 100%; }.layer-details { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.layer-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }.layer-subtitle { color: var(--muted-2); font: 9px 'Courier New', monospace; }.layer-actions { display: flex; gap: 7px; padding: 4px 19px 17px; border-bottom: 1px solid var(--line); }.layer-actions button { flex: 1; height: 28px; background: var(--panel-2); color: var(--muted); border-radius: 5px; font-size: 15px; }.layer-actions button:hover { color: var(--text); background: var(--panel-3); }.properties-section { padding: 18px 20px; border-bottom: 1px solid var(--line); }.properties-title { justify-content: space-between; margin-bottom: 18px; color: var(--text); font-size: 11px; font-weight: 600; }.property-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }.property-field { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 10px; margin-bottom: 17px; }.property-field input, .blend-row select { height: 29px; padding: 0 8px; border: 1px solid var(--line-strong); outline: 0; border-radius: 5px; background: var(--panel-2); color: var(--text); font-size: 10px; }.property-field input:focus, .blend-row select:focus { border-color: var(--accent-dark); }.blend-row { justify-content: space-between; margin-top: 16px; color: var(--muted); font-size: 10px; }.blend-row select { width: 108px; }.layer-tip { display: flex; gap: 9px; padding: 17px 20px; color: var(--muted); font-size: 9px; line-height: 1.55; }.layer-tip span { color: var(--accent); font-size: 14px; }.layer-tip p { margin: 0; }.layer-tip strong { color: var(--text); font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 7px; background: #242a35; color: var(--text); font-size: 11px; box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: .25s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1250px) { .workspace { grid-template-columns: 220px minmax(480px, 1fr) 245px; }.panel-section { padding-left: 15px; padding-right: 15px; }.tool-footer { padding-left: 15px; padding-right: 15px; }.canvas-stack, .grid-overlay, .canvas-shadow { width: min(78%, 680px); } }

.cursor-preview { position: absolute; z-index: 5; left: 0; top: 0; width: 24px; height: 24px; border: 1px solid var(--cursor-color, #1c2434); border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 1px 4px rgba(0,0,0,.28); pointer-events: none; opacity: 0; transform: translate(-50%, -50%); transition: opacity .12s ease, width .15s ease, height .15s ease; }
.cursor-preview.visible { opacity: 1; }