*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f0f2f5;--sidebar-bg: #ffffff;--border: #d0d7de;--border-hover: #a0aab4;--text: #24292f;--text-dim: #6e7781;--text-bright: #0d1117;--accent: #2563eb;--accent-hover: #1d4ed8;--accent-bg: rgba(37, 99, 235, .08);--input-bg: #f6f8fa;--btn-bg: #f6f8fa;--btn-hover: #eaeef2;--danger: #cf222e;--success: #1a7f37}html,body,#root{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{display:flex;height:100vh;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5}.sidebar{width:272px;min-width:272px;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;box-shadow:2px 0 8px #0000000f}.sidebar-header{padding:16px;border-bottom:1px solid var(--border);flex-shrink:0;background:linear-gradient(135deg,#2563eb,#7c3aed)}.sidebar-header h1{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.2px}.sidebar-header p{font-size:11px;color:#ffffffb3;margin-top:2px}.sidebar-body{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:18px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.sidebar-body::-webkit-scrollbar{width:4px}.sidebar-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.sidebar-footer{padding:12px;border-top:1px solid var(--border);flex-shrink:0;background:var(--sidebar-bg)}.section{display:flex;flex-direction:column;gap:8px}.section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim)}.text-input{width:100%;padding:8px 10px;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text-bright);font-size:14px;font-weight:600;letter-spacing:.5px;outline:none;transition:border-color .15s,box-shadow .15s}.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2563eb1f}.text-input::placeholder{color:var(--text-dim);font-weight:400}.font-select-wrap{position:relative}.font-select-wrap:after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-dim);pointer-events:none}.font-select{width:100%;padding:8px 30px 8px 10px;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;outline:none;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s}.font-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2563eb1f}.slider-row{display:flex;flex-direction:column;gap:5px}.slider-label{display:flex;justify-content:space-between;align-items:baseline;color:var(--text);font-size:12px}.slider-value{color:var(--accent);font-size:11px;font-variant-numeric:tabular-nums;font-weight:600}input[type=range]{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px #2563eb4d;transition:transform .12s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);background:var(--accent-hover)}input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px #2563eb4d}.download-btn{width:100%;padding:10px 16px;background:linear-gradient(135deg,#2563eb,#7c3aed);border:none;border-radius:7px;color:#fff;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity .15s,transform .1s;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 2px 8px #2563eb40}.download-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px);box-shadow:0 4px 12px #2563eb59}.download-btn:active:not(:disabled){transform:translateY(0)}.download-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.canvas-area{flex:1;position:relative;overflow:hidden;background:var(--bg)}.canvas-area canvas{display:block}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:10}.spinner{width:32px;height:32px;border:3px solid rgba(37,99,235,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:#cf222e14;border:1px solid var(--danger);border-radius:8px;padding:8px 14px;color:var(--danger);font-size:12px;max-width:420px;text-align:center;z-index:20;pointer-events:none;white-space:nowrap}.info-badge{font-size:10px;color:var(--text-dim);background:var(--input-bg);border:1px solid var(--border);border-radius:5px;padding:5px 9px;text-align:center}.info-badge span{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}.divider{height:1px;background:var(--border);margin:0 -12px}