:root{--bg-color: #f0f0f0;--toolbar-bg: #2d2d2d;--text-color: #ffffff;--accent-color: #646cff;--danger-color: #d32f2f;--panel-bg: rgba(45, 45, 45, .9);--input-bg: rgba(0, 0, 0, .3)}body{margin:0;padding:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--bg-color);color:var(--text-color)}#canvas-wrapper{width:100vw;height:100vh;position:relative;background-color:var(--bg-color)}#toolbar{position:fixed;top:20px;left:50%;transform:translate(-50%);background-color:var(--panel-bg);padding:6px;border-radius:10px;display:flex;gap:6px;box-shadow:0 6px 12px #0000004d;z-index:10;align-items:center}#context-bar{position:absolute;display:none;background-color:var(--panel-bg);padding:6px;border-radius:8px;gap:6px;box-shadow:0 4px 15px #0000004d;z-index:100;transition:opacity .2s;pointer-events:auto}.separator{width:1px;height:24px;background:#555;margin:0 4px;align-self:center}.tool-btn,.ctx-btn{background-color:transparent;border:0px solid transparent;color:#e0e0e0;padding:0;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.ctx-btn:hover{background-color:#ffffff1a;border-color:#555}.tool-btn:hover{background-color:#505050;color:#fff}.tool-btn.active{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff}.tool-btn.danger,.ctx-btn.danger:hover{color:#ff6b6b}.tool-btn.danger:hover{background-color:var(--danger-color);color:#fff;border-color:var(--danger-color)}input[type=file]{display:none}#controls-hint{position:fixed;bottom:20px;left:20px;color:#aaa;font-size:13px;pointer-events:none;background:var(--panel-bg);padding:8px 14px;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px transparent;z-index:10}[data-tooltip]{position:relative}[data-tooltip]:before,[data-tooltip]:after{position:absolute;left:50%;transform:translate(-50%) translateY(10px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;pointer-events:none;z-index:1000}[data-tooltip]:before{content:attr(data-tooltip);bottom:110%;padding:6px 10px;background-color:#000;color:#fff;font-size:12px;border-radius:4px;white-space:nowrap;box-shadow:0 2px 5px #0003}[data-tooltip]:after{content:"";bottom:100%;border-width:5px;border-style:solid;border-color:#000 transparent transparent transparent}[data-tooltip]:hover:before,[data-tooltip]:hover:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#fffc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;justify-content:center;align-items:center;flex-direction:column}.spinner{width:40px;height:40px;border:4px solid #ddd;border-top-color:#6366f1;border-radius:50%;animation:spin 1s linear infinite}.loading-text{margin-top:15px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:#333;font-weight:500;letter-spacing:-.01em}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;justify-content:center;align-items:center}.modal-overlay.visible{display:flex}.modal-content{background:linear-gradient(145deg,#3a3a3a,#2d2d2d);border-radius:16px;padding:24px;min-width:360px;max-width:90vw;box-shadow:0 20px 40px #0006,0 0 0 1px #ffffff1a;animation:modalIn .25s ease-out}@keyframes modalIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.text-input-wrapper{position:relative;display:flex;gap:8px;align-items:flex-start}#text-input,.stt-btn{background:var(--input-bg);border:1px solid rgba(255,255,255,.15);border-radius:10px;color:#fff;transition:all .2s}#text-input{flex:1;padding:12px 14px;font-size:14px;font-family:inherit;resize:vertical;min-height:60px}#text-input::placeholder{color:#fff6}#text-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #646cff33}.stt-btn{width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.stt-btn:hover{background:#ffffff1a;border-color:#ffffff40}.stt-btn.listening{background:linear-gradient(135deg,#e53935,#d32f2f);border-color:#e53935;color:#fff;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #e5393580}50%{box-shadow:0 0 0 10px #e5393500}}.modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px}.modal-options{display:flex;gap:10px;margin-right:52px}.modal-btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;border:none}.modal-btn.secondary{background:#ffffff1a;color:#ccc}.modal-btn.secondary:hover{background:#ffffff26;color:#fff}.modal-btn.primary{background:linear-gradient(135deg,var(--accent-color),#5a60e0);color:#fff;box-shadow:0 4px 12px #646cff4d}.modal-btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px #646cff66}.modal-btn.primary:active{transform:translateY(0)}#font-select{background:var(--input-bg);border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#fff;padding:8px 12px;font-size:14px;outline:none;cursor:pointer;transition:all .2s}#font-select option{background:#333;color:#fff}#text-color{appearance:none;border:none;width:38px;height:38px;padding:0;background:none;cursor:pointer}#text-color::-webkit-color-swatch-wrapper{padding:0}#text-color::-webkit-color-swatch{border:1px solid rgba(255,255,255,.15);border-radius:8px}