.user-card-trigger { cursor:pointer; touch-action:manipulation; }
.user-card-trigger:focus-visible { outline:2px solid #63dce9; outline-offset:4px; }
.user-profile-card { position:fixed; z-index:1700; box-sizing:border-box; width:420px; border:1px solid rgba(147,208,223,.35); border-radius:13px; overflow:auto; isolation:isolate; color:#f0f7fc; background:#142531; background-image:linear-gradient(180deg,rgba(6,14,23,.08) 0%,rgba(6,14,23,.18) 30%,rgba(6,14,23,.94) 100%),var(--driver-profile-image,url('/assets/racing-track-night.png')); background-size:cover; background-position:center; box-shadow:0 18px 52px rgba(0,0,0,.5); }
.user-profile-card-identity { display:flex; align-items:center; gap:15px; min-height:130px; box-sizing:border-box; padding:28px 22px 22px; background:linear-gradient(90deg,rgba(6,14,23,.65),rgba(6,14,23,.16)); }
.user-profile-card .user-profile-card-avatar { width:62px; height:62px; flex:none; border-radius:50%; border:2px solid rgba(190,237,245,.72); box-shadow:0 0 18px rgba(67,202,228,.15); font-size:22px; }
.user-profile-card-copy { min-width:0; flex:1; }
.user-profile-card-name { display:flex; align-items:center; gap:9px; }
.user-profile-card-name > strong { font-size:20px; line-height:1.35; min-width:0; overflow-wrap:anywhere; }
.user-profile-card .driver-level-badge { height:17px; min-width:31px; padding:0 5px; font-size:10px; }
.user-profile-card-copy > p { margin:7px 0 0; color:#d2c399; font-size:13px; letter-spacing:.12em; }
.user-profile-card-copy > .user-profile-card-signature { color:#bdcdd5; font-size:11px; letter-spacing:0; line-height:1.6; overflow-wrap:anywhere; }
.user-profile-card-close { position:absolute; right:8px; top:8px; display:none; width:44px; height:44px; border:1px solid rgba(205,231,240,.4); border-radius:50%; color:#edf8ff; background:rgba(11,26,38,.75); font:inherit; font-size:23px; line-height:1; cursor:pointer; }
.user-profile-card.is-touch .user-profile-card-close { display:grid; place-items:center; }
.user-profile-card-close:focus-visible { outline:2px solid #63dce9; outline-offset:3px; }
.user-profile-card.is-touch .user-profile-card-identity { padding-right:54px; }
.user-profile-card-vehicles { padding:11px 16px 13px; border-top:1px solid rgba(150,214,228,.2); background:rgba(7,20,29,.85); }
.user-profile-card-vehicles h3 { margin:0 0 8px; font-size:12px; letter-spacing:.08em; color:#e8f1f5; }
.user-card-vehicle-grid { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(76px,1fr); gap:6px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; }
.user-card-vehicle { display:flex; flex-direction:column; gap:5px; min-width:0; padding:5px; border:1px solid rgba(147,208,223,.17); border-radius:6px; background:rgba(28,50,63,.45); }
.user-card-vehicle-picture { width:100%; height:40px; display:grid; place-items:center; border-radius:4px; overflow:hidden; color:#839ca9; background:rgba(7,20,27,.6); }.user-card-vehicle-picture img { width:100%; height:100%; object-fit:contain; }
.user-card-vehicle>div { min-width:0; display:flex; flex-direction:column; gap:2px; }.user-card-vehicle small { font-size:9px; color:#83cbd5; }.user-card-vehicle strong { font-size:10px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-card-vehicle-empty { margin:0; color:#8da5b2; font-size:12px; line-height:1.5; }
@media(max-width:480px) { .user-profile-card { width:420px; } .user-profile-card-identity { padding-left:18px; padding-right:18px; gap:13px; } .user-card-vehicle-picture { height:34px; } }
@media(max-width:700px) { .user-profile-card-close { display:grid; place-items:center; }.user-profile-card-identity { padding-right:54px; } }
@media(prefers-reduced-motion:no-preference) { .user-profile-card { animation:user-card-enter .12s ease-out; } @keyframes user-card-enter { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } } }