:root{--primary-color:#41907c;--primary-hover:#367a68;--primary-light:#e8f5f3;--success-color:#28a745;--error-color:#dc3545;--warning-color:#ffc107;--info-color:#17a2b8;--text-primary:#333;--text-secondary:#666;--text-muted:#999;--border-color:#f0f0f0;--bg-light:#f8f9fa;--bg-white:#fff;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--shadow-sm:0 1px 3px rgba(0,0,0,0.1);--shadow-md:0 4px 6px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.text2pixel .text-input-section{margin-bottom:var(--spacing-lg)}.text2pixel .text-input-row{margin-bottom:var(--spacing-md)}.text2pixel .text-input-row label{display:block;margin-bottom:var(--spacing-sm);font-weight:600;color:var(--text-primary);font-size:.9rem}.text2pixel .preset-templates .preset-label{display:block;font-size:.85rem;color:var(--text-secondary);font-weight:500;margin-bottom:var(--spacing-sm)}.text2pixel .preset-templates .template-grid{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.text2pixel .preset-templates .template-card{position:relative;padding:.4rem .8rem;border:1.5px solid;border-radius:6px;cursor:pointer;transition:all .15s;text-align:center;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;box-shadow:0 2px 4px rgba(0,0,0,.2)}.text2pixel .preset-templates .template-card:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.3);filter:brightness(1.1)}.text2pixel .preset-templates .template-card:active{transform:translateY(0)}.text2pixel .preset-templates .template-card .template-text{font-weight:700;font-size:.75rem;letter-spacing:1px;text-shadow:0 0 8px currentColor}.text2pixel .preset-templates .template-card .template-info{font-size:.6rem;opacity:.8;font-weight:500}.text2pixel .controls-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--spacing-md);align-items:start;padding:var(--spacing-md);border-radius:var(--border-radius-md)}@media(max-width:768px){.text2pixel .controls-row{grid-template-columns:1fr}}.text2pixel .control-item label{display:block;font-weight:600;color:var(--text-primary);font-size:.8rem}.text2pixel .control-item .btn-group{display:flex}.text2pixel .control-item .btn-group .btn{flex:1;font-size:.8rem}.text2pixel .control-item.checkbox-item{display:flex;align-items:center;justify-content:center;height:100%}.text2pixel .control-item.checkbox-item label{display:flex;align-items:center;gap:var(--spacing-xs);margin:0;cursor:pointer;font-size:.85rem}.text2pixel .control-item.checkbox-item label input[type=checkbox]{cursor:pointer}.text2pixel .dual-slider{display:flex;flex-direction:column;gap:var(--spacing-xs)}.text2pixel .size-inputs{display:flex;align-items:center;gap:var(--spacing-sm)}.text2pixel .size-inputs .form-control{flex:1;text-align:center;font-size:12px}.text2pixel .size-inputs .form-control::-webkit-inner-spin-button,.text2pixel .size-inputs .form-control::-webkit-outer-spin-button{opacity:1}.text2pixel .size-inputs .size-separator{font-size:1.2rem;font-weight:600;color:var(--text-secondary);flex-shrink:0}.text2pixel .align-controls{display:flex;gap:var(--spacing-xs)}.text2pixel .align-controls .btn-group{flex:1}.text2pixel .color-row-compact{display:flex;gap:var(--spacing-sm)}.text2pixel .color-row-compact .color-picker{flex:1;display:flex;align-items:center}.text2pixel .color-row-compact .color-picker span{font-size:8px;color:var(--text-secondary)}.text2pixel .color-row-compact .color-picker input[type=color]{width:24px;height:24px;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);cursor:pointer;padding:2px}.text2pixel .color-row-compact .color-picker input[type=color]:disabled{opacity:.4;cursor:not-allowed}.text2pixel .canvas-wrapper{position:relative;cursor:pointer;display:inline-block}.text2pixel .canvas-wrapper:hover .canvas-hint{opacity:1}.text2pixel .canvas-hint{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;padding:4px 8px;border-radius:4px;font-size:.75rem;opacity:0;transition:opacity .2s;pointer-events:none}.text2pixel .result-canvas{max-width:100%;height:auto;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);background-color:var(--bg-light);image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;transition:transform .2s}.text2pixel .result-canvas:hover{transform:scale(1.01)}.text2pixel .char-count-modal{text-align:right;font-size:.75rem;color:var(--text-secondary);margin-top:var(--spacing-xs)}