/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* ──────────────────────────────────────────────────────────────────────
   NuroPlay 운영본부 — 토큰
   브랜드의 부드러운 바다색을 계조로 정리했다. 디스코드 블러플은
   "디스코드로 로그인" 버튼에만 남긴다(그 색은 디스코드의 의미이지
   이 도구의 강조색이 아니다).
   ────────────────────────────────────────────────────────────────────── */

/* Next 개발 오버레이 배지("N Issues") 숨김.
   next.config.ts 의 devIndicators:false 는 에러가 있을 때 뜨는 배지까지는
   못 막는다(Next 공식 동작). 프로덕션엔 이 엘리먼트가 아예 없으므로 무해. */
nextjs-portal {
  display: none !important;
}

:root {
  /* 표면 */
  --canvas: #f7f9fb;
  --surface: #ffffff;
  --line: #e4e8ed;
  --line-soft: #eef1f5;
  --line-strong: #d3d9e0;

  /* 글자 — 두 단계로만 나눈다 */
  --ink: #16191d; /* 17.6:1 */
  --muted: #5b636e; /* 6.1:1 */
  --quiet: #6e7683; /* 4.6:1, 흰 표면에서만 */

  /* 브랜드 */
  --brand: #1f6fb2; /* 5.3:1 */
  --brand-strong: #175f9b; /* 6.7:1 */
  --brand-tint: #eaf3fa;
  --brand-line: #bcd8ee;

  /* 상태 */
  --danger: #a3373a;
  --danger-tint: #fdf3f3;
  --danger-line: #f0d6d6;
  --warn: #7a5a18;
  --warn-tint: #fdf7ec;
  --warn-line: #f0e2c8;
  --ok: #1c6b3f;
  --ok-tint: #eaf6ef;
  --ok-line: #cfe7d9;

  --discord: #5865f2;
  --discord-strong: #4752c4;

  /* 형태 */
  --r-control: 8px;
  --r-card: 12px;
  --r-pill: 999px;
  --content: 920px;

  --shadow-card: 0 1px 2px rgba(22, 25, 29, 0.05), 0 1px 1px rgba(22, 25, 29, 0.03);
  --shadow-raised: 0 2px 4px rgba(22, 25, 29, 0.06), 0 4px 12px rgba(22, 25, 29, 0.05);
  --ring: 0 0 0 3px rgba(31, 111, 178, 0.26);

  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* ── 기본 ─────────────────────────────────────────────────────────── */

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--surface);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic",
    "Apple SD Gothic Neo", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── 버튼 ─────────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: var(--brand);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.14s var(--ease), border-color 0.14s var(--ease),
    box-shadow 0.14s var(--ease);
}

.button:hover {
  background: var(--brand-strong);
}

.button:active {
  transform: translateY(0.5px);
}

.button:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* 로그인 화면처럼 폭을 꽉 채워야 할 때 */
.button--block {
  display: flex;
  width: 100%;
  height: 46px;
  font-size: 15px;
}

.button--discord {
  background: var(--discord);
}

.button--discord:hover {
  background: var(--discord-strong);
}

.button--quiet {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.button--quiet:hover {
  background: var(--canvas);
  border-color: var(--quiet);
}

.button--danger {
  background: var(--surface);
  border-color: var(--danger-line);
  color: var(--danger);
}

.button--danger:hover {
  background: var(--danger-tint);
  border-color: var(--danger);
}

.button--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* ── 로그인 / 안내 화면 ───────────────────────────────────────────── */

.screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 32px 24px;
  box-sizing: border-box;
}

