:root { font-family: Inter, system-ui, sans-serif; color: #f7f7fa; background: #090a0d; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { padding: 32px 20px; background: radial-gradient(circle at 50% -10%, #252936, #090a0d 58%); }
.avatar-list-app { width: min(1080px, 100%); margin: 0 auto; }
.page-header { padding: 22px 4px 28px; }
.page-header h1 { margin: 0 0 8px; font-size: clamp(28px, 5vw, 42px); letter-spacing: -.03em; }
.page-header p { margin: 0; color: #9ca3b5; font-size: 15px; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.avatar-card { display: flex; min-height: 300px; flex-direction: column; overflow: hidden; border: 1px solid #ffffff1c; border-radius: 22px; color: inherit; background: #17191f; text-decoration: none; box-shadow: 0 16px 50px #0005; transition: transform .2s, border-color .2s; }
.avatar-card:hover { transform: translateY(-3px); border-color: #ffffff55; }
.avatar-card img { width: 100%; height: 220px; object-fit: cover; background: #252833; }
.avatar-info { display: grid; gap: 7px; padding: 16px 17px 18px; }
.avatar-info strong { font-size: 18px; }
.avatar-info small { color: #9ca3b5; line-height: 1.4; }
.avatar-enter { margin-top: 4px; color: #8fa8ff; font-size: 13px; }
.loading, .error { color: #a9afbe; }
.page-header { display:flex; justify-content:space-between; align-items:center; gap:16px; }
#nickname-button { max-width:160px; overflow:hidden; text-overflow:ellipsis; border:1px solid #ffffff33; border-radius:24px; padding:10px 16px; background:#17191f; color:#fff; cursor:pointer; }
#nickname-dialog { width:min(360px,90vw); padding:24px; border:1px solid #ffffff33; border-radius:20px; background:#19191c; color:#fff; }
#nickname-dialog::backdrop { background:#000b; backdrop-filter:blur(7px); }
#nickname-form { display:grid; gap:14px; }
#nickname-form h2, #nickname-form p { margin:0; }
#nickname-form p { color:#a9afbe; font-size:14px; }
#nickname-form input { width:100%; padding:12px; border:1px solid #ffffff44; border-radius:12px; background:#ffffff14; color:#fff; font-size:16px; }
#nickname-form button { padding:12px; border:0; border-radius:12px; cursor:pointer; font-weight:700; }
@media (max-width: 600px) { body { padding: 18px 14px; } .avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .avatar-card { min-height: 220px; border-radius: 16px; } .avatar-card img { height: 145px; } .avatar-info { padding: 11px 12px 13px; } .avatar-info strong { font-size: 15px; } .avatar-info small { font-size: 12px; } }