.spinner{width:50px;height:50px;margin:0 auto 20px;border:4px solid var(--border);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-container{border-top:4px solid var(--error-color)}.error-icon{font-size:64px;margin-bottom:20px}.error-message{color:var(--error-color);font-weight:500}.error-container button{background:var(--error-color)}.error-container button:hover{background:#dc2626}.success-icon{width:80px;height:80px;margin:0 auto 20px;background:var(--success-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700}.user-info{text-align:left;margin:30px 0;padding:20px;background:var(--background);border-radius:12px}.user-details-list{display:grid;gap:12px}.user-details-list dt{font-weight:600;color:var(--text-secondary);font-size:14px;text-transform:uppercase;letter-spacing:.5px}.user-details-list dd{color:var(--text-primary);font-size:16px;margin-bottom:8px;padding-bottom:12px;border-bottom:1px solid var(--border)}.user-details-list dd:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}.token-details{margin-top:20px;text-align:left}.token-details summary{cursor:pointer;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-weight:500;color:var(--primary-color);-webkit-user-select:none;user-select:none}.token-details summary:hover{background:var(--background)}.token-details pre{margin-top:12px;padding:16px;background:#1e293b;color:#e2e8f0;border-radius:8px;overflow-x:auto;font-size:12px;line-height:1.5}.button-group{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.button-group button{flex:1;min-width:150px}.btn-secondary{background:var(--surface);color:var(--primary-color);border:2px solid var(--primary-color)}.btn-secondary:hover{background:var(--primary-color);color:#fff}.api-section{text-align:left;margin:30px 0;padding:20px;background:var(--background);border-radius:12px}.api-section h2{margin-bottom:16px;font-size:20px}.btn-api{width:100%;padding:12px 24px;font-size:16px;font-weight:500;color:#fff;background:var(--primary-color);border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.btn-api:hover:not(:disabled){background:#1976d2;transform:translateY(-2px);box-shadow:0 4px 12px #2196f34d}.btn-api:disabled{opacity:.6;cursor:not-allowed}.api-error{margin-top:16px;padding:12px;background:#fee;border:1px solid #fcc;border-radius:8px;color:#c00;font-size:14px}.api-results{margin-top:16px}.api-results h3{margin-bottom:12px;font-size:16px;color:var(--success-color)}.materials-data{margin:0;padding:16px;background:#1e293b;color:#e2e8f0;border-radius:8px;overflow-x:auto;font-size:12px;line-height:1.5;max-height:400px;overflow-y:auto}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #2563eb;--success-color: #10b981;--error-color: #ef4444;--background: #f8fafc;--surface: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--border: #e2e8f0;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;color:var(--text-primary)}#root{width:100%;display:flex;justify-content:center}#app{width:100%;max-width:600px}.container{background:var(--surface);border-radius:16px;padding:40px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;text-align:center;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}h1{font-size:28px;margin-bottom:16px;color:var(--text-primary)}h2{font-size:20px;margin:30px 0 16px;color:var(--text-primary)}p{color:var(--text-secondary);line-height:1.6;margin-bottom:12px}button{background:var(--primary-color);color:#fff;border:none;padding:12px 32px;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s;margin-top:20px}button:hover{background:#1d4ed8;transform:translateY(-2px);box-shadow:0 4px 12px #2563eb66}button:active{transform:translateY(0)}@media (max-width: 640px){.container{padding:30px 20px}h1{font-size:24px}h2{font-size:18px}}