.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-in-out}.modal-container{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg, 14px);box-shadow:0 8px 32px #0009;max-width:480px;width:90%;animation:slideIn .2s ease-in-out}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-content{padding:15px 20px}.modal-title{font-size:1rem;font-weight:600;color:var(--text);padding-bottom:12px;border-bottom:1px solid var(--border)}.modal-icon{font-size:48px;text-align:center;margin-bottom:16px}.modal-icon-info{color:#0d6efd}.modal-icon-warning{color:#ffc107}.modal-icon-input{color:#0d6efd}.modal-message{font-size:.9rem;line-height:1.6;margin:20px 0;color:var(--text-muted);white-space:pre-wrap}.modal-input{width:100%;padding:8px 12px;font-size:.875rem;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm, 6px);margin-bottom:16px;box-sizing:border-box;outline:none}.modal-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #6366f133}.modal-buttons{display:flex;gap:10px;justify-content:flex-end}.modal-btn{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;min-width:80px}.modal-btn-primary{background-color:var(--accent, #6366f1);color:#fff;border:1px solid var(--accent, #6366f1)}.modal-btn-primary:hover{background-color:var(--accent-hover, #4f46e5)}.modal-btn-secondary{background-color:var(--surface-2, #21262d);color:var(--text, #e6edf3);border:1px solid var(--border, #30363d)}.modal-btn-secondary:hover{background-color:var(--surface-3, #30363d)}.modal-btn:focus{outline:none;box-shadow:0 0 0 3px #0d6efd4d}body.dark-mode .modal-overlay{background-color:#000000b3}body.dark-mode .modal-container{background-color:var(--surface-2)}.app-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:12px;padding:10px 14px;background:#f6f8faeb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}body.dark-mode .app-header{background:#161b22eb}.header-brand{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--text)}.header-mode-badge{font-size:.68rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--accent-muted);color:var(--accent);border:1px solid rgba(99,102,241,.4);letter-spacing:.04em;text-transform:uppercase}.header-status{display:flex;align-items:center;gap:7px;margin-left:auto;font-size:.8rem;color:var(--text-muted)}.settings-toggle{padding:4px 7px;font-size:1rem;line-height:1;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);transition:background .15s ease,border-color .15s ease;margin-left:4px}.settings-toggle:hover{background:var(--surface-2);border-color:var(--text-subtle)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--text-subtle);flex-shrink:0;transition:background .3s ease,box-shadow .3s ease}.status-dot.connected{background:#6366f1;box-shadow:0 0 8px #6366f199}.log-container{width:100%;height:100px;margin:0;padding:8px 12px;background:var(--surface-2);border-top:1px solid var(--border);overflow-y:auto;overflow-x:hidden;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.875rem;box-sizing:border-box;word-break:break-word;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}.log-container .log-line{padding:0}.log-container .time,.log-container .action{display:inline-block;white-space:nowrap}.log-container .time{color:var(--text-subtle);margin-right:.5em}.log-container .action{color:#03a9f4;margin-right:.5em}.log-container .log-text{color:var(--text-muted)}.log-container .dup-count{margin-left:.35em;color:#999;opacity:.9}@media(max-width:768px){.log-container{font-size:.75rem}}body.dark-mode .log-container .time{color:#8bc34a}body.dark-mode .log-container .dup-count{color:#9aa0a6}.canvas-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.canvas-container canvas{border:1px solid var(--border);max-width:100%;height:auto;display:block;margin:5px auto}.canvas-container.crop-mode canvas{border:2px dashed var(--accent);cursor:grab}.canvas-container .flex-container,.canvas-container .flex-group{align-items:center;justify-content:center}.status-bar{font-size:.8rem;color:var(--text-muted);margin-bottom:8px;padding:6px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}.send-progress{margin-top:6px;height:6px;background:var(--border);border-radius:3px;overflow:hidden}.send-progress-bar{height:100%;background:var(--accent, #6366f1);border-radius:3px;transition:width .2s ease}canvas.text-placement-mode{border:2px dashed var(--accent)!important;cursor:text!important}.canvas-title{text-align:center;color:var(--accent)}.flex-container.tmpl-vars{background-color:var(--bg-muted);padding:10px}.flex-container.tmpl-vars .flex-group{display:inline-flex;flex-direction:column;align-items:flex-start}.tool-button{width:34px;height:34px;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;margin-right:2px;background-color:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm, 6px);padding:0;cursor:pointer;transition:all .15s ease;color:var(--text)}.tool-button:hover{background-color:var(--surface-3);border-color:var(--text-subtle)}.tool-button.active{background-color:var(--accent, #6366f1);color:#fff;border-color:var(--accent, #6366f1)}@media(max-width:768px){.canvas-container .flex-container{flex-direction:row;flex-wrap:wrap}.canvas-container .flex-group{width:100%}.flex-container.tmpl-vars .flex-group{flex-direction:row;align-items:center}}body.dark-mode .tool-button:hover{background-color:#3a3a3a;border-color:#444}body.dark-mode .tool-button.active{background-color:var(--accent);color:#fff;border-color:var(--accent-hover)}body.dark-mode .tmpl-vars{background-color:#1a1a1a;color:#666;border-color:#2a2a2a}.footer{display:flex;gap:8px;flex-direction:column;font-size:.78rem;color:var(--text-subtle);width:100%;max-width:980px;margin:0 auto;padding:1rem 20px 1.5rem;border-top:1px solid var(--border)}.footer .links{display:inline-flex;align-items:center}.footer .links a{color:var(--text-muted);text-decoration:none;position:relative;padding:0 8px}.footer .links a:first-child{padding-left:0}.footer .links a:not(:last-child):after{content:"•";position:absolute;right:-4px;color:#999}.icp{display:inline-flex;align-items:center;gap:6px}.icp-item{display:inline-flex;align-items:center;gap:4px}.icp a{font-size:.78rem;color:var(--text-subtle);text-decoration:none;margin-left:0}.icp img{width:14px}.footer a:hover{color:var(--accent);text-decoration:underline}@media(max-width:768px){.footer{flex-direction:column;justify-content:center;align-items:center}.footer .icp{flex-direction:column}}body.dark-mode .footer .links a:not(:last-child):after{color:#666}body.dark-mode .footer,body.dark-mode .footer a{color:#999}body.dark-mode .footer a:hover{color:#64b5f6}.settings-backdrop{position:fixed;inset:0;z-index:199;background:#00000040;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:fadeIn .15s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-panel{position:fixed;top:0;right:0;z-index:200;height:100dvh;width:280px;background:var(--surface);border-left:1px solid var(--border);box-shadow:-4px 0 24px #0000001f;display:flex;flex-direction:column;transform:translate(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);will-change:transform}.settings-panel.open{transform:translate(0)}@media(max-width:540px){.settings-panel{inset:auto 0 0;width:100%;height:auto;max-height:80dvh;border-left:none;border-top:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -4px 24px #00000026;transform:translateY(100%)}.settings-panel.open{transform:translateY(0)}.settings-header:before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--border);position:absolute;top:8px;left:50%;transform:translate(-50%)}.settings-header{position:relative;padding-top:22px;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.settings-row{padding:12px 20px}.settings-section-title{padding:8px 20px 4px}}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);background:var(--surface-2);flex-shrink:0}.settings-close{width:28px;height:28px;padding:0;border-radius:var(--radius-sm);background:none;border:1px solid transparent;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease}.settings-close:hover{background:var(--surface-3);border-color:var(--border)}.settings-body{flex:1;overflow-y:auto;padding:12px 0}.settings-section{margin-bottom:4px}.settings-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-subtle);padding:6px 16px 4px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;font-size:.875rem;cursor:default}.settings-row:hover{background:var(--surface-2)}.settings-label{display:flex;align-items:center;gap:7px;color:var(--text-muted);font-size:.875rem;font-weight:600;flex:1;-webkit-user-select:none;user-select:none}.settings-toggle{flex-shrink:0;position:relative;width:36px;height:20px;border-radius:999px;border:none;background:var(--surface-3);cursor:pointer;padding:0;transition:background .2s ease;outline:none}.settings-toggle:hover{background:var(--text-subtle);border:none}.settings-toggle.on{background:var(--accent)}.settings-toggle.on:hover{background:var(--accent-hover)}.settings-toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--border);transition:transform .2s ease;pointer-events:none}.settings-toggle.on .settings-toggle-thumb{transform:translate(16px)}.settings-input{width:80px;padding:4px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:.875rem;text-align:right;outline:none;transition:border-color .15s ease}.settings-input:focus{border-color:var(--accent)}body.dark-mode .settings-toggle-thumb{background:var(--text-muted)}:root{--accent: #6366f1;--accent-hover: #4f46e5;--accent-muted: rgba(99, 102, 241, .12);--danger: #ef4444;--danger-hover: #dc2626;--success: #10b981;--warning: #f59e0b;--bg: #fff;--bg-muted: #f6f8fa;--surface: #ffffff;--surface-2: #f0f2f5;--surface-3: #e4e8ed;--border: #d0d7de;--text: #1f2328;--text-muted: #57606a;--text-subtle: #8c959f;--radius-sm: 6px;--radius: 10px;--radius-lg: 14px}body.dark-mode{--bg: #0d1117;--surface: #161b22;--surface-2: #21262d;--surface-3: #30363d;--border: #30363d;--text: #e6edf3;--text-muted: #8b949e;--text-subtle: #6e7681}*{box-sizing:border-box;touch-action:manipulation}body{margin:0;padding:0;background-color:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}.main{width:100%;max-width:980px;margin:0 auto;padding:16px 20px 3rem;font-size:.875rem;line-height:1.5;background-color:var(--bg);color:var(--text)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}.card-header{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted)}.card-body{padding:12px 14px}button{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s ease,box-shadow .15s ease,border-color .15s ease;outline:none;line-height:1.5}button:hover{background:var(--surface-3);border-color:var(--text-subtle)}button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 0 0 3px #6366f140}button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}button.danger:hover{background:var(--danger-hover);box-shadow:0 0 0 3px #ef444440}button.small{padding:3px 9px;font-size:.78rem}input[type=text],input[type=number],select{font-size:.875rem;line-height:1.5;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px;max-width:100%;transition:border-color .15s ease,box-shadow .15s ease}select{padding:5px 28px 5px 10px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2357606a' d='M5 7L0 2h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}body.dark-mode select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%238b949e' d='M5 7L0 2h10z'/%3E%3C/svg%3E")}input[type=file]{font-size:.875rem;color:var(--text);max-width:60%}input::file-selector-button{font-size:.875rem;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:var(--surface-2);color:var(--text);padding:4px 10px;transition:background .15s ease;margin-right:8px}input::file-selector-button:hover{background:var(--surface-3)}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #6366f133;outline:none}input[type=text]:disabled,input[type=number]:disabled,select:disabled{opacity:.4;cursor:not-allowed}input[type=range]{accent-color:var(--accent);cursor:pointer}label{margin-right:4px;white-space:nowrap;font-size:.875rem;font-weight:600;color:var(--text-muted)}code{padding:.2em .4em;font-size:85%;background:var(--surface-3);color:#f0883e;border-radius:4px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace}progress{width:100%;height:6px;border-radius:999px;overflow:hidden;border:none;appearance:none;-webkit-appearance:none}progress::-webkit-progress-bar{background:var(--surface-3);border-radius:999px}progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),#818cf8);border-radius:999px;transition:width .3s ease}progress::-moz-progress-bar{background:var(--accent);border-radius:999px}.flex-container{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.flex-container:last-child{margin-bottom:0}.flex-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.flex-group.right{margin-left:auto}hr.divider{width:100%;border:none;border-top:1px solid var(--border);margin:10px 0}.flex-container.outline{margin-bottom:10px;padding:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}.flex-container.outline:last-child{margin-bottom:0}.status-bar{font-size:.8rem;color:var(--text-muted);margin-bottom:8px;padding:6px 10px;background:var(--surface-2);border-radius:var(--radius-sm);border:1px solid var(--border)}body.dark-mode .main{background-color:var(--bg);color:var(--text)}@media(max-width:768px){.main{padding:12px 14px 2.5rem}button{width:auto}input[type=text],input[type=number],select{max-width:100%}.flex-container{flex-direction:column}.flex-group.right{margin-left:0}}