:root{--primary: #646cff;--primary-dark: #535bf2;--secondary: #3178c6;--success: #51cf66;--error: #ff8787;--bg-primary: #0f0f0f;--bg-secondary: #1a1a1a;--bg-tertiary: #242424;--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .7);--text-muted: rgba(255, 255, 255, .5);--border: rgba(255, 255, 255, .1);--border-hover: rgba(255, 255, 255, .2);--bg-primary-light: #ffffff;--bg-secondary-light: #f8f9fa;--bg-tertiary-light: #e9ecef;--text-primary-light: #212529;--text-secondary-light: #495057;--text-muted-light: #6c757d;--border-light: rgba(0, 0, 0, .1);--border-hover-light: rgba(0, 0, 0, .2);--font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Monaco", "Consolas", monospace;--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.5rem;--radius: 8px;--radius-lg: 12px;--shadow: 0 4px 12px rgba(0, 0, 0, .15);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--transition: all .2s ease}@media (prefers-color-scheme: light){:root{--bg-primary: var(--bg-primary-light);--bg-secondary: var(--bg-secondary-light);--bg-tertiary: var(--bg-tertiary-light);--text-primary: var(--text-primary-light);--text-secondary: var(--text-secondary-light);--text-muted: var(--text-muted-light);--border: var(--border-light);--border-hover: var(--border-hover-light);--shadow: 0 4px 12px rgba(0, 0, 0, .08);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .05)}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}#app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-lg)}.container{width:100%;max-width:1200px;margin:0 auto}.header{text-align:center;margin-bottom:var(--space-xl)}.header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-sm);display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.logo{width:48px;height:48px;vertical-align:middle}.subtitle{font-size:1rem;color:var(--text-muted);font-weight:400}.main{display:grid;gap:var(--space-lg)}.app-grid{display:grid;gap:var(--space-xl);grid-template-columns:1fr}@media (min-width: 768px){.app-grid{grid-template-columns:400px 1fr;align-items:stretch}}.controls{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;min-height:100%}.settings-display{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-lg)}.setting-item{text-align:center}.setting-label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:var(--space-xs)}.setting-value{font-size:1.1rem;color:var(--text-primary);font-weight:600;font-family:var(--font-mono)}.generate-btn{width:100%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:var(--radius);padding:var(--space-lg);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);position:relative;box-shadow:var(--shadow-sm)}.generate-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow)}.generate-btn:disabled{opacity:.7;cursor:not-allowed}.generate-btn.loading .btn-text{opacity:0}.generate-btn.loading .btn-loader{opacity:1;animation:spin 1s linear infinite}.generate-btn.success{background:linear-gradient(135deg,var(--success),#40c057)}.btn-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:var(--transition)}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.output-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm)}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--border)}.output-header h3{font-size:1.1rem;font-weight:600}.copy-btn{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-sm) var(--space-md);font-size:.85rem;cursor:pointer;transition:var(--transition)}.copy-btn:hover{background:var(--bg-primary);color:var(--text-primary)}.copy-btn.copied{background:var(--success);color:#fff;border-color:var(--success)}.output-container{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-lg);margin-bottom:var(--space-md);min-height:120px}.output{font-family:var(--font-mono);font-size:.9rem;line-height:1.6;color:var(--text-secondary);white-space:pre-wrap;word-break:break-all;margin:0}.output.success{color:var(--text-primary)}.output.error{color:var(--error)}.output-info{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-muted)}.info-footer{text-align:center;padding:var(--space-md);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.info-footer p{font-size:.85rem;color:var(--text-muted);margin:0}@media (max-width: 1024px){.container{max-width:100%}.app-grid{gap:var(--space-lg)}}@media (max-width: 767px){#app{padding:var(--space-md);align-items:flex-start;padding-top:var(--space-xl)}.header{margin-bottom:var(--space-lg)}.header h1{font-size:2rem;flex-direction:column;gap:var(--space-xs)}.logo{font-size:1.5rem}.subtitle{font-size:.9rem}.app-grid{gap:var(--space-lg)}.controls,.output-section{padding:var(--space-lg)}.settings-display{gap:var(--space-md);padding:var(--space-md)}.output-header{flex-wrap:wrap;gap:var(--space-sm)}.output-info{flex-direction:column;gap:var(--space-xs)}.info-footer{padding:var(--space-sm)}.info-footer p{font-size:.8rem}}@media (max-width: 480px){.header h1{font-size:1.7rem}.settings-display{grid-template-columns:1fr;text-align:left}.setting-item{text-align:left;display:flex;justify-content:space-between;align-items:center}.setting-label{margin-bottom:0}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}button:focus-visible,input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}