:root{--bg: #fafafa;--canvas-bg: #f4f4f5;--card: #ffffff;--fg: #18181b;--muted: #71717a;--muted-2: #a1a1aa;--border: #e4e4e7;--border-strong: #d4d4d8;--hover: #f4f4f5;--track: #f4f4f5;--primary: #18181b;--primary-hover: #27272a;--primary-fg: #fafafa;--ring: rgba(24, 24, 27, .12);--shadow-sm: 0 1px 2px rgba(24, 24, 27, .06);--shadow-md: 0 4px 16px rgba(24, 24, 27, .08), 0 1px 3px rgba(24, 24, 27, .06);--shadow-lg: 0 12px 40px rgba(24, 24, 27, .12);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);font-size:14px}button{font-family:inherit}.app{height:100vh;display:flex;flex-direction:column}.toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#ffffffd9;-webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:8px;font-weight:600;letter-spacing:-.01em;padding-right:2px;-webkit-user-select:none;user-select:none}.brand-mark{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,#18181b,#52525b);box-shadow:inset 0 0 0 1px #ffffff1f,var(--shadow-sm)}.brand-mark.lg{width:40px;height:40px;border-radius:12px}.group{display:flex;align-items:center;gap:6px}.sep{width:1px;height:22px;background:var(--border);margin:0 2px}.spacer{flex:1;min-width:8px}.segment{display:flex;align-items:center;gap:2px;padding:3px;background:var(--track);border:1px solid var(--border);border-radius:9px}.tool{width:32px;height:30px;display:grid;place-items:center;border:none;background:transparent;border-radius:6px;color:var(--muted);cursor:pointer;transition:background .12s ease,color .12s ease,box-shadow .12s ease}.tool:hover{color:var(--fg);background:#18181b0d}.tool.active{background:var(--card);color:var(--fg);box-shadow:var(--shadow-sm),0 0 0 1px #18181b0a}.swatch{width:20px;height:20px;padding:0;border:none;border-radius:6px;background:var(--swatch);cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px #18181b1f;transition:transform .1s ease,box-shadow .1s ease}.swatch:hover{transform:scale(1.08)}.swatch.active{box-shadow:inset 0 0 0 1px #18181b1f,0 0 0 2px var(--card),0 0 0 4px var(--primary)}.swatch.custom{display:grid;place-items:center;overflow:hidden;background:conic-gradient(from 180deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7,#ef4444)}.swatch.custom:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:3px;background:var(--swatch);box-shadow:inset 0 0 0 1px #fff9}.swatch.custom input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.slider{display:flex;align-items:center;gap:10px}.slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:96px;height:4px;border-radius:999px;background:var(--border-strong);cursor:pointer}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--card);border:1px solid var(--border-strong);box-shadow:var(--shadow-sm);transition:transform .1s ease}.slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}.slider input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--card);border:1px solid var(--border-strong);box-shadow:var(--shadow-sm)}.slider-value{width:20px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}.btn{height:34px;padding:0 13px;display:inline-flex;align-items:center;gap:6px;border-radius:7px;border:1px solid var(--border);background:var(--card);color:var(--fg);font-size:13px;font-weight:500;cursor:pointer;box-shadow:var(--shadow-sm);transition:background .12s ease,border-color .12s ease,color .12s ease,opacity .12s ease}.btn:hover:not(:disabled){background:var(--hover);border-color:var(--border-strong)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.ghost{border-color:transparent;background:transparent;box-shadow:none;color:var(--muted)}.btn.ghost:hover:not(:disabled){background:var(--hover);color:var(--fg)}.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}.btn.primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}.btn.primary.ok{background:#16a34a;border-color:#16a34a}.btn.primary.err{background:#dc2626;border-color:#dc2626}:focus-visible{outline:none;box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ring)}.canvas-wrap{flex:1;overflow:auto;display:grid;place-items:center;padding:32px;background-color:var(--canvas-bg);background-image:radial-gradient(circle,rgba(24,24,27,.05) 1px,transparent 1.4px);background-size:20px 20px}.canvas-frame{border-radius:10px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-lg);outline:1px solid var(--border);outline-offset:0}.text-editor{position:fixed;margin:0;padding:0;border:none;background:transparent;outline:1px dashed rgba(24,24,27,.4);outline-offset:2px;resize:none;overflow:hidden;font-family:inherit;white-space:pre;min-width:24px;z-index:100;caret-color:currentColor}.empty{flex:1;display:grid;place-items:center;padding:24px;background-color:var(--bg)}.empty-card{text-align:center;max-width:440px;padding:44px 40px;border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:var(--shadow-md)}.empty-card .brand-mark.lg{margin:0 auto 20px}.empty-card h1{margin:0 0 10px;font-size:19px;font-weight:600;letter-spacing:-.01em}.empty-card p{margin:0;line-height:1.6}.empty-card .muted{color:var(--muted);font-size:14px}.empty-card .dim{color:var(--muted-2)}.empty-card .btn{margin-top:24px;height:38px;padding:0 18px}.empty-card .hint{margin-top:14px;font-size:12px;color:var(--muted-2)}.crop-hint{font-size:13px;color:var(--muted)}.btn.sm{height:28px;padding:0 10px;font-size:12px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:grid;place-items:center;background:#18181b66;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:24px}.modal{width:100%;max-width:360px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:22px}.modal-head h2{margin:0 0 2px;font-size:16px;font-weight:600;letter-spacing:-.01em}.modal-head .muted{margin:0 0 18px;font-size:13px;color:var(--muted)}.field-row{display:flex;gap:12px}.field{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.field span{font-size:12px;font-weight:500;color:var(--muted)}.field input{width:100%;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--fg);font:inherit;font-size:14px}.field input:focus-visible{border-color:var(--border-strong)}.field input:disabled{background:var(--hover);color:var(--muted)}.lock{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--fg);cursor:pointer}.lock input{width:15px;height:15px;accent-color:var(--primary)}.presets{display:flex;gap:6px;margin-top:16px}.presets .btn{flex:1;justify-content:center}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}kbd{display:inline-block;background:var(--card);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-size:12px;font-family:inherit;font-weight:500;color:var(--fg);line-height:1.4}