:root { --bg: #050816; --bg-elevated: #0b1020; --border: #1b2138; --accent: #ff4b81; --accent-soft: rgba(255, 75, 129, .12); --text: #f6f7fb; --muted: #9ca3af; --chip: #151a2a; --chip-border: #262b3f; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; background: radial-gradient(circle at top, #141b35 0, #050816 55%, #02020a 100%); color: var(--text); } body { min-height: 100vh; align-items: flex-start; justify-content: center; padding: 0px 16px; } .container { width: 100%; max-width: 1200px; margin: 0 auto; } .grid { display: flex; flex-direction: column; gap: 20px; } .card { background: linear-gradient(130deg, rgba(255, 255, 255, .04), rgba(24, 31, 56, .6)); border-radius: 24px; border: 1px solid rgba(255, 255, 255, .06); padding: 24px 22px 22px; position: relative; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); } .page-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .page-header h1 { margin: 0; font-size: 26px; letter-spacing: .02em; } .page-header .subtitle { margin: 0; color: var(--muted); font-size: 14px; } .username-list { list-style: none; margin: 0; padding: 0; border-radius: 18px; background: rgba(5, 8, 22, .7); border: 1px solid rgba(255, 255, 255, .05); overflow: hidden; } .username-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .03); font-size: 15px; } .username-item:last-child { border-bottom: none; } .username-item:nth-child(even) { background: rgba(255, 255, 255, .01); } .username-item a { color: var(--text); text-decoration: none; font-weight: 500; } .username-item a:hover { text-decoration: underline; } .username-meta { color: var(--muted); font-size: 12px; } .pagination-wrapper { margin-top: 18px; display: flex; justify-content: center; } .pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; border-radius: 999px; background: rgba(5, 8, 22, .85); border: 1px solid rgba(255, 255, 255, .08); font-size: 13px; } .page-link, .page-current, .page-gap { min-width: 30px; height: 30px; padding: 0 10px; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .page-link { text-decoration: none; color: var(--text); border: 1px solid transparent; cursor: pointer; } .page-link:hover { border-color: var(--accent); background: var(--accent-soft); } .page-current { background: var(--accent); color: #fff; font-weight: 600; border: 1px solid var(--accent); } .page-gap { color: var(--muted); } .info-bar { margin-top: 6px; font-size: 13px; color: var(--muted); } @media (max-width:600px) { body { padding: 18px 10px; } .card { padding: 18px 14px 14px; border-radius: 18px; } .page-header h1 { font-size: 22px; } } .top-nav { width: 100%; padding: 12px 0; background: var(--card); text-align: center; } .top-nav-inner { display: flex; justify-content: center; align-items: center; } .top-nav-inner .nav-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; } .top-nav-inner .nav-menu a { text-decoration: none; color: var(--text); font-weight: 600; padding: 8px 12px; border-radius: 8px; transition: color .2s ease; } .top-nav-inner .nav-menu a:hover { color: var(--accent); } .top-nav-inner .nav-menu a[aria-current="page"] { color: var(--accent); cursor: default; }