.panel {
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.panel__logo {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  box-shadow: var(--shadow-raised);
}

.panel__title {
  margin: 26px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.015em;
  text-wrap: balance;
  word-break: keep-all;
}

.panel__hint {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  word-break: keep-all;
}

.panel__action {
  margin-top: 28px;
}

.notice {
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px solid var(--warn-line);
  border-radius: var(--r-card);
  background: var(--warn-tint);
  font-size: 13px;
  line-height: 1.7;
  color: var(--warn);
  text-align: left;
  word-break: keep-all;
}

.notice code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

/* ── 권한 배지 ────────────────────────────────────────────────────── */

.roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.role {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.role--top {
  border-color: transparent;
  background: var(--brand);
  color: #ffffff;
  font-weight: 600;
}

/* ── 대시보드 셸 ──────────────────────────────────────────────────── */

.app {
  min-height: 100dvh;
  background: var(--canvas);
}

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.appbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: 12px 24px;
  box-sizing: border-box;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand__logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  box-shadow: var(--shadow-card);
}

.brand__name {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

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

.who__logout {
  padding: 4px 2px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease);
}

.who__logout:hover {
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}

.nav {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 2px;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav__item {
  position: relative;
  padding: 10px 12px 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.14s var(--ease);
}

.nav__item::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
}

.nav__item:hover {
  color: var(--ink);
}

.nav__item--active {
  color: var(--brand-strong);
  font-weight: 650;
}

.nav__item--active::after {
  background: var(--brand);
}

.content {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: 28px 24px 72px;
  box-sizing: border-box;
}

.page-head {
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.page-sub {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  word-break: keep-all;
}

/* ── 카드 ─────────────────────────────────────────────────────────── */

.card {
  padding: 20px 22px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.card:last-child {
  margin-bottom: 0;
}

.card__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card__hint {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  word-break: keep-all;
}

.card__title + .facts,
.card__title + .users,
.card__title + .empty,
.card__title + form {
  margin-top: 16px;
}

/* ── 정의 목록 ────────────────────────────────────────────────────── */

.facts {
  margin: 0;
}

.facts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
}

.facts__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.facts__row:last-child {
  padding-bottom: 0;
}

.facts dt {
  flex: 0 0 92px;
  color: var(--muted);
}

.facts dd {
  margin: 0;
  min-width: 0;
}

/* ── 빈 상태 ──────────────────────────────────────────────────────── */

.empty {
  margin: 0;
  padding: 32px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--quiet);
}

/* ── 표 ───────────────────────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th,
.table td {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.table th {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.table tr:last-child td {
  border-bottom: 0;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* ── 서버 상태 ────────────────────────────────────────────────────── */

.service {
  display: block;
  font-weight: 600;
}

.service__note {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

/* 색만으로 구분하지 않도록 점 옆에 항상 글자를 둔다 */
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.status--up {
  background: var(--ok-tint);
  color: var(--ok);
}

.status--slow {
  background: var(--warn-tint);
  color: var(--warn);
}

.status--down {
  background: var(--danger-tint);
  color: var(--danger);
}

/* ── 알림 배너 ────────────────────────────────────────────────────── */

.banner {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--r-card);
  font-size: 14px;
  line-height: 1.55;
  word-break: keep-all;
}

.banner--error {
  border: 1px solid var(--danger-line);
  background: var(--danger-tint);
  color: var(--danger);
}

.banner--done {
  border: 1px solid var(--ok-line);
  background: var(--ok-tint);
  color: var(--ok);
}

/* ── 경고 지급 (사람마다 한 칸) ──────────────────────────────────── */

.give {
  padding: 16px 0 4px;
  border-top: 1px solid var(--line-soft);
}

.give:first-child {
  padding-top: 4px;
  border-top: 0;
}

.give__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* 몇 번째 줄인지 — 오류 안내가 "3번째: 사유를 적어주세요" 라고 말하므로,
   화면에서도 같은 번호가 보여야 어디를 고칠지 바로 안다. */
.give__no {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* ── 경고 기록 ────────────────────────────────────────────────────── */

.warns {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.warn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.warn:first-child {
  border-top: 0;
}

.warn__body {
  min-width: 0;
}

.warn__reason {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  word-break: keep-all;
}

/* 소멸은 흐리게, 회수는 그어서 지운다 — 둘은 다른 일이다. */
.warn--gone .warn__reason {
  color: var(--muted);
}

.warn--revoked .warn__reason {
  color: var(--muted);
  text-decoration: line-through;
}

.warn__side {
  flex-shrink: 0;
}

.warn__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--quiet);
}

.tag--revoked {
  background: var(--ok-tint);
  color: var(--ok);
}

.tag--live {
  background: var(--danger-tint);
  color: var(--danger);
}

/* ── 폼 ───────────────────────────────────────────────────────────── */

.field {
  margin-bottom: 16px;
}

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.input {
  width: 100%;
  max-width: 300px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}

.input::-moz-placeholder {
  color: var(--quiet);
}

.input::placeholder {
  color: var(--quiet);
}

/* `.input` 은 한 줄 입력에 맞춰 높이가 고정돼 있다. 여러 줄과 고르기는
   그 높이·너비를 그대로 쓰면 잘려서, 여기서만 풀어준다. */
textarea.input {
  height: auto;
  max-width: 100%;
  padding: 10px 12px;
  line-height: 1.55;
  resize: vertical;
}

select.input {
  /* 수위 설명이 길어 300px 에서는 뒷말이 잘린다. */
  max-width: 100%;
}

.input:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

/* 체크박스를 칩으로 — 8개를 훑을 때 네모보다 덩어리가 빠르다 */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  position: relative;
  display: inline-flex;
}

