:root{--primary-color: #646cff;--bg-color: #f0f2f5;--card-bg: #ffffff;--text-main: #1a1a1a;--text-muted: #737373;--radius: 16px;--shadow: 0 10px 30px -10px rgba(0, 0, 0, .1)}body{margin:0;min-height:100vh;display:flex;place-items:center;justify-content:center;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased}#root{width:100%;display:flex;justify-content:center;padding:2rem}#root{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}.user-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:380px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;min-height:200px}.user-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -10px #00000026}.user-card-header{background:linear-gradient(135deg,var(--primary-color),#858cff);padding:2rem 1.5rem;text-align:center}.user-card-header h4{margin:0;color:#fff;font-size:1.5rem;font-weight:700;letter-spacing:-.5px}.user-card-body{padding:2rem}.user-info{display:grid;grid-template-columns:auto 1fr;gap:12px 24px;margin:0;align-items:baseline}.user-info-label{text-align:right;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);white-space:nowrap}.user-info-value{margin:0;font-size:.95rem;font-weight:500;color:var(--text-main);word-break:break-word;line-height:1.5}.user-directory-widget{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:380px}.user-directory-nav{display:flex;gap:1rem;width:100%;justify-content:center}.user-directory-button{flex:1;padding:.8rem;background-color:var(--text-main);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s}.user-directory-button:hover{background-color:var(--primary-color)}.user-directory-button:active{transform:scale(.98)}.user-card.error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;color:#d32f2f;gap:1rem}