@import "https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--bg-primary:#0c0a09;--bg-secondary:#1c1917;--bg-tertiary:#292524;--bg-elevated:#44403c;--text-primary:#fafaf9;--text-secondary:#a8a29e;--text-muted:#78716c;--accent-primary:#f59e0b;--accent-secondary:#fbbf24;--accent-tertiary:#d97706;--success:#22c55e;--warning:#eab308;--error:#ef4444;--border-subtle:#ffffff0f;--border-default:#ffffff1a;--border-strong:#ffffff26}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;font-family:DM Sans,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-family:Sora,sans-serif;font-weight:600;line-height:1.2}.font-display{font-family:Sora,sans-serif}.font-mono{font-family:JetBrains Mono,monospace}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}::selection{background:var(--accent-primary);color:var(--bg-primary)}.container-app{width:100%;max-width:480px;margin:0 auto;padding:0 20px}.container-wide{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}.card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden}.card-elevated{background:linear-gradient(135deg,var(--bg-secondary)0%,var(--bg-tertiary)100%);border:1px solid var(--border-default);border-radius:20px;box-shadow:0 4px 6px -1px #0000004d,0 2px 4px -2px #0003}.card-glow{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:20px;position:relative}.card-glow:before{content:"";background:linear-gradient(135deg,var(--accent-primary),transparent 50%);-webkit-mask-composite:xor;opacity:.5;border-radius:21px;padding:1px;transition:opacity .3s;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.card-glow:hover:before{opacity:1}.btn{cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:14px 24px;font-family:Sora,sans-serif;font-size:15px;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background:linear-gradient(135deg,var(--accent-primary)0%,var(--accent-tertiary)100%);color:var(--bg-primary);box-shadow:0 4px 14px -3px #f59e0b66}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px -3px #f59e0b80}.btn-primary:active{transform:translateY(0)scale(.98)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-default)}.btn-secondary:hover{background:var(--bg-elevated);border-color:var(--border-strong)}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-ghost:hover{background:var(--bg-tertiary);color:var(--text-primary)}.btn-icon{border-radius:12px;width:48px;height:48px;padding:0}.btn-lg{border-radius:14px;padding:18px 32px;font-size:16px}.btn-full{width:100%}.input{letter-spacing:.1em;text-align:center;background:var(--bg-tertiary);border:2px solid var(--border-default);width:100%;color:var(--text-primary);border-radius:16px;padding:20px 24px;font-family:Sora,sans-serif;font-size:18px;font-weight:500;transition:all .2s}.input::placeholder{color:var(--text-muted);letter-spacing:.05em}.input:focus{border-color:var(--accent-primary);background:var(--bg-secondary);outline:none;box-shadow:0 0 0 4px #f59e0b1a}.input-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-family:Sora,sans-serif;font-size:13px;font-weight:500;display:block}.badge{text-transform:uppercase;letter-spacing:.03em;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:600;display:inline-flex}.badge-success{color:var(--success);background:#22c55e26}.badge-warning{color:var(--warning);background:#eab30826}.badge-error{color:var(--error);background:#ef444426}.status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-dot-success{background:var(--success);box-shadow:0 0 8px var(--success)}.status-dot-warning{background:var(--warning);box-shadow:0 0 8px var(--warning)}.status-dot-error{background:var(--error);box-shadow:0 0 8px var(--error)}.status-dot-pulse{animation:2s ease-in-out infinite pulse-glow}.color-swatch{cursor:pointer;border:3px solid #0000;border-radius:14px;width:56px;height:56px;transition:all .2s;position:relative}.color-swatch:hover{transform:scale(1.08)}.color-swatch.active{border-color:var(--text-primary);box-shadow:0 0 0 3px var(--bg-primary),0 0 20px currentColor}.color-swatch:after{content:"";background:inherit;border-radius:10px;position:absolute;inset:3px}.color-grid{grid-template-columns:repeat(5,1fr);gap:12px;display:grid}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-in{animation:.4s ease-out forwards fade-in}.animate-slide-up{animation:.5s cubic-bezier(.4,0,.2,1) forwards slide-up}.animate-slide-down{animation:.5s cubic-bezier(.4,0,.2,1) forwards slide-down}.animate-scale-in{animation:.3s cubic-bezier(.4,0,.2,1) forwards scale-in}.animate-float{animation:3s ease-in-out infinite float}.animate-pulse-glow{animation:2s ease-in-out infinite pulse-glow}.animate-shimmer{background:linear-gradient(90deg,var(--bg-tertiary)0%,var(--bg-elevated)50%,var(--bg-tertiary)100%);background-size:200% 100%;animation:1.5s infinite shimmer}.animate-spin-slow{animation:8s linear infinite spin-slow}.delay-75{animation-delay:75ms}.delay-100{animation-delay:.1s}.delay-150{animation-delay:.15s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.grain-overlay:before{content:"";pointer-events:none;z-index:9999;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");position:fixed;inset:0}.text-gradient{background:linear-gradient(135deg,var(--accent-secondary),var(--accent-primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glow-amber{box-shadow:0 0 30px #f59e0b4d}.glow-amber-sm{box-shadow:0 0 15px #f59e0b33}.glass{-webkit-backdrop-filter:blur(12px);background:#1c1917cc}.glass-light{-webkit-backdrop-filter:blur(12px);background:#ffffff0d}.fullscreen-light{flex-direction:column;width:100vw;height:100dvh;display:flex;position:fixed;inset:0}.qr-container{background:#fff;border-radius:16px;padding:16px;box-shadow:0 0 40px #f59e0b26}@media (max-width:640px){.container-app{padding:0 16px}.color-grid{grid-template-columns:repeat(5,1fr);gap:8px}.color-swatch{border-radius:12px;width:48px;height:48px}.btn{padding:12px 20px;font-size:14px}.btn-lg{padding:16px 28px;font-size:15px}}.safe-area-top{padding-top:env(safe-area-inset-top)}.safe-area-bottom{padding-bottom:env(safe-area-inset-bottom)}.safe-area-x{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}