.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip span {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: background-color 0.14s var(--ease), border-color 0.14s var(--ease),
    color 0.14s var(--ease);
}

.chip input:hover + span {
  border-color: var(--quiet);
  color: var(--ink);
}

.chip input:checked + span {
  border-color: var(--brand-line);
  background: var(--brand-tint);
  color: var(--brand-strong);
  font-weight: 600;
}

.chip input:focus-visible + span {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--brand);
}

.chip input:disabled {
  cursor: not-allowed;
}

.chip input:disabled + span {
  border-style: dashed;
  border-color: var(--brand-line);
  background: var(--brand-tint);
  color: var(--brand-strong);
  opacity: 0.75;
}

/* ── 권한 관리 목록 ───────────────────────────────────────────────── */

.users {
  margin: 0;
  padding: 0;
  list-style: none;
}

.user {
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}

.user:first-child {
  border-top: 0;
  padding-top: 0;
}

.user:last-child {
  padding-bottom: 0;
}

.user__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* 이름이 먼저 읽히고, ID 는 확인용으로 옆에 조용히 붙는다. */
.user__name {
  font-weight: 600;
  color: var(--ink);
}

.user__id {
  color: var(--quiet);
}

.user__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.user__form {
  flex: 1 1 420px;
  min-width: 0;
}

