:root {
  color-scheme: dark;
  --bg: #0a0e14;
  --bg-alt: #0f1319;
  --panel: rgba(15, 19, 25, 0.92);
  --panel-border: rgba(255, 255, 255, 0.06);
  --text: #e6edf3;
  --muted: #7d8590;
  --accent: #3fb950;
  --accent-glow: rgba(63, 185, 80, 0.12);
  --teal: #39d0d8;
  --danger: #f85149;
  --warn: #d29922;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --radius: 16px;
  --status-online: #3fb950;
  --status-idle: #d29922;
  --status-dnd: #f85149;
  --status-offline: #484f58;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", Helvetica, sans-serif;
  font-size: 14px; line-height: 1.5;
}
body { overflow-x: hidden; }
body:not(.login-only) { overflow: hidden; }

.ambient { position: fixed; width: 500px; height: 500px; border-radius: 999px; filter: blur(120px); opacity: 0.14; pointer-events: none; z-index: 0; }
.ambient-a { top: -200px; left: -200px; background: var(--accent); }
.ambient-b { right: -200px; bottom: -200px; background: var(--teal); }

.shell { position: relative; z-index: 1; max-width: 1840px; margin: 0 auto; padding: 40px 24px 56px; }
body:not(.login-only) .shell { height: 100vh; padding: 16px; }
body.login-only .shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
body.login-only .hero, body.login-only .app { display: none; }
body.login-only #loginView { width: min(100%, 440px); margin: 0 auto; }
body.login-only .auth-card { padding: 32px 28px; }
body.login-only .login-card .card__header { flex-direction: column; justify-content: center; text-align: center; }
body.login-only .login-card .card__header h2 { font-size: 1.5rem; }

.hero { display: grid; gap: 10px; margin-bottom: 24px; max-width: 800px; }
.hero__eyebrow { text-transform: uppercase; letter-spacing: 0.25em; color: var(--accent); font-size: 11px; font-weight: 600; }
.hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; font-weight: 800; }
.hero p { margin: 0; color: var(--muted); max-width: 600px; line-height: 1.7; }

.card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.auth-card { max-width: 520px; padding: 28px; }
.card__header, .panel__title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__header h2, .panel__title-row h2, .panel__title-row h3 { margin: 0; font-size: 13px; font-weight: 600; }

.server-summary { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border); }
.server-summary__icon { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; background: rgba(255,255,255,0.06); }
.server-summary__copy { min-width: 0; display: grid; gap: 2px; }
.server-summary__eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; font-weight: 700; }
.server-summary__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.server-summary__meta { margin: 0; color: var(--muted); font-size: 11px; }

.guild-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.guild-card { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; background: rgba(255,255,255,0.03); border: 1px solid transparent; transition: all 0.12s; }
.guild-card:hover { background: rgba(255,255,255,0.06); border-color: var(--panel-border); }
.guild-card.is-selected { background: var(--accent-glow); border-color: rgba(63,185,80,0.25); }
.guild-card__icon { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,0.06); }
.guild-card__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guild-card__name { font-size: 13px; font-weight: 600; }
.guild-card__meta { margin-top: 1px; color: var(--muted); font-size: 11px; }

.leaderboard-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.leaderboard-list { display: grid; gap: 4px; }
.leaderboard-item { display: grid; grid-template-columns: 32px 32px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid transparent; }
.leaderboard-item--top { background: linear-gradient(135deg,rgba(63,185,80,0.08),rgba(255,255,255,0.03)); border-color: rgba(63,185,80,0.18); }
.leaderboard-item__rank { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #0a0e14; background: linear-gradient(135deg,var(--accent),#2ea043); }
.leaderboard-item__avatar { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.leaderboard-item__title { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.leaderboard-item__name { font-weight: 600; font-size: 12px; }
.leaderboard-item__secondary, .leaderboard-item__tertiary { color: var(--muted); font-size: 11px; }
.leaderboard-item__tertiary { color: var(--teal); }
.leaderboard-empty { padding: 10px; color: var(--muted); font-size: 12px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.chip--online { background: rgba(63,185,80,0.12); border-color: rgba(63,185,80,0.25); color: var(--accent); }
.chip--offline { background: rgba(248,81,73,0.1); border-color: rgba(248,81,73,0.2); color: var(--danger); }
.bot-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: bot-pulse-anim 1.5s ease-in-out infinite; }
@keyframes bot-pulse-anim { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(63,185,80,0.5); } 50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(63,185,80,0); } }

.auth-form, .panel__section, .action-group { display: grid; gap: 10px; }
.auth-form label, .search-box { display: grid; gap: 5px; color: var(--muted); font-size: 13px; }
input, select, button { font: inherit; }
input, select { width: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--text); padding: 9px 12px; outline: none; font-size: 13px; transition: border-color 0.12s, background 0.12s; }
input:focus, select:focus { border-color: rgba(63,185,80,0.5); background: rgba(255,255,255,0.06); }

