:root{--color-bg: #2d1b4e;--color-surface: #432c7a;--color-primary: #f97316;--color-primary-dark: #ea580c;--color-secondary: #f472b6;--color-secondary-dark: #db2777;--color-accent: #22d3ee;--color-text: #ffffff;--color-text-dim: #b8b2cc;--radius: 1.5rem;--border-width: 3px;--shadow-hard: 4px 4px 0px rgba(0, 0, 0, .4);--shadow-soft: 0 10px 30px -10px rgba(0, 0, 0, .5)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;-webkit-tap-highlight-color:transparent;font-family:Nunito,sans-serif;background-color:var(--color-bg);color:var(--color-text)}h1,h2,h3{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;text-shadow:2px 2px 0px rgba(0,0,0,.2)}.page{height:100vh;height:var(--app-height, 100vh);display:flex;flex-direction:column;background:radial-gradient(circle at center top,#432c7a,#2d1b4e);overflow:hidden;justify-content:center}.container{width:100%;max-width:500px;margin:0 auto;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom));height:auto;max-height:100%;display:flex;flex-direction:column}.page-content{flex:1;display:flex;flex-direction:column;gap:1rem;min-height:0}.card{background:var(--color-surface);border:var(--border-width) solid rgba(255,255,255,.1);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:1rem}.input-group{display:flex;flex-direction:column;gap:.5rem}.input{background:#0003;border:var(--border-width) solid rgba(255,255,255,.2);border-radius:1rem;padding:1rem;color:#fff;font-family:inherit;font-weight:700;font-size:1.1rem;outline:none;transition:all .2s;text-align:center}.input:focus{border-color:var(--color-primary);background:#0000004d;transform:scale(1.02)}.input::placeholder{color:#ffffff4d}.btn{border:none;background:var(--color-primary);color:#2d1b4e;padding:1rem 1.5rem;border-radius:1rem;font-weight:900;font-size:1.1rem;text-transform:uppercase;cursor:pointer;box-shadow:0 4px #0003;transition:all .1s;display:flex;align-items:center;justify-content:center;gap:.5rem;position:relative;top:0}.btn:active{top:4px;box-shadow:0 0 #0003}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-secondary{background:var(--color-secondary);color:#fff}.btn-secondary:hover{background:var(--color-secondary-dark)}.btn-outline{background:transparent;border:3px solid rgba(255,255,255,.2);color:#fff;box-shadow:none}.btn-outline:hover{border-color:#fff;background:#ffffff0d}.btn-lg{padding:1.25rem;font-size:1.25rem;border-radius:1.25rem}.btn-full{width:100%}.btn-ghost{background:transparent;color:var(--color-text-dim);box-shadow:none}.btn-ghost:hover{color:#fff}.btn:disabled{opacity:.5;filter:grayscale(1);cursor:not-allowed;pointer-events:none}.text-center{text-align:center}.text-muted{color:var(--color-text-dim)}.mt-auto{margin-top:auto}.flex-col{display:flex;flex-direction:column}.gap-md{gap:1rem}.separator{display:flex;align-items:center;gap:1rem;margin:1rem 0;color:var(--color-text-dim);font-weight:700;font-size:.9rem;text-transform:uppercase}.separator:before,.separator:after{content:"";flex:1;height:3px;background:#ffffff1a;border-radius:3px}@keyframes popIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.fade-in{animation:popIn .3s cubic-bezier(.175,.885,.32,1.275)}.error-message{color:#ef4444;background:#ef44441a;padding:1rem;border-radius:1rem;text-align:center;font-weight:700;border:2px solid rgba(239,68,68,.2)}.scrollable{overflow-y:auto;padding-right:.5rem}.scrollable::-webkit-scrollbar{width:6px}.scrollable::-webkit-scrollbar-track{background:#0000001a;border-radius:3px}.scrollable::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}
