:root{--primary-color: #0d6efd;--primary-hover: #0b5ed7;--secondary-color: #6c757d;--secondary-hover: #5c636a;--dark-bg: #121212;--dark-text: #e0e0e0;--dark-fieldset-bg: #1e1e1e;--dark-border: #333;--dark-code-bg: #2d2d2d;--dark-log-bg: #2a2a2a;--dark-input-bg: #2d2d2d;--dark-input-text: #e0e0e0}body{margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif}button{padding:.375rem .75rem;border:1px solid var(--primary-color);border-radius:.375rem;margin-bottom:5px;white-space:nowrap;cursor:pointer;font-size:.9rem}button:disabled{opacity:.65}button.primary{color:#fff;background-color:var(--primary-color)}button.primary:hover{color:#fff;border-color:var(--primary-hover);background-color:var(--primary-hover)}button.secondary{color:#fff;background-color:var(--secondary-color);border-color:var(--secondary-color)}button.secondary:hover{color:#fff;border-color:var(--secondary-hover);background-color:var(--secondary-hover)}h3{padding-bottom:.3em;border-bottom:1px solid #ccc;text-align:center}fieldset{border:none;box-shadow:0 .5rem .5rem #0003;background-color:#f8f9fa;padding:10px;margin-bottom:16px;border-radius:4px}fieldset legend{font-weight:700;color:#00f9}code{padding:.2em .4em;margin:0;font-size:85%;background:#ccc;border-radius:3px}input[type=text],input[type=number],select{font-size:1rem;font-weight:400;line-height:1.5;color:#212529;border:1px solid #dee2e6;border-radius:.375rem;padding:.2rem .75rem;max-width:100%;box-sizing:border-box}input[type=file]{font-size:1rem;font-weight:400;line-height:1.5;color:#212529;max-width:100%}input::file-selector-button{font-size:.9rem;font-weight:400;line-height:1.5;border:1px solid var(--primary-color);border-radius:.375rem;cursor:pointer}select{padding:.3rem 2.25rem .3rem .75rem}input:focus,select:focus{border:1px solid #86b7fe;box-shadow:0 0 4px #0078d7cc;outline:0}input[type=text]:disabled,input[type=number]:disabled,select:disabled{opacity:.65;cursor:not-allowed;background-color:#e9ecef;color:#6c757d}label{margin-right:4px;white-space:nowrap}.main{width:100%;max-width:950px;margin:0 auto;padding:0 1rem;background:#fff;font-size:1rem;font-weight:400;line-height:1.5;box-sizing:border-box}.footer{display:flex;gap:10px;font-size:.8rem;color:#666;flex-wrap:wrap;margin:1rem 0}.footer .links{display:flex;align-items:center}.footer .links a{color:#666;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}.footer a:hover{color:#0d6efd;text-decoration:underline}.flex-container{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.flex-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.flex-group.right{margin-left:auto}.debug{display:none!important}.log-container{width:100%;min-height:100px;max-height:300px;margin:0;padding:5px;background:#ddd;overflow-y:auto;overflow-x:hidden;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;box-sizing:border-box;word-break:break-word}.log-container .log-line{padding:2px 0}.log-container .time,.log-container .action{display:inline-block;white-space:nowrap}.log-container .time{color:#333;margin-right:.5em}.log-container .action{color:#666;margin-right:.5em}.canvas-container canvas{border:black solid 1px;max-width:100%;height:auto;display:block;margin:0 auto}.canvas-container.crop-mode canvas{border:2px dashed var(--primary-color);cursor:grab}.status-bar{display:none;font-size:85%;color:#666;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dotted #AAA}canvas.text-placement-mode{border:2px dashed var(--primary-color)!important;cursor:text!important}.canvas-title{display:none;text-align:center;margin-bottom:5px;color:var(--primary-color)}.canvas-tools{margin-top:10px;justify-content:center}.tmpl-vars{justify-content:center;background-color:#f1f1f1;padding:10px;display:none}.brush-tools,.text-tools,.crop-tools,.tmpl-tools,.tmpl-vars{display:none}.canvas-container.brush-mode .brush-tools,.canvas-container.text-mode .brush-tools,.canvas-container.eraser-mode .brush-tools,.canvas-container.text-mode .text-tools,.canvas-container.crop-mode .crop-tools,.canvas-container.tmpl-mode .tmpl-tools,.canvas-container.tmpl-mode .tmpl-vars{display:flex}.tool-button{width:36px;height:36px;font-size:1.2rem;display:inline-flex;align-items:center;justify-content:center;margin-right:5px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;padding:0;cursor:pointer;transition:all .2s ease}.tool-button:hover{background-color:#e9ecef;border-color:#ced4da}.tool-button.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.tool-button.hide{display:none}.tmpl-var-container{display:inline-flex;flex-direction:column}.tmpl-var-container label{color:#666;margin-bottom:4px;white-space:normal}@media(max-width:768px){.flex-container{flex-direction:column}.flex-container.options .flex-group label{min-width:80px}.flex-group.right{margin-left:0}.canvas-tools.flex-container{flex-direction:row;flex-wrap:wrap;justify-content:center}.canvas-tools .flex-group{justify-content:center;width:100%}.tmpl-var-container{flex-direction:row}.log-container{height:150px;margin-top:10px}fieldset{padding:8px}button{width:auto}input[type=text],input[type=number],select{max-width:100%;margin-bottom:5px}}body.dark-mode .debug{display:flex!important}body.dark-mode,body.dark-mode .main{background-color:var(--dark-bg);color:var(--dark-text)}body.dark-mode fieldset{background-color:var(--dark-fieldset-bg);box-shadow:0 .5rem .5rem #00000080}body.dark-mode h3{border-bottom:1px solid var(--dark-border);color:var(--dark-text)}body.dark-mode code{background:var(--dark-code-bg);color:#ff9800}body.dark-mode input[type=text],body.dark-mode input[type=number],body.dark-mode select{background-color:var(--dark-input-bg);color:var(--dark-input-text);border-color:var(--dark-border)}body.dark-mode input[type=text]:disabled,body.dark-mode input[type=number]:disabled,body.dark-mode select:disabled{background-color:#1a1a1a;color:#666;border-color:#2a2a2a}body.dark-mode input[type=file]{color:var(--dark-input-text);background-color:transparent;border-color:var(--dark-border)}body.dark-mode input[type=file]::file-selector-button{background-color:var(--dark-fieldset-bg);color:var(--dark-input-text);border-color:var(--dark-border)}body.dark-mode input[type=file]::file-selector-button:hover{background-color:#333;border-color:#444}body.dark-mode .log-container{background:var(--dark-log-bg);border:1px solid var(--dark-border)}body.dark-mode .log-container .time{color:#8bc34a}body.dark-mode .log-container .action{color:#03a9f4}body.dark-mode fieldset legend{color:#64b5f6}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}body.dark-mode .tool-button{background-color:var(--dark-input-bg);border-color:var(--dark-border);color:var(--dark-text)}body.dark-mode .tool-button:hover{background-color:#3a3a3a;border-color:#444}body.dark-mode .tool-button.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-hover)}body.dark-mode .tmpl-vars{background-color:#1a1a1a;color:#666;border-color:#2a2a2a}