:root {
    --bg: #1a1c22;
    --panel: #24272e;
    --panel-2: #2b2f38;
    --line: #363b45;
    --text: #e6e8ec;
    --muted: #9aa0aa;
    --accent: #5865f2;
    --accent-hover: #4752c4;
    --good: #3ba55d;
    --warn: #faa61a;
    --danger: #ed4245;
    --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    background: radial-gradient(1200px 600px at 50% -10%, #232733 0%, var(--bg) 60%);
    color: var(--text);
    font: 16px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.wrap { width: 100%; max-width: 680px; margin: 0 auto; padding: 56px 20px 40px; flex: 1; }
.head h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -0.02em; }
.sub { margin: 0; color: var(--muted); }

.banner { margin: 22px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.banner.warn { background: rgba(250,166,26,0.12); border: 1px solid rgba(250,166,26,0.35); color: #f4c66a; }
.banner code { background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 5px; font-size: 13px; }

.lookup { display: flex; gap: 10px; margin: 26px 0 8px; }
.lookup input {
    flex: 1; padding: 14px 16px; font-size: 16px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
.lookup input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,101,242,0.25); }
.lookup button {
    padding: 0 22px; font-size: 15px; font-weight: 600; cursor: pointer;
    background: var(--accent); color: #fff; border: 0; border-radius: 10px;
    transition: filter .15s, transform .05s;
}
.lookup button:hover { filter: brightness(1.08); }
.lookup button:active { transform: translateY(1px); }
.lookup button:disabled { opacity: .6; cursor: default; }
.hint { margin: 6px 2px 0; font-size: 13px; color: var(--muted); }
.hint em { color: #c7ccd4; font-style: normal; font-weight: 600; }

.result { margin-top: 30px; }
.card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden;
}
.card-top { display: flex; gap: 16px; align-items: center; padding: 20px; }
.avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--panel-2); flex: 0 0 auto; object-fit: cover; border: 1px solid var(--line); }
.avatar.sq { border-radius: 16px; }
.avatar.contain { object-fit: contain; padding: 8px; }
.avatar.swatch { border-width: 2px; }
.avatar-wrap { position: relative; flex: 0 0 auto; width: 80px; height: 80px; }
.avatar-wrap .avatar { display: block; }
.avatar-wrap .deco { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; transform: translate(-50%, -50%); pointer-events: none; }
.card-banner { display: block; width: 100%; height: 140px; object-fit: cover; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.card-banner.solid { height: 90px; }
.pill.tagpill { background: rgba(88,101,242,0.12); border-color: rgba(88,101,242,0.4); color: #c7ccd4; }
.tagbadge { height: 14px; vertical-align: -2px; margin-right: 5px; }
.np { height: 34px; border-radius: 6px; vertical-align: middle; border: 1px solid var(--line); }
.identity { min-width: 0; }
.identity .name { font-size: 22px; font-weight: 700; margin: 0; word-break: break-word; }
.identity .secondary { color: var(--muted); font-size: 14px; margin: 2px 0 0; word-break: break-word; }
.pill {
    display: inline-block; margin: 8px 6px 0 0; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; background: var(--panel-2); border: 1px solid var(--line); color: #c7ccd4;
}
.pill.type-user { background: rgba(88,101,242,0.18); border-color: rgba(88,101,242,0.5); color: #aab2ff; }
.pill.type-bot { background: rgba(88,101,242,0.18); border-color: rgba(88,101,242,0.5); color: #aab2ff; }
.pill.type-server { background: rgba(59,165,93,0.16); border-color: rgba(59,165,93,0.45); color: #7fe0a0; }
.pill.type-channel { background: rgba(250,166,26,0.16); border-color: rgba(250,166,26,0.45); color: #f4c66a; }
.pill.type-unknown { background: rgba(237,66,69,0.14); border-color: rgba(237,66,69,0.4); color: #f39a9c; }
.pill.type-role { background: rgba(235,69,158,0.14); border-color: rgba(235,69,158,0.45); color: #f2a0cd; }
.pill.type-emoji { background: rgba(0,176,244,0.14); border-color: rgba(0,176,244,0.45); color: #8fd7f7; }

.badges { padding: 0 20px 6px; }
.badge { display: inline-block; margin: 0 6px 6px 0; padding: 3px 9px; border-radius: 6px; font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); }

.rows { border-top: 1px solid var(--line); }
.row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 20px; border-bottom: 1px solid var(--line); font-size: 14px; }
.row:last-child { border-bottom: 0; }
.row .k { color: var(--muted); }
.row .v { text-align: right; word-break: break-word; font-variant-numeric: tabular-nums; }
.row .v a { color: #aab2ff; text-decoration: none; }
.row .v a:hover { text-decoration: underline; }

.note { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 14px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--line); color: var(--muted); }
.err { color: #f39a9c; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 20px; border-top: 1px solid var(--line); }