*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-bg: #fafafa;--color-card: #ffffff;--color-text: #374151;--color-text-light: #6b7280;--color-border: #e5e7eb;--color-danger: #ef4444;--color-danger-hover: #dc2626;--color-success: #10b981;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;--transition: all .2s ease}body{font-family:var(--font-sans);line-height:1.7;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1000px;margin:40px auto;padding:0 24px}.banner{width:100%;padding:40px 24px;margin-bottom:40px;background-color:var(--color-primary);color:#fff;text-align:center;border-radius:var(--radius-lg);position:relative;overflow:hidden;transition:var(--transition);box-shadow:var(--shadow-md)}.banner h1{font-size:2.6rem;font-weight:700;margin-bottom:16px;line-height:1.3;letter-spacing:-.025em;transition:var(--transition)}.banner p{font-size:1.1rem;max-width:700px;margin:0 auto 32px;line-height:1.6;opacity:.9;transition:var(--transition)}.banner img{max-width:100%;height:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-md);transition:var(--transition);max-height:240px;transform:translateY(0)}.banner img:hover{transform:translateY(-5px);box-shadow:0 10px 25px -5px #0003}.banner-flex{display:flex;flex-direction:column}@media screen and (min-width: 769px){.banner-flex{flex-direction:row;gap:24px}.banner-flex div{display:flex;flex-direction:column;align-items:center;justify-content:center}.banner-flex div:nth-child(1){width:70%}.banner-flex div:nth-child(2){width:30%}.banner-flex img{width:100%}}.controls{background-color:var(--color-card);padding:40px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--color-border)}.controls h2{margin-bottom:32px;color:var(--color-text);text-align:center;font-size:1.5rem;font-weight:600;letter-spacing:-.025em}.form-group{margin-bottom:24px}label{display:block;margin-bottom:8px;font-weight:500;color:var(--color-text);font-size:.95rem}input[type=color]{width:100%;height:40px;padding:5px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-card);cursor:pointer;transition:var(--transition)}input[type=color]:hover,input[type=color]:focus{border-color:var(--color-primary)}select,textarea{width:100%;padding:12px 16px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:1rem;background-color:var(--color-card);color:var(--color-text);transition:var(--transition)}select:hover,textarea:hover,select:focus,textarea:focus{border-color:var(--color-primary);outline:none}textarea{min-height:120px;resize:vertical;line-height:1.6}.button-group{display:flex;gap:12px;margin-top:32px}button{padding:12px 20px;background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:.95rem;font-weight:500;transition:var(--transition);flex:1;text-align:center}button:hover{background-color:var(--color-primary-hover);transform:translateY(-1px)}button#reset{background-color:var(--color-danger)}button#reset:hover{background-color:var(--color-danger-hover)}.image-control{margin-bottom:32px}.image-input-tabs{display:flex;margin-bottom:12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}.tab-btn{flex:1;background-color:var(--color-bg);color:var(--color-text);padding:8px 0;border:none;cursor:pointer;transition:var(--transition);font-size:.9rem;font-weight:500}.tab-btn:hover{background-color:var(--color-border);transform:none}.tab-btn.active{background-color:var(--color-primary);color:#fff}.tab-content{display:none;margin-top:12px}.tab-content.active{display:block}.image-input{width:100%;padding:12px 16px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:1rem;background-color:var(--color-card);color:var(--color-text);transition:var(--transition)}.image-input:hover,.image-input:focus{border-color:var(--color-primary);outline:none}.file-upload-label{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;background-color:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;font-size:.95rem;font-weight:500;transition:var(--transition)}.file-upload-label:hover{background-color:var(--color-border)}.file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.file-name{display:block;margin-top:8px;font-size:.85rem;color:var(--color-text-light)}.image-preview{margin-top:12px;width:100%;max-height:200px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--color-border);display:none}.image-preview.active{display:block}.image-preview img{width:100%;height:100%;object-fit:cover}@media (max-width: 768px){.container{margin:20px auto}.banner{padding:40px 20px}.banner h1{font-size:1.8rem}.banner p{font-size:1rem}.controls{padding:25px 20px}}