@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-app:#09090b;--bg-card:#18181b;--bg-card-hover:#27272a;--bg-input:#09090b;--primary:#fff;--primary-hover:#e4e4e7;--accent:#3b82f6;--text-main:#f4f4f5;--text-muted:#a1a1aa;--border-color:#27272a;--border-focus:#52525b;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--transition-fast:.15s ease;--transition-normal:.3s ease;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a}*{box-sizing:border-box;margin:0;padding:0}html{background-color:var(--bg-app);overscroll-behavior:none}body{background-color:var(--bg-app);color:var(--text-main);overscroll-behavior:none;background-image:radial-gradient(circle at top,#18181b 0%,#09090b 50%);justify-content:center;align-items:flex-start;min-height:100vh;padding:4rem 2rem;font-family:Inter,-apple-system,sans-serif;display:flex}#root{width:100%;max-width:1100px}.header-container{margin-bottom:3rem}h1{color:var(--text-main);letter-spacing:-.025em;margin-bottom:.5rem;font-size:2rem;font-weight:700}.subtitle{color:var(--text-muted);font-size:1rem;font-weight:400}h2.section-title{color:var(--text-main);border-bottom:1px solid var(--border-color);align-items:center;gap:.5rem;margin-bottom:1.5rem;padding-bottom:.75rem;font-size:1.125rem;font-weight:600;display:flex}.bento-grid{grid-template-columns:350px 1fr;align-items:start;gap:2rem;display:grid}@media (width<=900px){.bento-grid{grid-template-columns:1fr}}.bento-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);transition:border-color var(--transition-normal);padding:2rem}.bento-card:hover{border-color:var(--border-focus)}.form-section{flex-direction:column;gap:1.5rem;display:flex}.input-group{flex-direction:column;gap:.5rem;display:flex}.input-label{color:var(--text-muted);font-size:.875rem;font-weight:500}.grid-2{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.text-input,.select-input{background-color:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;color:var(--text-main);transition:all var(--transition-fast);padding:.75rem 1rem;font-family:inherit;font-size:.95rem}.text-input:focus,.select-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #3b82f633}.select-input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a1a1aa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:1rem}.color-picker-wrapper{background-color:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:border-color var(--transition-fast);align-items:center;gap:.75rem;padding:.5rem;display:flex}.color-picker-wrapper:focus-within{border-color:var(--accent)}.color-picker{border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;width:28px;height:28px;padding:0}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border-radius:var(--radius-sm);border:1px solid #ffffff1a}.color-hex{color:var(--text-muted);font-family:monospace;font-size:.85rem}.file-upload-wrapper{width:100%;position:relative}.btn-upload{background-color:var(--bg-input);border:1px dashed var(--border-focus);border-radius:var(--radius-md);width:100%;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;gap:.5rem;padding:1rem;font-size:.95rem;font-weight:500;display:flex}.file-upload-wrapper:hover .btn-upload{border-color:var(--text-main);color:var(--text-main)}.file-upload-wrapper input[type=file]{opacity:0;cursor:pointer;position:absolute;inset:0}.preview-container{background-color:var(--bg-input);border-radius:var(--radius-lg);border:1px solid var(--border-color);flex-direction:column;justify-content:center;align-items:center;min-height:400px;margin-bottom:2rem;padding:3rem;display:flex}.qr-canvas-wrapper{border-radius:var(--radius-md);box-shadow:var(--shadow-lg);transition:transform var(--transition-normal);background:#fff;padding:1rem}.qr-canvas-wrapper:hover{transform:scale(1.02)}.download-actions{justify-content:center;gap:1rem;display:flex}.btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:500;display:inline-flex}.btn-primary{background-color:var(--primary);color:var(--bg-app)}.btn-primary:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.btn-secondary{background-color:var(--bg-card-hover);color:var(--text-main);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--border-focus)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-app)}::-webkit-scrollbar-thumb{background:var(--border-focus);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.dragon-escort{pointer-events:none;z-index:9999;flex-direction:column;gap:.5rem;transition:transform .25s ease-out,opacity .2s ease-out;display:flex;position:fixed}.dragon-top{align-items:flex-start;top:0;left:2rem}.dragon-bottom{align-items:flex-end;bottom:0;right:2rem}.dragon-svg{filter:drop-shadow(0 4px 16px #2dd4bf4d)}.dragon-speech{background:var(--bg-card);color:var(--text-main);border:1px solid var(--border-focus);border-radius:var(--radius-lg);white-space:nowrap;padding:.5rem 1rem;font-size:.85rem;font-weight:500;animation:.3s ease-out speech-pop;box-shadow:0 4px 20px #0006}@keyframes speech-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}