:root{--color-primary:#6c5ce7;--color-primary-dark:#5a4bd1;--color-primary-light:#a29bfe;--color-primary-bg:#f0eeff;--color-accent:#4caf50;--color-accent-dark:#388e3c;--color-accent-light:#81c784;--color-bg:#fafafa;--color-surface:#fff;--color-surface-dim:#f5f5f5;--color-border:#e8e8e8;--color-text:#1a1a2e;--color-text-secondary:#6b7280;--color-text-muted:#9ca3af;--color-error:#ef4444;--color-error-bg:#fef2f2;--color-success:#10b981;--color-success-bg:#ecfdf5;--color-warning:#f59e0b;--color-role-robotics:#6c5ce7;--color-role-developers:#00b894;--color-role-datascience:#fdcb6e;--color-role-cybersec:#e17055;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 30px rgba(0,0,0,.12);--shadow-glow:0 0 20px rgba(108,92,231,.3);--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{background:var(--color-bg);color:var(--color-text);min-height:100dvh;overflow-x:hidden}h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.2}h1{font-size:1.75rem}h2{font-size:1.375rem}h3{font-size:1.125rem}.btn{align-items:center;border:none;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.9375rem;font-weight:600;gap:var(--space-sm);justify-content:center;padding:14px 28px;transition:all var(--transition-base);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-primary);box-shadow:0 2px 8px #6c5ce759;color:#fff}.btn-primary:hover{background:var(--color-primary-dark);box-shadow:0 4px 16px #6c5ce773}.btn-primary:disabled{background:var(--color-primary-light);box-shadow:none;cursor:not-allowed;opacity:.6}.btn-accent{background:var(--color-accent);box-shadow:0 2px 8px #4caf5059;color:#fff}.btn-accent:hover{background:var(--color-accent-dark)}.btn-outline{background:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}.btn-outline:hover{background:var(--color-primary-bg)}.btn-danger{background:var(--color-error);color:#fff}.btn-danger:hover{background:#dc2626}.btn-ghost{background:transparent;color:var(--color-text-secondary);padding:10px 16px}.btn-ghost:hover{background:var(--color-surface-dim)}.btn-sm{font-size:.8125rem;padding:10px 20px}.input-group{display:flex;flex-direction:column;gap:6px}.input-group label{color:var(--color-text-secondary);font-size:.8125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.input{-webkit-appearance:none;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:inherit;font-size:1rem;padding:14px 16px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:100%}.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #6c5ce726;outline:none}.input::-moz-placeholder{color:var(--color-text-muted)}.input::placeholder{color:var(--color-text-muted)}.input-code{font-family:JetBrains Mono,monospace;font-size:1.5rem;font-weight:700;letter-spacing:.3em;padding:16px;text-align:center}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-surface);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8 1 3h10z'/%3E%3C/svg%3E");background-position:right 16px center;background-repeat:no-repeat;border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;font-family:inherit;font-size:1rem;padding:14px 40px 14px 16px;width:100%}.select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #6c5ce726;outline:none}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-lg)}.toast{animation:slideUp .3s ease;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;padding:12px 16px}.toast-error{background:var(--color-error-bg);border:1px solid rgba(239,68,68,.2);color:var(--color-error)}.toast-success{background:var(--color-success-bg);border:1px solid rgba(16,185,129,.2);color:var(--color-success)}.badge{align-items:center;border-radius:var(--radius-full);display:inline-flex;font-size:.75rem;font-weight:700;letter-spacing:.05em;padding:4px 12px;text-transform:uppercase}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fade-in{animation:fadeIn .4s ease}.animate-slide-up{animation:slideUp .4s ease}.text-center{text-align:center}.text-muted{color:var(--color-text-secondary)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mb-md{margin-bottom:var(--space-md)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.page-wrapper{display:flex;flex-direction:column;margin:0 auto;max-width:480px;min-height:100dvh;padding:var(--space-md)}@media(min-width:768px){.page-wrapper{max-width:600px;padding:var(--space-xl)}h1{font-size:2rem}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--color-primary-light);border-radius:4px}