:root{--purple: #7047e8;--purple-dark: #5833c7;--blue: #3e73f6;--pink: #ff6fae;--green: #20c979;--yellow: #ffc83d;--orange: #ff8c43;--teal: #30c9a1;--cyan: #55c9b4;--bg: #f4f7ff;--dark-text: #26335d;--light-text: #6f7692;--card-shadow: 0 10px 25px -5px rgba(38, 51, 93, .08), 0 8px 10px -6px rgba(38, 51, 93, .04);--card-shadow-hover: 0 20px 30px -10px rgba(112, 71, 232, .2), 0 10px 15px -5px rgba(0, 0, 0, .05)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:Fredoka,Outfit,system-ui,-apple-system,sans-serif;background-color:#0d1117;color:var(--dark-text);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden}.app-viewport-wrapper{width:100%;max-width:440px;height:100vh;max-height:915px;background:var(--bg);box-shadow:0 25px 60px #00000080;position:relative;overflow:hidden;display:flex;flex-direction:column}@media (min-width: 500px){.app-viewport-wrapper{border-radius:40px;height:90vh;border:8px solid #1e293b}}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(2deg)}}@keyframes pulseGlow{0%,to{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounceSlow{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.animate-float{animation:float 4s ease-in-out infinite}.animate-bounce-slow{animation:bounceSlow 2s ease-in-out infinite}.animate-slide-up{animation:slideUp .35s cubic-bezier(.16,1,.3,1) forwards}.animate-fade-in{animation:fadeIn .25s ease-out forwards}.bg-gradient-login{background:linear-gradient(135deg,#3e73f6,#8d55ef,#6c4bef)}.bg-gradient-header{background:linear-gradient(135deg,#7047e8,#db54a7,#ff806a)}.glass-card{background:#ffffffeb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6)}.card-press{transition:all .2s cubic-bezier(.34,1.56,.64,1);cursor:pointer}.card-press:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--card-shadow-hover)}.card-press:active{transform:translateY(1px) scale(.97)}.btn-primary{background:linear-gradient(180deg,#22d3ee,#06b6d4);color:#fff;border:none;border-radius:30px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px #20c97959;transition:all .2s ease}.btn-primary:active{transform:scale(.97)}.input-field{width:100%;padding:14px 16px;border-radius:14px;border:1.5px solid #e2e8f0;outline:none;font-family:inherit;font-size:15px;color:var(--dark-text);background:#fff;transition:all .2s ease}.input-field:focus{border-color:var(--purple);box-shadow:0 0 0 3px #7047e826}.role-badge{background:linear-gradient(135deg,#f0ebff,#e9d5ff);color:var(--purple);padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px}