.tag {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

/* ── 좁은 화면 ────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .appbar__inner {
    padding: 10px 16px;
  }

  .nav {
    padding: 0 16px;
  }

  .content {
    padding: 22px 16px 56px;
  }

  .page-title {
    font-size: 22px;
  }

  .card {
    padding: 18px 16px;
  }

  .facts dt {
    flex: 0 0 100%;
  }

  .facts__row {
    gap: 2px 12px;
  }

  .brand__name {
    display: none;
  }
}

/* 터치 기기에서는 눌리는 곳을 키운다 (화면 폭이 아니라 입력 방식 기준) */
@media (pointer: coarse) {
  .chip span {
    padding: 9px 14px;
  }

  .button--sm {
    height: 38px;
    padding: 0 14px;
  }

  .who__logout {
    padding: 9px 4px;
  }

  .nav__item {
    padding: 13px 12px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .button:active {
    transform: none;
  }
}

/* Operations workspace — scoped to the dashboard so OBS remains transparent. */
.app { --canvas:#f3f6fa; --ink:#172b40; --muted:#586b7f; --content:1200px; --r-card:18px; }
.app *, .app *::before, .app *::after {box-sizing:border-box}
.skip-nav {position:fixed;top:12px;left:16px;z-index:100;padding:12px 20px;background:white;color:var(--brand);transform:translateY(-160%);border-radius:10px}
.skip-nav:focus {transform:translateY(0)}
.app .brand__name {display:grid;gap:5px;font-size:19px;letter-spacing:-.04em}
.app .brand__name small {font-size:10px;letter-spacing:.18em;color:var(--brand)}
.app .brand__logo {width:40px;height:40px;border-radius:12px}
.app .content {padding:48px 42px 80px}
.app .page-head {margin-bottom:32px}
.app .page-title {font-size:clamp(26px,3vw,36px);line-height:1.3;letter-spacing:-.055em;overflow-wrap:anywhere}
.app .page-sub {font-size:15px;line-height:1.8;margin-top:12px}
.app .card {padding:28px;border-color:#e1e8f0;box-shadow:0 4px 20px #19354f04}
.app .card__title {font-size:18px;letter-spacing:-.035em}
.app .input {min-height:44px;border-radius:10px;background:#fbfcfe;font-size:14px}
.app .button {min-height:42px;border-radius:10px}
.app .table-scroll {border:1px solid var(--line);border-radius:12px}
.app .table th {background:#f4f7fb;color:#435970;font-size:12px;white-space:nowrap;padding:14px 18px}
.app .table td {padding:16px 18px;line-height:1.65}
.app .table tbody tr:hover {background:#f8fbfe}
.app .empty {padding:28px;border:1px dashed #ccd8e5;background:#f8fafc;border-radius:12px;line-height:1.8}
.app .nav__item {min-height:44px;border-radius:10px;display:flex;align-items:center;padding:12px 16px}
.app .nav__item:hover {background:#f0f5fa}
.app .nav__item--active {background:#e7f1fb;color:#165e98}
.app .nav__item::after {display:none}
.eyebrow {font-size:10px;font-weight:750;letter-spacing:.16em;color:var(--brand);margin:0 0 14px}
.overview-head {padding:12px 0 24px;border-bottom:1px solid var(--line)}
.section-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.section-heading h2 {font-size:18px;margin:0;letter-spacing:-.035em}
.section-heading>span {font-size:12px;color:var(--muted)}
.workspace-tools {margin-bottom:32px}
.shortcut-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.shortcut {display:block;padding:24px;background:white;border:1px solid #e1e8f0;border-radius:16px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.shortcut:hover {border-color:#83b7de;box-shadow:0 6px 22px #1f6fb20c}
.shortcut__number {font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--brand);background:var(--brand-tint);padding:7px 9px;border-radius:8px;display:inline-block}
.shortcut h3 {font-size:17px;margin:20px 0 10px;display:flex;justify-content:space-between;gap:8px}
.shortcut h3 span {font-weight:400;color:var(--brand)}
.shortcut p {font-size:13px;color:var(--muted);line-height:1.8;margin:0;word-break:keep-all}
.account-card {display:grid;grid-template-columns:1fr 1.4fr;gap:36px}
.app .facts dd {overflow-wrap:anywhere}
@media(min-width:1000px) {
 .app {padding-left:240px}
 .app .appbar {position:fixed;inset:0 auto 0 0;width:240px;height:100dvh;border-bottom:0;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:30px 18px;overflow-y:auto}
 .app .appbar__inner {display:contents}
 .app .brand {padding:0 12px 34px}
 .app .nav {order:1;flex-direction:column;width:100%;padding:0;gap:6px;overflow:visible;margin:0}
 .app .who {order:2;margin-top:auto;padding:24px 10px 0;display:flex;flex-wrap:wrap;border-top:1px solid var(--line)}
 .app .who__name {width:100%;font-weight:650;color:var(--ink)}
 .app .who__logout {margin-left:auto}
}
@media(max-width:1100px) {.shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:999px) {.app .content{padding:30px 24px 60px}.app .nav{padding:8px 16px;gap:6px}.app .appbar__inner{padding:16px 24px}.account-card{grid-template-columns:1fr;gap:12px}}
@media(max-width:560px) {.shortcut-grid{grid-template-columns:1fr}.app .content{padding:26px 16px 48px}.app .card{padding:20px}.app .appbar__inner{padding:14px 16px}.app .who{gap:7px;flex-wrap:wrap;justify-content:flex-end}.app .who__name{max-width:100px}.app .brand__name{font-size:16px}.section-heading{align-items:flex-start;flex-direction:column;gap:6px}.shortcut{padding:20px}.shortcut h3{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.shortcut{transition:none}}

/* Member directory and detail */
.app .user-directory{padding:24px}
.user-search{display:flex;align-items:flex-end;gap:12px;margin-bottom:22px}
.user-search .field{margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.user-search .input{display:block;width:100%;margin-top:8px}
.app .user-table td{padding:22px 18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.user-table td:first-child{min-width:210px}
.user-table td:first-child a{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.user-table td:first-child a:hover strong{text-decoration:underline;text-underline-offset:4px}
.user-monogram{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:#eaf3fa;color:#266c9d;font-size:15px;font-weight:700}
.user-table .service__note{margin-left:50px;margin-top:4px}
.user-level{padding:6px 10px;border-radius:8px;background:#eef4fa;color:#29658c;font-size:13px;font-weight:650}
.user-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:24px}
.app .user-detail-grid .card{margin:0;min-width:0}
.user-detail .facts__row{display:grid;grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr);gap:16px;align-items:start;padding:13px 0}
.user-detail .facts dt{font-size:13px;word-break:keep-all}
.user-detail .facts dd{font-size:14px;line-height:1.7;overflow-wrap:anywhere;margin:0;min-width:0}
.user-detail-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:8px;background:#eaf0f6;border-radius:12px;margin-bottom:24px}
.user-detail-tabs a{padding:10px 16px;text-decoration:none;border-radius:8px;color:#345974;font-size:13px;font-weight:650}
.user-detail-tabs a:hover{background:white}
.user-detail section[id],.user-detail #profile{scroll-margin-top:32px}
.user-moderation>form{display:grid;gap:16px;padding:20px;background:#f8fafc;border:1px solid var(--line);border-radius:12px;margin:20px 0}
.user-moderation .field{display:grid;gap:8px;font-size:13px;font-weight:600;margin:0}
.user-moderation textarea{min-height:100px;resize:vertical}
.user-moderation>form>.button{justify-self:start}
.user-detail details summary{cursor:pointer;font-weight:650;font-size:14px;padding:6px}
.user-detail details li{font-size:13px;color:var(--muted);line-height:1.8}
@media(max-width:800px){.user-detail-grid{grid-template-columns:1fr}.app .user-directory{padding:18px}.user-search{align-items:stretch;flex-direction:column}.user-search .button{align-self:flex-end}.user-detail .facts__row{grid-template-columns:minmax(85px,.65fr) minmax(0,1.35fr)}}

.user-edit-toggle>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer}
.user-edit-toggle>summary::-webkit-details-marker{display:none}
.user-edit-toggle[open]>summary{margin-bottom:20px}
.user-edit-toggle>form{display:grid;gap:16px;padding:20px;background:#f8fafc;border:1px solid var(--line);border-radius:12px;margin-top:20px}
.user-edit-toggle .field{display:grid;gap:8px;font-size:13px;font-weight:600}
.user-edit-toggle textarea{min-height:90px}

.inline-edit-button{margin-left:12px;vertical-align:middle}
.inline-edit-form{display:grid;gap:14px;margin-top:12px;padding:16px;background:#f4f8fc;border:1px solid var(--line);border-radius:12px;white-space:normal}
.inline-edit-form .field{display:grid;gap:6px;margin:0;font-size:13px}
.inline-edit-form .input{width:100%;min-width:0}
.inline-edit-form .user-detail-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0}
.inline-edit-form .form-actions{margin:0;flex-wrap:wrap}