.btn { border: 0; border-radius: 10px; padding: 9px 14px; cursor: pointer; font-size: 13px; font-weight: 600; transition: transform 0.1s, opacity 0.1s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: linear-gradient(135deg,var(--accent),#2ea043); color: #fff; font-weight: 700; }
.btn--ghost { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(255,255,255,0.08); }
.btn--danger { background: linear-gradient(135deg,var(--danger),#a52020); color: #fff; font-weight: 700; }
.hidden { display: none !important; }

.app { display: grid; grid-template-columns: 370px minmax(0,1fr) 500px; gap: 16px; }
body:not(.login-only) .app { height: calc(100vh - 32px); min-height: 0; }
.panel { padding: 16px; }
.panel--sidebar { display: grid; gap: 14px; overflow: auto; min-height: 0; align-content: start; }
.panel--members, .panel--detail { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

.stats-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.stats-grid--compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
.stat { padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid transparent; }
.stat__label { font-size: 11px; color: var(--muted); margin-bottom: 3px; font-weight: 500; }
.stat__value { font-size: 18px; font-weight: 700; }
.stats-grid--compact .stat { padding: 8px; }
.stats-grid--compact .stat__value { font-size: 14px; }

.role-boost-list { display: grid; gap: 6px; }
.role-boost-card { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid transparent; }
.role-boost-card.is-missing { border-color: rgba(248,81,73,0.25); background: rgba(248,81,73,0.05); }
.role-boost-card__header, .role-boost-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.role-boost-card__name { font-weight: 600; font-size: 13px; }
.role-boost-card__meta { margin-top: 1px; color: var(--muted); font-size: 11px; }
.role-boost-card__footer .btn { padding: 6px 10px; font-size: 11px; }

/* ── MEMBER LIST ── */
.member-list { display: grid; gap: 2px; flex: 1; min-height: 0; align-content: start; overflow: auto; }
.member-card { appearance: none; -webkit-appearance: none; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 12px; border-radius: 10px; cursor: pointer; text-align: left; color: inherit; font: inherit; background: transparent; border: 1px solid transparent; transition: background 0.1s; }
.member-card:hover { background: rgba(255,255,255,0.04); }
.member-card.is-selected { background: var(--accent-glow); border-color: rgba(63,185,80,0.2); }
.member-card.is-loading { opacity: 0.55; pointer-events: none; }

.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.06); display: block; }
.avatar--large { width: 64px; height: 64px; }
.status-dot { position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--bg-alt); background: var(--status-offline); }
.status-dot--online { background: var(--status-online); }
.status-dot--idle { background: var(--status-idle); }
.status-dot--dnd { background: var(--status-dnd); }
.status-dot--offline { background: var(--status-offline); }
.status-dot--large { width: 16px; height: 16px; border-width: 3px; }

.member-card__body { min-width: 0; }
.member-card__row { display: flex; align-items: center; gap: 6px; }
.member-card__name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card__sub { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sc { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.sc--online { background: rgba(63,185,80,0.12); color: var(--status-online); }
.sc--idle { background: rgba(210,153,34,0.12); color: var(--status-idle); }
.sc--dnd { background: rgba(248,81,73,0.12); color: var(--status-dnd); }
.sc--offline { background: rgba(72,79,88,0.18); color: var(--status-offline); }
.sc--danger { background: rgba(248,81,73,0.12); color: var(--danger); }
.sc--warn { background: rgba(210,153,34,0.12); color: var(--warn); }

.member-card__select-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06); color: var(--muted); font-size: 11px; font-weight: 600; flex-shrink: 0; pointer-events: none; transition: all 0.1s; }
.member-card:hover .member-card__select-tag { background: rgba(63,185,80,0.1); border-color: rgba(63,185,80,0.25); color: var(--accent); }
.member-card.is-selected .member-card__select-tag { background: var(--accent); color: #fff; border-color: var(--accent); }

.member-card__meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.badge-row, .pill-list { display: flex; flex-wrap: wrap; gap: 4px; }
.badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.05); color: var(--muted); font-size: 10px; font-weight: 600; }
.badge--danger { background: rgba(248,81,73,0.1); border-color: rgba(248,81,73,0.2); color: var(--danger); }
.badge--accent { background: rgba(63,185,80,0.1); border-color: rgba(63,185,80,0.2); color: var(--accent); }
.badge--warn { background: rgba(210,153,34,0.1); border-color: rgba(210,153,34,0.2); color: var(--warn); }
.badge--teal { background: rgba(57,208,216,0.1); border-color: rgba(57,208,216,0.2); color: var(--teal); }

/* ── DETAIL ── */
.detail { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow: auto; }
.detail__hero { display: flex; gap: 14px; align-items: center; }
.detail__hero h2 { margin: 0 0 2px; font-size: 16px; font-weight: 700; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.detail-stat { padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid transparent; }
.detail-stat__label { color: var(--muted); font-size: 11px; margin-bottom: 4px; font-weight: 500; }
.detail-stat__value { font-size: 15px; font-weight: 700; }

.detail-section { display: grid; gap: 6px; }
.detail-section__header { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.detail-section .pill-list { max-height: 80px; overflow: auto; }

.action-group { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--panel-border); }
.action-group h3 { margin: 0; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.inline-form, .button-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.empty-state { display: grid; place-items: center; align-content: center; text-align: center; min-height: 100%; color: var(--muted); }
.empty-state h2 { font-size: 15px; margin-bottom: 4px; }
.empty-state p { font-size: 12px; }
.mini-list { display: grid; gap: 4px; }

.pill { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: var(--text); font-size: 11px; cursor: pointer; transition: all 0.1s; }
.pill:hover { background: rgba(255,255,255,0.08); }
.pill.is-active { background: var(--accent-glow); border-color: rgba(63,185,80,0.3); color: var(--accent); }

.birthday-list { display: grid; gap: 4px; max-height: 180px; overflow: auto; }
.birthday-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid transparent; }
.birthday-card__info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.birthday-card__date { font-size: 12px; font-weight: 600; color: var(--teal); white-space: nowrap; }
.birthday-card__name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.birthday-card__remove { padding: 4px 8px; font-size: 11px; flex-shrink: 0; }

.muted { color: var(--muted); font-size: 12px; }
[data-state="error"] { color: var(--danger); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ── TOAST ── */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--panel-border); box-shadow: 0 8px 32px rgba(0,0,0,0.45); backdrop-filter: blur(16px); color: var(--text); font-size: 13px; font-weight: 500; max-width: 380px; transform: translateX(120%); opacity: 0; animation: toast-in 0.3s cubic-bezier(0.16,1,0.3,1) forwards; }
.toast.toast--out { animation: toast-out 0.25s cubic-bezier(0.4,0,1,1) forwards; }
.toast__icon { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.toast--success .toast__icon { background: rgba(63,185,80,0.18); color: var(--accent); }
.toast--error .toast__icon { background: rgba(248,81,73,0.18); color: var(--danger); }
.toast--info .toast__icon { background: rgba(57,208,216,0.18); color: var(--teal); }
.toast--success { border-color: rgba(63,185,80,0.2); }
.toast--error { border-color: rgba(248,81,73,0.2); }
.toast--info { border-color: rgba(57,208,216,0.2); }
@keyframes toast-in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }

/* ── MOBILE NAV ── */
.mobile-nav { display: none; }

/* ── PULSE ── */
@keyframes pulse-online { 0%,100% { box-shadow: 0 0 0 0 rgba(63,185,80,0.45); } 50% { box-shadow: 0 0 0 5px rgba(63,185,80,0); } }
.status-dot--online { animation: pulse-online 2s ease-in-out infinite; }

/* ── TABLET ── */
@media (max-width: 1280px) {
  body:not(.login-only) { overflow: auto; }
  body:not(.login-only) .shell { height: auto; }
  body:not(.login-only) .app { height: auto; }
  .app { grid-template-columns: 1fr 1fr; }
  .panel--sidebar { grid-column: 1 / -1; max-height: none; }
  .panel--members, .panel--detail { min-height: 400px; }
  .guild-list { max-height: none; }
}

/* ── MOBILE ── */
@media (max-width: 760px) {
  body:not(.login-only) { overflow: auto; padding-bottom: 72px; }
  body:not(.login-only) .shell { height: auto; padding: 10px 10px 20px; }

  .ambient { width: 280px; height: 280px; filter: blur(80px); opacity: 0.1; }

  .app { grid-template-columns: 1fr !important; gap: 0; }

  .panel { padding: 14px 12px; border-radius: 14px; }
  .panel--sidebar, .panel--members, .panel--detail { display: none; min-height: auto; }
  .panel.mobile-visible { display: flex !important; flex-direction: column; }
  .panel--sidebar.mobile-visible { display: grid !important; }
  .panel--members.mobile-visible { min-height: calc(100vh - 140px); }
  .panel--detail.mobile-visible { min-height: auto; }

  .mobile-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000;
    background: rgba(10,14,20,0.95); backdrop-filter: blur(16px);
    border-top: 1px solid var(--panel-border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around; gap: 4px;
  }
  .mobile-nav__btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; color: var(--muted); font-size: 10px; font-weight: 600;
    padding: 6px 12px; border-radius: 10px; cursor: pointer; transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav__btn.is-active { color: var(--accent); background: var(--accent-glow); }
  .mobile-nav__btn svg { width: 22px; height: 22px; }

  .server-summary { padding: 10px; gap: 10px; }
  .server-summary__icon { width: 40px; height: 40px; border-radius: 10px; }
  .server-summary__title { font-size: 14px; }

  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
  .stats-grid--compact { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .stat { padding: 8px; }
  .stat__value { font-size: 15px; }
  .stats-grid--compact .stat__value { font-size: 12px; }

  .inline-form, .button-row { grid-template-columns: 1fr; gap: 6px; }
  .detail-grid { grid-template-columns: 1fr; }

  .detail__hero { flex-direction: column; align-items: flex-start; gap: 10px; }
  .detail__hero h2 { font-size: 15px; }

  .member-card { padding: 8px 10px; gap: 8px; }
  .avatar { width: 32px; height: 32px; }
  .status-dot { width: 10px; height: 10px; border-width: 2px; }
  .member-card__name { font-size: 12px; }
  .member-card__sub { font-size: 10px; }
  .member-card__select-tag { padding: 3px 8px; font-size: 10px; }

  .btn { padding: 10px 14px; font-size: 13px; min-height: 42px; }
  input, select { padding: 10px 12px; font-size: 14px; min-height: 42px; }

  .pill { padding: 5px 10px; font-size: 11px; }
  .chip { font-size: 10px; }

  .leaderboard-item { grid-template-columns: 28px 28px minmax(0,1fr); gap: 6px; padding: 6px 8px; }
  .leaderboard-item__rank { width: 28px; height: 28px; font-size: 11px; }
  .leaderboard-item__avatar { width: 28px; height: 28px; }
  .leaderboard-item__name { font-size: 11px; }

  .guild-card { grid-template-columns: 34px minmax(0,1fr); gap: 8px; padding: 8px; }
  .guild-card__icon { width: 34px; height: 34px; border-radius: 8px; }
  .guild-card__name { font-size: 12px; }

  .pagination { padding: 8px 0; }
  .pagination .btn { min-width: 60px; }

  .toast-container { bottom: 80px; right: 12px; left: 12px; }
  .toast { max-width: 100%; font-size: 12px; padding: 10px 14px; }

  .role-boost-card { padding: 8px; }
  .role-boost-card__header, .role-boost-card__footer { flex-direction: column; align-items: flex-start; gap: 4px; }

  .birthday-card { padding: 6px 8px; }

  .detail-stat { padding: 10px; }
  .detail-stat__value { font-size: 14px; }

  .action-group { gap: 6px; }
  .button-row { grid-template-columns: 1fr 1fr; }
}